TED2012
Jared Ficklin: New ways to see music (with color! and fire!)
Джаред Фіклін: Нові способи побачити музику (з кольорами! і вогнем!)
Filmed:
Readability: 4
711,217 views
Дизайнер Джаред Фіклін створює візуалізації, що дозволяють нам побачити музику, використовуючи кольори та навіть вогонь (вперше для сцени TED), щоб проаналізувати, як звук впливає на наші почуття. Він робить невеликий відступ, щоб проаналізувати звук у скейт-парку - і як звук може спрямувати нас до розвитку творчого потенціалу.
Jared Ficklin - Visualizer
In his day job, Jared Ficklin makes user interfaces at frog design. As a hobby, he explores what music looks like ... in light, in shapes, in fire. Full bio
In his day job, Jared Ficklin makes user interfaces at frog design. As a hobby, he explores what music looks like ... in light, in shapes, in fire. Full bio
Double-click the English transcript below to play the video.
00:16
My passions
0
449
1033
Я захоплююсь
00:17
are music, technology and making things.
1
1482
3689
музикою, технологіями та створенням речей
00:21
And it's the combination of these things
2
5171
3183
І поєнання цих захоплень
00:24
that has led me to the hobby of sound visualization,
3
8354
2696
привело мене до хоббі звукової візуалізації
00:26
and, on occasion, has led me to play with fire.
4
11050
4078
і, як наслідок, я граю з вогнем.
00:31
This is a Rubens' tube. It's one of many I've made over the years,
5
15128
2377
Це труба Рубенса, одна з багатьох, що я зробив за багато років
00:33
and I have one here tonight.
6
17505
1746
і вона в мене сьогодні із собою
00:35
It's about an 8-foot-long tube of metal,
7
19251
1525
це приблизно 2,5м залізної труби
00:36
it's got a hundred or so holes on top,
8
20776
1335
в якій зверху є орієнтовно сотня отворів,
00:38
on that side is the speaker, and here
9
22111
1753
з цієї сторони колонка, а тут
00:39
is some lab tubing, and it's connected to this tank
10
23864
2176
певна лабораторія труб, підключена до цього резервуару
00:41
of propane.
11
26040
1601
з пропаном.
00:44
So, let's fire it up and see what it does.
12
29087
3369
Що ж, запалімо її й побачимо, як це працює.
00:53
So let's play a 550-herz frequency
13
37887
1891
Зіграймо частоту 550 герц
00:55
and watch what happens.
14
39778
1515
і побачим, що відбудеться
00:57
(Frequency)
15
41342
8483
(частота)
01:05
Thank you. (Applause)
16
49825
2713
Дякую. (Оплески)
01:08
It's okay to applaud the laws of physics,
17
52538
1988
Аплодувати законам фізики цілком нормально,
01:10
but essentially what's happening here
18
54526
1456
але, по суті, тут відбулося наступне
01:11
-- (Laughter) --
19
55982
1760
--(Сміх)--
01:13
is the energy from the sound via the air and gas molecules
20
57742
4008
енергія звуку через повітря та молекули гасу
01:17
is influencing the combustion properties of propane,
21
61750
2504
впливає на згорання на властивості пропану
01:20
creating a visible waveform,
22
64254
1904
створюючи хвилю, яку можна побачити неозброєним оком
01:22
and we can see the alternating regions of compression
23
66158
2320
і ми можемо бачити чергування ділянок стиснення
01:24
and rarefaction that we call frequency,
24
68478
2040
та ще розрідження, яке називається частотою,
01:26
and the height is showing us amplitude.
25
70518
1744
і висота показує амплітуду.
01:28
So let's change the frequency of the sound,
26
72262
2328
Що ж, давайте змінимо частоту звуку
01:30
and watch what happens to the fire.
27
74590
1425
і подивимось, що станеться з вогнем
01:31
(Higher frequency)
28
76015
10130
(Більш високі частоти)
01:42
So every time we hit a resonant frequency we get a standing wave
29
86145
3350
Отже, щоразу коли ми включаємо резонансну частоту, з"являється стояча хвиля
01:45
and that emergent sine curve of fire.
30
89495
1700
і нову синусоїду вогню
01:47
So let's turn that off. We're indoors.
31
91195
1578
Давайте це виключимо, ми таки в приміщенні
01:48
Thank you. (Applause)
32
92773
5591
Дякую. (Оплески)
01:54
I also have with me a flame table.
33
98364
2347
Ще в мене з собою є стіл вогню
01:56
It's very similar to a Rubens' tube, and it's also used
34
100711
1565
Він дуже схожий на трубу Рубенса, і його також використовують
01:58
for visualizing the physical properties of sound,
35
102276
2121
для візуалізації фізичних властивостей звуку,
02:00
such as eigenmodes, so let's fire it up
36
104397
1968
наприклад, коливань. Давайте запалимо його
02:02
and see what it does.
37
106365
2250
і побачим, що станеться
02:08
Ooh. (Laughter)
38
112292
4468
Ох. (сміх)
02:12
Okay. Now, while the table comes up to pressure,
39
116760
2974
Гаразд. Поки стіл доходить до необхідного тиску
02:15
let me note here that the sound is not traveling
40
119734
1672
позвольте зауважити, що звук не пересувається
02:17
in perfect lines. It's actually traveling in all directions,
41
121406
2746
прямими лініями. Взагалі-то він мандрує на всі чотири сторони,
02:20
and the Rubens' tube's a little like bisecting those waves
42
124152
3109
і трубка Рубенса ніби розсікає їх
02:23
with a line, and the flame table's a little like
43
127261
1996
полосою, а стіл вогню
02:25
bisecting those waves with a plane,
44
129257
1854
розсікає їх на поверхності
02:27
and it can show a little more subtle complexity, which is why
45
131111
4000
та може відобразити тонші ньюанси коливань
02:31
I like to use it to watch Geoff Farina play guitar.
46
135111
2353
саме тому мені подобається користуватись ним, спостерігаючи гру Джеффа Фаріни на гітарі
02:33
(Music)
47
137464
42281
(Музика)
03:15
All right, so it's a delicate dance.
48
179745
1765
Ну ось, такий чуйний танець
03:17
If you watch closely — (Applause)
49
181510
2545
Якщо Ви уважно спостерігали - (Оплески)
03:19
If you watch closely, you may have seen
50
184055
2767
Якщо Ви уважно спостерігали, Ви мабуть помітили
03:22
some of the eigenmodes, but also you may have seen
51
186822
2472
деякі коливання, але Ви також Ви мабуть помітили
03:25
that jazz music is better with fire.
52
189294
4617
що джазова музика краще дивиться з вогником.
03:29
Actually, a lot of things are better with fire in my world,
53
193911
2010
Взагалі, у мому світі багато речей набагато кращі з вогнем
03:31
but the fire's just a foundation.
54
195921
2432
але вогонь - це лише база
03:34
It shows very well that eyes can hear,
55
198353
1148
Він дуже наглядно показує, що очі чують
03:35
and this is interesting to me because
56
199501
1395
і мене це цікавить, тому що
03:36
technology allows us to present sound to the eyes
57
200896
2854
технології позволяють нам сприйматти звук очима
03:39
in ways that accentuate the strength of the eyes
58
203750
2863
підкреслюючи могутність зору
03:42
for seeing sound, such as the removal of time.
59
206613
2697
щоб бачити звук як зміну часу
03:45
So here, I'm using a rendering algorithm to paint
60
209310
3384
Тут я використовую спеціальний алгоритм, щоб намалювати
03:48
the frequencies of the song "Smells Like Teen Spirit"
61
212694
2463
частоти пісні "Smells Like Teen Spirit"
03:51
in a way that the eyes can take them in
62
215157
2040
так, щоб можна було сприйняти її зором
03:53
as a single visual impression, and the technique
63
217197
2244
як єдине візуальне враження, а техніка
03:55
will also show the strengths of the visual cortex
64
219441
1973
до того ж покаже нам силу зорового сприйняття
03:57
for pattern recognition.
65
221414
1616
стосовно розпізнавання образів.
03:58
So if I show you another song off this album,
66
223030
1879
Отже, якщо я покажу Вам іншу пісню з цього альбому
04:00
and another, your eyes will easily pick out
67
224909
3481
а потім ще іншу, Ваш зір з легкістю визначить
04:04
the use of repetition by the band Nirvana,
68
228390
2928
повторення, що використовує гурт Nirvana
04:07
and in the frequency distribution, the colors,
69
231318
1857
і в розприділенні частот і кольорів
04:09
you can see the clean-dirty-clean sound
70
233175
3048
Ви побачите чистий-брудний-чистий звук
04:12
that they are famous for,
71
236223
1207
яким вони прославились
04:13
and here is the entire album as a single visual impression,
72
237430
4000
а ось весьальбом як єдине візуальне враження
04:17
and I think this impression is pretty powerful.
73
241430
1880
і я думаю, що це враження, є досить сильним.
04:19
At least, it's powerful enough that
74
243310
1714
Принаймні, достатньо сильним,
04:20
if I show you these four songs,
75
245024
1342
що коли я покажу Вам ці 4 пісні
04:22
and I remind you that this is "Smells Like Teen Spirit,"
76
246366
2441
і нагадаю Вам, що ось ця є "Smells Like Teen Spirit"
04:24
you can probably correctly guess, without listening
77
248807
2319
Ви, скорше за все, правильно вгадаєте не прослуховуючи
04:27
to any music at all, that the song
78
251126
1434
ніякої музики взагалі, що ця пісня
04:28
a die hard Nirvana fan would enjoy is this song,
79
252560
2294
сподобалась би фанату Нірвани
04:30
"I'll Stick Around" by the Foo Fighters,
80
254854
2256
"I'll Stick Around" від гурту Foo Fighters,
04:33
whose lead singer is Dave Grohl,
81
257110
2000
де вокалістом є Дейв Грол,
04:35
who was the drummer in Nirvana.
82
259110
3778
колишній барабанщик Нірвани
04:38
The songs are a little similar, but mostly
83
262888
1300
Пісні трохи схожі, але в основному
04:40
I'm just interested in the idea that someday maybe
84
264188
1626
мені цікава ідея того, що можливо колись
04:41
we'll buy a song because we like the way it looks.
85
265814
4412
ми будемо купляти пісню, тому що нам подобається як вона виглядає
04:46
All right, now for some more sound data.
86
270226
1100
Гаразд, а тепер ще кілька звукових даних.
04:47
This is data from a skate park,
87
271326
2652
Це дані зі скейт-парку
04:49
and this is Mabel Davis skate park
88
273978
2032
це є Mabel Davis скейт-парк
04:51
in Austin, Texas. (Skateboard sounds)
89
276010
2142
у місті Остін, штат Техас. (Звуки скейтбордів)
04:54
And the sounds you're hearing came from eight
90
278152
1374
Ці звуки були записані вісьмома
04:55
microphones attached to obstacles around the park,
91
279526
2216
мікрофонами, прикріпленими до бар"єрів по всьому парку
04:57
and it sounds like chaos, but actually
92
281742
2184
і це звучить як безлад, але взагалі
04:59
all the tricks start with a very distinct slap,
93
283926
3347
всі трюки почанаються з дуже характерного ляпаса,
05:03
but successful tricks end with a pop,
94
287273
1604
але успішні трюки закінчуються хлопком,
05:04
whereas unsuccessful tricks
95
288877
1793
у той час як невдалі -
05:06
more of a scratch and a tumble,
96
290670
1856
скреготінням і падінням.
05:08
and tricks on the rail will ring out like a gong, and
97
292526
4010
Трюки на перилах звенять, як гонг, і
05:12
voices occupy very unique frequencies in the skate park.
98
296536
2790
голоса займають унікаольну частоту в парку
05:15
So if we were to render these sounds visually,
99
299326
1938
Отже, якщо ми розкладемо ці звуки візуально
05:17
we might end up with something like this.
100
301264
1407
в нас вийде щось типу цього
05:18
This is all 40 minutes of the recording,
101
302671
2456
Це всі 40 хвилин запису,
05:21
and right away the algorithm tells us
102
305127
2160
і відразу ж алгоритм говорить нам
05:23
a lot more tricks are missed than are made,
103
307287
2073
набагато більше трюків провалили, ніж виконали
05:25
and also a trick on the rails is a lot more likely
104
309360
2335
а також трюки на перилах скорше ймовірніше
05:27
to produce a cheer, and if you look really closely,
105
311695
2872
провокують виклики захоплення, і якщо придивитись,
05:30
we can tease out traffic patterns.
106
314567
1733
можна спостерігати типові маршрути.
05:32
You see the skaters often trick in this direction. The obstacles are easier.
107
316300
6087
Скейтери частіше стрибають у цьому напрямку. Там перешкоди простіші.
05:38
And in the middle of the recording, the mics pick this up,
108
322387
1705
А по середині запису мікрофони записали ось таке
05:39
but later in the recording, this kid shows up,
109
324092
2804
але потім в записі з"являєтья цей хлопчина
05:42
and he starts using a line at the top of the park
110
326896
2928
і починає їздити через перила у верхній частині парку
05:45
to do some very advanced tricks on something
111
329824
1802
щоб виконувати трюки підвищеної складності на тому, що
05:47
called the tall rail.
112
331626
1103
називається високі перила
05:48
And it's fascinating. At this moment in time,
113
332729
1872
І це вражає. В цю мить
05:50
all the rest of the skaters turn their lines 90 degrees
114
334601
3503
всі інші скейтери повертають на 90 градусів
05:54
to stay out of his way.
115
338104
1778
щоб не вовтузитись йому під ногами.
05:55
You see, there's a subtle etiquette in the skate park,
116
339882
2543
Бачите, в скейт-парку існує тонкий етикет,
05:58
and it's led by key influencers,
117
342425
1600
який визначається найвправнішими,
05:59
and they tend to be the kids who can do the best tricks,
118
344025
3248
тобто тими, хто виконує найскланіші трюки
06:03
or wear red pants, and on this day the mics picked that up.
119
347273
2430
ну, або вдягають червоні штани. В той день мікрофони все це записали.
06:05
All right, from skate physics to theoretical physics.
120
349703
3901
Гаразд, від фізики скейтів до теоретичної фізики
06:09
I'm a big fan of Stephen Hawking,
121
353604
1616
Я великий шанувальник Стівена Хокінга,
06:11
and I wanted to use all eight hours
122
355220
1336
і я хотів би використати всі вісім годин
06:12
of his Cambridge lecture series to create an homage.
123
356556
2587
його лекцій Кембриджської серії, щоб виразити свою повагу.
06:15
Now, in this series he's speaking with the aid of a computer,
124
359143
3064
Тут він говорить за допомогою комп'ютера,
06:18
which actually makes identifying the ends of sentences
125
362207
3104
який фактично робить виявлення кінців речень
06:21
fairly easy. So I wrote a steering algorithm.
126
365311
3426
досить простим. Так що я написав ведучий механізм.
06:24
It listens to the lecture, and then it uses
127
368737
1960
Він слухає лекцію, а згодом використовує
06:26
the amplitude of each word to move a point on the x-axis,
128
370697
2687
амплітуду кожного слова, щоб рухати точку на осі ікс
06:29
and it uses the inflection of sentences
129
373384
2633
та інтонацію речень,
06:31
to move a same point up and down on the y-axis.
130
376017
2154
щоб переміщати точку по осі ігрик.
06:34
And these trend lines, you can see, there's more questions
131
378171
2774
З цих тенденцій видно, що
06:36
than answers in the laws of physics,
132
380945
1870
в законах фізики більше питань, ніж відповідей
06:38
and when we reach the end of a sentence,
133
382815
2033
і коли ми доходимо до кінця реченя
06:40
we place a star at that location.
134
384848
2335
ставимо туди зірку.
06:43
So there's a lot of sentences, so a lot of stars,
135
387183
2800
Отже, безліч речень - безліч зірок,
06:45
and after rendering all of the audio, this is what we get.
136
389983
2356
і після обробки всього звукозапису, ми отримуємо ось це.
06:48
This is Stephen Hawking's universe.
137
392339
2929
Ось він, всесвіт Стівена Хокінга
06:51
(Applause)
138
395268
6937
(Оплески)
06:58
It's all eight hours of the Cambridge lecture series
139
402205
2487
Це всі вісім годин Кембриджської серії лекцій
07:00
taken in as a single visual impression,
140
404692
1848
представлені як єдине візуалне враження,
07:02
and I really like this image,
141
406540
1757
і мені дуже подобається це зображення,
07:04
but a lot of people think it's fake.
142
408297
1808
але багато людей думають, що це підробка.
07:06
So I made a more interactive version,
143
410105
2344
Так що я зробив більш інтерактивну версію,
07:08
and the way I did that is I used their position in time
144
412449
5456
використовуючи положення зірок під час лекції
07:13
in the lecture to place these stars into 3D space,
145
417905
2367
розміщуючи їх у просторі. З допомогою спеціального
07:16
and with some custom software and a Kinect,
146
420272
2401
програмного забезпечення та контроллера Кінект
07:18
I can walk right into the lecture.
147
422673
2663
Я можу зайти прямо в лекцію.
07:21
I'm going to wave through the Kinect here
148
425336
1800
Я помахаю Кінекту,
07:23
and take control, and now I'm going to reach out
149
427136
1832
і віщьму контроль на себе
07:24
and I'm going to touch a star, and when I do,
150
428968
3239
і коли торкатимусь до зірки,
07:28
it will play the sentence
151
432207
1944
вона буде грати речення
07:30
that generated that star.
152
434151
1465
яке створила ця зірка.
07:31
Stephen Hawking: There is one, and only one, arrangement
153
435616
3816
Стівен Хокінг: Існує лише одне положення
07:35
in which the pieces make a complete picture.
154
439432
2799
в якому всі частини утворюють повну картину.
07:38
Jared Ficklin: Thank you. (Applause)
155
442231
4148
Джаред Фіклін: Дякую. (Оплески)
07:42
There are 1,400 stars.
156
446379
3173
Тут є 1400 зірок.
07:45
It's a really fun way to explore the lecture,
157
449552
1664
Це дійсно веселий спосіб вивчити лекції
07:47
and, I hope, a fitting homage.
158
451216
1467
і, сподіваюся, достойний знак поваги.
07:48
All right. Let me close with a work in progress.
159
452683
5472
Гаразд, позвольте закінчити показавши ще одну працю
07:54
I think, after 30 years, the opportunity exists
160
458155
2983
Я думаю, що через 30 років буде можливість
07:57
to create an enhanced version of closed captioning.
161
461138
2104
створювати розширену версію субтитрів.
07:59
Now, we've all seen a lot of TEDTalks online,
162
463242
2119
Ми всі бачили велику кількість виступів на TEDTalks онлайн,
08:01
so let's watch one now with the sound turned off
163
465361
2927
так давайте зараз спробуємо подивитись один з виключеним звуком
08:04
and the closed captioning turned on.
164
468288
3922
і включеними субтитрами
08:08
There's no closed captioning for the TED theme song,
165
472210
2146
Для музичної заставки ТЕD субтитрів немає
08:10
and we're missing it, but if you've watched enough of these,
166
474356
2113
ми її пропускаємо, але якщо Ви переглянули достатню кількість відео,
08:12
you hear it in your mind's ear,
167
476469
1369
Ви почуєте її в голові,
08:13
and then applause starts.
168
477838
2983
потім починаються оплески
08:16
It usually begins here, and it grows and then it falls.
169
480821
2190
Зазвичай вони починаються тут, голоснішають, а потім стихають
08:18
Sometimes you get a little star applause,
170
483011
1977
Інколи буває таке, що зіркам аплодують подовше,
08:20
and then I think even Bill Gates takes a nervous breath,
171
484988
2486
і тоді, думаю, навіть Біл Гейтс нервово видихає
08:23
and the talk begins.
172
487474
1690
і починає говорити.
08:25
All right, so let's watch this clip again.
173
489164
5698
Гаразд, гляньмо цей ролик ще раз.
08:30
This time, I'm not going to talk at all.
174
494862
1256
На цей раз, я мовчатиму.
08:32
There's still going to be no audio,
175
496118
1367
Там все ще не буде звуку
08:33
but what I am going to do is I'm going to render the sound
176
497485
1904
але ось, що я зроблю - я винесу звук
08:35
visually in real time at the bottom of the screen.
177
499389
4316
візуально в режимі реального часу в нижній частині екрану.
08:39
So watch closely and see what your eyes can hear.
178
503705
2791
Дивіться уважно і спостерігайте, що чують Ваші очі.
09:03
This is fairly amazing to me.
179
527880
1880
Як на мене це неймовірно.
09:05
Even on the first view, your eyes will successfully
180
529760
3333
Навіть з першого разу, Ваші очі
09:08
pick out patterns, but on repeated views,
181
533093
3088
успішно виділяють послідовності, але наступні рази
09:12
your brain actually gets better
182
536181
1689
Ваш мозок вже краще
09:13
at turning these patterns into information.
183
537870
1656
трансформує послідовності в інформацію.
09:15
You can get the tone and the timbre
184
539526
1591
Ви вже можете зрозуміти інтонацію
09:17
and the pace of the speech,
185
541117
1223
і швидкість мовлення,
09:18
things that you can't get out of closed captioning.
186
542340
2064
речі, яких Ви не отримуєте із субтитрів.
09:20
That famous scene in horror movies
187
544404
2184
Знаменита сцена з фільмів жахів,
09:22
where someone is walking up from behind
188
546588
2648
в якій хтось підкрадається ззаду -
09:25
is something you can see,
189
549236
1960
це те, що ви бачите
09:27
and I believe this information would be something
190
551196
2704
і я вірю, що ця інформація була чимось
09:29
that is useful at times when the audio is turned off
191
553900
2803
корисною і без звуку.
09:32
or not heard at all, and I speculate that deaf audiences
192
556703
2941
і я гадаю, що глухий глядач
09:35
might actually even be better
193
559644
1177
насправді міг би навіть
09:36
at seeing sound than hearing audiences.
194
560821
1781
краще вприймати звук, ніж звичайний глядач
09:38
I don't know. It's a theory right now.
195
562602
1498
Я не знаю. Це на разі лише теорія.
09:40
Actually, it's all just an idea.
196
564100
1521
Взагалі-то, це всього лише ідея.
09:41
And let me end by saying that sound moves in all directions,
197
565621
4191
Закінчу, сказавши, що звук рухається у всіх напрямках,
09:45
and so do ideas.
198
569812
1977
так само як ідеї
09:47
Thank you. (Applause)
199
571789
3112
Дякую. (Оплески)
ABOUT THE SPEAKER
Jared Ficklin - VisualizerIn his day job, Jared Ficklin makes user interfaces at frog design. As a hobby, he explores what music looks like ... in light, in shapes, in fire.
Why you should listen
Jared Ficklin is a Senior Principal Design Technologist at frog, where he builds user experiences for clients, playing with interactions including touch and multi-touch, and applying physics to enhance the user experience. A passion for music and making things introduced him to the hobby of sound visualization, which has led him on occasion to play with fire. (As Flash on the Beach puts it, "Jared Ficklin’s sonic experiments stood out for their individuality, drama and casual disregard for health and safety.") Every March in Austin, Texas, Ficklin organizes the frog party, a collective social experiment for a few thousand people attending SXSW Interactive. It's a form of playful R&D for social technology. And he has spent 10 years helping fund, design and build quality free public skateparks for Austin as part of the Austin Public Skatepark Action Committee.
Jared Ficklin | Speaker | TED.com