Test: Digital theremin

Dieses Programm habe ich schon vor längerer Zeit geschrieben, nun habe ich es erweitert und umgeschrieben. Eigentlich wurde dieses Beispiel für die Anbindung einer Kinect Kamera und einer Beamer-Leinwand erstellt (Immersives Theremin) und aus diesen Daten eine Visualisierung zu generieren.

Beispiel

Ein User bewegt sich vor einer (Beamer)Leinwand und steuert ein Theremin. Visualisiert wird dies durch eine Kette an Kuben welche stereoskopisch dargestellt werden und den User beim Musizieren verfolgen.

Beim Tragen einer stereoskopischen 3D Brille sollte ein 3D-Effekt sichtbar sein.

Geht der User vor der Leinwand auf der X-Achse auf und ab (Lautstärkeänderung).

Die Größer der Boxen ändert sich durch die Entfernung des Nutzers zur Kinect.

Der User hebt den rechten Arm und die Frequenz ändert sich.

Ziel:

  1. Nachdem der stereoskopische Effekt mehr, oder weniger gut am Beamer funktioniert hat, möchte ich diesen nun überarbeiten und stärker hervorheben, um diesen Effekt direkt in Zukünftigen 3D Visualisierungen übernehmen zu können.

2. Das Programm nun für die Mausnutzung abwandeln und die Z/T-Tastenvariante einfügen, um die Z Achse zu simulieren.

X-Achse –> Mouse
Y-Achse –> Mouse

Z-Achse à Z/T – Taste

Ergebnis:

Die Überarbeitung des stereoskopischen 3D-Effekts hat sich bewährt, der Effekt tritt nun viel stärker hervor. Die Abstände der Rot/Blaulinien wurde etwas vergrößert. Des Weiteren habe ich die weißen Würfel auf einen leicht grauen Hintergrund platziert um diese so hervorzuheben.

Während dem Umbau für die Mausnutzung, habe ich auch das Z-Achsenhandling abgeändert und verbessert.

by ADAMS

Test: Code and Typo-Matrix

Nach einem Test Typo direkt hartcodiert zu verarbeiten möchte ich nun Text extern einlesen. Für diesen Versuch möchte ich Daten/Text aus dem Internet abgreifen.

Zu meiner obigen Anforderung muss ich mir ein Anwendungsbeispiel überlegen.

Buchstaben/Wörter zählen?

Buchstaben/Wort-Statistiken vergleichen?

Nachdem keine Idee meinen Ansprüchen entsprochen hat, habe ich mir ein abstraktes Anwendungsbeispiel überlegt.

Matrix

Matrizen sind im Programmieren/Mathematik sehr bekannt, jedoch soll es in meinem Beispiel um eine Hommage an den Film „Matrix“ gehen.
Die meisten kennen die Grün/Schwarze Matrix aus dem Kultfilm:

Nach einem Test Typo direkt hartcodiert zu verarbeiten möchte ich nun Text extern einlesen. Für diesen Versuch möchte ich Daten/Text aus dem Internet abgreifen.

Zu meiner obigen Anforderung muss ich mir ein Anwendungsbeispiel überlegen.

Buchstaben/Wörter zählen?

Buchstaben/Wort-Statistiken vergleichen?

Nachdem keine Idee meinen Ansprüchen entsprochen hat, habe ich mir ein abstraktes Anwendungsbeispiel überlegt.

Matrix

Matrizen sind im Programmieren/Mathematik sehr bekannt, jedoch soll es in meinem Beispiel um eine Hommage an den Film „Matrix“ gehen.
Die meisten kennen die Grün/Schwarze Matrix aus dem Kultfilm:

Von Jamie Zawinski, Attribution, https://commons.wikimedia.org/w/index.php?curid=3792993

Mein Beispiel: Optical line/gradient illusion

Ziel:

Es soll Text/Zeichen aus einer Website geladen werden und im „klassischen“ Matrix Look dargestellt werden. Des Weiteren soll diese Matrix-Darstellung durch eine User-Interaktion ausgelöst werden.

Zusätzliche Testfälle

Gag / bzw. Easter Egg, immer wichtig bei geek projekten

Verschiedene Effekte anwenden

Umsetzung/Erkenntnisse:

Als erstes hole ich mir die Zeichen von einer Website, dies sollte in Processing mittels loadStrings() schnell realisierbar sein.
Danach lege ich daraus eine Line-Matrix an und lösche alle non-ASCI Zeichen, control characters und non-printable Zeichen.

Nach einigen Ausgabe-Tests mit diesen Zeilen überlege ich mir die nächsten Schritte: Ich brauche die Zeilenaausgabe senkrecht, nicht horizontal.  

Aus jeder Zeile erstelle ich nun ein eigenes Objekt (um meine OOP-Kenntnisse aufzufrischen). Jedes Objekt/Zeile darf nun selbst entscheiden von welcher Position an die Screen sie startet.
Pro Zeile wird nun jedes Zeichen durch iteriert und auf entlang der Y-Achse ausgegeben. Nach einigen Tests merke ich, dass es für den originalen Look essentiell ist von welcher Position die Zeichenketten starten. So müssen etwa einige Zeichenketten im X-Minusbereich starten um ein vollständiges Bild zu erzielen.

*Spoiler alert*
Als User-Interaktion fällt mir die Konversation zwischen Neo und Morpheus ein, in welcher er sich entscheiden muss, in welcher „Realität“ er weiterleben möchte. Symbolisch muss Neo zwischen einer roten Pille, oder einer blauen Pille wählen.
Diese Entscheidung möchte ich in meiner Arbeit aufgreifen und den User entscheiden lassen.

by ADAMS

Zusätzliche Testfälle – Erkenntnisse:

Verschiedene Effekte anwenden

Ich habe mich für den Einsatz von preset-filtern entschieden. Manche funktionieren besser als andere und werden aufgrund der Menge sehr rechenintensiv. à Ruckler entstehen

Ich habe mich für Zwei entschieden, der User kann mittels B und E Taste den Filter switchen.

Filter1:

by ADAMS

Filter2:

by ADAMS

Gag/Easter Egg

Den Text für diese Matrix hole ich aus dem Wikipedia-Eintrag vom „Höhlengleichnis“

Blaue Pille:

by ADAMS

Test: Code and Typo/Vector/Sound

Ziel:

Nach meinem ersten Test, aus seiner abstrakten Form eine durch Sound animierte Visualisierung zu erstellen ist gelungen.

Im nächsten Schritt möchte ich mich der Animation von Typographie annähern. Dabei soll diese aber nicht gewöhnlich bewegt werden, sondern wird vorab in Vektoren und Ankerpunkte umgewandelt. Gleich wie im ersten Beispiel wird Sound den Text in Bewegung bringen.

Umsetzung/Erkenntnisse:

Im Gegensatz zum ersten Beispiel wird hier kein von Sound-Designern kreierter Sound herangezogen, sondern ein gewöhnlicher Song. Dieser wird eingelesen und mittels Amplide-Analyzer analysiert.

Aus dem Text „ADAMS“ erstelle ich eine Shape, welche ich rechnerisch genau in das Fenster einpasse. Danach setze ich Segmentoren, Längen und Abstände der Ankerpunkte.

Nun verbinde ich die Punkte je nach Beat.

visuals by Adams

Test: Code and visual perception = a screensafer

Ich bin schon seit langem Fan von optischen Täuschungen und ihren Effekten. Daher habe ich mich dafür entschieden selbst eine nachzuprogrammiern und auf einem Beamer ihre Wirkung zu testen.

In diesem Test habe ich versucht eine optische Täuschung nachzuprogrammieren. Diese ist angelehnt an die Cafe Wall Illusion (https://de.wikipedia.org/wiki/Caf%C3%A9_Wall_Illusion). Sie ist eine visuelle Wahrnehmungstäuschung, bei der Rechtecke optisch verzerrt wirken, wenn sie abwechselnd schwarz und weiß platziert werden. Im nächsten Schritt werden diese durch eine graue Linie getrennt.
So entsteht folgendes Bild:

Café wall illusion - Wikipedia
By Fibonacci – Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=1788689

Mein Beispiel: Optical line/gradient illusion

Ziel:
Eine weiße Ellipse wird auf einer horizontalen, grauen Linie von links nach rechts geschoben, dabei wird die Ellipse beim Richtungswechsel abgebremst und wieder beschleunigt.

Im Hintergrund wird eine bewegter gray gradient dargestellt welcher gegengleich mit der Ellipse einen Richtungswechsel durchführt.

Dabei soll der Effekt von einer unebenen horizontalen Linie/Ebene entstehen, welche die Ellipse in ihrer Bewegung beeinflusst.

Zusätzliche Testfälle:

Kann mit mehreren Ellipsen und Ebenen der gleiche Effekt erzielt werden?

Wie sehr ist der Effekt von der Bewegungsgeschwindigkeit der Kugel bzw. des Hintergrunds abhängig?

Wie kann man die optische Illusion wiederlegen?

Ergebnis:

Die Erkenntnisse werden von mir subjektiv Wahrgenommen und so dokumentiert.

Alle Anforderungen die ich an die Optische Täuschung gestellt habe wurden implementiert. Nach einigen Geschwindigkeitsanpassungen läuft die Täuschung optimal. à Check

by Adams

Ich bin mit dem Ergebnis sehr zufrieden und mache mich an die zusätzlichen Testfälle, welche ich mir gestellt habe.

Zusätzliche Testfälle – Erkenntnisse:

Wie sehr ist der Effekt von der Bewegungsgeschwindigkeit der Kugel bzw. des Hintergrunds abhängig?

Während der Kalibrierung der Bewegungsgeschwindigkeiten konnte ich bereits unterschiedliche Geschwindigkeits-Werte testen. Um die Wirkung schnell und bequem testen zu können, habe ich die +/- Tasten zur Hand genommen und diese mit der Geschwindigkeitsänderung belegt.

Der Effekt ist sowohl bei hoher Geschwindigkeit als auch bei geringer gut erkennbar. Bei hohem Tempo wirkt der Effekt sehr hecktisch, aber er funktioniert. Bei geringem Tempo wirkt dieser sehr träge, jedoch viel immersiver, als bei hohem.

  • Check
by Adams

Kann mit mehreren Ellipsen und Ebenen der gleiche Effekt erzielt werden?

Als erste Frage stellt sich mir: Wie viele Ebenen/Ellipsen brauche ich für diesen Test? Da ich mir das nicht konkret beantworten kann, profitiere ich von dynamischem Code. Ich belege die Tasten N und M als Trigger für meine „Anzahl-Variable“. Wird eine der Tasten betätigt, wird eine Ebene/Ellipse hinzugefügt, oder entfernt. Dies erlaubt mir freies testen mit einer Unzahl an Ebenen.

Dafür teile ich die Höhe des Fensters durch die Anzahl von gewünschten Ebenen/Ellipsen in gleich große Teile.

Wie schon zuvor beschrieben funktioniert der Effekt mit einer Ebene/Ellipse perfekt, gleiches gilt für 2 oder mehrere Ebenen. Bis circa 20 Ebenen wirkt der Effekt noch gut, ab 20 jedoch entsteht eine Art Welche die Wirkung abschwächt, jedoch ein anderes optisches „Springen“ auslöst.

  • Check
by Adams

Wie kann man die optische Illusion wiederlegen?

Für mich selbst und Skeptiker die meine Visualisierung betrachten finde ich es gut, diese optische Illusion schnell „stoppen“ zu können, um dem Gehirn eine Pause zu geben und diesen Effekt zu verstehen.

Für diesen Effekt nehme ich mir die Maustasten LINKS/RECHTS, wird der Hintergrund, welcher für die optische Täuschung verantwortlich ist einfach schwarz eingefärbt. Die Ellipsen bewegen sich dabei ungehindert weiter.

Wird die Maus betätigt, ist dieser „Seegang Effekt“ nicht mehr zu merken, Pause fürs Hirn!

–> Check

by Adams

Creative Coding und Anwendungen

Da mir nahegelegt wurde auch sehr angewandt zu arbeiten werde ich versuchen, einige meiner Arbeiten zu zeigen, welche mittels Creative-Coding entstehen.

Vorab möchte ich noch verschiedene „Creative-Coding“-Entwicklungsumgebungen recherchieren. Va ich mit visuellen Programmiersprachen noch kaum Erfahrung habe, möchte ich dahingehend mögliche Umgebungen erkunden.

Ich werde meine Recherche laufend erweitern:

Logo Max 8 software.jpg
By Cycling’ 74 – https://cycling74.com/company, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=87415137

Max „Max/MSP/Jitter“

Typ:                       visual programming language
Anwendungsgebiet: Musik, Multimedia
Entwickler:         Cycling ’74
OS:                        MS Windows, macOS

Fazit:
Speziell an diesem Punkt finde ich Max zu Musik und Multimedia lastig.

https://cycling74.com/products/made-with-max

Cinder Logo
https://libcinder.org/

Cinder

Typ:                               Application Framework, C++ library
Anwendungsgebiet: Grafik, Audio, Video, Algorithmische Geometrie
Entwickler:                 Open Source, entwicklet durch Github (lead architect Andrew Bell)
OS:                                 Cross-platform

Fazit:
Sehr interessante Library, vor allem der Open Source Anspruch sagt mir zu.

https://libcinder.org/about

openFrameworks
https://openframeworks.cc/

openFrameworks

Typ:                               Application Framework, C++ library
Anwendungsgebiet: Grafik, Audio, Video, Algorithmische Geometrie
Entwickler:                 Open Source, entwicklet durch Github (lead architect Andrew Bell)
OS:                                 Cross-platform

Fazit:
Wie Cinder eine C++ Library jedoch nicht Open Source. openFrameworks ist stärker von open Source Librarys abhängig und erlaubt Entwicklern so mehr Kontrolle und Transparenz. So gibt es auch mehr Updates und Bug-Fixes.

openrndr.org
https://openrndr.org/#about

OPENRNDR

Typ:                               Application Framework
Anwendungsgebiete: Grafik, Audio, Video, Installationen, Algorithmische Geometrie
Entwickler                   Studio RNDR
OS:                                 Cross-platform

Fazit:

Die Selbstbeschreibung auf der Website spricht mich sehr an:

„OPENRNDR’s APIs are designed to embrace Java’s advanced functionality while still being easy to use. Bottom-line is, we feel that Processing is less suitable for a production context.”

https://openrndr.org/

Code for faster prototypes

Viele von euch kennen es bestimmt, ein neuer Aufrag, ein neues Layout ist gefragt. DIN-Formate, naja, sind oft zu fade. Also, ran ans Paper-Prototypen und Formate ausprobieren. Welches Format kann am sinnvollsten vom Konzept abgeleitet werden?
Ruck, Zuck ist der erste Prototyp angefertigt. Der Zweite, Dritte…

Nun brauchen wir einen sinnvollen Satzspiegel – gute/SPANNENDE Randproportionen sind das Wichtigste:
Tschichold, Fibonacci, Goldener Schnitt, Neunerteilung, … oder doch frei?

Jetzt beginnt die Rechnerei, denn der Teufel steckt im Detail. Möglicherweise bin ich hierbei eine Ausnahme, aber es muss einfach stimmen. So, ab damit ins Indesign, um mir die Vorschau anzusehen.
Sehr gut, gefällt mir erst mal nicht, da muss ich nochmal ran. So lässt sich ein Nachmittag schnell mit Rechnerei und tüfteln verbringen. Die Berechnungen sind bekanntlich keine „Rocket-Science“, aber kosten mich Motivation und sind unnötiger Zeitaufwand. Besser wäre es also die Zeit direkt in die Prototypen zu stecken.

Daher habe ich beschlossen einen Golden Ratio Viewer zu programmieren.

Einige der möglichen Berechnungen, für alle Fans der Proportionen 😉
https://www.teuderun.de/typografie/satzspiegel-konstruktionen/

Ziel:

Seitenverhältnisse schnell ändern

Satzspiegel schnell ändern

Richtige Satzspiegel-Berechnung

Schnelle Bedienung

Anzeige mit den kalkulierten Proportionen

Verschiedene Satzspiegel Varianten anwenden

Ergebnis:

Layout Tool: Golden Ratio Viewer. (c) Jan Adams
Layout Tool: Golden Ratio Viewer. (c) Jan Adams

Ich habe mich mehr oder weniger bewusst für die vermutlich ungeeignetste IDE entschieden: Processing. NULL vorgefertigte GUI-Elemente, Eventhandler etc. – perfekt. Weil ich mir ohnehin das Mouse-Handling mit selbst gebauten UI-Elementen ansehen wollte hab ich mich dennoch an die Arbeit damit gemacht.

Da, wie oben erwähnt keine GUI-Elemente existieren und ich lieber gleich auf Libraries verzichten wollte, habe ich die Steuerung quick and dirty, bzw quick and old-school per Keyboard abgewickelt.
Da mich aber auch das Mouse-Handling interssiert, habe ich auch dieses ausprogrammiert.

Am Ende hat mich das Tool doch mehr Zeit als geplant gekostet, aber immerhin DIY lol

Generative Design and Sound?

Um der Verrostung entgegenzuwirken habe ich entschlossen im Sound&Visual Seminar mit Generativem Design (Processing) zu arbeiten.

Die Sound-Designerin, Isabel Witting hat im Rahmen einer Übung 5 Klänge bzw. Klangfolgen vorgegeben.

Mein Ziel war es, ein immersives, audio-visuelles Erlebnis zu generieren, da die gegeben Audio-Files sehr intensiv gestaltet sind.

Im ersten Schritt habe ich eine simple Vektorgrafik erstellt, welche wenige Kanten besitzen sollte und von einem Kreis umgegeben ist. Mein Ziel war es eine Form zu generieren, welche ich in schöne Schwinungen versetzen kann.

Visual Adams | Unförmige simple “Startform”

Im zweiten Schritt habe ich diese Vektorgrafik in Processing eingelesen und im Code zusätzliche Ankerpunkte gesetzt. Diese Ankerpunkte habe ich mit Ellipsen bestückt.

Visual Adams Jan, Sound Witting Isabel

Zu allerletzt habe ich die Audiodatei von Isabel eingelesen und mittels Sound-Library ausgelesen. Je nach Pegelwert werden die Kreise in Schwingung versetzt.

Durch den Einsatz von leichten Transparenzen auf schwarzem Hintergrund und verschiedenen Größen wird das Visual sehr dynamisch.

Generative Design and Print?

Während den letzten Recherchen über DATA, CODE, DESIGN bin ich auf an diversen Social Media Accounts gestoßen, deren Arbeiten ich in nächster Zeit präsentieren werde. Mein Hauptaugenmerk möchte ich aber auf die verschiedenen Tools und Herangehensweisen im Generativen Design bzw. Creative Coding widmen und etwas tiefer eintauchen.

Hier eine Entdeckung, welches man als klassisches Ausgabemedium bezeichnen kann. Es kombiniert Creative Coding mit Print? What could go wrong?

Pen-plotter

From evilmadscientist | Pen-Plotter AxiDraw V3

Wie es der Name schon beeinhaltet, ist ein Pen-Plotter ein “Plotter” mit einem Stift. Was ist nun der Unterschied zu Druckern? Im Vergleich zu regulären Druckern können Plotter Vektorgrafiken direkt weiterverarbeiten, ohne diese davor in eine Rastergrafik umwandeln zu müssen. Perfekt für meine Code Designs.

Diese Pen-Plotter stehen in der Regel auf einer flachen Oberfläche und können je nach ihrer Dimension verschiedene Oberflächen “bezeichnen”.

Je nach eingespanntem Stift, variiert das Zeichenergebnis: Von Textmarker, Lackstift bis Füllfeder. So können verschiedenene (flache) Materialien, wie Plakstik oder Metall mit einem Lackstift bezeichnet werden. Die Qualität der Oberfläche und des Stifts sind hier maßgeblich und beeinflussen das Endergebnis.
Diese Kombination aus analoger Qualität und Ästhetik fasziniert mich.

From generativehut.com | Paper plotter in Arbeit

Einsatzgebiete

Die Einsatzgebiete dieser Pen-Plotter variieren:
– Artwork
– Unterschriften, von Promis oder andere die oft unterschreiben haha
– “Handgeschriebene” Briefe
– “Personalisierte” Post/Kuvers
– und viele mehr

Sogar Smartphone und Hardware Hersteller verwenden dieses Tool um etwa mittels Stylus deren Hardware zu testen.

Preise

Preise für diese Pen-Plotter variieren, von 70 $ Ali-Express bis hin zu ersten Roboterarmen für mehrere Hundert Kröten:

https://www.amazon.com/pen-plotter/s?k=pen+plotter&s=price-desc-rank&qid=1618837298&ref=sr_st_price-desc-rank

Processing Audio Data for Use in Machine Learning with Python

I am currently working on a project where I am using machine learning to generate audio samples. One of the steps involved is pre-processing.

What is pre-processing?

Pre-processing is a process where input data somehow gets modified to be more handleable. An easy everyday life example would be packing items in boxes to allow for easier storing. In my case, I use pre-processing to make sure all audio samples are equal before further working with them. By equal, in this case I mean same sample rate, same file type, same length and same time of peak. This is important because having a huge mess of samples makes it much harder for the algorithm to learn the dataset and not just return random noise but actually similar samples.

The Code: Step by step

First, we need some samples to work with. Once downloaded and stored somewhere we need to specify a path. I import os to store the path like so:

 

import os

 

PATH = r"C:/Samples"

DIR = os.listdir( PATH )

 


 Since we are already declaring constants, we can add the following:

ATTACK_SEC = 0.1

LENGTH_SEC = 0.4

SAMPLERATE = 44100


 These are the “settings” for our pre-processing script. The values depend strongly on our data so when programming this on your own, try to figure out yourself what makes sense and what does not.

Instead of ATTACK_SEC we could use ATTACK_SAMPLES as well, but I prefer to calculate the length in samples from the data above:

import numpy as np

 

attack_samples = int(np.round(ATTACK_SEC * SAMPLERATE, 0))

length_samples = int(np.round(LENGTH_SEC * SAMPLERATE, 0))


 One last thing: Since we usually do not want to do the pre-processing only once, form now on everything will run in a for-loop:

for file in DIR:


 Because we used the os import to store the path, every file in the directory can now simply accessed by the file variable.

Now the actual pre-processing begins. First, we make sure that we get a 2D array whether it is a stereo file or a mono file. Then we can resample the audio file with librosa.

import librosa

import soundfile as sf

 

 

try:

data, samplerate = sf.read(PATH + "/" + file, always_2d = True)

except:

continue

 

data = data[:, 0]

sample = librosa.resample(data, orig_sr=samplerate, target_sr=SAMPLERATE)


 The next step is to detect a peak and to align it to a fixed time. The time-to-peak is set by our constant ATTACK_SEC and the actual peak time can be found with numpy’s argmax. Now we only need to compare the two values and do different things depending on which is bigger:

peak_timestamp = np.argmax(np.abs(sample))

 

if (peak_timestamp > attack_samples):

new_start = peak_timestamp  attack_samples

processed_sample = sample[new_start:]

 

elif (peak_timestamp < attack_samples):

gap_to_start = attack_samples  peak_timestamp

processed_sample = np.pad(sample, pad_width=[gap_to_start, 0])

 

else:

processed_sample = sample


 And now we do something very similar but this time with the LENGTH_SEC constant:

if (processed_sample.shape[0] > length_samples):

processed_sample = processed_sample[:length_samples]

 

elif (processed_sample.shape[0] < length_samples):

cut_length = length_samples  processed_sample.shape[0]

processed_sample = np.pad(processed_sample, pad_width=[0, cut_length])

 

else:

processed_sample = processed_sample


 Note that we use the : operator to cut away parts of the samples and np.pad() to add silence to either the beginning or the end (which is defined by the location of the 0 in pad_width=[]).

With this the pre-processing is done. This script can be hooked into another program right away, which means you are done. But there is something more we can do. The following addition lets us preview the samples and the processed samples both via a plot and by just playing them:

import sounddevice as sd

import time

import matplotlib.pyplot as plt

 

#PLOT & PLAY

 

plt.plot(sample)

plt.show()

time.sleep(0.2)

sd.play(sample)

sd.wait()

 

plt.plot(processed_sample)

plt.show()

time.sleep(0.2)

sd.play(processed_sample)

sd.wait()


 Alternatively, we can also just save the files somewhere using soundfile:

sf.write(os.path.join(os.path.join(PATH, "preprocessed"), file), processed_sample, SAMPLERATE, subtype='FLOAT')


 And now we are really done. If you have any comments or suggestions leave them down below!

Data, code, design | Daten-Visualisierung im Talk

Jeffrey Heer ist Informatiker und durch für Informations-Visualisierungen und interaktive Datenanalyse bekannt.

“David McCandless turns complex data sets, like worldwide military spending, media buzz, and Facebook status updates, into beautiful, simple diagrams that tease out unseen patterns and connections. Good design, he suggests, is the best way to navigate information glut — and it may just change the way we see the world.”
TEDEd