Programmer des visualisations de données : Une boîte à outils de codage pour Processing

1. Introduction: Je pense qu'en tant que concepteur, il peut être très difficile de faire des règles sur la façon de créer une pièce, et j'aime que travailler avec des données soit tout au sujet de la génération de systèmes. Vous construisez cet ensemble particulier de règles pour la façon dont quelque chose devrait être représenté, puis vous plug-in données et il sort sous une forme qui suit ces règles. Il est facile de modifier et de modifier les règles et d'obtenir résultats différents ou de changer les données et de trouver quelque chose de complètement différent. Le traitement est un langage ou une extension de Java et visait à encourager les concepteurs à travailler davantage avec le code. Apprendre à coder et à traiter m'a vraiment changé en tant que concepteur. Ça m'a libéré de faire beaucoup de choses que je ne pouvais jamais faire à la main auparavant. Donc, je suis heureux d'approfondir le traitement et de fournir cette boîte à outils de pièces afin que les autres concepteurs puissent utiliser le traitement plus complètement et avoir une référence pour construire leurs propres applications. J' ai pris toutes ces pièces que j'ai trouvées au cours des dernières années et les ai mises en un seul endroit dans une boîte à outils. C' est ce que j'aurais vraiment voulu quand je commençais à traiter. L' intention n'est pas de mémoriser tout le code que je montre, mais de l'utiliser comme référence pour plus tard quand vous avez quelque chose en tête. Nous devrions avoir la référence juste là, et vous pouvez saisir ce morceau de code. Si vous avez suivi mon cours précédent sur la génération de cartes avec Processing et Illustrator, c'est un excellent suivi. vaut la peine, pour les concepteurs qui sont intéressés par le code, mais aussi pour les personnes qui pourraient déjà travailler avec le code mais sont plus intéressés à l'utiliser à des fins de conception. Je m'appelle Nicholas Felton. Je suis un concepteur d'informations basé à Brooklyn et je travaille avec des données. 2. Présentation générale: La façon dont j'ai abordé cette classe est de fournir quatre types de croquis différents. Dans un premier temps, nous examinerons différentes façons d'introduire les données dans le traitement. L' ensemble suivant d'esquisses s' articule autour de différentes structures que vous pouvez créer comme des grilles, des lignes ou des compositions radiales. Ensuite, comme avec tout le codage, vous allez rencontrer des bugs. J' ai fourni quelques techniques différentes que j'ai trouvées utiles pour aller à la racine des problèmes et passer à l'étape finale qui est le raffinement. C' est là que nous essayons de rendre les choses plus belles et de les amener à un état polie. Ainsi, Processing est un logiciel open-source, il est libre de télécharger et d'utiliser à n'importe quel but. Vous pouvez l'obtenir ici sur processing.org pour Mac, Windows et Linux. Vous pouvez faire un don si vous souciez de soutenir la fondation et son travail, et ici vous pouvez obtenir les versions les plus récentes. Pour commencer, je vais passer en revue certains des concepts fondamentaux de traitement que vous devriez connaître avant d'aller de l'avant dans cette leçon. J' ai créé un ensemble de fichiers que vous pouvez télécharger à partir de Skillshare, ou des fichiers de données, ou des fichiers structurels, débogage et le raffinement, puis quelques exemples finaux qui rassemblent tout. Donc, à la fin de cela, nous allons faire quelque chose comme ce petit croquis qui regarde toutes les différentes exoplanètes qui ont été découvertes jusqu'à présent et les visualise en utilisant une combinaison de quelques-unes de ces différentes techniques. L' idée de base de cette boîte à outils est que vous pouvez saisir quelque chose comme un importateur CSV combiner cela avec une technique structurelle comme une composition radiale, puis utiliser certains des outils de débogage pour comprendre pourquoi cela ne fonctionne pas ou pour optimiser son fonctionnement, puis enfin appliquer certains de ces raffinements. Comme dans ce cas, utilisant la saturation de la teinte et le mode couleur de la luminosité au lieu de RVB. Donc, je vais avoir quelques exemples différents qui sont similaires, et c'est un autre qui sera dans les exemples définis à la fin, ou enfin cet ensemble de graphiques en courbes. L' idée est que tout cela est juste basé sur petits extraits de code que je vais introduire dans les sections suivantes. Espérons que vous avez une certaine expérience avec le traitement que vous soyez seul ou en prenant mes cours précédents sur le traitement et Illustrator. Je pense qu'il est important pour l'instant de revoir certains des concepts de base afin qu'ils ne nous reviennent pas plus tard alors que nous examinons des idées plus spécifiques. Juste brièvement, Processing, encore une fois, est une application que vous téléchargez à partir du site Web Processing et est composée de ces trois éléments de base différents : l'éditeur où nous allons écrire du code, la console qui écrit ou toute journalisation que nous avons configurée, et enfin la toile qui est où tout le dessin se produit et qui ressemble à ceci. Il y a l'éditeur et la console. Si on l'exécute, la toile apparaît. Le traitement a une zone de configuration et une zone de dessin, et il s'agit donc de deux des principaux types de structures sur lesquelles nous compterons. Il existe des types de variables de base : entiers, flottants et chaînes. Un entier est pour n'importe quel nombre entier, float est pour les nombres décimaux, et une chaîne contient du texte, et ce sont probablement les trois types de variables de base que nous allons utiliser. Un tableau est essentiellement une liste de différents types de données. Donc, comme un tableau de trois nombres serait zéro, un, et deux, et puis nous les abordons dans la parenthèse en mettant un nombre là comme zéro, un, et deux pour accéder à différents morceaux de la liste. Il y a aussi un exemple ici d'un tableau de chaînes comme une liste de personnes. Ceci est vraiment utile pour la visualisation des données. Une fois que nous avons des données dans un format externe, nous voulons généralement les amener dans un tableau où nous pouvons juste itérer à travers les différents éléments et les dessiner à l'écran. Vous pouvez également faire une liste de listes. Encore une fois, tout cela est expliqué un peu plus en profondeur dans la classe de traitement précédente, donc cela devient un peu floue. S' il vous plaît revenir en arrière et rafraîchir. Mais un tableau 2D est fondamentalement une liste de listes. Donc, c'est plus comme une matrice, c'est une chose bidimensionnelle, et commence en fait à ressembler à une feuille de calcul où nous avons des lignes et des colonnes. Ceux-ci sont à nouveau adressés de la même manière que vous pouvez voir ici comme imprimer cette ligne à l'emplacement 0, 0 nous donne le nombre zéro. Pour passer à travers tout cela, nous utilisons une boucle. C' est une boucle for qui va itérer à travers notre tableau et imprimer des choses à l'écran. C' est incroyablement utile et nous l'utiliserons tout au long de l'exemple suivant. Enfin, une fonction essentielle au projet de cartographie que nous avons fait plus tôt est cette fonction appelée carte. Fondamentalement, il faut un seul nombre et le contexte pour cela comme celui-ci initial, qui est une latitude qui boucle entre 180 et 180, puis le mappe simplement à une autre plage de nombres. Dans ce cas, 0 à 400 et ainsi. C' est une fonction qui prend cinq paramètres différents. Le premier étant la valeur, le second étant sa plage native, et une troisième paire de nombres étant la plage cible finale. Enfin, j'ai voulu montrer cette vue d'ensemble imposante mais rassurante du traitement. Donc, sur la page de référence du traitement, ils énumèrent tous ces différents attributs et fonctions qui sont disponibles dans le programme, et je viens de passer en revue et de mettre en évidence ceux que je connais. Donc, alors que je sens que je peux faire la plupart de ce que je veux dans le traitement, vous pouvez voir ici que je n'utilise qu'environ la moitié des différents morceaux de ce programme, et je pense qu'avec une quantité encore plus petite, comme un quart d'entre eux, vous pouvez faire une tonne. Donc, il ne s'agit pas de maîtriser le programme, mais d'apprendre ce dont vous avez besoin pour faire ce que vous voulez. J' espère vous donner beaucoup de ces éléments dans ce cours. 3. Données: Dans cette leçon, nous allons examiner l'importation de données dans Processing. C' est une étape cruciale et la base de toute visualisation à l'aide de l'application. D' après mon expérience, j'ai rencontré trois saveurs différentes de données. Il y a CSV, qui est des valeurs séparées par des virgules, celles-ci sont généralement sorties par des feuilles de calcul et sont incroyablement communes. Il peut également exister en tant que TSV, qui est juste une valeur séparée par des tabulations au lieu d'une valeur séparée par des virgules. Vous pouvez voir dans cette diapositive à quel point le CSV est compact et efficace et c'est probablement le plus facile à utiliser. Mais vous pouvez rencontrer quelques autres formats comme XML ou JSON, ceux-ci sont normalement sortis d'applications ou d' interfaces Web comme l'API Google mapping, il retournera quelque chose dans un format JSON ou XML. Ils peuvent être un peu difficiles à analyser, donc nous allons voir comment les parcourir et obtenir les valeurs dans le même type de format que nous le ferions avec un CSV. Donc, j'ai construit sept petits croquis différents ici pour démontrer certaines des différentes techniques que vous pouvez utiliser pour importer des données. Le premier, nous allons regarder ce petit CSV. C' est une année de mes données d'activité sur la marche, course à pied et le vélo. Donc, l'idée ici est la même que celle que nous avons utilisée dans le mappage avec Illustrator and Processing Project. Vous avez deux variables différentes ici : le CSV qui va apporter les données, puis le split, qui s'appelle MyData. C' est le tableau bidimensionnel dans lequel nous allons mettre des données. Mais fondamentalement, l'idée ici est que nous amenons toutes les données dans un tableau de lignes, le CSV, et nous pouvons imprimer le CSV. Laisse-moi l'apporter. Je vais me débarrasser de celui-là. Vous pouvez juste voir que tout est importé, mais c'est un blob. Ainsi, l'ensemble de commandes suivant dit diviser ceci sur la virgule et l'enregistrer dans ce tableau à deux dimensions. Donc, maintenant vous pouvez voir que c'est beaucoup plus propre, et dans le prochain exercice structurel, vous pouvez l'utiliser pour créer différentes formes. Il existe d'autres façons d'introduire un fichier CSV dans le traitement. Il y a aussi une structure de données de table, et donc celle-ci vous montre comment cela fonctionne. C' est assez similaire à la scission, les résultats sont presque exactement les mêmes. Mais dans celui-ci, vous pouvez adresser chaque colonne par son nom. Donc, si vous apportez vos données sous forme de table, maintenant vous pouvez simplement dire dans le mois de la colonne, je veux obtenir toutes les valeurs. Ou dans l'exécution de la colonne, je veux obtenir toutes les valeurs. Vous devez dire quel genre de variable ils seront. Dans ce cas, les mois vont être des chaînes parce qu'ils sont du texte ou les activités elles-mêmes vont être des nombres décimaux, comme marcher, courir, et cycle. C' est l'itération la plus simple où nous avons juste une pour la boucle où nous saisissons tout, mais nous ne le sauvegardons pas vraiment. Donc, si je veux l'utiliser dans plusieurs parties d'un croquis, il est utile de le mettre dans une variable globale. Si vous vous souvenez, une fois que nous définissons une variable en dehors de la configuration, elle est accessible tout au long de l'esquisse. Donc, ici, quand nous introduisons la table, nous disons que ces conteneurs, ces tableaux de valeurs vont être aussi longs que le nombre de lignes dans le CSV, et alors que nous le traversons, nous sauvegardons simplement chacun. Cela nous permet plus tard dans le croquis d'être en mesure de les aborder à partir de différents endroits sans avoir à les refaire à chaque fois. Ensuite, une autre dernière chose pratique que vous pouvez faire. Dans cet exemple, nous utilisons une fonction appelée append, et cela est vraiment utile lorsque vous ne savez pas combien de temps votre ensemble de données va durer. Dans cet exemple précédent, où nous étions en train de tout enregistrer dans un tableau, nous établissons avant de commencer à remplir nous établissons avant de commencer à remplir le tableau que ce sera un certain ensemble de lignes de long. Donc, nous sommes en train d'établir la taille de ce conteneur. Mais si vous utilisez une API ou peut-être l'un de ces autres types de données qui peuvent être utiles à utiliser append, dans celui-ci, nous disons simplement ajouter un morceau de données à la fin, et continuez à le faire jusqu'à ce qu'il n'y ait plus de données à ajouter. Maintenant, cela peut être plus lent à utiliser, mais si nous le faisons juste une fois dans la configuration, je pense que c'est bon. Donc, je l'utilise tout le temps et vous pouvez voir qu'il est un peu plus compact que l'autre approche. Donc, ce sont quatre façons différentes d'extraire vos données CSV. Maintenant, XML est Extensible Markup Language, et il est très verbeux, il a toutes ces différentes balises qui se répètent encore et encore. Mais ce n'est qu'une partie de certaines données en cours d'exécution que j'ai téléchargées à partir de Strava, et fondamentalement vous avez juste à plonger dans toutes les différentes hiérarchies ici pour extraire les choses. Donc, je n'entrerai pas dans les détails sur la façon dont cela fonctionne, mais si vous avez besoin d'extraire des données d'un XML, ce qui est quelque chose que je fais de temps en temps, ce sont les pièces dont vous aurez besoin. Nous le chargeons, nous retirons quelques enfants, nous remplissons nos tableaux avec des valeurs. Donc, si vous avez besoin de le sortir d'un fichier XML, c'est la façon de le faire. La même chose est vraie pour JSON. Il s'agit d'un format hiérarchique, et le traitement n'est probablement pas la chose la plus native pour le traitement. Mais encore une fois, je vous ai montré comment extraire des données de cet exemple de JSON. C' est juste une question de creuser là-dedans, créer un tableau, et de le parcourir et de tirer des éléments. Le but est juste de l'obtenir dans Processing en tant que tableau et de retirer toutes ces informations de la structure. Si vous avez besoin de JSON, c'est la référence pour le faire ou un exemple de travail, et quelque chose que j'avais cherché désespérément essayant de travailler avec JSON pour la première fois moi-même. Enfin, je vais vous montrer une autre petite technique que je trouve vraiment utile. C' est un ensemble de données que j'ai trouvé qui est tout sur les films sur différentes dystopies et l'année où ils sont sortis, mais vous pouvez voir ces différentes catégories ici. Donc, l'une des premières choses que j'aime faire en travaillant avec un morceau de données est de comprendre, eh bien, quelle est la catégorie la plus populaire ? Combien y en a-t-il ? Le traitement a un type de données. C' est vraiment utile pour faire ça. Ça s'appelle le dictionnaire. Dans ce cas, il s'agit d'un IntDict ou d'un dictionnaire d'entiers. Un dictionnaire est une paire de valeurs, comme une clé et une valeur. Ce que cela nous permet de faire est de tirer dans cet ensemble de données, j'utilise un CSV et l'approche table pour l'introduire, puis j'ai mis en place ce dictionnaire, et j'ajoute juste chacune de ces phrases au dictionnaire une par une. Donc, ici, où je traverse toutes les lignes à l'index que j'ai mis en place au-dessus de mon index, j'ajoute juste la valeur de cette ligne ici, qui est le nom du type de dystopie et donne une valeur de un. Donc, cela crée fondamentalement une liste de toutes les différentes valeurs et m'amène à cette façon vraiment utile de regarder les données, qui me dit que le « Governement/Social » sont le type le plus répandu de dystopie, tandis que « Alien contrôlé » seulement a huit, est le moins commun. Donc, vous pouvez le faire pour un ensemble de réglages et de comprendre quels mots sont le plus utilisés en elle. En bas ici, je suis juste en train de le trier en fonction du nombre de fois que chaque mot apparaît, puis de l'enregistrer dans un tableau de clés et un tableau de leurs valeurs. Donc, j'espère que cet ensemble de références pour travailler avec des données est utile, et si vous rencontrez certains de ces types de données plus exotiques, vous n'aurez pas trop peur car vous avez une référence pour extraire les données pertinentes. 4. Structure: Le chapitre suivant porte sur les différentes structures. Je vous ai donné six types de base et beaucoup d'itérations différentes d'entre eux. commençant par des lignes, puis en transformant cela en une grille, travaillant avec des formes concentriques. Nous avons quelques exemples différents de la façon de faire des lignes, fois droites et courbes, quelques exemples radiaux, et enfin, jouer avec les coordonnées. Donc, le premier est le plus simple. C' est juste en utilisant quelques rectangles pour dessiner quelques lignes et je vais vous montrer ce que cela génère. Donc, nous avons cinq barres différentes ici. Je suis en train de mettre en place des valeurs communes en haut, ce seront des valeurs globales. J' aime généralement avoir une marge sur mes croquis pour que les choses ne soient pas serrées sur le côté. Donc, si vous faites ce zéro, vous verrez que ce n'est pas aussi agréable que je lui donne 50 parce que j'utilise ces valeurs tout au long pour tamponner les rectangles sur les bords et entre les uns les autres. Nous sommes fondamentalement dans la majeure partie de celui-ci, nous faisons juste une boucle ici qui dit, pour le nombre de rectangles que j'ai spécifié, qui est cinq, ne les décrivez pas. Donnez-leur un remplissage d'un gris, puis dessinez-les à partir d'une marge qui est de 50. Au fur et à mesure que nous traversons, cela nous passera de zéro à quatre parce qu'il doit être moins que rectcount. Donc, nous voulons que les tailles de rectangle augmentent et nous avons aussi besoin de la marge pour augmenter. Donc, c'est la position de départ du rectangle et puis il y aura toujours la largeur moins le rembourrage sur les bords, les marges, large et cette valeur que j'ai spécifiée de RectSize haut. Donc, c'est une façon simple de dessiner un tas de rectangles à l'écran. En arrivant à la suivante, la prochaine itération de ceci est ou si nous voulons un tas d'histogrammes, quelques petits graphiques à barres, mais plusieurs d'entre eux. Pour cela, la pièce critique de ceci est que vous avez besoin de deux boucles. Le premier que nous avons déjà fait, qui est combien de rectangles verticalement il y aura, puis une boucle horizontale. Donc, c'est pour le nombre de bars que nous avons mis en place qui est 20. Nous voulons passer à travers cela horizontalement. Donc, quand je lance ça, vous pouvez voir qu'on a encore ces cinq zones verticales, mais à l'intérieur, on a 20 barres verticales. Chacun d'entre eux obtient une valeur d'ici avec cette fonction aléatoire qui dit, je veux que mes barres soient entre la moitié de mon rectSize ou la moitié de 100 et 100. Une autre bonne chose que vous pouvez faire est juste de faire une simple grille de rectangles. Donc, c'est la même idée. Nous avons une boucle imbriquée. Donc, nous avons le premier qui dessine verticalement, et l'autre qui dessine horizontalement. On dessine juste 25 rectangles différents dans ce morceau de code. On peut faire la même chose avec des ellipses. Nous avons encore notre code imbriqué. Maintenant, on a 25 ellipses sur 25. La chose principale ici est que nous utilisons juste ellipse pour dessiner et nous devons ajouter ce seul morceau de code qui dit, « Dessinez ceci du coin plutôt que du centre. » Chaque cercle est dessiné à partir du coin supérieur gauche, comme les rectangles l'ont fait. Celui-ci est un peu plus intéressant. Donc, si nous voulons ajouter des données à cela mais avoir notre échelle rectangulaire à partir du centre, nous devons changer un petit peu les choses. Auparavant, ils dessinaient depuis le coin supérieur gauche. Donc, ici, en spécifiant comme où les cercles où j'ai fait un coin, je dois spécifier pour les rectangles, le dessiner du centre. Vous pouvez voir que lorsque je passe la souris, ils changent de taille. Eh bien, c'est parce que au lieu de définir le rectSize ici et toujours rester avec elle, je remplace cela plus tard en disant utiliser la position de la souris pour définir la taille du rectangle. Nous allons utiliser cette commande MouseX beaucoup parce qu'elle est vraiment utile pour ajuster vos graphiques et voir comment différentes valeurs les affectent. Je sais que cette structure prendra valeurs différentes et me permettra d'avoir des rectangles de taille différente parce que, je peux lui donner la valeur MouseX. Dans cet exemple, nous dessinons juste un tas de carrés concentriques. Donc, celui-ci n'est qu'une seule boucle pour le nombre de rectangles que je veux. Dessinez cinq rectangles, nous commençons par un qui fait 400 par 400 ici, puis juste décaler chacun par 50. Donc, cela est fait en utilisant i ou un compteur dans la boucle for pour multiplier la taille du décalage, de sorte qu'ils deviennent de plus en plus grands. Nous avons un cercle ici, un cercle aussi. C' est la même idée de base en utilisant ce décalage pour les cultiver à chaque fois. Il existe plusieurs façons de dessiner des lignes dans le traitement. Le plus simple est un ensemble de lignes droites. Fondamentalement, la façon dont vous faites cela est que c'est essentiellement trois parties. Nous avons ce BeginShape, qui dit que je veux commencer à dessiner une ligne, puis pour chaque point, nous définissons un sommet, puis utilisons EndShape pour le fermer. Donc, lorsque nous traversons la boucle for, nous prenons nos points aléatoires pour la hauteur et les points espacés uniformément pour la largeur et ajoutons un sommet à chaque emplacement. Il existe également des moyens simples de faire des lignes courbes dans le traitement. Donc, au lieu d'utiliser ce sommet normal, nous utilisons juste un sommet incurvé. Maintenant, vous pouvez voir comment le graphique a obtenu la sensation la plus lisse. C' est juste en utilisant essentiellement un point CurveVertex au lieu du sommet normal. Vous devez également ajouter ces supplémentaires un juste après BeginShape et un juste après EndShape. Mais il y a un petit problème avec ces lignes courbes. C' est qu'ils sont bien pour dessiner normalement, mais, ils ne sont pas les meilleurs pour dessiner des données parce que, comme vous le verrez, j'ai dessiné des cercles rouges ici pour chaque point de mon jeu de données, et vous pouvez voir comment la ligne atteint un peu au-dessus du là, puis cette pièce va un peu en dessous et un peu en dessous ici. Donc, c'est en fait exagérer les données d'une manière que nous ne voulons pas. Le jeu de données n'est pas aussi élevé, mais c'est ce qu'il représente. Donc, je les utiliserais là où cela a du sens, mais peut-être pour dessiner des données, ce n'est pas le meilleur. Cela pourrait vous conduire soit à utiliser simplement des lignes droites, soit à utiliser la courbe de Bézier. Maintenant, c'est le dernier type de ligne que je vais vous montrer. Mais c'est un peu plus compliqué. Ce n'est qu'un seul exemple d'une courbe. Ce n'est pas le plus intuitif. Fondamentalement, vous devez configurer les points de contrôle pour tout cela avec celui-ci BezierVertex. Donc, maintenant, il faut six points différents pour le dessiner. Mais j'espère que vous serez réconforté en sachant que chaque fois que j'essaie de faire ça, je foirai. Il me faut environ 10 ou 15 minutes de débogage pour obtenir une belle courbe de Bézier pour fonctionner, c'est pourquoi je suis très heureux d'avoir maintenant cet exemple simple où tout fonctionne et vous pouvez voir comment brancher les bonnes valeurs. J' utilise MouSex ici pour contrôler ces poignées pour ajuster la tension. Donc, vous pouvez juste prendre ce morceau ici. La courbe de bézier qui commence par BeginShape et se termine par EndShape, et met vos valeurs, et c'est ce que je vais utiliser à partir de maintenant. Si vous avez des courbes que vous voulez faire, j'espère que vous allez ramasser ce morceau de code aussi. Se déplaçant sur des structures radiales. C' est un simple qui met juste un tas de cercles dans un cercle. Maintenant, j'utilise à la fois MouSex et MouseY pour contrôler différents paramètres ici. Donc, j'ai décidé que je veux que le nombre de formes soit déterminé par un dixième de MouSex et que la taille de la forme soit déterminée par un dixième de MouseY. Donc, nous allons tout le chemin vers la gauche. Je reste avec un cercle et je peux le rendre plus grand ou plus petit en allant de haut en bas, et je peux ajouter plus de cercles en allant à gauche et à droite. Considérez cela comme une surface sur laquelle vous pouvez facilement ajouter des données, comme avec les courbes et avec toutes les formes précédentes. Nous pouvons aussi le faire avec des lignes. Encore une fois, c'est un autre ensemble de formules que j'ai toujours à google quand j'utilise juste pour déterminer quelles sont les positions X et les positions Y des points de terminaison de ces lignes. On peut voir qu'il y a de la géométrie là-dedans, on utilise des sinus et des cosinus. Bu, l'idée ici n'est pas de se souvenir de ces trucs pour les mémoriser, mais d'avoir une ressource pour y revenir et le faire fonctionner quand vous en avez besoin. On peut faire la même chose avec des rectangles. Nous voulons que les rectangles sortent du centre, ici vous pouvez voir le code qui le fait. Mais, il y a un petit problème ici, c'est que, si nous en avons quatre, ils ne s'alignent pas précisément, ils ne sont pas complètement centrés. C' est un petit défaut avec la façon dont j'ai mis en place. Donc, je vous ai donné un meilleur exemple ici. Ce Rectoffset radial. Donc, pour que tous nos rectangles dessinent parfaitement centrés, j'ai cet autre morceau de code. Celui-ci utilise une nouvelle chose. C' est pour faire des transformations. C' est fondamentalement si vous voulez décaler quelque chose ou le faire pivoter, vous pouvez créer un contexte pour cela en utilisant PushMatrix. Cela dit, « Tout après le début de PushMatrix, je veux qu'il soit traduit ou tourné ou mis à l'échelle, puis je veux que les transformateurs s' arrêtent quand je mets ce morceau de code PopMatrix ici. » Donc, au début, et je peux désactiver l'un de ces pour que vous puissiez voir comment ça marche. Si j'utilise seulement, ou je vais les éteindre les deux en fait. Donc, je n'ai rien ici, vous pouvez juste voir le haut de ce rectangle bouger. C' est parce que tous mes différents rectangles dessinent les uns sur les autres. Maintenant, si j'active la traduction de rotation, maintenant, ils tournent tous, mais ils sont centrés autour du point zéro zéro ici, c'est là que commencent ces traductions et rotations. Donc, une fois que j'allume traduire, maintenant je le déplace sur la moitié de la largeur de la toile et la moitié de la hauteur de la toile. Vous pouvez voir maintenant que c'est parfaitement là où je le veux. Nous pouvons utiliser la même technique pour le texte qui peut être vraiment utile si vous voulez étiqueter ces rectangles. Eh bien, comment obtenez-vous que le texte ne soit pas en ligne droite ? Nous utilisons la même approche. C' est cette PushMatrix, une PopMatrix pour obtenir un tas de ces mots. Ceci est inspiré par Bart Simpson. Quelque chose que vous pourriez avoir à écrire sur le tableau des centaines de fois. Enfin, il suffit de regarder quelques coordonnées, donc cela revient à ce que nous faisions avec les cartes. Si vous voulez mettre un ensemble de points aléatoires sur le canevas. Nous retournons à notre ami, la fonction cartographique. Donc, prenons ces ensembles de points que j'ai générés. Ce ne sont que des aléatoires et les cartographier sur la toile. Je connais leurs valeurs de 0-100 et je veux qu'elles soient traduites entre marge et marge moins. Donc, juste dans une belle partie de la toile ici que je veux utiliser. Enfin, si en plus d'avoir simplement des coordonnées, vous voulez les connecter. J' ai fait ce petit croquis qui combine ces cercles et les lignes courbes pour générer un chemin ici et je les numérote aussi juste pour que je puisse comprendre ce qui se passe. Ils commencent à zéro et finissent à neuf. Dans ce cas, peu importe si les lignes dépassent les points car, il s'agit simplement d'un chemin les reliant. Ce n'est plus un graphique. Donc, j'espère que c'est une bonne façon de démarrer vos conceptions avec un ensemble de compositions préemballées. Une fois que vous avez récupéré l'un de nos petits modules d'importation à partir de CSV, XML ou JSON , vous le mettez ici, remplissez un tableau, puis utilisez l'une de ces compositions pour générer une visualisation. 5. Débogage: Dans cette leçon, nous allons nous occuper des bugs. Ce sont une partie inévitable de l'écriture de code et que beaucoup des meilleurs programmeurs dans le genre de cire philosophique au sujet. J' ai trouvé ces deux citations que j'aime. Un, par le créateur de BitTorrent qui dit que, "90% du codage est le débogage. Les 10% restants écrivent des bogues. » L' autre par l'un des ingénieurs qui Flipboard qui dit que, « Déboguer, c'est comme être le détective dans un film criminel où vous êtes aussi le meurtrier. » Je pense que cela fait partie de la satisfaction unique de travailler avec du code aussi est que, lorsque vous faites fonctionner ces choses, vous avez un peu persévéré à travers vos propres obstacles et obstacles que vous mettez sur votre chemin pour obtenir cette chose fonctionnement. cours de route, j'ai ramassé quelques techniques que j'ai trouvées utiles pour éviter de créer des bogues. Parce qu'il y a un ensemble de code que vous allez écrire. Ceci est valide. Le traitement dit que c'est un bon code, c'est logique, mais il ne fait pas exactement ce que vous voulez. Alors, comment obtenez-vous à la fois un code valide qui fonctionne comme prévu. Commençons par juste une sorte de bonnes pratiques pour écrire du code. L' un est de tirer toute votre constante. Donc, chaque fois que vous avez un seul numéro dans le fichier, comme cinq ou 10, me donne les résultats que je veux. Essayez de le retirer dans une variable. Dans ce cas, nous avons eu ce premier exemple qui consiste à dessiner une ellipse à la position X et Y, mais je veux que les données soient mises à l'échelle 10x. Eh bien, le problème avec ça, c'est que 10 apparaît deux fois ici. Vous pouvez passer par et changer l'un d'entre eux, mais vous ne changez pas l'autre, ou dire, vous utilisez cette constante dans cinq endroits différents ou six endroits différents. Allez-vous les trouver tous à chaque fois que vous voulez le changer ? Je pense que la meilleure pratique est de configurer une variable pour cela, comme une échelle épave et juste l'utiliser tout au long. Maintenant, vous venez de changer les chiffres et peut conduire à moins de problèmes. En termes de nommage des variables, il s'agit d'un problème persistant dans le codage. Vous voulez que les choses soient rapides et efficaces, mais aussi descriptives, afin que vous sachiez ce qu'elles font. J' ai tendance à éviter ces variables d'une lettre que vous pouvez voir parfois dans le code d'autres personnes. Mais, je pense qu'il vaut mieux être plus explicite tout en essayant de rester concis avec vos noms de variables. Cela vous aidera à le comprendre plus tard lorsque vous y reviendrez et aidera les autres à comprendre votre code également. Un adage grand et très commun pour le codage est, ne vous répétez pas. Donc, chaque fois que vous vous voyez écrire le même morceau de code deux fois, c'est un peu inefficace mais peut conduire à des erreurs. Dans cet exemple, nous avons cette petite formule pour obtenir la surface du diamètre d'un cercle, compte tenu de la zone. Mais parce qu'une ellipse a besoin à la fois de sa hauteur et de sa largeur, je l'utilise deux fois. Tout comme l'utilisation d'un facteur d'échelle ou d'une autre constante plusieurs fois, cela peut être une recette pour des problèmes si vous ne le copiez pas correctement, ou si vous changez une petite chose dedans. Il est préférable de le retirer et de le faire sa propre ligne où il n'apparaît qu'une seule fois, et la façon encore meilleure mais légèrement plus avancée de le faire est de créer une fonction. Cela vous montre comment vous pouvez créer une fonction qui calculera le diamètre d' un cercle qui devient juste un morceau de code qui se trouve sous la configuration et les régions de dessin. Ensuite, chaque fois que je veux obtenir un diamètre de cercle, je l'envoie juste à la zone, et cela me redonnera la valeur. Une des bonnes choses que le traitement fait est que, il va automatiquement incruster votre code avant vous. Donc, si vous appuyez sur la commande T sur le clavier, il faudra quelque chose comme le code non formaté sur la gauche et il suffit d'insérer tout. C' est une pratique utile que je fais tout le temps, et cela aide à identifier où il y aura des problèmes, où un ensemble de parenthèses ne sont pas fermées ou vous avez d'autres problèmes avec des parenthèses similaires. Lorsque vous revenez en arrière et affinez votre code, il est utile de le parcourir et de vous assurer que tout ce qui est abandonné, comme les variables ou les lignes de code, vous n'utilisez pas être retiré. Nous travaillons tous très vite et essayons différentes choses, mais comme des morceaux de code deviennent orphelins, il est bon de les retirer et de garder les choses propres. Donc, maintenant, nous allons regarder quelques autres croquis qui montrent certaines de ces techniques de débogage et des moyens que j'ai trouvés utiles pour trouver les problèmes dans mon code. Une erreur que vous rencontrerez continuellement et que je vois sur une base quotidienne est celui-ci, index de tableau hors limites. Cela signifie simplement que vous avez essayé d'accéder à une donnée qui n'existait pas. Donc, dans ce cas, j'ai un tableau avec huit valeurs dedans, et dans ma boucle quatre, j'essaie d'accéder à chacune de ces valeurs différentes. Mais ici, le problème est que, j'ai dit que je sois inférieur ou égal à la longueur de mon jeu de marqueurs. Ça veut dire qu'il essaie de passer à neuf. Si je supprime la partie égale de celui-ci et l'exécute à nouveau, ce sera bien. Maintenant, l'une des façons de déboguer cela peut être, d'utiliser la fonction d'impression. Ce croquis va me donner la même erreur. Qu' il y a une exception hors limites. Mais, en utilisant l'impression lean ici, j'imprime chaque fois que cela fonctionne jusqu'à ce que cela ne fonctionne pas. Donc, je peux voir qu'avec quand je suis égal à sept, il obtient la dernière valeur de mon tableau, qui est 700, mais il essaie clairement d'aller plus loin. C' est une indication que je dépasse la taille de mes données, et que la suppression de cette marque égale devrait faire fonctionner les choses parfaitement. Une autre chose qui peut être utile et parfois cela fonctionne mais qui ne dessine pas ce que vous attendiez. Donc, dans ce cas, j'essaie de dessiner huit cercles différents, mais je n'en vois qu'un. Une des choses que je peux utiliser parfois est utiliser l'opacité. Je peux soit juste définir l'opacité à une autre valeur comme 120, et cela peut être utile pour révéler ce qui se passe. Dans ce cas, que tous mes cercles dessinent mais qu'ils dessinent juste les uns sur les autres, ou une autre chose que j'aime faire est d'utiliser la souris X. Encore une fois, cela va me donner toutes les valeurs de ma position de souris et permettez-moi de comprendre ce qui se passe. Dans le cas de transparence, une valeur fixe est probablement bien, mais ce que j'aime à ce sujet, c'est que, la souris X va me donner des valeurs que je comprends. Je sais qu'à gauche, ce sera zéro. Sur la droite, il va être 800 dans ce cas, et donc je peux les utiliser pour déterminer si un système fonctionne comme je l'ai prévu. Une autre façon de résoudre ce problème avec les marqueurs dessinant les uns sur les autres est d' utiliser un trait au lieu de la transparence. Donc ici, plutôt que de leur donner tous les remplissages, je peux voir que les cercles se dessinent les uns sur les autres en leur donnant un coup. Pour les compositions plus compliquées, je trouve utile de commencer à annoter le croquis. Ce ne sont peut-être pas des choses que je voudrais voir dans le croquis fini, mais elles seront très utiles pour comprendre ce qui se passe. Donc, ici, j'ai ressuscité notre courbe de traitement précédente, mais je montre les points de contrôle maintenant et les étiqueter avec du texte qui a leurs valeurs, ainsi que la tension sur ces points de contrôle. Cela m'aide à comprendre exactement ce qui se passe dans le croquis, et vous pouvez voir ici que j'ai étiqueté des choses, sorte qu'une fois que je dois travailler comme je le veux, je peux retirer tous ces éléments que je ne veux pas. Comme supprimer les points de contrôle. Supprimez le texte qui étiquette les valeurs que je vois. Cela peut être vraiment utile pour comprendre comment une esquisse fonctionne. Ce problème de précision flottante est quelque chose que je garantis entraînera certains d'entre vous au fur et à mesure que vous commencez à utiliser le traitement. C' est une sorte d'occurrence courante où vous voulez juste répartir uniformément un ensemble de points, lignes ou de rectangles sur l'écran. Vous pouvez voir dans cet exemple haut, cela fonctionne presque. Ces points se répartissent presque entièrement uniformément sur l'écran. Sur la partie inférieure, ces deux exemples me montrent comment cela devrait fonctionner. Le problème ici est que, lorsque je demande au traitement de me dire à quel point ces points devraient être séparés, la bonne réponse est de 33 et un troisième pixels. La réponse incorrecte est 33, ce qui est presque correct. Le problème ici est que, nous avons besoin d'un flotteur pour maintenir l'espacement de nos éléments. Il s'agit d'un nombre décimal. Mais, si nous faisons tous les calculs avec un nombre entier, comme dans ce premier exemple, donc la largeur est un nombre entier. Deux est un nombre entier, c'est un entier. Marge est un nombre entier et le nombre d'éléments, ce sont tous des entiers. Même si nous disons que nous voulons sauver un nombre décimal, tout le calcul qu'il fait est avec des nombres entiers, c'est pourquoi nous obtenons 33 à la fin. Tout ce que vous avez à faire est de transformer un de ces nombres en un flotteur, comme au lieu de multiplier la marge par deux, nous avons multiplié par 2,0. Ou vous pouvez dire, « Je veux que le nombre d'éléments soit un flotteur en mettant ce code float autour d'elle. » Maintenant, quand le calcul sera terminé, ce sera précis, et nous obtiendrons la valeur correcte ici de 33 et un troisième pixels. Si vos esquisses fonctionnent mais que les choses ne sont pas tout à fait alignées, recherchez ces problèmes de précision flottante qui pourraient vous faire trébucher. Le dernier exemple que je vais montrer concerne la fréquence d'images des croquis. Certains de ceux que je vous ai montrés sont animés, où les boucles de tirage vont encore et encore et encore. Vous pourriez avoir quelque chose où ça commence à se sentir comme ça, où ça commence à s'enliser et les choses deviennent lentes. Vous pouvez voir que j'ai un peu de code ici en haut, ce qui me dit combien d'images par seconde ce dessin et combien d'images se sont écoulées. Si vous avez l'impression qu'il ne fonctionne pas à 60 images par seconde, essayez de mettre cette seule ligne en haut de votre code. Donc, cela vous indiquera les images par seconde, et alors que vous essayez différentes choses, vous verrez l'impact de votre fréquence d'images et si cela vous aide. Ce morceau de code a été intentionnellement écrit pour enfoncer le croquis, sorte que vous pouvez le voir tomber de 40 à 20 à 10 images par seconde. Donc, je pense que ce sont les tidbits que j'ai, conseils pour le débogage, et nous pouvons passer à l'étape finale, qui va être polie. Si ces conseils n'ont pas été suffisants pour résoudre un problème que vous pourriez avoir en plus de publier sur la page du projet sur Skillshare, vous pouvez également accéder aux forums sur le traitement. Il y a une communauté vraiment dynamique là-bas de gens qui sont excités d'aider les novices, et je sais que c'est le premier endroit où je vais aller chercher si quelqu'un avait le même problème que j'ai déjà. Vous pouvez rechercher dans la petite barre de recherche, ou aller sur le forum lui-même et commencer à rechercher soit l'avertissement que vous recevez, soit la chose que vous essayez de faire qui ne fonctionne pas. 6. Peaufiner: En passant, j'aimerais partager un ensemble de différents raffinements ; façon de peaufiner votre croquis pour que les choses soient encore mieux. abord, nous utilisons principalement des lignes, des cercles et des rectangles dans nos esquisses. Mais il y a quelques autres types de formes disponibles dans le traitement. Il y a des triangles et des arcs. Cette esquisse illustre quelques autres formes qui peuvent être utiles pour la visualisation des données. En plus des rectangles et des cercles, triangles sont un excellent moyen de représenter les montants, ainsi que les arcs, qui ne sont que des sections de cercles. Dans ces esquisses précédentes, nous venons d'utiliser le type par défaut dans Processing, mais ce qui est agréable, c'est que vous pouvez également charger n'importe quelle police de caractères à partir de votre machine. Dans ce cas, nous chargeons Georgia et enregistrons un PDF avec la sortie. Donc, cela va avoir un texte esquissé. Voici notre PDF. Un bon vecteur, croustillant, type personnalisé. Dans Processing, si vous voulez comprendre comment nommer une police, comme ici j'utilise Georgia, j'utilise ceci. Je vais créer la police. Vous n'avez pas besoin de le créer, mais vous pouvez simplement consulter votre liste de polices de caractères installées. Aujourd'hui, je veux utiliser Calibre-Black. Je vois qu'il est appelé Calibre-Black. Je n'ai pas besoin de la taille elle-même. Donc, je vais annuler et changer Georgia en Calibre-Black, puis il va charger la police et maintenant j'ai un joli morceau de type personnalisé. Dans cet exemple, la police que j' utilisais était tout décrite, mais il peut être utile d'avoir aussi du texte en direct. Donc, cela signifie que si je l'apporte dans un illustrateur, je pourrai l'éditer. Vous pouvez voir ici que je ne peux pas l'éditer, ce sont juste des formes. Mais, si nous utilisons ce petit ajout au code, ce modèle de mode texte, cela signifiera que lorsque nous exécutons le code. Le PDF qu'il produit, ne sera pas décrit. Quand je l'apporte dans Illustrator, je peux l'éditer, je peux changer la police de caractères, et c'est vraiment utile pour manipuler la sortie de Processing. Un autre petit morceau que je n'ai pas mentionné est qu'avec les rectangles, vous pouvez leur donner un quatrième paramètre. Ainsi, en plus de leur emplacement X et Y et de leur hauteur intérieure, vous pouvez également leur donner un rayon de coin. Donc, dans ce croquis, j'ai appliqué cela à la souris x. Donc, maintenant je sais si c'est une valeur très faible et je l'impression dans la console. C' est à quoi ressemble le rayon de trois pixels par rapport à un rayon de 32 pixels par rapport à près de 70. Donc, je peux passer par ici, trouver la valeur que j'aime, et ensuite dire, si c'est 14, et alors je peux juste plop ça et l'avoir statique. Il y a quelques modes de couleur différents qui sont également disponibles dans le traitement, donc RVB est un mode standard et vous n'avez pas vraiment besoin de le définir. Cela arrive juste par défaut. Mais normalement, les couleurs sont spécifiées de 0 à 255. En mettant un nombre ici après le mode couleur, vous pouvez dire, « Je veux que toutes mes couleurs existent sur une échelle de 0 à 100 ». RVB est génial mais il n'y a pas de différence dans les couleurs qu'il peut représenter par rapport cet autre mode couleur saturation et luminosité. Mais, du point de vue des données, il est plus facile de manipuler les couleurs et saturation de la teinte et de la luminosité que dans notre RVB. Donc, il s'agit d'une petite visite à travers l'espace colorimétrique RVB. Vous pouvez voir que j'ai je pense que c'est rouge et vert qui va le long de ces deux axes et que je déplace la souris, le canal bleu est ajouté en plus. Donc, vous pouvez voir qu'il y a beaucoup de bonnes couleurs ici, mais elles sont réparties autour de l'espace colorimétrique, donc peut être plus difficile d'y accéder, c'est pourquoi vous pouvez simplement mettre des valeurs statiques. Alors qu'avec la saturation et la luminosité de la teinte, vous contrôlez ces qualités fixes de la couleur. Donc, la teinte n'est pas une dimension, comme elle est saturée. Il y a une autre dimension et V ou valeur est la dernière. Donc ici, vous pouvez voir que j'ai toutes ces bonnes couleurs vraiment vives qui existent simultanément. Cela se déplace à travers l'espace colorimétrique avec pleine saturation et pleine luminosité et je peux réduire la luminosité et ils sont toujours emballés ensemble. Donc, je peux juste définir la valeur de saturation et de luminosité , puis appliquer la teinte à un morceau de données, ou je peux dire que je veux que la saturation de ceci s'applique à un morceau de données. Le traitement produira également un certain nombre de formats d'image différents. Ceci est l'export intégré, vous permettra d'enregistrer des trames en tant que PNG, JPG, TGA ou TIS et vous le faites simplement en changeant le suffixe ici dans le morceau de code SaveFrame. Je vous ai également montré une belle façon de pouvoir exécuter un croquis avec plusieurs images. Vous pouvez soit utiliser cette fonction ici la fonction « void KeyPressed » pour pouvoir appuyer sur une touche du clavier et enregistrer un cadre, soit utiliser la souris pressée. Donc, vous avez beaucoup de paramètres et vous moduler l'esquisse. Une fois que vous l'obtenez à un endroit que vous aimez, disons que vous arrondissez les coins basés sur MouSex, alors vous pouvez simplement cliquer sur le bouton et enregistrer la sortie. Il en va de même pour les PDF. Nous avons besoin de quelques pièces différentes, nous devons importer le traitement ou la bibliothèque PDF de traitement initialement. Ensuite, nous avons juste un morceau qui démarre le processus d' enregistrement si enregistrement et un morceau qui termine le processus d'enregistrement. Encore une fois, j'ai inclus deux fonctions ici, sorte qu'il n'est pas d'enregistrer un PDF sur chaque image. Juste au moment où vous le souhaitez, vous pouvez cliquer sur le bouton de la souris ou appuyer sur P sur le clavier et il enregistrera ces images pour vous. Donc, je trouve ça très utile. Ils ne veulent généralement pas être sauvegardés dans un PDF tout le temps, mais c'est agréable de l'avoir sur les claviers, sorte que lorsque vous trouvez quelque chose de sympa, vous pouvez l'enregistrer. Même si je travaille généralement avec des données, il peut être utile d'avoir un composant aléatoire parfois. Une des belles choses que j'ai découvertes est que même si aléatoire va normalement être différent chaque fois que vous l'utilisez, vous pouvez mettre cette ligne de code dans et appeler RandomSeed et juste lui donner un nombre fixe. Cela signifie que chaque fois que vous exécutez l'esquisse, vous obtiendrez la même sortie aléatoire. Donc, même si c'est un à chaque fois que je l'exécute, ces points sont dans la même position. Mais disons, je le change à deux, maintenant ils sont dans une position différente, mais il sera cohérent chaque fois que je l'exécute avec RandomSeed comme deux. Donc, disons que si vous voulez l'utiliser pour les couleurs mais que vous trouvez un bel ensemble de couleurs aléatoires qui fonctionne, il est bon de pouvoir le verrouiller en utilisant RandomSeed. Il est agréable d'avoir le contrôle sur ce qui est étiqueté parfois, surtout avec l'ensemble de Big Data. Donc, dans ce cas, je veux connaître la valeur de ces cercles et nous le faisons de deux façons différentes. On pourrait simplement jouer avec la souris ici et comprendre, où est le seuil où ces nombres commencent à devenir trop gros pour s'adapter ? Donc, il semble quand je souris autour qu'une fois que je suis en dessous de 20, ils commencent à s'étendre en dehors des cercles. Donc, en ce moment, j'utilise cette instruction conditionnelle qui dit, si la valeur de l'ellipse est supérieure à MouseX, alors dessinez-la. Ou en utilisant ces deux tuyaux, cela signifie que si cette autre condition est remplie, c'est-à-dire si cette valeur est supérieure à mon seuil d'étiquette le rejette à 45. L' un ou l'autre d'entre eux entraînera l'affichage des étiquettes. Donc, si je l'enlève, et que je l' ai sur MouSex, je peux trouver l'endroit où je suis à l'aise avec ça. Donc, peut-être tout ce qui est au-dessus de 30. Je ne veux pas être étiqueté et puis, je peux changer mon seuil d'étiquette à 30 et supprimer le composant MouSex de celui-ci. Donc maintenant, j'étiquette qu'il a plus de 30, est appliqué et c'est une belle façon d'adapter l'étiquetage aux données que vous avez. Enfin, nous allons vouloir montrer quelques chiffres et ceux-ci peuvent ne pas être manipulés de manière native aussi bien que nous les traiterions dans un programme de conception. Donc ici, j'ai cette valeur originale 80,472,65. Maintenant, je n'ai pas vraiment besoin des décimales. Donc, dans l'exemple suivant, je vous montre comment vous pouvez arrondir les décimales simplement en les jetant à un entier. Donc, en mettant ce petit morceau de code autour de mon numéro, ce sera maintenant un nombre entier. Mais cela pourrait paraître mieux si nous mettons une virgule qui serait plus facile à lire. Donc, cet autre morceau de code ici, ce NFC va mettre dans est un formateur de nombre, nf et c est une virgule. Donc, mettez une virgule à la bonne position. Enfin, peut-être que je ne veux même pas cette précision. Je ne veux pas que ce soit 80 472. Donc, en le divisant par 100, puis en faisant ça et en arrondissant ce nombre et en le multipliant par 100, alors je peux changer la précision. Donc, je peux faire ça 10 et 10 et le lancer à nouveau. Cela me donnerait un peu plus de précision ou si je le divise par 1000 et le multiplie par mille, alors ce sera un peu plus rond. Donc, ça s'est arrondi à la place des milliers. Donc, ce sont différentes techniques pour rendre vos chiffres beaucoup mieux, ce qui sera à la fois plus facile à lire et vous obligera à faire un peu moins de travail. Alors, espérons que ces petits extraits sont utiles et aideront vos croquis à mieux paraître. Dans la leçon suivante, nous allons mettre un tas de ces composants ensemble et faire quelques croquis finis. 7. Exemples: Enfin, j'aimerais vous montrer comment toutes ces pièces peuvent se réunir et faire un exemple de traitement fini. Le premier que j'ai est des données d'exoplanète que j'ai téléchargées. exoplanètes sont ces terres potentielles qui ont été trouvées autour d'étoiles en dehors de notre système solaire. Vous pouvez télécharger ces informations gratuitement à partir du web. Tous ces différents paramètres sur les différents corps célestes qui ont été découverts. Donc, je veux les regrouper dans un croquis. Cela commence comme avec les autres exemples en introduisant les données. Donc, nous allons le faire en utilisant l'un des exemples d'importation de table. Je pense que c'est cette approche, « Data_02" Donc ici, nous avons une table que nous utilisons, et nous définissons cette table comme vous pouvez le voir ici avec le nom de notre CSV, et nous lui disons qu'elle a un en-tête. Cela nous permet d'aborder ces différents éléments de données par leurs en-têtes de colonne comme l'ID de ligne ou le nom d'hôte de la planète. Donc, juste apporter ces données, mais ici, vous pouvez voir dans la console comme avant. Voici les données que j'ai apportées, et c'est juste imprimer les morceaux que j'apporte. Donc, je donne à chacun un numéro, un nom, et il a une taille. Dans ce cas, c'est combien de fois la taille de Jupiter, c'est la distance du soleil, et l'UA est l'unité astronomique de la distance entre la Terre et le soleil. Donc, c'est une distance relative. Donc, j'ai téléchargé ces données, je les ai amenées en utilisant mon approche de table CSV. Je mettrais un peu de logique conditionnelle ici parce que toutes les planètes n'ont pas d'informations. Donc, je ne veux pas essayer de dessiner des planètes qui ont un rayon de zéro ou une orbite de zéro. Donc, je dis juste, si le rayon est supérieur zéro et que l'orbite de la planète est supérieure à zéro, alors je veux dessiner ces gars. Donc, je vais évidemment avoir besoin de quelques ellipses pour représenter mes planètes. Donc, c'est la ligne que j'ai créée ici, où ils peuvent avoir une position x et une position y, et la taille d'entre eux sera le rayon de la planète fois la planète d'échelle, constante que j'ai faite, qui est juste trois. Donc, cela rend tout agréable et visible à l'écran. Maintenant, pour calculer leurs positions x et y, j'utilise cette structure que je vous ai montrée un peu plus tôt. Qui sont les cercles radiaux. Donc, c'est là qu'on a un peu de géométrie. Nous utilisons le sinus et le cosinus pour définir l'endroit où ces cercles apparaissent en fonction de l'angle. J' ai un peu de maths ici. C' est essentiellement juste pour les animer comme ils dessinent. Donc, j'utilise la vitesse de l'orbite de la planète pour les mettre au bon endroit. Je veux que chacun d'eux ait une couleur différente basée sur la masse planétaire. Donc ici, je prépare ça, où je cartographie leur masse de zéro à 30. Trente était à peu près le maximum dans l'échelle de saturation de teinte et de luminosité de zéro à 100. Mais je vais juste l'appliquer à la teinte. Donc, lorsque je calcule leur masse, cela se transforme en une valeur comprise entre zéro et 100, et cela définit leur couleur. Donc, si je cours ça maintenant, vous pouvez voir toutes les différentes planètes orbitant à des vitesses différentes. Une chose qui devient immédiatement apparente ici est que, plus ils sont loin de leur étoile qui serait au centre de la toile, plus vite ils commencent à tourner. Une des choses que j'ai ajoutées à ce code est un peu de zoom. Donc, c'est fait avec ce nombre d'images. Donc, même si je supprime cela, et me débarrasser du zoom. Oui. On s'est débarrassés du zoom quand on est coincés dehors. Mais l'un des problèmes que vous pouvez voir ici, est que c'est assez gros comme la fréquence d'images n'est pas très élevée ici. C' est ma perception. Donc, je vais obtenir ce morceau de code à partir du débogage sur les fréquences d'images et juste le coller pour m'assurer que mon intuition est correcte. Vous pouvez voir en haut ici, la fréquence d'images est seulement d'environ sept images par seconde. Donc, il ne dessine pas aussi bien qu'il le pourrait. Donc, ce que j'ai fait dans l'exemple suivant que j'ai ici, c'est que je viens de changer la façon dont les données sont introduites dans le croquis, un peu. Je les ai ouverts tous les deux pour que vous puissiez voir. Dans ce premier exemple, j'utilise une approche plus simple pour extraire toutes les données du CSV, ce qui signifie essentiellement, chaque image que je dessine, je récupère toutes les données de ma table. Donc, c'est je pense que ce qui s'enlise dans le croquis. Je dois juste déplacer ça dans la configuration. Donc, au lieu de rassembler les données sur chaque image, je vais juste le faire une fois quand nous faisons la configuration. Donc, cela nécessite un peu plus de code. Maintenant, pour tout sauver, vous pouvez voir établir les noms de mes variables, et puis je dis, combien de temps ils vont être basés sur le nombre brut de ma table, puis passer par toute la table et les enregistrer tous dans un tableau. Mais maintenant, dans ma boucle de dessin, je peux juste les extraire des données que j'ai déjà établies, et vous pouvez maintenant voir à quel point le croquis est rapide et lisse. J' utilise également des actes de souris comme un moyen de zoomer. Mais pour moi, c'est joli, comme si ça marche plutôt bien. En fait, ce n'est pas beaucoup de code. Je pense que la partie la plus difficile ici est probablement juste comment je calcule la position x et y, pour utiliser ma souris x pour zoomer. Mais sinon, je dirais, presque tout ce que vous voyez ici est inclus dans le kit de pièces que j'ai fourni. Dans cet exemple suivant, j'ai un ensemble de données assez simple. Nous avons 12 lignes avec quatre colonnes chacune. Donc, c'est un total mensuel pour les distances de marche, de course et de vélo, et je vais les amener dans le traitement en utilisant la méthode de la table. Je mets en place mes variables en haut, puis dans la configuration, je suis fondamentalement juste en train d'établir la taille et d'utiliser le reste de ce code pour enregistrer toutes les valeurs dans mes variables. C' était ma première tentative, et je voulais juste voir que les données les unes par rapport aux autres. Je pensais, peut-être qu'il serait logique d'avoir ces lignes émanant du centre pour montrer les distances relatives. Ce que je n'aime pas, c'est que, fondamentalement, une ligne ne peut être qu'environ la moitié de la taille de la toile. Donc, ça ne me donne pas beaucoup de liens avec eux. Je ne fais que dessiner les lignes de marche en ce moment. Mais déjà, j'avais l'impression que cela ne représenterait pas les données d'une manière que je pensais avoir fonctionné si bien. Donc, aller à des choses structurelles que nous regardions, j'ai pensé que peut-être utiliser ces cercles concentriques serait une bonne approche. Donc, utiliser une bague pour chaque mois pourrait être une belle façon de le montrer. Mais au lieu d'utiliser des cercles, je pourrais utiliser quelque chose dont nous avons parlé dans la section polonaise en utilisant certaines de ces différentes formes. Donc, en utilisant un arc pour représenter la longueur. Donc, dans cet exemple suivant pour l'activité, permettez-moi de vous montrer comment je l'ai étendu pour utiliser des arcs dans des cercles concentriques. Donc encore une fois, j'apporte toutes les données ici, et alors que je fais une boucle à travers, je calcule la longueur de la marche par rapport à toute la distance, ce qui est une nouvelle variable que j'ai configurée qui va juste contenir la somme de la marche, et la course, et le cyclisme. Donc, je cartographie la distance de marche par rapport à cette distance totale. Alors je dessine un arc à cette longueur. Donc, je fais cela pour tous les différents types de données et les mettre à l'échelle nouveau par la souris x. je pense qu'avoir la souris x dedans est agréable, car cela peut m'aider à composer jusqu'où je veux que cela soit. Est-ce que je veux que ce soit plus d'un cercle complet ou à quel point est-ce que je veux que cela apparaisse aux étiquettes ? Ce qui serait beaucoup de travail pour rebondir d'avant en arrière, et trouver des facteurs de mise à l'échelle en ayant notre souris x, je peux juste choisir où il semble bon, puis l'enregistrer. Fondamentalement, c'est juste trois arcs que je dessine. Je cartographie chacune des distances, cette distance totale. La seule chose délicate est que je dois commencer un arc où le dernier s'est arrêté, et je pourrais m'assurer que cela fonctionne à nouveau en utilisant une autre technique dont nous avons discuté qui introduisait une certaine transparence. Donc, si la couleur du trait est maintenant légèrement transparente, je peux juste m'assurer que comme vous pouvez le voir ici, qu'elle dessine juste là où le dernier arc s'arrête. Donc, je sais que ces données fonctionnent correctement. Je suppose que si j'allais étendre cela plus loin, je pourrais lui donner une police de caractères personnalisée et ensuite apporter une partie du code pour l'enregistrer en tant que PDF. Dans cet exemple suivant, nous allons prendre ce même ensemble de données sur les distances mensuelles parcourues, parcourues et cyclées, et l'appliquer à certaines courbes de bézier. Donc, celui-ci encore une fois, j'ai la tension réglée sur la souris x. donc, je peux trouver un endroit où je l'aime, et j'apporte les données de la même manière que nous l'avons fait auparavant. Donc, je suis en train de mettre en place ces tableaux et d'obtenir la distance totale, obtenir chacune des distances pour marcher, courir, et faire du vélo, et un nom de mois. Mais ici, vous pouvez voir qu'il y a beaucoup de répétitions. J' ai ramassé ce code bézier, que nous avions plus tôt et ici lignes forme bézier. Donc, c'est ce code pour dessiner chacun des différents types de données a sa propre ligne. Vous pouvez voir qu'il y a beaucoup de répétitions ici. Cela rend la lecture difficile et crée potentiellement des occasions d'erreurs. Donc, dans le raffinement que j'ai fourni, ce que j'ai fait est exactement comme la fonction que je vous ai montrée plus tôt. J' ai pris tout ce morceau de la boucle de dessin, et l'ai transformé en une fonction. Alors maintenant, ce que je veux dessiner ces courbes, au lieu d'avoir à appeler comme écrire le même code trois fois différentes. Juste ici, il est dit, « Cycle Line » Vous pouvez voir que j' utilise juste cette fonction appelée, « Draw_Bezier », et tout ce qu'il a besoin de moi de faire est de l'envoyer aux données et à la couleur que je veux utiliser, que j'ai mis en place ici. J' ai mis en place un tableau de couleurs différentes. Donc, la fonction prend ce tableau de valeurs et la couleur que je l'envoie, et c' est exactement le même code. C' est juste généralisé maintenant en tant que fonction. Donc, à chaque fois que je veux utiliser un bézier, je pourrais prendre ça et l'utiliser plus tard. J' ai également donné à cela une fonction pressée de la souris afin qu'il enregistre un PDF quand il le dessine, et j'ai étiqueté tous les différents points avec leurs valeurs. Alors maintenant, je peux voir combien de kilomètres ont été impliqués ? Quand j'aime la tension que j'ai sur mes courbes, je peux appuyer sur le bouton de la souris, et j'ai maintenant enregistré le PDF, il est là. Je peux l'apporter dans illustrator, ou le placer dans InDesign, ou tout simplement l'imprimer, et faire ce que je veux avec. Voici quelques exemples de la façon dont tous ces différents kits de pièces de la boîte à outils, s' additionnent dans un croquis complet, et certaines des techniques pour essayer lisser le processus d'obtention de ces différents morceaux de code pour travailler ensemble et évoluer vers des esquisses plus avancées que vous pourriez souhaiter concevoir. 8. Conclusion: L' attribution de cette classe consiste à utiliser le traitement pour visualiser un jeu de données, que ce soit l'un de ceux que j'ai fournis ou quelque chose que vous trouviez ou créez vous-même. Quelques jeux de données que j'ai fournis, que je pense sont assez intéressants, l' un sont toutes les dates de naissance en 2003 et combien de personnes sont nées dans chacune de ces années. Il y a quelques modèles intéressants ici que vous pouvez découvrir. Il y en a un autre plus petit. s'agit simplement des températures élevées et basses pour diverses villes des États-Unis. Vous pouvez décider de les géocoder ou simplement tracer les différents modèles dans la température. Alors si vous vous sentez très capable ou aventureux, il y a un CSB de six mégaoctets ici qui parle de chaque arbre à Manhattan. Je pense que c'est un jeu de données vraiment juteux et pourrait conduire à beaucoup de visualisations assez intéressantes. Si vous commencez à vous sentir à l'aise avec tout cela et à la recherche de la prochaine façon de progresser en utilisant le traitement, je recommande tous les outils pédagogiques de Dan Shiffman. Il a un livre qui m'inspire particulièrement, appelé « The Nature of Code », qui traite de beaucoup d'algorithmes naturels pour obtenir de très beaux résultats en utilisant Processing. Ce cours est destiné aux étudiants qui ont un peu de familiarité avec le traitement. Si vous n'êtes pas à l'aise avec certains des concepts de base dont nous avons discuté au départ, veuillez revenir en arrière et essayer la classe Building Maps with Processing and Illustrator qui est une introduction plus pratique à ces concepts de base. J' espère que vous allez expérimenter avec ceux-ci, familiariser avec les différentes pièces de cette boîte à outils, et aussi poster vos expériences et vos questions dans le forum sur Skillshare. 9. Quoi ensuite ?: