Programmierung von Datenvisualisierungen: Ein Coding-Toolkit für die Verarbeitung

1. Einführung: Ich denke, dass es als Designer sehr schwer sein kann, Regeln zu erstellen, wie man ein Stück erstellt, und ich liebe es, dass es bei der Arbeit mit Daten darum geht, Systeme zu generieren. Sie erstellen diesen bestimmten Satz von Regeln, wie etwas dargestellt werden sollte, und dann Plug-in-Daten und es kommt in einer Form heraus, die diesen Regeln folgt. Es ist einfach, die Regeln zu optimieren und zu ändern und unterschiedliche Ergebnisse zu erzielen oder die Daten zu ändern und etwas ganz anderes zu finden. Die Verarbeitung ist eine Sprache oder eine Erweiterung von Java und sollte Designer dazu ermutigen, mehr mit Code zu arbeiten. Lernen zu programmieren und zu verarbeiten hat mich als Designer wirklich verändert. Es hat mich befreit, eine Menge Dinge zu tun, die ich vorher nie mit der Hand tun konnte. Daher freue ich mich, tiefer in die Verarbeitung zu gehen und dieses Toolkit von Teilen bereitzustellen , damit andere Designer die Verarbeitung besser nutzen können und eine Referenz zum Erstellen eigener Anwendungen haben. Ich habe all diese Teile genommen, die ich in den letzten Jahren gefunden habe , und sie an einem Ort in ein Toolkit gesteckt. es, was ich wirklich gewollt hätte, als ich mit Processing angefangen habe. Die Absicht ist nicht, den ganzen Code, den ich zeige, auswendig zu lernen, sondern dies als Referenz für später zu verwenden, wenn Sie etwas im Sinn haben. Wir sollten die Referenz direkt dort haben, und Sie können dieses Stück Code greifen. Wenn Sie meinen vorherigen Kurs zum Erstellen von Karten mit Processing und Illustrator absolviert haben, ist dies ein hervorragendes Follow-up dazu. Lohnt sich, für Designer, die sich für Code interessieren, aber auch für Leute, die vielleicht bereits mit Code arbeiten, aber eher daran interessiert sind, ihn für Designzwecke zu verwenden. Mein Name ist Nicholas Felton. Ich bin ein Informationsdesigner mit Sitz in Brooklyn und arbeite mit Daten. 2. Übersicht: Die Art und Weise, wie ich mich dieser Klasse näherte, besteht darin, vier verschiedene Arten von Skizzen zur Verfügung zu stellen. Zunächst werden wir uns mit verschiedenen Möglichkeiten beschäftigen, wie Sie Daten in die Verarbeitung einbinden können. Der nächste Satz von Skizzen ist um verschiedene Strukturen herum , die Sie wie Raster oder Linien oder radiale Kompositionen erstellen können . Als nächstes werden Sie, wie bei allen Codierungen, auf Fehler stoßen. Ich habe ein paar verschiedene Techniken zur Verfügung gestellt, die ich hilfreich gefunden habe um an die Wurzel von Problemen zu gelangen und zum letzten Schritt zu gehen, der Verfeinerung ist. Hier versuchen wir, die Dinge besser aussehen zu lassen und sie in einen polierten Zustand zu bringen. Also, Processing ist Open-Source-Software, es ist kostenlos zum Download und für jeden Zweck zu verwenden. Sie können es hier auf processing.org für Mac, Windows und Linux bekommen. Sie können eine Spende machen, wenn Sie die Stiftung und ihre Arbeit unterstützen möchten, und hier können Sie die neuesten Versionen erhalten. Um zu beginnen, werde ich einige der grundlegenden Verarbeitungskonzepte überprüfen , mit denen Sie vertraut sein sollten , bevor Sie in dieser Lektion fortfahren. Ich habe eine Reihe von Dateien erstellt, die Sie von Skillshare herunterladen können, oder Datendateien, oder strukturelle Dateien, Debugging und Verfeinerung, und dann einige abschließende Beispiele, die alles zusammenbringen. Also, am Ende werden wir so etwas wie diese kleine Skizze machen, die all die verschiedenen Exoplaneten betrachtet , die bisher entdeckt wurden und sie mit einer Kombination von einigen dieser verschiedenen Techniken visualisiert. Die Grundidee dieses Toolkits ist, dass Sie etwas wie einen CSV-Importer greifen können , das mit einer strukturellen Technik wie einer radialen Komposition kombinieren und dann einige der Debugging-Tools verwenden, um herauszufinden , warum es nicht funktioniert, oder optimieren, wie es funktioniert, und wenden Sie dann schließlich einige dieser Verfeinerungen an. Wie in diesem Fall verwenden Sie Farbtonsättigung und Helligkeitsfarbmodus anstelle von RGB. Also, ich werde ein paar verschiedene Beispiele haben, die ähnlich sind, und das ist ein anderes, das in den Beispielen am Ende oder schließlich diesem Satz von Liniendiagrammen sein wird . Die Idee ist, dass diese alle nur auf kleinen Code-Snippets basieren , die ich in den folgenden Abschnitten einführen werde. Hoffentlich haben Sie einige Erfahrung mit der Verarbeitung entweder alleine oder durch meine frühere Klasse für Verarbeitung und Illustrator. Ich denke, es ist wichtig, gerade jetzt nur einige der grundlegenden Konzepte zu überprüfen , so dass diese uns nicht später stürzen, wenn wir uns spezifischere Ideen ansehen. Kurz gesagt, Verarbeitung, wieder, ist eine Anwendung, die Sie von der Processing-Website herunterladen und besteht aus diesen drei verschiedenen Grundelementen: der Editor, wo wir Code schreiben, die Konsole, die schreibt Fehler oder jede Protokollierung, die wir eingerichtet haben, und schließlich die Leinwand, die ist, wo die gesamte Zeichnung passiert und das sieht so aus. Da ist der Editor und die Konsole. Wenn wir es ausführen, erscheint die Leinwand. Die Verarbeitung hat einen Einrichtungsbereich und einen Zeichenbereich, und daher sind dies zwei der primären Arten von Strukturen, auf die wir uns verlassen werden. Es gibt grundlegende Variablentypen: Ganzzahlen, Gleitkommazahlen und Zeichenfolgen. Eine Ganzzahl ist für jede ganze Zahl, float ist für Dezimalzahlen und eine Zeichenfolge enthält Text, und das sind wahrscheinlich die drei grundlegenden Variablentypen, die wir verwenden werden. Ein Array ist im Grunde eine Liste von verschiedenen Datentypen. Also, wie ein Array von drei Zahlen wäre Null, eins und zwei, und dann adressieren wir diese innerhalb der Klammer, indem wir eine Zahl wie Null, eins und zwei setzen, um auf verschiedene Teile der Liste zuzugreifen. Es gibt auch ein Beispiel für ein Array von Strings wie eine Liste von Personen. Dies ist wirklich nützlich für die Datenvisualisierung. Sobald wir Daten in einem externen Format haben, möchten wir sie normalerweise in ein Array bringen, in dem wir einfach die verschiedenen Elemente durchlaufen und sie auf den Bildschirm zeichnen können . Sie können auch eine Liste von Listen erstellen. Auch hier wird dies alles in der vorherigen Processing-Klasse etwas ausführlicher erklärt, so dass dies ein wenig unscharf wird. Bitte gehen Sie zurück und aktualisieren Sie sie. Aber ein 2D-Array ist im Grunde eine Liste von Listen. Es ist also eher wie eine Matrix, es ist eine zweidimensionale Sache und fängt an, einer Tabellenkalkulation zu ähneln, in der wir Zeilen und Spalten haben. Diese wiederum werden in der gleichen Weise angesprochen, wie Sie hier sehen können wie das Drucken dieser Zeile an Position 0, 0 gibt uns die Zahl Null. Um all diese zu durchstehen, verwenden wir eine Schleife. Dies ist eine for-Schleife, die durch unser Array iteriert und Dinge auf dem Bildschirm ausdruckt. Dies ist unglaublich nützlich und wir werden es in den nächsten Beispielen verwenden. Schließlich ist eine Funktion, die für das Mapping-Projekt, das wir früher gemacht haben , eine Funktion namens map. Grundsätzlich braucht es eine einzelne Zahl und den Kontext dafür wie diese anfängliche, die ein Breitengrad ist, der zwischen negativen 180 und 180 schleift und sie dann einfach einem anderen Zahlenbereich zuordnet. In diesem Fall 0 bis 400 und so. Dies ist eine Funktion, die fünf verschiedene Parameter annimmt. Der erste ist der Wert, der zweite ist sein nativer Bereich und ein drittes Zahlenpaar ist der endgültige Zielbereich. Schließlich wollte ich diesen imposanten, aber beruhigenden Überblick über die Verarbeitung zeigen. Also, auf der Referenzseite „Verarbeitung listet sie alle diese verschiedenen Attribute und Funktionen auf, die im Programm verfügbar sind, und ich habe gerade die durchgemacht und hervorgehoben, die ich kenne. Also, während ich das Gefühl habe, dass ich das meiste tun kann, was ich in der Verarbeitung möchte, können Sie hier sehen, dass ich nur etwa die Hälfte der verschiedenen Teile dieses Programms verwende, und ich denke, mit einer noch kleineren Menge, wie einem Viertel von ihnen, Sie können eine Tonne machen. Es geht also nicht darum, das Programm zu beherrschen, sondern darum zu lernen, was Sie tun müssen, was Sie wollen. Ich hoffe, Ihnen viele dieser Elemente in diesem Kurs geben zu können. 3. Daten: In dieser Lektion werden wir uns mit dem Importieren von Daten in die Verarbeitung beschäftigen. Dies ist ein entscheidender Schritt und die Grundlage für jede Visualisierung mit der App. Nach meiner Erfahrung bin ich auf drei verschiedene Arten von Daten gestoßen. Es gibt CSV, die durch Kommas getrennte Werte sind, diese werden meistens von Tabellenkalkulationen ausgegeben und sind unglaublich häufig. Es könnte auch als TSV existieren, bei dem es sich nur um einen durch Tabulatoren getrennten Wert anstelle eines durch Kommas getrennten Wertes handelt. Sie können in dieser Folie sehen, wie kompakt und effizient der CSV ist und wahrscheinlich am einfachsten zu arbeiten ist. Aber Sie können auf ein paar andere Formate wie XML oder JSON stoßen, diese kommen normalerweise aus Anwendungen oder Webschnittstellen wie der Google Mapping-API, es wird etwas in einem JSON- oder einem XML-Format zurückgeben. Sie können ein wenig schwierig zu analysieren sein, also werden wir einen Blick darauf werfen, wie wir diese durchlaufen und die Werte in die gleiche Art von Format bekommen , wie wir es mit einem CSV tun würden. Also habe ich hier sieben verschiedene kleine Skizzen gebaut, um einige der verschiedenen Techniken zu demonstrieren, die Sie zum Importieren von Daten verwenden können. Der erste, wir werden uns diesen kleinen CSV ansehen. Das ist ein Jahr meiner Aktivitätsdaten zum Gehen, Laufen und Radfahren. Also, die Idee hier ist die gleiche, die wir in der Mapping mit Illustrator und Processing Projekt verwendet . Sie haben hier zwei verschiedene Variablen: die CSV, die die Daten einbringen wird, und dann die geteilte, die MyData heißt. Dies ist das zweidimensionale Array, in das wir Daten einfügen werden. Aber im Grunde ist die Idee hier, dass wir alle Daten in nur ein Array von Zeilen, die CSV, und wir können die CSV drucken. Lassen Sie es mich reinbringen. Ich werde das hier loswerden. Sie können nur sehen, dass alles importiert wird, aber es ist ein Blob. Also, der nächste Satz von Befehlen sagt, teilen Sie dies auf dem Komma und speichern Sie es in diesem zweidimensionalen Array. Jetzt können Sie sehen, dass es viel sauberer ist, und in der nächsten strukturellen Übung können Sie dies verwenden, um verschiedene Formen zu erstellen. Es gibt noch ein paar andere Möglichkeiten, wie Sie eine CSV in die Verarbeitung einbinden können. Es gibt auch eine Tabellendatenstruktur, und diese zeigt Ihnen, wie das funktioniert. Es ist ziemlich ähnlich wie die geteilte, die Ergebnisse sind fast genau die gleichen. Aber in diesem können Sie jede Spalte nach Namen adressieren. Also, wenn Sie Ihre Daten als Tabelle einbringen, können Sie jetzt einfach im Spaltenmonat sagen, ich möchte alle Werte erhalten. Oder in der Spaltenlauf möchte ich alle Werte abrufen. Sie müssen sagen, welche Art von Variable sie sein werden. In diesem Fall werden Monate Strings sein, weil sie Text sind oder die Aktivitäten selbst Dezimalzahlen sein werden, wie Gehen, Ausführen und Zyklus. Dies ist die einfachste Iteration davon, wo nur wir eine for-Schleife haben, in der wir alles packen, aber wir speichern es nicht wirklich. Also, wenn ich es in mehreren Teilen einer Skizze verwenden möchte, ist es nützlich, es in eine globale Variable zu setzen. Wenn Sie sich erinnern, wenn wir eine Variable außerhalb der Einrichtung definieren, dann kann sie in der gesamten Skizze zugegriffen werden. Also, hier, wenn wir in die Tabelle bringen, sagen wir, dass diese Container, diese Arrays von Werten werden so lang wie die Anzahl der Zeilen in der CSV sein, und dann, wenn wir durch sie schleifen, speichern wir einfach jede. Das ermöglicht es uns später in der Skizze, sie von verschiedenen Orten aus anzusprechen , ohne sie jedes Mal neu zu gestalten. Dann, eine andere letzte bequeme Sache, die Sie tun können. In diesem Beispiel verwenden wir eine Funktion namens append, und dies ist wirklich nützlich, wenn Sie nicht wissen, wie lange Ihre Datenmenge sein wird. In diesem vorherigen Beispiel, wo wir alles in einem Array gespeichert haben, stellen wir vor dem Füllen des Arrays fest, dass es eine bestimmte Reihe von Zeilen lang sein wird. Also, wir legen die Größe dieses Containers fest. Aber wenn Sie eine API oder vielleicht einen dieser anderen Datentypen verwenden , die nützlich sein können, um append zu verwenden, sagen wir in diesem nur, fügen Sie ein Stück Daten zum Ende hinzu und machen Sie dies immer und immer wieder, bis keine Daten mehr hinzugefügt werden müssen. Nun, das kann langsamer sein, aber wenn wir es nur einmal im Setup machen, denke ich, es ist in Ordnung. Also, ich benutze das die ganze Zeit und Sie können sehen, dass es ein bisschen kompakter ist als der andere Ansatz. Also, das sind vier verschiedene Möglichkeiten, Ihre CSV-Daten zu ziehen. Jetzt ist XML Extensible Markup Language, und es ist sehr ausführlich, es hat all diese verschiedenen Tags, die immer und immer wieder wiederholt werden. Aber das ist nur ein Teil einiger laufender Daten, die ich von Strava heruntergeladen habe, und im Grunde müssen Sie nur in die ganze Hierarchie hier eintauchen, um Dinge herauszuholen. Also, ich werde nicht im Detail darüber eingehen, wie das funktioniert, aber sollten Sie einige Daten aus einem XML extrahieren müssen, was ich von Zeit zu Zeit mache, sind dies die Stücke, die Sie brauchen. Wir laden es, wir ziehen einige Kinder heraus, wir füllen unsere Arrays mit Werten. Also, wenn Sie es aus einer XML-Datei entfernen müssen, ist dies der Weg, dies zu tun. Dasselbe gilt für JSON. Dies ist ein hierarchisches Format, und Verarbeitung ist wahrscheinlich nicht die nativste Sache für die Verarbeitung. Aber wieder habe ich Ihnen gezeigt, wie Sie Daten aus diesem Beispielstück von JSON herausziehen können. Es geht nur darum, dort reinzugraben, ein Array zu erstellen, durch das Rad zu fahren und Elemente herauszuziehen. Der Punkt ist nur, es als Array in die Verarbeitung zu bringen und all diese Informationen aus der Struktur herauszuholen. Wenn Sie JSON benötigen, ist dies die Referenz dafür oder ein funktionierendes Beispiel, und etwas, nach dem ich verzweifelt gesucht hatte wenn ich versucht habe, mit JSON zum ersten Mal selbst zu arbeiten. Schließlich werde ich Ihnen eine andere kleine Technik zeigen, die ich wirklich nützlich finde. Dies ist ein Datensatz, den ich gefunden habe, dass alles über Filme über verschiedene Dystopien und das Jahr, in dem sie herauskamen, aber Sie können diese verschiedenen Kategorien hier sehen. Also, eines der ersten Dinge, die ich gerne bei der Arbeit mit einem Stück Daten mache , ist herauszufinden, was ist die beliebteste Kategorie? Wie viele von ihnen gibt es? Die Verarbeitung hat einen Datentyp. Es ist wirklich nützlich, um das zu tun. Es nennt sich das Wörterbuch. In diesem Fall handelt es sich um ein IntDict oder ein Wörterbuch von Ganzzahlen. Ein Wörterbuch ist ein Paar von Werten, wie ein Schlüssel und ein Wert. Was uns dies ermöglicht, ist, diesen Datensatz einzuziehen, ich verwende einen CSV und den Tabellenansatz, um ihn einzubringen, und dann richte ich dieses Wörterbuch ein, und ich füge einfach jeden dieser Sätze dem Wörterbuch nacheinander hinzu. Also, genau hier, wo ich durch alle Zeilen zu dem Index fahre, den ich über meinem Index eingerichtet habe, füge ich nur den Wert dieser Zeile hier hinzu, was der Name der Art der Dystopie ist und den Wert eins gibt. Also, dies erstellt im Grunde eine Liste aller verschiedenen Werte und bringt mich zu dieser wirklich nützlichen Art, die Daten zu betrachten, die mir sagt, dass die „Regierung/Sozial“ die häufigste Art von Dystopie sind, während „Alien kontrolliert“ nur hat acht, ist die am wenigsten verbreitete. Also, Sie könnten dies für eine Reihe von Optimierungen tun und herausfinden, welche Wörter am meisten darin verwendet werden. Unten hier sortiere ich es einfach, wie oft jedes Wort erscheint, und speichere es dann in ein Array von Schlüsseln und ein Array ihrer Werte. Also, ich hoffe, dass dieser Satz von Referenzen für die Arbeit mit Daten nützlich ist, und sollten Sie einige dieser exotischeren Datentypen treffen, Sie keine allzu große Angst, da Sie eine Referenz haben, um die relevanten Daten herauszuholen. 4. Struktur: Im nächsten Kapitel geht es um verschiedene Strukturen. Ich habe Ihnen sechs Grundtypen und viele verschiedene Iterationen von ihnen gegeben. Beginnen Sie mit Zeilen und verwandeln Sie diese dann in ein Raster, mit konzentrischen Formen arbeiten. Wir haben ein paar verschiedene Beispiele, wie Linien zu machen, sowohl gerade als auch gekrümmt, einige radiale Beispiele, und schließlich, mit Koordinaten zu spielen. Also, der erste ist der einfachste. Dies verwendet nur einige Rechtecke, um einige Zeilen zu zeichnen , und ich zeige Ihnen, was das erzeugt. Also, wir haben fünf verschiedene Bars hier. Ich richte im Grunde nur einige gemeinsame Werte an der Spitze ein, das werden globale Werte sein. Normalerweise habe ich gerne einen Rand auf meinen Skizzen so dass die Dinge nicht zur Seite quetschen. Also, wenn Sie diese Null machen, werden Sie sehen, dass es nicht so schön ist, wie ich es 50 gebe, weil ich diesen Wert durchgehend verwende , um die Rechtecke an den Rändern und zwischen einander auszublenden . Wir sind im Grunde im Großteil davon, wir machen hier nur eine Schleife, die besagt, für die Anzahl der Rechtecke, die ich angegeben habe, die fünf ist, skizziere sie nicht. Geben Sie ihnen eine Füllung eines grauen und dann zeichnen Sie sie beginnend an einem Rand, der 50 ist. Während wir durchlaufen, gehen wir von Null auf vier, weil es kleiner als rectcount sein muss. Wir wollen also, dass die Rechteck-Größen zunehmen und auch wir brauchen die Marge zu erhöhen. Also, dies ist die Ausgangsposition des Rechtecks und dann wird es immer die Breite minus der Polsterung an den Rändern, Rändern, breit und diesen Wert, den ich von RectSize tall angegeben habe. Also, das ist eine einfache Möglichkeit, eine Reihe von Rechtecken auf den Bildschirm zu zeichnen. zum nächsten kommen, ist die nächste Iteration davon oder was, wenn wir eine Reihe von Histogramm, einige kleine Balkendiagramme, aber einige von ihnen wollen einige kleine Balkendiagramme, . Dafür ist das kritische Stück, dass Sie zwei Schleifen benötigen. Der erste, den wir bereits gemacht haben, der ist, wie viele Rechtecke vertikal es geben wird, und dann eine horizontale Schleife. Also, das ist für wie viele Bars wir eingerichtet haben, das ist 20. Wir wollen das waagerecht durchrollen. Wenn ich das durchführe, können Sie sehen, dass wir noch diese fünf vertikalen Bereiche haben, aber darin haben wir 20 vertikale Balken. Jeder von ihnen erhält einen Wert von hier mit dieser zufälligen Funktion, die sagt, ich möchte, dass meine Balken zwischen der Hälfte meiner rectSize oder der Hälfte von 100 und 100 liegen. Eine andere nette Sache, die Sie tun können, ist nur ein einfaches Gitter aus Rechtecken zu erstellen. Also, das ist die gleiche Idee. Wir haben eine verschachtelte Schleife. Also, wir haben die erste, die vertikal zeichnet, und die andere, die horizontal zeichnet. Wir zeichnen nur 25 verschiedene Rechtecke in diesem Stück Code. Wir können das Gleiche mit Ellipsen machen. Wir haben wieder unseren verschachtelten Code. Jetzt haben wir 25 mal 25 Ellipsen. Die Hauptsache hier ist, dass wir nur Ellipse verwenden, um es zu zeichnen, und wir müssen dieses ein Stück Code hinzufügen, der sagt: „Zeichne das aus der Ecke und nicht aus der Mitte.“ Jeder Kreis wird von der oberen linken Ecke gezeichnet, genau wie die Rechtecke. Das hier ist ein bisschen interessanter. Also, wenn wir Daten hinzufügen wollen, aber unsere Rechteck-Skalierung von der Mitte haben, müssen wir die Dinge ein winziges bisschen ändern. Zuvor wurden sie von der oberen linken Ecke gezeichnet. Also, hier, um anzugeben, wo die Kreise, in denen ich eine Ecke gemacht habe, muss ich für die Rechtecke angeben, zeichnen Sie sie von der Mitte. Sie können sehen, dass, wenn ich die Maus über, sie ändern Größe. Nun, das liegt daran, anstatt die RectSize hier zu setzen und immer dabei zu bleiben, überschreibe ich das später, indem ich die Position der Maus benutze , um die Größe des Rechtecks zu definieren. Wir werden diesen MouseX-Befehl sehr verwenden, weil er wirklich nützlich ist, um Ihre Grafiken anzupassen und zu sehen, wie unterschiedliche Werte sie beeinflussen. Ich weiß, dass diese Struktur verschiedene Werte annehmen wird und es mir erlaubt, unterschiedlich große Rechtecke zu haben, weil ich ihm den MouseX-Wert füttern kann. In diesem Beispiel zeichnen wir nur eine Reihe konzentrischer Quadrate. Also, diese ist nur eine einzige Schleife für die Anzahl der Rechtecke, die ich möchte. Zeichnen Sie fünf Rechtecke, wir beginnen mit einem, der 400 mal 400 hier ist und dann einfach jedes um 50 versetzt. Also, das geschieht, indem ich i oder einen Zähler in der for-Schleife verwendet, um die Größe des Offsets zu multiplizieren, so dass sie größer und größer werden. Wir haben hier einen Kreis, auch kreisförmig. Das ist die gleiche Grundidee mit diesem Offset, um sie jedes Mal zu wachsen. Es gibt verschiedene Möglichkeiten, Linien in der Verarbeitung zu zeichnen. Die einfachste ist ein gerader Satz von Linien. Im Grunde, wie Sie das tun, ist es im Grunde drei Teile. Wir haben diese BeginShape, die besagt, dass ich anfangen möchte, eine Linie zu zeichnen, und dann legen wir für jeden Punkt einen Scheitelpunkt fest und verwenden dann EndShape, um sie zu schließen. Wenn wir also die for-Schleife durchlaufen, nehmen wir unsere zufälligen Punkte für die Höhe und gleichmäßig verteilte Punkte für die Breite und fügen an jeder Position einen Scheitelpunkt hinzu. Es gibt auch einfache Möglichkeiten, gekrümmte Linien in der Verarbeitung zu machen. Anstatt diesen normalen Scheitelpunkt zu verwenden, verwenden wir einfach gekrümmten Scheitelpunkt. Jetzt können Sie sehen, wie die Grafik das glattere Gefühl hat. Das ist nur, indem Sie im Grunde einen CurveVertex-Punkt anstelle des normalen Scheitelpunkts verwenden. Sie müssen diese zusätzlichen auch direkt nach BeginShape und eine direkt nach EndShape hinzufügen. Aber es gibt ein kleines Problem mit diesen gekrümmten Linien. Das ist, dass sie normal zeichnen können, aber sie sind nicht die besten für das Zeichnen von Daten, da ich, wie Sie sehen werden , rote Kreise hier für jeden Punkt in meinem Dataset gezeichnet habe, und Sie können sehen, wie die Linie ein wenig oberhalb der dort und dann geht dieses Stück ein wenig darunter und ein wenig unten hier. Es ist also, die Daten in einer Weise zu übertreiben, die wir nicht wollen. Das Dataset wird nicht so hoch, aber das ist es, was es darstellt. Also, ich würde diese dort verwenden, wo es Sinn macht, aber vielleicht zum Zeichnen von Daten ist es nicht das Beste. Das könnte dazu führen, dass Sie entweder einfach gerade Linien verwenden oder die Bézier-Kurve verwenden. Nun, das ist die letzte Art von Zeile, die ich Ihnen zeigen werde. Aber es ist ein bisschen schwieriger. Dies ist nur ein einziges Beispiel für eine Kurve. Es ist nicht die intuitivste. Grundsätzlich müssen Sie die Kontrollpunkte für all das mit diesem BezierVertex einrichten . Also, jetzt braucht es sechs verschiedene Punkte, um es zu zeichnen. Aber hoffentlich wirst du Trost nehmen, wenn du weißt, dass ich es jedes Mal vermasselt habe, wenn ich das versuche . Es dauert etwa 10 oder 15 Minuten Debugging, um eine schöne Bezier-Kurve zum Laufen zu bringen, weshalb ich sehr glücklich bin, jetzt dieses einfache Beispiel zu haben , in dem alles funktioniert und Sie sehen können, wie Sie die richtigen Werte anschließen können. Ich benutze MouseX hier, um diese Griffe zu kontrollieren, um die Spannung anzupassen. Also, du kannst dieses Stück einfach hier schnappen. Die Zieh-Bézierkurve, die mit BeginShape beginnt und mit EndShape endet , und fügen Sie Ihre Werte ein, und das werde ich von nun an verwenden. Wenn Sie Kurven haben, die Sie machen möchten, hoffe ich, dass Sie dieses Stück Code auch aufnehmen werden. Umzug auf radiale Strukturen. Dies ist eine einfache, die nur eine Reihe von Kreisen in einen Kreis legt. Jetzt verwende ich sowohl MouseX als auch MouseY, um verschiedene Parameter hier zu steuern. Also, ich habe beschlossen, dass ich möchte, dass die Anzahl der Formen durch ein Zehntel von MouseX und die Formgröße durch ein Zehntel von MouseY bestimmt wird. Also gehen wir den ganzen Weg nach links. Ich bin mit einem Kreis links und ich kann ihn größer oder kleiner machen, indem ich nach oben und unten gehe, und ich kann mehr Kreise hinzufügen, indem ich links und rechts gehe. Stellen Sie sich dies als eine Fläche vor, auf der Sie ganz einfach Daten hinzufügen können, genau wie bei den Kurven und bei allen vorherigen Shapes. Wir können dies auch mit Linien tun. Auch hier ist dies ein weiterer Satz von Formeln, die ich immer googeln muss, wenn ich nur dazu verwende , zu bestimmen, was die X-Positionen und die Y-Positionen der Endpunkte dieser Linien sind . Man könnte sehen, dass da etwas Geometrie drin ist, wir benutzen Sinus und Kosinus. Bu, die Idee hier ist nicht, sich an dieses Zeug zu erinnern, um es auswendig zu machen, sondern eine Ressource zu haben, um zurück zu gehen und es zum Laufen zu bringen, wenn Sie es brauchen. Wir können das Gleiche mit Rechtecken machen. Wir möchten, dass Rechtecke aus der Mitte kommen, hier können Sie den Code sehen, der es tut. Aber es gibt ein kleines Problem hier ist, dass, wenn wir vier haben, sie nicht genau aufstellen, sie sind nicht vollständig zentriert. Das ist ein kleiner Fehler bei der Art, die ich eingerichtet habe. Also, ich habe Ihnen hier ein besseres Beispiel gegeben. Dieses radiale RectOffset. Also, um alle unsere Rechtecke perfekt zentriert zeichnen zu lassen, habe ich dieses andere Stück Code. Dieser benutzt ein neues Ding. Das ist für Transformationen. Dies ist im Grunde, wenn Sie etwas versetzen oder drehen möchten, können Sie einen Kontext dafür mit PushMatrix erstellen. Dies sagt: „Alles nach dem Beginn von PushMatrix möchte ich, dass es übersetzt oder gedreht oder skaliert wird und dann möchte ich, dass die Transformatoren aufhören, wenn ich dieses PopMatrix Stück Code hier lege.“ Also, anfangs, und ich kann eine von ihnen ausschalten, damit Sie sehen können, wie es funktioniert. Wenn ich nur benutze, oder ich schalte beide tatsächlich aus. Also, ich habe hier nichts, Sie können nur sehen, dass sich oben dieses Rechtecks bewegt. Dies liegt daran, dass alle meine verschiedenen Rechtecke übereinander zeichnen. Wenn ich nun die Rotationsverschiebung einschalte, drehen sie sich alle, aber sie sind um den Punkt Null zentriert, genau hier , wo diese Übersetzungen und Rotationen beginnen. Wenn ich also „Übersetzen“ aktiviert habe, verschiebe ich es jetzt über die halbe Breite der Leinwand und die halbe Höhe der Leinwand. Sie können jetzt sehen, dass es perfekt ist, wo ich es will. Wir können die gleiche Technik für Text verwenden, was sehr nützlich sein kann, wenn Sie diese Rechtecke beschriften möchten. Nun, wie bekommst du Text, um nicht in einer geraden Linie zu sein? Wir verwenden den gleichen Ansatz. Dies ist, dass PushMatrix, einige PopMatrix, um eine Reihe von diesen Wörtern zu bekommen. Dies ist inspiriert von Bart Simpson. Etwas, das Sie vielleicht viele Hunderte von Malen auf die Tafel schreiben müssen. Schließlich, nur ein paar Koordinaten, so dass das geht zurück zu dem, was wir mit den Karten gemacht haben. Wenn Sie eine Reihe von zufälligen Punkten auf der Leinwand setzen möchten. Wir gehen zurück zu unserem Freund, der Mapping-Funktion. Also, nehmen wir diese Reihe von Punkten, die ich generiert habe. Sie sind nur zufällige und ordnen sie auf der Leinwand zu. Ich kenne ihre Werte von 0-100 und ich möchte, dass sie zwischen Marge und mit Minus-Marge übersetzt werden . Also, nur in einem schönen Teil der Leinwand hier, den ich verwenden möchte. Schließlich, wenn Sie zusätzlich zu den einfachen Koordinaten, wollen Sie sie verbinden. Ich habe diese kleine Skizze gemacht, die diese Kreise und die gekrümmten Linien kombiniert , um hier einen Pfad zu erzeugen , und ich nummeriere sie auch, damit ich verstehen kann, was los ist. Sie beginnen bei Null und enden bei neun. In diesem Fall spielt es keine Rolle, ob die Linien über die Punkte hinausgehen, denn dies ist einfach ein Pfad, der sie verbindet. Es ist kein Graph mehr. Also, hoffentlich ist das eine gute Möglichkeit Ihre Entwürfe mit einer Reihe von vorverpackten Kompositionen zu beginnen. Sobald Sie eines unserer kleinen Importmodule aus CSV oder XML oder JSON aufgenommen haben, legen Sie es hier ein, füllen ein Array aus und verwenden dann eine dieser Kompositionen, um eine Visualisierung zu generieren. 5. Debugging: In dieser Lektion werden wir uns mit Bugs befassen. Dies sind ein unvermeidlicher Teil des Schreibens von Code und dass viele der besten Programmierer der Welt Art von Wachs philosophisch über. Ich habe diese zwei Zitate gefunden, die ich mag. Eine, von dem Schöpfer von BitTorrent, der sagt, dass, "90% der Codierung ist Debuggen. Die anderen 10% schreiben Bugs.“ Dieser andere von einem der Ingenieure, der Flipboard sagt: „Debugging ist wie der Detektiv in einem Kriminalfilm zu sein, in dem Sie auch der Mörder sind.“ Ich denke, das ist Teil der einzigartigen Zufriedenheit, mit Code zu arbeiten, ist, dass, wenn Sie diese Dinge zum Laufen bringen, Sie irgendwie durch Ihre eigenen Hürden und Hindernisse, die Sie in den Weg gebracht haben , um dieses Ding zu bekommen Funktionieren. Auf dem Weg habe ich ein paar Techniken aufgegriffen, die ich nützlich fand, um Fehler zu vermeiden. Weil es einen Satz von Code gibt, den Sie schreiben werden. Das ist gültig. Die Verarbeitung sagt, dass dies ein guter Code ist, es macht Sinn, aber es tut nicht genau das, was Sie wollen. Also, wie erhalten Sie sowohl einen gültigen Code, der wie beabsichtigt funktioniert. Beginnen wir mit nur einer Art von Best Practices zum Schreiben von Code. Einer ist, all Ihre Konstante zu ziehen. Also, jedes Mal, wenn Sie eine einzelne Nummer in der Datei haben, wie fünf oder 10, gibt mir die Ergebnisse, die ich will. Versuchen Sie, das in eine Variable zu ziehen. In diesem Fall hatten wir dieses erste Beispiel, bei dem es darum geht eine Ellipse an Position X und Y zu zeichnen, aber ich möchte, dass die Daten 10x skaliert werden. Nun, das Problem dabei ist, dass 10 hier zweimal erscheinen. Sie könnten eine von ihnen durchgehen und ändern, aber Sie ändern nicht die andere, oder sagen, Sie verwenden diese Konstante an fünf verschiedenen Orten oder sechs verschiedenen Orten. Willst du sie alle jedes Mal finden, wenn du es ändern willst? Ich denke, die bessere Praxis ist, eine Variable dafür einzurichten, wie zerstörte Skala und einfach diese überall zu verwenden. Nun, Sie haben gerade die Nummer Eins geändert und können zu weniger Problemen führen. In Bezug auf die Benennung von Variablen ist dies ein hartnäckiges Problem bei der Codierung. Sie möchten, dass die Dinge schnell und effizient, aber auch beschreibend sind, damit Sie wissen, was sie tun. Ich neige dazu, diese ein-Buchstaben-Variablen zu vermeiden , die Sie manchmal im Code anderer Leute sehen können. Aber ich denke, es ist besser, expliziter zu sein während Sie versuchen, mit Ihren Variablennamen prägnant zu bleiben. Es wird Ihnen helfen, es später zu verstehen, wenn Sie darauf zurückkommen und anderen helfen, Ihren Code auch zu verstehen. Ein großes und sehr häufiges Sprichwort für Codierung ist, wiederholen Sie sich nicht. Also, jedes Mal, wenn Sie sehen, wie Sie denselben Code zweimal schreiben, ist es beide irgendwie ineffizient, kann aber zu Fehlern führen. In diesem Beispiel haben wir diese kleine Formel, um die Fläche des Durchmessers eines Kreises zu erhalten, angesichts der Fläche. Aber weil eine Ellipse sowohl ihre Höhe als auch ihre Breite benötigt, verwende ich sie zweimal. Genau wie die Verwendung eines Skalierungsfaktors oder einer anderen Konstante mehrmals, kann dies ein Rezept für Probleme sein, wenn Sie es nicht richtig kopieren oder Sie eine kleine Sache darin ändern. Es ist besser, das herauszuziehen und es seine eigene Linie sein zu lassen, wo es nur einmal erscheint, und noch besser, aber etwas fortgeschrittener Weg, dies zu tun, besteht darin, eine Funktion zu erstellen. Dies zeigt Ihnen, wie Sie eine Funktion erstellen können, die den Durchmesser eines Kreises berechnet , der nur zu einem Codestück wird, der sich unterhalb der Einrichtungs- und Zeichnungsbereiche befindet. Dann, jedes Mal, wenn ich einen Kreisdurchmesser erhalten möchte, schicke ich ihn einfach an den Bereich, und das gibt mir den Wert zurück. Eines der netten Dinge, die die Verarbeitung tut, ist, dass es Ihren Code automatisch vor Ihnen einsetzt. Also, wenn Sie Befehl T auf der Tastatur drücken, wird es etwas wie den unformatierten Code auf der linken Seite nehmen und einfach alles einfügen. Dies ist eine nützliche Übung, die ich ständig mache, und es hilft zu identifizieren, wo es Probleme geben wird, wo eine Reihe von Klammern nicht geschlossen werden oder Sie andere Probleme mit ähnlichen Klammern haben. Wenn Sie zurückgehen und Ihren Code verfeinern, ist es nützlich, einfach durch ihn zu gehen und sicherzustellen, dass alles, was aufgegeben wird, wie Variablen oder Codezeilen, Sie nicht verwenden, herausgezogen wird. Wir arbeiten alle wirklich schnell und versuchen verschiedene Dinge, aber wenn Code-Bits verwaist werden, ist es gut, diese herauszuziehen und die Dinge sauber zu halten. Also, jetzt werden wir uns ein paar andere Skizzen ansehen, die einige dieser Debugging-Techniken und Wege zeigen , die ich nützlich gefunden habe , um die Probleme in meinem Code zu finden. Ein Fehler, den Sie kontinuierlich begegnen werden und den ich täglich sehe, ist dieser Array-Index außerhalb der Grenzen. Dies bedeutet nur, dass Sie versucht haben, auf ein Stück Daten zuzugreifen, das nicht existierte. Also, in diesem Fall habe ich ein Array mit acht Werten darin, und in meiner vier Schleife versuche ich, auf jeden dieser verschiedenen Werte zuzugreifen. Aber hier, das Problem ist, dass, Ich habe gesagt, lassen Sie mich kleiner oder gleich der Länge meines Markersatzes sein. Das bedeutet im Grunde, dass es versucht, auf neun zu gehen. Wenn ich den gleichwertigen Teil davon entferne und es erneut ausführe, wird es in Ordnung sein. Nun, eine der Möglichkeiten, dies zu debuggen, kann sein, die Druckfunktion zu verwenden. Diese Skizze wird mir den gleichen Fehler geben. Dass es eine Ausnahme außerhalb der Grenzen gibt. Aber, indem ich Print Lean hier verwende, drucke ich jedes Mal, wenn es funktioniert, bis es nicht funktioniert. Also, ich kann sehen, dass, wenn ich gleich sieben ist, es den letzten Wert aus meinem Array bekommt , der 700 ist, aber es versucht eindeutig, weiter zu gehen. Das ist ein Hinweis darauf, dass ich die Größe meiner Daten überschreibe und dass das Entfernen dieser Gleichheitsmarke die Dinge perfekt laufen lassen sollte. Eine andere Sache, die nützlich sein kann und manchmal funktioniert es, aber es zeichnet nicht, was Sie erwartet haben. Also, in diesem Fall versuche ich acht verschiedene Kreise zu zeichnen, aber ich sehe nur einen. Eines der Dinge, die ich manchmal verwenden kann, ist die Verwendung von Opazität. Ich kann entweder die Deckkraft auf einen anderen Wert wie 120 setzen, und das kann nützlich sein, um zu enthüllen, was passiert. In diesem Fall, dass alle meine Kreise zeichnen, aber sie sind nur übereinander zeichnen, oder eine andere Sache, die ich gerne tun, ist die Verwendung der Maus X. , die ich gerne tun, ist die Verwendung der und erlauben Sie mir, herauszufinden, was passiert. Im Transparenzfall ist ein fester Wert wahrscheinlich in Ordnung, aber was ich daran mag, ist, dass Maus X mir Werte geben wird, die ich verstehe. Ich weiß, dass es hier links Null sein wird. Auf der rechten Seite wird es in diesem Fall 800 sein, und so kann ich diese verwenden, um herauszufinden, ob ein System so funktioniert, wie ich es erwartet habe. Eine andere Möglichkeit, dieses Problem mit den übereinander gezeichneten Markern zu lösen, besteht darin , einen Strich anstelle von Transparenz zu verwenden. Also hier, anstatt ihnen alle Füllungen zu geben, kann ich sehen, dass die Kreise übereinander zeichnen, indem sie ihnen einen Strich geben. Für kompliziertere Kompositionen finde ich es nützlich, einfach mit der Kommentierung der Skizze zu beginnen. sind vielleicht keine Dinge, die ich in der fertigen Skizze sehen möchte, aber sie werden sehr nützlich sein, um zu verstehen, was los ist. Also hier habe ich unsere frühere Verarbeitungskurve wiederbelebt, aber ich zeige jetzt die Kontrollpunkte und beschrifte sie mit Text, der ihre Werte hat, und auch die Spannung an diesen Kontrollpunkten. Dies hilft mir, genau zu verstehen, was in der Skizze passiert, und Sie können hier sehen, dass ich Dinge beschriftet habe, so dass ich, sobald ich so arbeiten muss, wie ich es will, all diese Elemente herausziehen kann, die ich nicht will. Wie entfernen Sie die Kontrollpunkte. Entfernen Sie den Text, der die Werte beschriftet, die ich sehe Dies kann wirklich wertvoll sein, um zu verstehen, wie eine Skizze funktioniert. Dieses Float-Präzisionsproblem ist etwas, das ich garantiere, einige von Ihnen stolpern, wie Sie beginnen, die Verarbeitung zu verwenden. Dies ist eine Art häufiges Vorkommen bei dem Sie nur eine Reihe von Punkten, Linien oder Rechtecken gleichmäßig über den Bildschirm verteilen möchten. Sie können in diesem Top-Beispiel sehen, dass es fast funktioniert. Diese Punkte verteilen sich fast vollständig gleichmäßig über den Bildschirm. Auf der unteren Seite zeigen mir diese beiden Beispiele, wie es funktionieren sollte. Das Problem hier ist, dass, wenn ich die Verarbeitung auffordere, mir zu sagen, wie weit diese Punkte auseinander liegen sollten, die richtige Antwort 33 und ein dritter Pixel ist. Die falsche Antwort ist 33, was fast korrekt ist. Das Problem hier ist, dass wir einen Schwimmer brauchen, um unsere Elemente Abstand zu halten. Dies ist eine Dezimalzahl. Aber wenn wir alle Berechnungen mit der ganzen Zahl machen, wie in diesem ersten Beispiel, so Breite ist eine ganze Zahl. Zwei ist eine ganze Zahl, es ist eine ganze Zahl. Marge ist eine ganze Zahl und Elementanzahl, sie sind alle Ganzzahlen. Obwohl wir sagen, dass wir eine Dezimalzahl speichern wollen, ist die ganze Mathematik, die es macht, mit ganzen Zahlen, weshalb wir am Ende 33 raus bekommen. Alles, was Sie tun müssen, ist, eine dieser Zahlen in einen Float zu verwandeln, wie statt Marge mit zwei zu multiplizieren, wir multiplizieren mit 2,0. Oder Sie können sagen: „Ich möchte, dass die Elementanzahl ein Float-Code ist, indem Sie diesen Float-Code umlegen.“ Nun, wenn die Mathematik fertig ist, wird es genau sein, und wir erhalten hier den richtigen Wert von 33 und einem dritten Pixel. Wenn Ihre Skizzen funktionieren, aber die Dinge nicht ganz ausgerichtet sind, suchen Sie nach diesen Float-Präzisionsproblemen, die Sie auslösen könnten. Das letzte Beispiel, das ich zeigen werde, hat mit der Bildrate von Skizzen zu tun. Einige der, die ich Ihnen gezeigt habe, sind animiert, wo die Draw-Schleifen immer und immer wieder gehen. Sie könnten etwas haben, wo es sich so anfühlt, wo es anfängt zu sinken und die Dinge langsam werden. Sie können sehen, dass ich ein wenig Code hier oben habe, was mir sagt, wie viele Frames pro Sekunde dies ist und wie viele Frames verstrichen sind. Wenn Sie das Gefühl haben, dass es nicht mit 60 Frames pro Sekunde funktioniert, versuchen Sie, diese einzelne Zeile in den oberen Teil Ihres Codes zu setzen. Also, dies wird Ihnen die Frames pro Sekunde sagen, und dann, wenn Sie verschiedene Dinge ausprobieren, werden Sie die Auswirkungen Ihrer Framerate sehen und ob das hilft. Dieses Stück Code wurde absichtlich geschrieben, um die Skizze im Grunde zu versenken, so dass Sie sehen können, dass es von 40 auf 20 auf 10 Bilder pro Sekunde fallen. Also, ich denke, dass dies die Leckerbissen sind, die ich habe, Tipps zum Debuggen, und wir können zum letzten Schritt übergehen , der poliert sein wird. Wenn diese Tipps nicht ausreichen, um ein Problem zu lösen, das Sie möglicherweise zusätzlich zur Projektseite auf Skillshare posten, können Sie auch in die Foren zur Verarbeitung gehen. Es gibt eine wirklich lebendige Gemeinschaft von Menschen, die aufgeregt sind, Novizen zu helfen, und ich weiß, dass es der erste Ort ist, an dem ich gehen werde, um zu suchen , ob jemand das gleiche Problem hatte, das ich bereits habe. Sie können in der kleinen Suchleiste suchen oder zum Forum selbst gehen und entweder nach der Warnung suchen, die Sie erhalten, oder nach der Sache, die Sie versuchen zu tun, die nicht funktioniert. 6. Verfeinerung: Übrigens, ich möchte eine Reihe von verschiedenen Verfeinerungen teilen; Weg, um Ihre Skizze zu polieren, um die Dinge noch besser aussehen zu lassen. Erstens haben wir hauptsächlich Linien und Kreise und Rechtecke in unseren Skizzen verwendet . Aber es gibt einige andere Arten von Formen, die in Verarbeitung verfügbar sind. Es gibt Dreiecke und Bögen. Diese Skizze zeigt einige der anderen Shapes, die für die Datenvisualisierung nützlich sein können. Neben Rechtecken und Kreisen sind Dreiecke eine gute Möglichkeit, Mengen sowie Bögen darzustellen , die nur Teile von Kreisen sind. In diesen vorherigen Skizzen haben wir gerade den Standardtyp in Verarbeitung verwendet, aber was schön ist, ist, dass Sie auch jede Schriftart von Ihrem Computer laden können. In diesem Fall laden wir Georgia und speichern eine PDF-Datei mit der Ausgabe. Also, das wird einige skizzierte Text haben. Hier ist unser PDF. Ein netter Vektor, knackig, benutzerdefinierter Typ. Wenn Sie in Processing herausfinden möchten, wie Sie eine Schrift benennen, wie hier verwende ich Georgia, verwende ich das. Ich gehe, um Schriftart zu erstellen. Sie müssen es nicht erstellen, aber Sie können sich einfach Ihre Liste der installierten Schriften ansehen . Heute möchte ich Calibre-Black verwenden. Ich kann nur sehen, dass es hier als Calibre-Schwarz bezeichnet wird. Ich brauche die Größe selbst nicht. Also, ich werde absagen und Georgia in Calibre-Black ändern, dann wird es die Schrift laden und jetzt habe ich ein schönes benutzerdefiniertes Stück vom Typ. In diesem Beispiel wurde die von mir verwendete Schriftart alle skizziert, aber es kann nützlich sein, auch Live-Text zu haben. Das bedeutet, dass, wenn ich es in einen Illustrator bringe, ich es bearbeiten kann. Sie können hier sehen, ich kann es nicht bearbeiten, es sind nur Formen. Aber, wenn wir diese eine kleine Ergänzung zum Code, dieses Textmodusmodell, verwenden , bedeutet dies, dass, wenn wir den Code ausführen. Die PDF-Datei, die sie ausgibt, wird nicht skizziert. Wenn ich es in Illustrator einbringe, kann ich es bearbeiten, ich kann die Schrift ändern, und es ist wirklich nützlich, um die Ausgabe von Processing manipulieren zu können. Ein weiteres kleines Stück, das ich nicht erwähnt habe, ist, dass Sie ihnen mit Rechtecken einen vierten Parameter geben können. Zusätzlich zu ihrer X- und Y-Position und ihrer Innenhöhe können Sie ihnen auch einen Eckenradius geben. Also, in dieser Skizze habe ich das auf die Maus x angewendet. Also, jetzt weiß ich, ob es ein sehr niedriger Wert ist und ich drucke es in der Konsole aus. So sieht der Eckenradius von drei Pixeln im Vergleich zu einem Viertelradius von 32 Pixeln im Vergleich zu fast 70 aus. Also, ich kann hier durchgehen, den Wert finden, den ich mag, und dann sagen, wenn es 14 ist, und dann kann ich das einfach einploppen und es statisch sein lassen. Es gibt ein paar verschiedene Farbmodi, die auch in Processing verfügbar sind, so dass RGB ein Standard ist und Sie es nicht wirklich definieren müssen. Es passiert einfach standardmäßig. Normalerweise werden Farben jedoch von 0 bis 255 angegeben. Indem Sie hier nach dem Farbmodus eine Zahl eingeben, können Sie sagen: „Ich möchte, dass alle meine Farben auf einer Skala von 0 bis 100 existieren.“ RGB ist großartig, aber es gibt keinen Unterschied in den Farben, die es im Vergleich zu diesem anderen Farbmodus darstellen kann , Farbsättigung und Helligkeit. Aber aus Sicht der Daten ist es einfacher, die Farben und Farbton Sättigung und Helligkeit als es in unserem RGB ist. Dies ist also eine kleine Tour durch den RGB-Farbraum. Sie können sehen, ich habe ich denke, es ist rot und grün gehen entlang dieser beiden Achsen und während ich die Maus bewegen, wird der blaue Kanal in mehr hinzugefügt. Sie können also sehen, dass es hier viele gute Farben gibt, aber sie sind rund um den Farbraum verteilt, also kann es schwieriger sein, auf sie zuzugreifen, weshalb Sie vielleicht nur statische Werte eingeben. Während Sie mit Farbtonsättigung und Helligkeit diese festen Qualitäten der Farbe steuern. Also, Farbton ist nicht eine Dimension, wie gesättigt er ist. Es gibt eine andere Dimension und V oder Wert ist die endgültige. Hier können Sie sehen, dass ich all diese guten wirklich hellen Farben habe , die gleichzeitig existieren. Dies bewegt sich durch den Farbraum mit voller Sättigung und voller Helligkeit und ich kann die Helligkeit senken und sie sind immer noch zusammengepackt. Also kann ich einfach den Sättigungs- und Helligkeitswert festlegen und dann den Farbton auf ein Stück Daten anwenden, oder ich kann sagen, dass die Sättigung davon auf ein Stück Daten angewendet wird. Die Verarbeitung gibt auch eine Reihe von verschiedenen Bildformaten aus. Dies ist der eingebaute Export, ermöglicht es Ihnen, Frames als PNGs, JPGs, TGA oder TIFs zu speichern und Sie tun dies einfach, indem das Suffix hier im SaveFrame-Code ändern. Ich habe Ihnen auch eine schöne Möglichkeit gezeigt, eine Skizze mit mehreren Frames ausführen zu können. Sie können diese Funktion entweder hier die „void keyPressed“ verwenden um eine Taste auf der Tastatur drücken und einen Rahmen speichern oder mit der Maus gedrückt. Also, Sie haben viele Parameter und Sie modulieren die Skizze. Sobald Sie es an einen Ort bekommen, den Sie mögen, sagen Sie, dass Sie die Ecken basierend auf MouseX runden, dann können Sie einfach auf die Schaltfläche klicken und die Ausgabe speichern. Dasselbe gilt für PDFs. Wir brauchen ein paar verschiedene Stücke, wir müssen zunächst die Verarbeitung oder die Verarbeitung PDF-Bibliothek importieren. Dann haben wir nur ein Stück, das den Speicherprozess startet wenn Datensatz und ein Stück, der den Speicherprozess beendet. Auch hier habe ich zwei Funktionen enthalten, so dass es nicht in jedem einzelnen Frame eine PDF-Datei speichert. Gerade wenn Sie es wollen, können Sie mit der Maustaste klicken oder P auf der Tastatur drücken und es wird diese Frames für Sie speichern. Also finde ich das wirklich nützlich. Sie wollen in der Regel einfach nicht ständig in einem PDF gespeichert werden , aber es ist schön, es auf Tastaturen zu haben, so dass Sie, wenn Sie etwas Schönes finden, können Sie es speichern können. Obwohl ich im Allgemeinen mit Daten arbeite, kann es nützlich sein, manchmal eine zufällige Komponente zu haben. Eines der netten Dinge, die ich entdeckt habe, ist, dass zufällige normalerweise jedes Mal anders sein wird, wenn Sie es verwenden, Sie diese Codezeile einfügen und RandomSeed aufrufen und ihm einfach eine feste Nummer geben. Das bedeutet, dass Sie jedes Mal, wenn Sie die Skizze ausführen, dieselbe zufällige Ausgabe erhalten. Also, während es jedes Mal eins ist, wenn ich es führe, sind diese Punkte in der gleichen Position. Aber sagen wir, ich ändere es in zwei, jetzt sind sie in einer anderen Position, aber es wird jedes Mal konsistent sein , wenn ich es mit RandomSeed als zwei ausführe. Also, sagen Sie, wenn Sie dies für Farben verwenden möchten aber Sie finden eine schöne Reihe von zufälligen Farben, die funktioniert, ist es gut, das in der Verwendung von RandomSeed sperren zu können. Es ist schön, Kontrolle darüber zu haben, was manchmal beschriftet wird, besonders mit dem Big Data Set. Also, in diesem Fall möchte ich den Wert dieser Kreise wissen und wir tun dies ein paar verschiedene Möglichkeiten. Man könnte sein, einfach mit der Maus hier zu spielen und herauszufinden, wo ist die Schwelle, wo diese Zahlen beginnen zu groß zu werden, um zu passen? Also, es scheint, als ich Maus herum, dass, wenn ich unter 20 bin, beginnen sie sich außerhalb der Kreise zu erstrecken. Im Moment verwende ich diese bedingte Anweisung, die besagt, wenn der Wert der Ellipse größer als MouseX ist, dann zeichne sie. Oder wenn Sie diese beiden Pipes verwenden, bedeutet dies, wenn diese andere Bedingung erfüllt ist Wenn dieser Wert größer ist als mein Beschriftungsschwellenwert, weist er auf 45 zurück. Eine dieser beiden führt dazu, dass die Beschriftungen angezeigt werden. Also, wenn ich das einfach entferne und es nur auf MouseX habe, kann ich den Ort finden, an dem ich mich damit wohl fühle. Also, vielleicht alles über 30. Ich möchte nicht beschriftet werden, und dann kann ich meinen Beschriftungsschwellenwert auf 30 ändern und die MouseX-Komponente davon entfernen. Also, jetzt beschrifte ich es hat über 30, wird angewendet und das ist eine nette Möglichkeit, die Beschriftung an die Daten anzupassen, die Sie haben. Schließlich werden wir einige Zahlen zeigen wollen, und diese werden möglicherweise nicht nativ so schön behandelt, wie wir sie in einem Designprogramm behandeln würden. Also hier, ich habe diesen ursprünglichen Wert 80,472,65. Nun, ich brauche die Dezimalstellen nicht wirklich. Im nächsten Beispiel zeige ich Ihnen, wie Sie die Dezimalstellen abrunden können, indem Sie sie in eine ganze Zahl umwandeln. Indem Sie also dieses kleine Stück Code um meine Nummer legen, wird es jetzt eine ganze Zahl sein. Aber das könnte besser aussehen, wenn wir ein Komma einfügen, das leichter zu lesen wäre. Also, dieses andere Stück Code hier, wird dieser NFC in ist ein Zahlenformatierer, nf und c ist ein Komma. Also, setzen Sie ein Komma an der richtigen Position. Dann endlich, vielleicht will ich nicht einmal diese volle Präzision. Ich will nicht, dass es 80,472 sein soll. Also, indem ich es durch 100 dividiere und dann das mache und diese Zahl runde und sie mit 100 multipliziere, dann kann ich die Genauigkeit ändern. Also, ich kann diese 10 und 10 machen und es wieder ausführen. Das würde mir ein bisschen mehr Präzision geben oder wenn ich es durch 1.000 teile und mit tausend multipliziere, dann wird es ein bisschen runder sein. Also, das abgerundet auf den Tausenden Platz. Also, das sind verschiedene Techniken, um Ihre Zahlen viel besser aussehen zu lassen, was sowohl einfacher zu lesen ist als auch erfordert, dass Sie etwas weniger Arbeit machen. Also, hoffe, diese kleinen Snippets sind nützlich und helfen Ihren Skizzen viel besser aussehen. In der nächsten Lektion werden wir eine Reihe dieser Komponenten zusammenfügen und einige fertige Skizzen erstellen. 7. Beispiele: Abschließend möchte ich Ihnen zeigen, wie all diese Stücke zusammenkommen und ein fertiges Verarbeitungsbeispiel machen können . Die erste, die ich habe, sind einige Exoplaneten-Daten, die ich heruntergeladen habe. Exoplaneten sind diese potentiellen Erden, die um Sterne außerhalb unseres Sonnensystems gefunden wurden. Sie können diese Informationen frei aus dem Web herunterladen. All diese verschiedenen Parameter über die verschiedenen Himmelskörper, die entdeckt wurden. Also, ich möchte das alles in einer Skizze zusammenfassen. Dies beginnt wie bei den anderen Beispielen, indem die Daten eingebracht werden. Also, wir werden dies mit einem der Tabelle Importbeispiele tun. Ich denke, es ist dieser Ansatz, „Data_02" Also hier haben wir eine Tabelle, die wir verwenden, und wir definieren diese Tabelle, wie Sie hier mit dem Namen unserer CSV sehen können, und wir sagen ihr, dass sie einen Header hat. Das ermöglicht es uns, diese verschiedenen Teile von Daten durch ihre Spaltenüberschriften wie Zeilenkennung oder Planet-Hostname zu adressieren . Also, bringen Sie nur diese Daten, aber hier können Sie in der Konsole sehen, wie zuvor. Hier sind die Daten, die ich eingebracht habe, und es druckt nur die Teile aus, die ich einbringe. Also, ich gebe jedem eine Nummer, einen Namen, und es hat eine Größe. In diesem Fall ist es, wie oft die Größe von Jupiter, es ist Entfernung von der Sonne, und AU ist die astronomische Einheit, wie weit die Erde von der Sonne ist. Also, das ist eine relative Entfernung. Also, ich habe diese Daten heruntergeladen, ich habe sie mit meinem CSV-Tabellenansatz herangezogen. Ich würde ein bisschen bedingte Logik hier reinlegen , weil nicht jeder Planet Informationen hat. Also, ich möchte nicht versuchen, Planeten zu zeichnen, die einen Radius von Null oder eine Umlaufbahn von Null haben . Also, ich sage nur, wenn der Radius größer als Null ist und die Planetenumlaufbahn größer als Null ist, dann möchte ich diese Jungs zeichnen. Also, ich werde offensichtlich ein paar Ellipsen brauchen, um meine Planeten zu repräsentieren. Also, das ist die Linie, die ich hier erstellt habe, wo sie eine x-Position und eine y-Position haben können, und die Größe von ihnen wird Planetenradius mal den Skalenplaneten sein, Konstante, die ich gemacht habe, das ist nur drei. Also, es macht alles schön und sichtbar auf dem Bildschirm. Nun, um ihre x- und y-Positionen zu berechnen, verwende ich diese Struktur, die ich Ihnen ein wenig früher gezeigt habe. Welches sind die radialen Kreise. Hier haben wir also ein bisschen Geometrie. Wir verwenden Sinus und Kosinus, um zu definieren, wo diese Kreise basierend auf dem Winkel erscheinen. Ich habe ein bisschen Mathematik hier. Dies ist im Grunde nur, um sie beim Zeichnen zu animieren. Also nutze ich die Geschwindigkeit der Planetenbahn, um sie an den richtigen Ort zu bringen. Ich möchte, dass jeder von ihnen eine andere Farbe hat, die auf der planetarischen Masse basiert. Also hier, ich richte das auf, wo ich ihre Masse von Null auf 30. Dreißig war etwa das Maximum in die Farbtonsättigung und Helligkeitsskala von Null bis 100. Aber ich werde es nur auf den Farbton anwenden. Also, wenn ich ihre Masse berechne, wird das in einen Wert zwischen Null und 100 verwandelt, und das definiert ihre Farbe. Also, wenn ich das jetzt renne, können Sie sehen, wie die verschiedenen Planeten mit unterschiedlichen Geschwindigkeiten umkreisen. Eine Sache, die hier sofort sichtbar wird, ist, dass, weiter sie von ihrem Stern, der in der Mitte der Leinwand sein würde, desto schneller beginnen sie sich zu drehen. Eines der Dinge, die ich diesem Code hinzugefügt habe, ist ein wenig wie ein Zoom. Also, das ist mit dieser Frame-Zählung getan. Also, selbst wenn ich das entferne und den Zoom loswerde. Ja. Nun, jetzt haben wir den Zoom los, wenn wir draußen stecken. Aber eines der Probleme, die Sie hier sehen können, ist, dass es ziemlich klobig ist, als ob die Bildrate hier nicht sehr hoch ist. Das ist meine Wahrnehmung. Also, ich werde dieses Stück Code vom Debuggen auf Frameraten bekommen und es einfach einfügen , um sicherzustellen, dass meine Intuition richtig ist. Sie können hier oben sehen, die Bildrate beträgt nur etwa sieben Frames pro Sekunde. Es zeichnet sich also nicht so gut, wie es könnte. Also, was ich im nächsten Beispiel, das ich hier habe, getan habe, ist, dass ich gerade die Art und Weise geändert habe, wie Daten in die Skizze gebracht werden, ein wenig. Ich habe beide geöffnet, damit du es sehen kannst. In diesem ersten Beispiel verwende ich einen einfacheren Ansatz, um alle Daten aus der CSV zu bekommen, was im Grunde bedeutet, dass jeder Frame, den ich zeichne, alle Daten aus meiner Tabelle herausbekomme. Also, das ist, denke ich, was die Skizze verdrängt. Ich muss das einfach in das Setup bringen. Also, anstatt die Daten auf jedem einzelnen Frame zu sammeln, werde ich es nur einmal tun, wenn wir das Setup machen. Es erfordert also ein wenig mehr Code. Jetzt, um alles zu speichern, können Sie sehen, die Namen meiner Variablen zu etablieren, und dann sage ich, wie lange sie auf der rohen Anzahl meiner Tabelle basieren und dann die ganze Tabelle durchlaufen und sie alle in einem -Array. Aber jetzt, in meiner Zeichnungsschleife, kann ich diese einfach aus den Daten holen, die ich bereits erstellt habe, und Sie können jetzt sehen, wie schnell und glatt die Skizze ist. Ich verwende auch Maus fungiert als eine Möglichkeit, zu vergrößern. Aber für mich fühlt sich das hübsch an, als würde es ziemlich gut funktionieren. Es ist eigentlich nicht sehr viel Code. Ich denke, dass der schwierigste Teil hier wahrscheinlich ist wie ich die x- und y-Position berechne, um meine Maus x zum Vergrößern zu verwenden. Aber sonst, würde ich sagen, fast alles, was Sie hier sehen, ist im Kit von Teilen enthalten, die ich zur Verfügung gestellt. In diesem nächsten Beispiel habe ich einen ziemlich einfachen Datensatz. Wir haben gerade 12 Reihen mit je vier Spalten. Also, es ist eine monatliche Summe für Gehen, Laufen und Radfahren Entfernungen, und ich werde diese mit der Tabellenmethode in die Verarbeitung bringen. Ich richte meine Variablen oben ein, und dann lege ich im Setup im Grunde nur die Größe fest und verwende den Rest dieses Codes, um alle Werte in meinen Variablen zu speichern. Es war mein erster Versuch, und ich wollte nur sehen, dass die Daten relativ zueinander. Ich dachte, vielleicht wäre es sinnvoll, diese Linien von der Mitte ausgehen zu lassen, um die relativen Entfernungen zu zeigen. Was ich daran nicht mag, ist, dass eine Linie im Grunde nur etwa die Hälfte der Größe der Leinwand haben kann. Also, es gibt mir nicht viele Links zu ihnen. Ich zeichne im Moment nur die Wanderlinien. Aber schon hatte ich das Gefühl, dass dies die Daten nicht so darstellen würde, wie ich dachte, dass es so gut funktioniert. Also, zu einigen strukturellen Dingen zu gehen, die wir uns angesehen haben, dachte ich, vielleicht wäre die Verwendung dieser konzentrischen Kreise ein guter Ansatz. Also, einen Ring für jeden Monat zu verwenden, könnte eine nette Möglichkeit sein, dies zu zeigen. Aber anstatt Kreise zu verwenden, könnte ich etwas verwenden, über das wir in der polnischen Sektion gesprochen haben , indem wir einige dieser verschiedenen Formen verwenden. Also, mit einem Bogen, um die Länge darzustellen. in diesem nächsten Beispiel für die Aktivität zeigen, Lassen Sie mich Ihnenin diesem nächsten Beispiel für die Aktivität zeigen,wie ich sie erweitert habe, um Bögen in konzentrischen Kreisen zu verwenden. Also wieder, ich bringe alle Daten hier hoch, und dann, wenn ich durchlaufe, berechne ich die Länge des Gehens relativ zu der ganzen Entfernung, was eine neue Variable ist, die ich eingerichtet habe, die nur die Summe des Gehens hält, und Laufen, und Radfahren. Also, ich mappe die Gehdistanz mit dieser Gesamtentfernung ab. Dann zeichne ich einen Bogen auf diese Länge. Also, ich mache das für all die verschiedenen Datentypen und skaliere diese wieder mit der Maus x. Ich denke, dass die Maus x da drin ist schön, weil es mir helfen kann, einzuwählen, wie weit ich das will. Soll dies eher ein vollständiger Kreis sein oder wie nah möchte ich , dass dies den Etiketten angezeigt wird? Was eine Menge Arbeit wäre, um hin und her zu springen, und mit Skalierungsfaktoren zu kommen, indem wir unsere Maus x haben, kann ich einfach auswählen, wo es gut aussieht, und dann speichern Sie es aus. Grundsätzlich sind es nur drei Bögen, die ich zeichne. Ich mappe jede der Entfernungen, diese Gesamtdistanz. Die eine knifflige Sache ist, dass ich einen Bogen beginnen muss, wo der letzte aufgehört hat, und ich könnte sicherstellen, dass das wieder funktioniert, indem ich eine andere Technik benutze, die wir besprochen haben , die etwas Transparenz einführte. Also, wenn die Strichfarbe jetzt leicht transparent ist, kann ich einfach sicherstellen, wie Sie hier sehen können, dass sie genau dort gezeichnet wird, wo der letzte Bogen aufhört. Also, ich weiß, dass diese Daten korrekt funktionieren. Ich denke, wenn ich das weiter erweitern würde, könnte ich ihm eine benutzerdefinierte Schrift geben und dann Teil des Codes einbringen, um dies als PDF zu speichern. In diesem nächsten Beispiel werden wir den gleichen Datensatz von monatlichen Entfernungen nehmen , laufen und gefahren, und das auf einige Bézier-Kurven anwenden. Also, dieses hier wieder, ich habe die Spannung auf Maus x gesetzt. Also, ich kann einen Ort finden, wo ich es mag, und ich bringe die Daten auf die gleiche Weise, wie wir es vorher getan haben. Also richte ich diese Arrays ein und erhalte die Gesamtstrecke, bekomme jede der Entfernungen zum Gehen, Laufen und Radfahren und einen Monatsnamen. Aber hier können Sie sehen, dass es eine Menge Wiederholung gibt. Ich habe diesen Bezier-Code aufgenommen, wir früher hatten und hier Linien Bézierform. Also, es ist dieser Code, um jeden der verschiedenen Arten von Daten zu zeichnen, hat seine eigene Zeile. Sie können sehen, dass hier eine Menge Wiederholungen stattfindet. Dies macht es sowohl schwer zu lesen und schafft potenziell Chancen für Fehler zu kommen. In der Verfeinerung, die ich bereitgestellt habe, ist das, was ich getan habe, genau wie die Funktion, die ich Ihnen vorhin gezeigt habe. Ich habe dieses ganze Stück der Zeichnungsschleife genommen und es in eine Funktion verwandelt. Also jetzt, was ich diese Kurven zeichnen möchte, anstatt den gleichen Code drei verschiedene Male schreiben zu müssen. Hier steht „Cycle Line“ Sie können sehen, dass ich einfach diese Funktion namens „Draw_Bezier“ verwende, und alles, was ich tun muss, ist, sie an Daten zu senden und die Farbe, die ich verwenden möchte, die ich hier eingerichtet habe. Ich habe eine Reihe von verschiedenen Farben eingerichtet. Also, die Funktion nimmt dieses Array von Werten und die Farbe, die ich es sende, und das ist genau der gleiche Code. Es ist jetzt nur als Funktion verallgemeinert. Also, jedes Mal, wenn ich einen Bezier verwenden möchte, könnte ich das aufheben und es später benutzen. Ich habe diesem auch eine Maus gedrückte Funktion gegeben , so dass es ein PDF speichert, wenn es zeichnet, und ich habe alle verschiedenen Punkte mit ihren Werten beschriftet. Jetzt kann ich sehen, wie viele Meilen verwickelt waren? Wenn mir die Spannung gefällt, die ich auf meinen Kurven habe, kann ich die Maustaste drücken, und ich habe jetzt das PDF gespeichert, da ist es. Ich kann es in Illustrator bringen, es in InDesign platzieren oder einfach ausdrucken und damit tun, was ich will. sind ein paar Beispiele dafür, wie all diese verschiedenen Kits von Teilen aus dem Toolkitzu einer vollständigen Skizze addieren, zu einer vollständigen Skizze addieren, und einige der Techniken, um zu versuchen, den Prozess zu glätten, diese verschiedenen Stücke von Code , um zusammenzuarbeiten und sich in fortgeschrittenere Skizzen zu entwickeln, die Sie vielleicht entwerfen möchten. 8. Schlussbemerkung: Die Zuweisung dieser Klasse besteht darin, Processing zu verwenden, um ein Dataset zu visualisieren, unabhängig davon, ob es sich um eine der von mir bereitgestellten oder etwas handelt, das Sie selbst finden oder erstellen. Ein paar Datensätze, die ich zur Verfügung gestellt habe, die ich für interessant halte, eines sind alle Geburtsdaten im Jahr 2003 und wie viele Menschen in jedem dieser Jahre geboren wurden. Hier gibt es einige interessante Muster, die Sie entdecken können. Es gibt noch einen kleineren. Das sind einfach die hohen und niedrigen Temperaturen für verschiedene Städte in den Vereinigten Staaten. Sie können sich entscheiden, diese zu geokodieren oder einfach die verschiedenen Muster in der Temperatur zu plotten. Wenn Sie sich dann sehr fähig oder abenteuerlustig fühlen, gibt es hier einen sechs Megabyte CSB, der über jeden einzelnen Baum in Manhattan spricht. Ich denke, das ist ein wirklich saftiger Datensatz und könnte zu vielen ziemlich interessanten Visualisierungen führen . Wenn Sie anfangen, sich mit all dem wohl zu fühlen und nach dem nächsten Weg zu suchen , um mit Processing aufzusteigen, empfehle ich alle Lehrmittel von Dan Shiffman. Er hat ein Buch, das für mich besonders inspirierend ist, genannt „The Nature of Code“, das sich mit vielen natürlichen Algorithmen befasst, um wirklich schöne Ergebnisse mit Processing zu erzielen. Diese Klasse ist für Schüler gedacht, die ein wenig mit der Verarbeitung vertraut sind. Wenn Sie mit einigen der grundlegenden Konzepte, die wir anfangs besprochen haben, nicht zufrieden sind, gehen Sie bitte zurück und versuchen Sie die Klasse Building Maps with Processing and Illustrator , die eine praktische Einführung in diese grundlegenden Konzepte ist. Ich hoffe, dass Sie mit diesen experimentieren, sich mit den verschiedenen Teilen dieses Toolkits vertraut machen und auch Ihre Experimente und Fragen im Forum auf Skillshare veröffentlichen werden. 9. Was kommt als Nächstes?: