Transcripciones
1. Introducción: Creo que, como diseñador, puede ser muy difícil hacer reglas sobre cómo crear una pieza, Y me encanta que trabajar con datos se trate de generar sistemas. Construyes este conjunto particular de reglas para cómo se debe representar algo, y luego enchufas datos y sale en una forma que sigue esas reglas. Es fácil modificar y cambiar las reglas y obtener resultados
diferentes o cambiar los datos y encontrar algo completamente diferente. El procesamiento es un lenguaje o una extensión de Java y tenía la intención de animar a los diseñadores a trabajar más con el código. Aprender a codificar y Procesar realmente me ha cambiado como diseñador. Me ha liberado hacer un montón de cosas que nunca podría hacer a mano antes. Por lo tanto, me emociona profundizar en Processing y proporcionar este kit de herramientas de piezas para que otros diseñadores puedan usar Processing más plenamente y tener una referencia para construir sus propias aplicaciones. He tomado todas estas partes que he encontrado en
los últimos años y las he puesto en un solo lugar en un kit de herramientas. Eso es lo que realmente hubiera querido cuando empezaba con Processing. El propósito no es memorizar todo el código que estoy mostrando, sino usar esto como referencia para más adelante cuando tengas algo en mente. Deberíamos tener la referencia ahí mismo, y puedes agarrar esta pieza de código. Si has tomado mi curso anterior de generación de mapas con Processing e Illustrator, este es un excelente seguimiento al mismo. Cabe, para los diseñadores que están interesados en el código, pero también personas que podrían estar trabajando con código ya pero están más interesadas en usarlo con fines de diseño. Mi nombre es Nicholas Felton. Soy diseñadora de información con sede en Brooklyn y trabajo con datos.
2. Descripción general: El modo en que me he acercado a esta clase es proporcionar cuatro tipos diferentes de bocetos. En un principio, estaremos buscando diferentes formas en las que puedes incorporar datos al procesamiento. El siguiente conjunto de bocetos es todo alrededor de diferentes estructuras que puedes crear como rejillas, o líneas, o composiciones radiales. A continuación, como con toda la codificación, te encontrarás con bugs. He proporcionado un par de técnicas diferentes que he encontrado útiles en cuanto a llegar a la raíz de los problemas y pasar al paso final que es el refinamiento. Aquí es donde estamos tratando de hacer que las cosas se vean mejor y llevarlas a un estado pulido. Por lo tanto, Procesamiento es software de código abierto, es libre de descargar y utilizar para cualquier propósito. Puedes conseguirlo aquí en processing.org para Mac, y Windows, y Linux. Puedes hacer una donación si te importa apoyar a la fundación y su trabajo, y aquí puedes obtener las versiones más recientes. Para empezar, voy a revisar algunos de los conceptos fundamentales de Procesamiento con los que deberías estar familiarizado antes de seguir adelante en esta lección. He creado un conjunto de archivos que puedes descargar desde Skillshare, o archivos de datos, o estructurales, depuración y refinamiento, y luego algunos ejemplos finales que unen todo. Entonces, al final de esto, estaremos haciendo algo así como este pequeño boceto que mira a todos los diferentes exoplanetas que se han descubierto hasta ahora y los
visualiza usando una combinación de algunas de estas diferentes técnicas. La idea básica de este kit de herramientas es que puedes agarrar algo así como un importador de CSV combinar eso con una técnica estructural como una composición radial, luego usar algunas de las herramientas de depuración para
averiguar por qué no funciona o para optimizar cómo está funcionando, luego finalmente aplicar algunos de estos refinamientos. Al igual que en este caso, utilizando la saturación de matiz y el modo de color de brillo en lugar de RGB. Entonces, voy a tener un par de ejemplos diferentes que son similares, y este es otro que estará en los ejemplos establecidos al final, o finalmente este conjunto de gráficos de líneas. La idea es que todos estos sólo se basan en pequeños fragmentos de código que voy a introducir en las siguientes secciones. Esperemos que tengas algo de experiencia con Processing ya sea por tu cuenta o a través de tomar mi clase anterior sobre Processing e Illustrator. Creo que ahora mismo es importante solo revisar algunos de los conceptos básicos que estos no nos tropezen más tarde mientras miramos ideas más específicas. Simplemente brevemente, Procesamiento, de nuevo, es una aplicación que descargas desde el sitio web Processing y está compuesta por estos tres elementos básicos diferentes: el editor donde escribiremos código, la consola que escribe errores o cualquier registro que configuramos, y finalmente el lienzo que es donde sucede todo el dibujo y que se ve así. Ahí está el editor y la consola. Si lo ejecutamos, el lienzo aparece. El procesamiento tiene un área de puesta y un área de dibujo, y así son dos del tipo primario de estructuras en las que confiaremos. Existen tipos básicos de variables: enteros, flotadores, y cadenas. Un entero es para cualquier número entero, float es para números decimales, y una cadena contiene texto, y esos son probablemente los tres tipos de variables básicas que estaremos usando. Un array es básicamente una lista de diferentes tipos de datos. Entonces, como una matriz de tres números sería cero, uno, y dos, y luego abordamos estos dentro del corchetes poniendo un número ahí como cero, uno, y dos para acceder a diferentes piezas de la lista. También hay un ejemplo aquí de una matriz de cadenas como una lista de personas. Esto es realmente útil para la visualización de datos. Una vez que tenemos datos en algún formato externo, generalmente
queremos traerlos a una matriz donde podemos simplemente iterar a través de los diferentes elementos y dibujarlos a la pantalla. También puedes hacer una lista de listas. Nuevamente, todo esto se explica un poco más en profundidad en la clase de Procesamiento anterior, por lo que esto se está poniendo un poco borroso. Por favor, retrocede y refresca. Pero una matriz 2D es básicamente una lista de listas. Entonces, es más como una matriz, es una cosa bidimensional, y en realidad empieza a parecerse a una hoja de cálculo donde tenemos filas y columnas. Estos de nuevo se abordan de la misma manera que puedes ver aquí como imprimir esta línea en la ubicación 0, 0 nos da el número cero. Para pasar por todos estos, usamos un bucle. Este es un bucle for que va a iterar a través de nuestra matriz e imprimir cosas a la pantalla. Esto es increíblemente útil y lo estaremos utilizando a lo largo de los siguientes ejemplos. Por último, una función que fue crítica para el proyecto de mapeo que hicimos antes es esta función llamada mapa. Básicamente, se necesita un solo número y el contexto para ello como este inicial, que es una latitud que recorre entre 180 y 180 negativos, luego simplemente lo mapea a otro rango de números. En este caso, 0 a 400 y así. Esta es una función que toma cinco parámetros diferentes. El primero es el valor, el segundo es su rango nativo, y un tercer par de números siendo el rango objetivo final. Por último, quería mostrar este imponente pero tranquilizador panorama de Procesamiento. Entonces, en la página de referencia de Procesamiento, listan todos estos diferentes atributos y funciones que están disponibles en el programa, y acabo de pasar y resaltar los que conozco. Entonces, si bien siento que puedo hacer la mayor parte de lo que quiero en Procesamiento, puedes ver aquí que solo estoy usando cerca de la mitad de las diferentes piezas de este programa, y creo que con incluso una cantidad menor, como un cuarto de ellos, se puede hacer una tonelada. Entonces, no se trata de dominar el programa, se trata de aprender lo que necesitas para hacer lo que quieres. Espero darles muchos de esos elementos en este curso.
3. Datos: En esta lección, vamos a ver cómo importar datos al Procesamiento. Este es un paso crucial y la base para hacer cualquier visualización usando la app. En mi experiencia, he encontrado tres sabores diferentes de datos. Hay CSV, que es valores separados por comas, estos son generalmente salida por hojas de cálculo y son increíblemente comunes. También podría existir como un TSV, que es solo un valor separado por tabuladores en lugar de uno separado por comas. Se puede ver en esta diapositiva qué tan compacto y eficiente es
el CSV y probablemente sea el más fácil de trabajar. Pero puede encontrarse con un par de otros formatos como XML o JSON, estos normalmente salen de aplicaciones o interfaces web como la API de mapeo de Google, devolverá algo en un formato JSON o XML. Pueden ser un poco difíciles de analizar,
así que vamos a echar un vistazo a cómo atravesar estos y conseguir los valores en
el mismo tipo de formato que haríamos con un CSV. Entonces, construí siete pequeños bocetos diferentes aquí para demostrar algunas de las diferentes técnicas que puedes usar para importar datos. El primero, vamos a ver este pequeño CSV. Eso es un año de mis datos de actividad de caminar, y correr, y andar en bicicleta. Entonces, la idea aquí es la misma que usamos en el mapeo con el proyecto Illustrator and Processing. Aquí tienes dos variables diferentes: el CSV que va a traer los datos y luego la dividida,
que se llama MyData. Esta es la matriz bidimensional en la que vamos a poner datos. Pero básicamente, la idea aquí es que llevemos todos
los datos a solo una matriz de líneas, el CSV, y podemos imprimir el CSV. Déjame traerlo. Voy a deshacerme de éste. Simplemente puedes ver que todo es importado, pero es un blob. Entonces, el siguiente conjunto de comandos dice dividir esto en la coma y guardarlo en esta matriz bidimensional. Entonces, ahora puedes ver que es mucho más limpio, y en el siguiente ejercicio estructural, puedes usar esto para crear diferentes formas. Hay un par de otras formas en las que puedes traer un CSV a Procesamiento. También hay una estructura de datos de tabla, y así ésta te muestra cómo funciona eso. Es bastante similar al split, los resultados son casi exactamente los mismos. Pero en esta, se puede abordar cada columna por su nombre. Entonces, si traes tus datos como tabla, ahora simplemente puedes decir en el mes de la columna, quiero obtener todos los valores. O en la columna de ejecución, quiero obtener todos los valores. Sí hay que decir qué tipo de variable serán. En este caso, los meses van a ser cadenas porque son texto o las actividades mismas van a ser números decimales, como caminar, y correr, y ciclo. Esta es la iteración más simple de la misma donde solo tenemos uno for loop donde estamos agarrando todo, pero realmente no lo estamos guardando. Entonces, si quiero usarlo en múltiples partes de un boceto, es útil ponerlo en una variable global. Si recuerdas, una vez que definimos una variable fuera de la configuración, entonces se puede acceder a ella a lo largo del boceto. Entonces, aquí, cuando traemos la tabla, decimos que estos contenedores,
estas matrices de valores van a ser tan largas como el número de filas en el CSV, y luego a medida que lo recorremos, simplemente
guardamos cada uno. Eso nos permite más adelante en el boceto poder abordarlos desde diferentes lugares sin tener que refetch cada vez. Entonces, otra cosa final conveniente que puedes hacer. En este ejemplo, estamos usando una función llamada append, y esto es realmente útil cuando no sabes cuánto tiempo va a ser tu conjunto de datos. En este ejemplo anterior, donde lo estábamos guardando todo en una matriz, establecemos antes de empezar a llenar la matriz que va a ser un cierto conjunto de filas de largo. Entonces, estamos estableciendo el tamaño de este contenedor. Pero si estás usando una API o tal vez uno de estos otros tipos de datos que pueden ser útiles para usar append, en este, solo estamos diciendo agregar una pieza de datos al final, y seguir haciendo esto una y otra vez hasta que no haya más datos que agregar. Ahora bien, esto puede ser más lento de usar, pero si solo lo estamos haciendo una vez en la configuración, creo que está bien. Entonces, uso esto todo el tiempo y se puede ver que es un
poco más compacto que el otro enfoque. Entonces, esas son cuatro formas diferentes de tirar de tus datos CSV. Ahora, XML es Lenguaje de marcado extensible, y es muy detallado, tiene todas estas etiquetas diferentes que se repiten una y otra vez. Pero esto es solo una parte de algunos datos en ejecución que descargué de Strava, y básicamente solo tienes que ahondar en toda la jerarquía diferente aquí para sacar las cosas. Entonces, no entraré en detalle sobre cómo funciona esto, pero si necesitas extraer algunos datos de un XML, que es algo que hago de vez en cuando, estas son las piezas que necesitarás. Nosotros lo cargamos, sacamos a algunos niños, llenamos nuestras matrices de valores. Entonces, si necesitas sacarlo de un archivo XML, esta es la forma de hacerlo. Lo mismo es cierto para JSON. Este es un formato jerárquico, y el Procesamiento probablemente no sea lo más nativo para el Procesamiento a manejar. Pero de nuevo, te he mostrado cómo sacar datos de esta pieza de muestra de JSON. Es solo cuestión de cavar ahí, crear una matriz, y pasear por ella y sacar elementos. El punto es sólo meterlo en Procesamiento como matriz y sacar toda esta información de la estructura. Si necesitas JSON, esta es la referencia para hacer eso o un ejemplo de trabajo, y algo que yo había buscado desesperadamente al intentar trabajar con JSON por primera vez yo mismo. Por último, les voy a mostrar otra pequeña técnica que me parece realmente útil. Este es un conjunto de datos que he encontrado que todo se trata películas
sobre diferentes distopías y el año en que salieron, pero puedes ver estas diferentes categorías aquí. Entonces, una de las primeras cosas que me gusta hacer
al trabajar con una pieza de datos es averiguar,
bueno, ¿cuál es la categoría más popular? ¿ Cuántos de ellos hay? El procesamiento tiene un tipo de datos. Es realmente útil para hacer eso. Se llama el diccionario. En este caso, es un IntDict o diccionario de enteros. Un diccionario es un par de valores, como una clave y un valor. Lo que esto nos permite hacer es tirar de este conjunto de datos, estoy usando un CSV y el enfoque de tabla para traerlo, y luego configuro este diccionario, y solo agrego cada una de estas frases al diccionario de una a la vez. Entonces, aquí mismo, donde estoy recorriendo todas las filas hasta el índice que he configurado por encima de mi índice, solo
estoy agregando el valor de esa fila aquí mismo, que es el nombre del tipo de distopía y dando un valor de uno. Entonces, esto básicamente crea una lista de todos los diferentes valores y me lleva a esta manera realmente útil de mirar los datos, lo que me dice que el “Gobierno/Social” son el tipo de distopía más prevalente, mientras que “Alien controlado” sólo tiene ocho, es el menos común. Entonces, podrías hacer esto por un conjunto de retoques y averiguar qué palabras se usan más en él. En la parte inferior aquí, solo lo
estoy ordenando por cuántas veces aparece cada palabra, y luego guardarla en una matriz de claves y una matriz de sus valores. Entonces, espero que este conjunto de referencias para trabajar con datos sea útil,
y en caso de que encuentres algunos de estos tipos de datos más exóticos, no
te asustes demasiado ya que tienes una referencia para sacar los datos relevantes.
4. Estructura: El siguiente capítulo es todo sobre diferentes estructuras. Te he dado seis tipos básicos y muchas iteraciones diferentes de ellos. Empezando con filas, y luego convirtiendo eso en una cuadrícula, trabajando con formas concéntricas. Tenemos un par de ejemplos diferentes de cómo hacer líneas, tanto rectas como curvas, algunos ejemplos radiales, y finalmente, jugando con coordenadas. Entonces, el primero es el más simple. Esto es solo usar algunos rectángulos para dibujar algunas filas y te mostraré lo que esto genera. Entonces, tenemos cinco barras diferentes aquí. Básicamente solo estoy configurando algunos valores comunes en la parte superior, estos van a ser valores globales. Normalmente me gusta tener un margen en mis bocetos para que las cosas no estén apretando a un lado. Entonces, si haces este cero, verás que no es tan bonito como yo le doy 50 porque estoy usando estos valores en todas partes para que ambos rellenen los rectángulos en los bordes y entre sí. Básicamente estamos en la mayor parte de ella, sólo
estamos haciendo un bucle aquí que dice, por el número de rectángulos que he especificado, que es cinco, no los trazos. Dales un relleno de un gris y luego dibujarlos empezando por un margen que es de 50. A medida que iteramos, esto pasaremos de cero a cuatro porque necesita ser menor que rectcount. Entonces, queremos que los tamaños de rectángulo aumenten y también necesitamos el margen para aumentar. Entonces, esta es la posición inicial del rectángulo y luego siempre va a
haber el ancho menos el relleno en los bordes,
márgenes, ancho y este valor que he especificado de RectSize high. Entonces, esa es una forma sencilla de dibujar un montón de rectángulos a la pantalla. Llegando a la siguiente, la siguiente iteración de esto es o qué pasa si queremos un montón de histograma, algunos pequeños gráficos de barras, pero varios de ellos. Para esto, la pieza crítica de esto es que necesitas dos bucles. El primero que hicimos ya cuál es cuántos rectángulos verticalmente habrá y luego un bucle horizontal. Entonces, esto es por cuántas barras hemos configurado que es de 20. Queremos rodar por eso horizontalmente. Entonces, cuando ejecuto esto, se
puede ver que todavía tenemos estas cinco áreas verticales pero dentro de ella, tenemos 20 barras verticales. Cada uno de esos está obteniendo un valor de aquí con esta función aleatoria que es decir, quiero que mis barras estén entre la mitad de mi RectSize o la mitad de 100 y 100. Otra cosa bonita que puedes hacer es solo hacer una simple cuadrícula de rectángulos. Entonces, esta es la misma idea. Tenemos un bucle anidado. Entonces, tenemos el primero que dibuja verticalmente, y el otro que dibuja horizontalmente. Simplemente estamos dibujando 25 rectángulos diferentes en esta pieza de código. Podemos hacer lo mismo con las elipses. Tenemos nuestro código anidado otra vez. Ahora, tenemos 25 por 25 elipses. Lo principal aquí es que solo estamos usando elipse para dibujarla y tenemos que añadir esta pieza de código que dice: “Dibuja esto desde la esquina en lugar del centro”. Cada círculo está dibujando desde la esquina superior izquierda al igual que lo hicieron los rectángulos. Este es un poco más interesante. Entonces, si queremos agregar datos a esto pero tenemos nuestra escala de rectángulo desde el centro, tenemos que cambiar las cosas un poco. Anteriormente, estaban dibujando desde la esquina superior izquierda. Entonces, aquí, especificando como donde los círculos donde hice una esquina, tengo que especificar para los rectángulos, dibujarlo desde el centro. Se puede ver que mientras cruzo el ratón, están cambiando de tamaño. Bueno, esto se debe a que en lugar de establecer aquí el RectSize y siempre quedarme con él, anulo eso más adelante diciendo usa
la posición del ratón para definir el tamaño del rectángulo. Vamos a usar mucho este comando MouseX porque es realmente útil para ajustar tus gráficos y ver cómo los diferentes valores los impactan. Sé que esta estructura tomará diferentes valores y me permitirá tener rectángulos de diferentes tamaños porque, puedo darle de comer el valor MouseX. En este ejemplo, sólo estamos dibujando un montón de cuadrados concéntricos. Entonces, este es solo un solo bucle para el número de rectángulos que quiero. Dibuja cinco rectángulos, comenzamos con uno que es 400 por 400 aquí y luego solo compensamos cada uno por 50. Entonces, eso se hace usando i o un contador en el bucle for para multiplicar el tamaño del desplazamiento, que se hagan más y más grandes. Tenemos un círculo aquí, uno
circular también. Que es la misma idea básica usando ese offset para crecer cada vez. Hay un par de formas diferentes de dibujar líneas en el procesamiento. El más simple es un conjunto recto de líneas. Básicamente, cómo se hace esto es básicamente tres partes. Tenemos este BeginShape, que dice que quiero empezar a dibujar una línea y luego para cada punto, establecemos un vértice y luego usamos EndShape para cerrarlo. Entonces, a medida que pasamos por el bucle for, estamos tomando nuestros puntos aleatorios para la altura y
puntos espaciados uniformemente para el ancho y agregando un vértice en cada ubicación. También hay formas fáciles de hacer líneas curvas en el procesamiento. Entonces, en lugar de usar ese vértice normal, simplemente sí usamos vértice curvo. Ahora, se puede ver cómo la gráfica le ha dado la sensación más suave. Eso es simplemente usando básicamente un punto CurveVertex en lugar del vértice normal. También necesitas agregar estos extra uno justo después de BeginShape y otro justo después de EndShape. Pero hay un pequeño problema con estas líneas curvas. Eso es que están bien para dibujar normalmente pero, no
son los mejores para dibujar datos porque como verás, he dibujado círculos rojos aquí para cada punto que está en mi conjunto de datos, y puedes ver cómo la línea alcanza un pico un poco por encima de la ahí y luego esta pieza va un poco por debajo y un poco por debajo aquí. Entonces, en realidad es exagerar los datos de formas que no queremos. El conjunto de datos no se está poniendo tan alto, pero eso es lo que está representando. Entonces, usaría estos donde tenga sentido pero tal vez para dibujar datos, no es
lo mejor. Eso podría llevarte ya sea a usar simplemente líneas rectas o a usar la curva Bezier. Ahora, este es el último tipo de línea que te mostraré. Pero, es un poco más complicada. Esto es sólo un solo ejemplo de una curva. No es lo más intuitivo. Básicamente, hay que configurar los puntos de control para todo esto con este BezierVertex. Entonces, ahora, se necesitan seis puntos diferentes para dibujarlo. Pero esperemos que te consuela saber que cada vez que intento hacer esto, lo cago. Me lleva unos 10 o 15 minutos de depuración para que funcione una bonita curva de Bezier, razón por la
cual estoy muy contenta de tener ahora este sencillo ejemplo donde todo funciona y se puede ver cómo enchufar los valores correctos. Estoy usando MouseX aquí para controlar estas manijas para ajustar la tensión. Entonces, solo puedes agarrar esta pieza aquí. El dibujo bezier curva que comienza con BeginShape y termina con
EndShape, y poner en tus valores, y eso es lo que voy a estar usando a partir de ahora. Si tienes curvas que quieres hacer, espero que también recojas esta pieza de código. Pasando a estructuras radiales. Esta es una sencilla que simplemente pone un montón de círculos en un círculo. Ahora, estoy usando tanto MouseX como Mousey para controlar diferentes parámetros aquí. Entonces, he decidido que quiero que el número de formas se determine por una décima parte de MouseX y el tamaño de forma se determine por una décima parte de Mousey. Entonces, vamos todo el camino a la izquierda. Me queda un círculo y puedo hacerlo más grande o más pequeño subiendo y bajando,
y puedo agregar más círculos yendo a la izquierda y a la derecha. Piensa en esto como una superficie a la que puedes añadir datos fácilmente, al igual que con las curvas y con todas las formas anteriores. También podemos hacer esto con líneas. Nuevamente, este es otro conjunto de fórmulas que siempre tengo que google cuando uso solo para determinar cuáles son las posiciones X y las posiciones Y de los extremos de estas líneas. Se podía ver que ahí hay algo de geometría, estamos usando senos y cosenos. Bu, la idea aquí no es recordar este material para tenerlo memorizado, sino tener un recurso para volver a él y conseguir que funcione cuando lo necesites. Podemos hacer lo mismo con los rectángulos. Queremos rectángulos saliendo del centro, aquí se puede ver el código que lo hace. Pero, hay un pequeño problema aquí es que, si tenemos cuatro, no
se alinean precisamente, no
están completamente centrados. Ese es un pequeño defecto con la forma en que he montado. Entonces, te he dado un mejor ejemplo aquí. Este RectoffSet radial. Entonces, para que todos nuestros rectángulos dibujando perfectamente centrados, tengo esta otra pieza de código. Este está usando algo nuevo. Eso es por hacer transformaciones. Esto es básicamente si quieres desplazar algo o rotarlo, puedes crear un contexto para esto usando PushMatrix. Esto dice: “Todo después del inicio de PushMatrix quiero que se traduzca o rote o escale y luego quiero que los transformadores se
detengan cuando ponga aquí esta pieza de código PopMatrix”. Entonces, inicialmente, y puedo apagar uno de estos para que veas cómo funciona. Si sólo uso, o los apagaré en realidad los dos. Entonces, no tengo nada aquí, solo
puedes ver arriba de este rectángulo moviéndose. Esto se debe a que todos mis diferentes rectángulos están dibujando uno encima del otro. Ahora, si enciendo la traducción de rotación, ahora, todos
están girando pero están centrados alrededor del punto cero cero justo aquí, que es donde comienzan estas traducciones y rotaciones. Entonces, una vez que enciendo traducir, ahora lo estoy moviendo a través de la mitad del ancho del lienzo y la mitad de la altura del lienzo. Ya puedes ver ahora está perfectamente donde lo quiero. Podemos utilizar la misma técnica para el texto la cual puede ser realmente útil si quieres etiquetar esos rectángulos. Bueno, ¿cómo consigues que el texto no esté en línea recta? Utilizamos el mismo enfoque. Esto es que PushMatrix, algunos PopMatrix para obtener un montón de estas palabras. Esto está inspirado en Bart Simpson. Algo que podría tener que escribir en la pizarra muchos cientos de veces. Por último, sólo mirando algunas coordenadas, así que esto se remonta a lo que estábamos haciendo con los mapas. Si quieres poner un conjunto de puntos aleatorios en el lienzo. Volvemos con nuestro amigo, la función de mapeo. Entonces, tomemos este conjunto de puntos que he generado. Son solo aleatorios y los mapean sobre el lienzo. Conozco sus valores desde 0-100 y quiero que se traduzcan entre margen y con margen menos. Entonces, sólo en una buena parte del lienzo aquí que quiero usar. Por último, si además de tener simplemente coordenadas, desea conectarlas. Hice este pequeño boceto que combina esos círculos y las líneas curvas para generar un camino aquí y también los estoy numerando solo para que pueda entender lo que está pasando. Comienzan a cero y terminan a las nueve. En este caso, no importa si las líneas rebasan los puntos porque, esto es simplemente un camino que los conecta. Ya no es una gráfica. Entonces, ojalá esa sea una buena forma de saltar iniciando tus diseños con un conjunto de composiciones preempaquetadas. Una vez que hayas recogido uno de nuestros pequeños módulos de importación de CSV o XML o JSON, lo
pones aquí, rellena una matriz, y luego usa una de estas composiciones para generar una visualización.
5. Depuración: En esta lección, vamos a lidiar con los bichos. Estos son una parte inevitable de escribir código y que muchos de los mejores programadores del mundo tipo de cera filosófica sobre. Encontré estas dos citas que me gustan. Uno, por el creador de BitTorrent quien dice que, "90% de la codificación es depurar. El otro 10% está escribiendo bugs”. Esta otra por uno de los ingenieros que Flipboard quien dice que, “Depurar es como ser el detective en una película de crimen donde tú también eres el asesino”. Creo que eso es parte de la satisfacción única de trabajar con código también es que, cuando consigues que funcionen estas cosas, has tipo de perseverado a través tus propios obstáculos y obstáculos que te pones en tu camino para conseguir esta cosa funcionamiento. En el camino, he recogido un par de técnicas que me han parecido útiles para evitar crear bugs. Porque hay un conjunto de código que escribirás. Esto es válido. El procesamiento dice que este es un buen código, tiene sentido, pero no hace exactamente lo que quieres. Entonces, ¿cómo se obtiene tanto un código válido que funcione como se pretendía. Empecemos con solo algún tipo de mejores prácticas para escribir código. Una es jalar toda tu constante. Entonces, en cualquier momento tengas un solo número en el expediente, como cinco o 10, me
da los resultados que quiero. Trata de sacar eso en una variable. En este caso, tuvimos este primer ejemplo que se trata dibujar una elipse en la posición X e Y, pero quiero que los datos se escalen 10x. Bueno, el problema con esto es que, 10 aparece dos veces aquí. Es posible que pases y cambies uno de ellos, pero no cambias el otro, o dices, estás usando esta constante en cinco lugares diferentes o seis lugares diferentes. ¿ Vas a encontrarlos todos cada vez que quieras cambiarlo? Creo que la mejor práctica es configurar una variable para esto, como escala destrozada y solo usar eso en todo. Ahora, acabas de cambiar el número uno y puede llevar a menos problemas. En cuanto a las variables de nomenclatura, este es un problema persistente en la codificación. Quieres que las cosas sean rápidas y eficientes pero también descriptivas, para que sepas lo que están haciendo. Tiendo a evitar estas variables de una letra que se pueden ver a veces en el código de otras personas. Pero, creo que es mejor ser más explícito mientras tratas de seguir siendo conciso con tus nombres de variables. Te ayudará a entenderlo más adelante cuando vuelvas a él y ayudar a otros a entender tu código también. Un adagio grande y muy común para la codificación es, no te repitas. Entonces, cada vez que te veas escribiendo la misma pieza de código dos veces, ambos son algo ineficientes pero pueden llevar a errores. En este ejemplo, tenemos esta pequeña fórmula para obtener el área del diámetro de un círculo, dada la zona. Pero debido a que una elipse necesita tanto su altura como su anchura, estoy usando dos veces. Al igual que usar un factor de escalado u otra constante varias veces, esto puede ser una receta para problemas si no lo copia correctamente, o cambias una cosita en él. Es mejor sacar eso y que sea su propia línea donde solo aparece una vez, y aún mejor pero un poco más avanzada forma de hacerlo es crear una función. Esto te muestra cómo podrías crear una función que calculará el diámetro de
un círculo que acaba de convertirse en una pieza de código que se sienta debajo de las regiones configuradas y dibujadas. Entonces, en cualquier momento que quiera obtener un diámetro de círculo, sólo
lo envío a área, y esto me va a devolver el valor. Una de las cosas bonitas que hace el procesamiento es que, automáticamente insertará tu código antes que tú. Entonces, si presiona el comando T en el teclado, tomará algo así como el código sin formato de la izquierda y simplemente insertarlo todo. Esta es una práctica útil que hago todo el tiempo, y ayuda a identificar dónde va a haber problemas, donde un conjunto de corchetes no están cerrados o tienes otros problemas con paréntesis como. A medida que regresas y perfeccionas tu código, es útil simplemente ir a través de él y asegurarte de que todo lo que esté abandonado, como variables o líneas de código, que no estés usando sea sacado. Todos estamos trabajando muy rápido y probando cosas diferentes, pero a medida que los bits de código se quedan huérfanos, es bueno sacarlos y mantener las cosas limpias. Entonces, ahora vamos a ver un par de otros bocetos que muestran algunas de estas técnicas de depuración y formas que he encontrado útiles para encontrar los problemas en mi código. Un error que se encontrará continuamente y que veo a diario es éste, índice de
matriz fuera de límites. Esto sólo significa que trataste de acceder a una pieza de datos que no existía. Entonces, en este caso, tengo una matriz con ocho valores en ella, y en mi bucle de cuatro, estoy tratando de acceder a cada uno de esos valores diferentes. Pero aquí, el problema es que, he dicho que deje ser menor o igual a la longitud de mi conjunto de marcadores. Eso básicamente significa que está tratando de ir a nueve. Si elimino la porción igual de la misma y la ejecuto de nuevo, estará bien. Ahora, una de las formas de depurar esto puede ser, usar la función de impresión. Este boceto me va a dar el mismo error. Que hay una excepción fuera de límites. Pero, al usar print lean aquí, estoy imprimiendo cada vez que funciona hasta que no funciona. Entonces, puedo ver que con cuando I
Es igual a siete, está sacando el último valor de mi matriz, que es 700, pero claramente está tratando de ir más allá. Eso es una indicación de que estoy rebasando el tamaño de mis datos, y que eliminar esta marca igual debería hacer que las cosas funcionen perfectamente. Otra cosa que puede ser útil y a veces está funcionando pero no es dibujar lo que anticipaste. Entonces, en este caso, estoy tratando de dibujar ocho círculos diferentes, pero sólo estoy viendo uno. Una de las cosas que puedo usar a veces es usar la opacidad. O bien puedo simplemente establecer la opacidad en algún otro valor como 120, y eso puede ser útil para revelar lo que está sucediendo. En este caso, que todos mis círculos estén dibujando pero solo están dibujando uno encima del otro, u otra cosa que me gusta hacer es usar el mouse X. vez, esto me va a dar todos los valores de la posición de mi ratón y permítanme averiguar qué está pasando. En el caso de transparencia un valor fijo probablemente esté bien, pero lo que me gusta de esto es que, el mouse X me va a dar valores que entiendo. Sé que a la izquierda aquí, va a ser cero. la derecha, van a ser 800 en este caso, y así puedo usar estos para trabajar si un sistema está funcionando de la manera que anticipo. Otra forma de resolver ese problema con los marcadores dibujando uno encima del otro es usar un trazo en lugar de transparencia. Entonces aquí, en lugar de darles todos los rellenos, puedo ver que los círculos están dibujando uno encima del otro dándoles un trazo. Para composiciones más complicadas, me parece útil apenas empezar a anotar el boceto. Estas podrían no ser cosas que me gustaría ver en el boceto terminado, pero van a ser muy útiles para entender lo que está pasando. Entonces aquí, he resucitado nuestra curva de procesamiento anterior, pero ahora estoy mostrando los puntos de control y etiquetándolos con texto que tiene sus valores, y también la tensión en estos puntos de control. Esto me ayuda a entender exactamente lo que está pasando en el boceto, y aquí puedes ver que he etiquetado cosas, para que una vez que tengo que trabajar de la manera que lo
quiero, pueda sacar todos estos elementos que no quiero. Al igual que quitar los puntos de control. Elimina el texto que está etiquetando los valores que estoy viendo. Esto puede ser realmente valioso para entender cómo funciona un boceto. Este tema de precisión de flotación es algo que
garantizo va a tropezar a algunos de ustedes ya que están empezando a usar el procesamiento. Este es un tipo de ocurrencia común donde se desea distribuir de manera uniforme un conjunto de puntos, o líneas, o rectángulos a través de la pantalla. Se puede ver en este máximo ejemplo, está casi funcionando. Estos puntos se están distribuyendo casi por completo de manera uniforme a través de la pantalla. En el de abajo, estos dos ejemplos me muestran cómo debería funcionar. El problema aquí es que, cuando le pido a procesamiento que me diga lo lejos que deben estar estos puntos, la respuesta correcta es de 33 y un tercio de píxeles. La respuesta incorrecta es 33, lo cual es casi correcto. El problema aquí es que, necesitamos un flotador para mantener el espaciado de nuestros elementos. Se trata de un número decimal. Pero, si hacemos todos los cálculos con número entero, como en este primer ejemplo, así que ancho es un número entero. Dos es un número entero, es un entero. El margen es un número entero y el recuento de elementos, son todos enteros. A pesar de que decimos que queremos guardar un número decimal, todas las matemáticas que hace son con números enteros, razón por la
cual sacamos 33 al final. Todo lo que tienes que hacer es convertir uno de estos números en un flotador, como en lugar de multiplicar margen por dos, multiplicamos por 2.0. O puedes decir: “Quiero que el recuento de elementos sea un flotador poniendo este código flotante alrededor de él”. Ahora, cuando se acabe la matemática, será preciso, y obtendremos aquí el valor correcto de 33 y un tercio de píxeles. Si tus bocetos funcionan pero las cosas no se alinean del todo, busca estos problemas de precisión de flotador que podrían estar disparándote. El ejemplo final que mostraré tiene que ver con la velocidad de fotogramas de los bocetos. Algunas de las que te he estado mostrando son animadas, donde el sorteo bucles yendo una y otra vez. Podrías tener algo en donde empieza a sentirse así, donde empieza a pantanarse y las cosas se están volviendo lentas. Se puede ver que tengo un poco de código aquí en la parte superior, lo que me está diciendo cuántos fotogramas por segundo se trata dibujar y cuántos marcos han transcurrido. Si sientes que no está operando a 60 fotogramas por segundo, intenta poner esta sola línea en la parte superior de tu código. Entonces, esto te dirá los fotogramas por segundo, y luego a medida que pruebes cosas diferentes, verás el impacto de tu velocidad de fotogramas y si eso ayuda. Esta pieza de código fue escrita intencionalmente para básicamente pantanear hacia abajo el boceto, por lo que se puede ver bajando de 40 a 20 a 10 fotogramas por segundo. Entonces, creo que estos son los tidbits que tengo, consejos para depurar, y podemos pasar al paso final, que va a ser polaco. Si estos consejos no han sido suficientes para resolver un problema que podrías tener
además de publicar en la página del proyecto en Skillshare, también
puedes acudir a los foros sobre procesamiento. Ahí hay una comunidad realmente vibrante de gente que está emocionada por ayudar a los novatos, y sé que es el primer lugar al que iré a
buscar si alguien tenía el mismo problema que ya tengo. Puedes buscar en la pequeña barra de búsqueda, o ir al foro mismo y empezar a buscar ya sea la advertencia que estás recibiendo, o la cosa que estás tratando de hacer que no funciona.
6. Refinando: Por cierto, me gustaría compartir un conjunto de diferentes refinamientos;
forma de pulir tu boceto para que las cosas se vean aún mejor. En primer lugar, hemos estado utilizando principalmente líneas, y círculos y rectángulos en nuestros bocetos. Pero hay un par de otros tipos de formas disponibles en Procesamiento. Hay triángulos y arcos. Este boceto demuestra un par de las otras formas que pueden ser útiles para la visualización de datos. Además de rectángulos y círculos, los triángulos son una gran forma de representar cantidades, así
como arcos, que son solo secciones de círculos. En estos bocetos anteriores, acabamos de usar el tipo predeterminado en Procesamiento, pero lo que es bueno es que también puedes cargar cualquier tipo de letra de tu máquina. En este caso, estamos cargando Georgia y guardando un PDF con la salida. Entonces, esto va a tener algún texto esbozado. Aquí tienes nuestro PDF. Algunos vectores bonitos, crujientes, de tipo personalizado. En Procesamiento, si quieres averiguar cómo nombrar un tipo de letra, como aquí estoy usando Georgia, uso esto. Voy a crear fuente. No es necesario crearlo, pero solo puedes mirar a través tu lista de tipografías instaladas. hoy quiero usar Calibre-Black. Apenas puedo ver que aquí se hace referencia como Calibre-Negro. No necesito el tamaño en sí. Entonces, cancelaré y cambiaré Georgia a Calibre-Black, entonces se cargará la tipografía y ahora tengo una bonita pieza de tipo personalizada. En ese ejemplo, la tipografía que estaba usando estaba todo esbozada pero puede ser útil tener también texto en vivo. Entonces, esto significa que si lo traigo a un ilustrador, podré editarlo. Puedes ver aquí no lo puedo editar, son solo formas. Pero, si usamos esta pequeña adición al código, este modelo de modo texto, esto significará que cuando ejecutemos el código. El PDF que emita, no
se esbozará. Cuando lo traigo a Illustrator, puedo editarlo, puedo cambiar la tipografía, y es realmente útil para poder manipular la salida de Processing. Otra pequeña pieza que no he mencionado es que con rectángulos, les
puede dar un cuarto parámetro. Entonces, además de su ubicación X e Y y su altura dentro, también
puedes darles un radio de esquina. Entonces, en este boceto lo he aplicado al ratón x. Entonces, ahora sé si es un valor muy bajo y lo estoy imprimiendo en la consola. Así es como se ve el radio de esquina de tres píxeles frente a un radio de cuarto de 32 píxeles frente a casi 70. Entonces, puedo pasar por aquí, encontrar el valor que me gusta, y luego decir, si son 14, y entonces puedo simplemente plop eso y que sea estático. Hay un par de modos de color diferentes que también están disponibles en Processing, por lo que RGB es uno estándar y en realidad no tienes que definirlo. Simplemente sucede por defecto. Pero normalmente, los colores se especifican de 0 a 255. Al poner un número aquí después del modo color, se puede decir: “Quiero que todos mis colores existan en una escala de 0 a 100”. RGB es genial pero no hay diferencia en los colores que puede representar frente a este otro modo de color saturación y brillo.Pero, desde una perspectiva de datos, es más fácil manipular los colores y saturación de matiz y brillo de lo que está en nuestro RGB. Entonces, este es un pequeño recorrido por el espacio de color RGB. puede ver que tengo creo que es rojo y verde yendo por estos dos ejes y conforme muevo el ratón el canal azul se agrega en más. Entonces, puedes ver que aquí hay muchos buenos colores pero están repartidos por el espacio de color, por lo que puede ser más difícil acceder a ellos y es por eso que podrías simplemente poner valores estáticos. tanto que con saturación de matiz y brillo, estás controlando estas cualidades fijas del color. Entonces, el tono no es una dimensión, qué tan saturado está. Ahí hay otra dimensión y V o valor es la final. Entonces aquí, se puede ver que tengo todos estos buenos colores realmente brillantes que existen simultáneamente. Esto se está moviendo por el espacio de color con plena saturación y brillo completo y puedo bajar el brillo y todavía están empaquetados juntos. Entonces, solo puedo establecer el
valor de saturación y brillo y luego aplicar el matiz a una pieza de datos, o puedo decir que quiero que la saturación de esto se aplique a una pieza de datos. El procesamiento también generará una serie de formatos de imagen diferentes. Esta es la exportación incorporada, te
permitirá guardar marcos como PNG, JPG, TGA o TIF y simplemente lo haces
cambiando el sufijo aquí en la pieza de código SaveFrame. También te he mostrado una buena manera de poder ejecutar un boceto con múltiples marcos. Puedes usar esta función aquí la tecla “void KeyPrensado” para poder presionar una tecla en el teclado y guardar un marco o usar el ratón presionado. Entonces, tienes muchos parámetros y estás modulando el boceto. Una vez que lo llegues a un lugar que te gusta, digamos que estás redondeando las esquinas en base a MouseX, entonces solo puedes hacer clic en el botón y guardar la salida. Lo mismo es cierto para los PDF. Necesitamos un par de piezas diferentes, necesitamos importar el procesamiento o la biblioteca PDF de procesamiento inicialmente. Entonces sólo tenemos una pieza que inicia el proceso de ahorro si registro y un trozo que termina el proceso de ahorro. Nuevamente, he incluido dos funciones aquí, para que no esté guardando un PDF en cada fotograma. Justo cuando quieras,
puedes hacer clic en el botón del ratón o presionar P en el teclado y te guardará esos marcos. Entonces, eso me parece realmente útil. Generalmente simplemente no quieren ser guardados en un PDF todo el tiempo pero es agradable tenerlo en teclados, que cuando encuentres algo bonito puedas guardarlo. A pesar de que generalmente estoy trabajando con datos, puede
ser útil tener un componente aleatorio a veces. Una de las cosas bonitas que he descubierto es que si bien azar normalmente va a ser diferente cada vez que lo uses, puedes poner esta línea de código y llamar a RandomSeed y simplemente darle un número fijo. Esto significa que cada vez que ejecutes el boceto, obtendrás la misma salida aleatoria. Entonces, si bien es uno cada vez que lo ejecuto, estos puntos están en la misma posición. Pero digamos, lo cambio a dos, ahora están en una posición diferente pero será consistente cada
vez que lo ejecute con RandomSeed como dos. Entonces, digamos si quieres usar esto para colores pero encuentras un bonito conjunto de colores aleatorios que funciona, es bueno poder
bloquearlo al usar RandomSeed. Es agradable tener control sobre lo que a veces se etiqueta, sobre todo con el conjunto de big data. Entonces, en este caso, quiero saber el valor de estos círculos y lo hacemos de un par de maneras diferentes. Uno podría ser simplemente jugar con el ratón aquí y averiguar, ¿dónde está el umbral donde estos números empiezan a hacerse demasiado grandes para caber? Entonces, aparece al ratón alrededor que una vez que llego por debajo de los 20, empiezan a extenderse fuera de los círculos. Entonces en este momento, estoy usando esta declaración condicional que dice, si el valor de la elipse es mayor que MouseX, entonces dibujarlo. O usar estas dos tuberías, esto significa si se cumple esta otra condición, que es si ese valor es mayor que mi umbral de etiqueta rechaza ser 45. Cualquiera de esas hará que aparezcan las etiquetas. Entonces, si acabo de quitar este, y solo la tengo en MouseX, puedo encontrar el lugar donde me sienta cómodo con él. Entonces, tal vez todo por encima de los 30. No quiero que me etiqueten y luego, puedo cambiar mi umbral de etiqueta a 30 y quitar el componente MouseX del mismo. Entonces ahora, etiqueto que tiene más de 30, se aplica y esta es una buena forma de adecuar el etiquetado a los datos que tienes. Por último, vamos a querer mostrar algunos números y estos pueden no ser manejados de forma nativa tan bien como los trataríamos en un programa de diseño. Entonces aquí, tengo este valor original 80,472.65. Ahora, realmente no necesito los decimales. Entonces, en el siguiente ejemplo, te muestro cómo puedes redondear los decimales con solo lanzarlo a un entero. Entonces, al poner esta pequeña pieza de código alrededor de mi número, ahora
será un número entero. Pero eso podría verse mejor si pusiéramos una coma que sería más fácil de leer. Entonces, esta otra pieza de código aquí, este NFC pondrá en es un formateador numérico, nf y c es una coma. Entonces, poner una coma en la posición correcta. Entonces finalmente, tal vez ni siquiera quiero esa precisión completa. No quiero que sean 80,472. Entonces, dividiéndolo por 100 y luego haciendo eso y redondeando ese número y multiplicándolo por 100, entonces puedo cambiar la precisión. Entonces, puedo hacer este 10 y 10 y volver a ejecutarlo. Eso me daría un poco más de precisión o si lo divido por 1,000 y lo multiplico por mil, entonces será un poco más redonda. Entonces, eso redondeó al lugar de los miles. Entonces, esas son diferentes técnicas para hacer que tus números se vean mucho mejor lo cual
será a la vez más fácil de leer y requieren que hagas un poco menos de trabajo. Entonces, espero que esos pequeños fragmentos sean útiles y ayuden a que tus bocetos se vean mucho mejor. En la siguiente lección, juntaremos un montón de estos componentes y haremos algunos bocetos terminados.
7. Ejemplos: Por último, me gustaría mostrarles cómo se pueden
unir todas estas piezas y hacer un ejemplo de procesamiento terminado. El primero que tengo son algunos datos de exoplaneta que he descargado. exoplanetas son estas tierras potenciales que
se han encontrado alrededor de estrellas fuera de nuestro sistema solar. Esta información se puede descargar libremente desde la web. Todos estos diferentes parámetros sobre los diferentes cuerpos celestes que se han descubierto. Entonces, quiero armar todo esto en un boceto. Esto comienza como con los otros ejemplos trayendo los datos. Entonces, vamos a hacer esto usando uno de los ejemplos de importación de tabla. Creo que es este enfoque, “Data_02" Entonces aquí, tenemos una tabla que estamos usando, y definimos esa tabla como se puede ver aquí con el nombre de nuestro CSV, y le decimos que tiene un encabezado. Eso nos permite abordar estas diferentes piezas de datos por sus encabezados de columna como ID de fila, o nombre de host del planeta. Entonces, solo trayendo esos datos, pero aquí, puedes ver abajo en la consola igual que antes. Aquí están los datos que traje, y es sólo imprimir las piezas que estoy trayendo. Entonces, le estoy dando a cada uno un número, un nombre, y tiene una talla. En este caso, es cuántas veces el tamaño de Júpiter, es distancia del sol, y AU es la unidad astronómica de lo lejos que está la Tierra del sol. Entonces, esta es una distancia relativa. Entonces, he descargado estos datos, los traje usando mi enfoque de tabla CSV. Pondría un poco de lógica condicional aquí porque no todos los planetas tienen información. Entonces, no quiero estar tratando de dibujar planetas que tengan un radio de cero o una órbita de cero. Entonces, solo digo, si el radio es mayor que cero y la órbita del planeta es mayor que cero, entonces quiero dibujar a estos tipos. Entonces, obviamente voy a necesitar algunas elipses para representar a mis planetas. Entonces, esta es la línea que creé aquí, donde pueden tener una posición x y una posición y, y el tamaño de ellos va a ser el radio planetario veces el planeta escala, constante que hice, que es sólo tres. Entonces, hace que todo sea agradable y visible en pantalla. Ahora, para calcular sus posiciones x e y, estoy usando esta estructura que les mostré un poco antes. Que son los círculos radiales. Entonces, aquí es donde tenemos un poco de geometría. Estamos usando seno y coseno para definir dónde aparecen estos círculos en función del ángulo. Tengo un poco de matemáticas aquí. Esto es básicamente sólo para animarlos a medida que dibujan. Entonces, estoy usando la velocidad de la órbita del planeta para ponerlos en el lugar correcto. Yo quiero que cada uno de ellos tenga un color diferente que esté basado en la masa planetaria. Entonces aquí, estoy configurando eso, donde estoy mapeando su masa de cero a 30. Treinta fue aproximadamente el máximo en la escala de saturación de matiz y brillo de cero a 100. Pero sólo lo voy a aplicar al tono. Entonces, al calcular su masa, eso se convierte en un valor entre cero y 100, y eso define su color. Entonces, si corro esto ahora, se pueden
ver todos los diferentes planetas orbitando a diferentes velocidades. Algo que se hace inmediatamente evidente aquí es que, cuanto más lejos estén de su estrella que estaría en el centro del lienzo, más rápido empiezan a girar. Una de las cosas que he agregado a este código es un poco de zoom. Entonces, eso se hace con este recuento de marcos. Entonces, aunque quite esto,
y me deshaga del zoom. Sí. Bueno, ahora nos deshicimos del zoom cuando estamos atrapados afuera. Pero uno de los problemas que puedes ver aquí, es que es bastante contundente como la velocidad de fotogramas no es muy alta aquí. Esa es mi percepción. Entonces, voy a obtener esa pieza de código de depuración en frecuencias de fotogramas y simplemente
pegarla para asegurarme de que mi intuición sea correcta. Se puede ver en la parte superior aquí, la velocidad de fotogramas es de sólo unos siete fotogramas por segundo. Entonces, no es dibujar tan bien como pudo. Entonces, lo que hice en el siguiente ejemplo que tengo aquí, es que acabo de cambiar la forma en que se introducen los datos al boceto, un poco. Los abrí a los dos para que puedan ver. En este primer ejemplo, estoy usando un enfoque más simple para sacar todos los datos del CSV, lo que básicamente significa, cada fotograma que estoy dibujando, estoy sacando todos los datos de mi tabla. Entonces, esto es yo creo lo que está empantanando el boceto. Tengo que simplemente mover esto a la configuración. Entonces, en lugar de reunir los datos en cada fotograma, solo lo
voy a hacer una vez cuando hagamos la configuración. Entonces, requiere un poco más de código. Ahora para guardarlo todo, se
puede ver estableciendo los nombres de mis variables, y luego estoy diciendo, cuánto tiempo van a estar basados en el conteo crudo de mi mesa, y luego pasar por toda la tabla y guardarlos todos en un array. Pero ahora, en mi bucle de sorteo, solo
puedo sacar esos de los datos que ya he establecido,
y ya puedes ver lo rápido y suave que es el boceto. También estoy usando ratones actúa como una forma de acercar. Pero para mí, esto se siente bonito, como si estuviera funcionando bastante bien. En realidad no es mucho código. Creo que la parte más complicada aquí es probablemente justo cómo estoy calculando la posición x e y, para usar mi ratón x para acercar. Pero de lo contrario, diría, casi todo lo que ves aquí está incluido en el kit de piezas que proporcioné. En este siguiente ejemplo, tengo un conjunto de datos bastante simple. Acabamos de tener 12 filas con cuatro columnas cada una. Entonces, es un total mensual para distancias de caminar, correr y ciclismo, y voy
a llevar estos al procesamiento usando el método de tabla. Estoy configurando mis variables en la parte superior, y luego en la configuración, básicamente solo
estoy estableciendo el tamaño y usando el resto de este código para guardar todos los valores en mis variables. Fue mi primer intento, y sólo quería ver que los datos se relacionaban entre sí. Estaba pensando, tal vez tendría sentido tener estas líneas emanando del centro para mostrar las distancias relativas. Lo que no me gusta de esto es que, básicamente, una línea sólo puede ser aproximadamente la mitad del tamaño del lienzo. Entonces, no es darme muchos enlaces a ellos. Solo estoy dibujando las líneas de caminata en este momento. Pero ya, sentí que esto no
iba a representar los datos de una manera que pensé que funcionaba tan bien. Entonces, ir a algunas cosas estructurales que estábamos mirando, pensé que tal vez usar estos círculos concéntricos sería un buen enfoque. Entonces, usar un anillo por cada mes podría ser una buena forma de mostrar esto. Pero en lugar de usar círculos, me vendría bien algo de lo que hablamos en la sección polaca usando algunas de estas diferentes formas. Entonces, usando un arco para representar la longitud. Entonces, en este siguiente ejemplo para la actividad, permítanme mostrarles cómo lo he expandido para usar arcos en círculos concéntricos. Entonces de nuevo, estoy trayendo todos los datos aquí arriba, y luego mientras recorre, estoy calculando la longitud del paseo en relación a toda la distancia, que es una nueva variable que he configurado que sólo va a sostener la suma de caminar, y correr, y ciclismo. Entonces, estoy mapeando la distancia a pie contra esa distancia total. Entonces estoy dibujando un arco a esa longitud. Entonces, estoy haciendo esto para todos los diferentes tipos de datos y escalando estos nuevo por mouse x. creo que tener el mouse x ahí dentro es agradable, porque me puede ayudar a marcar en lo lejos que quiero que esté esto. ¿ Quiero que esto sea más un círculo completo o qué tan cerca
quiero que esto aparezca a las etiquetas? Lo cual sería mucho trabajo rebotar de ida y vuelta, y llegar a factores de escala al tener nuestro ratón x, puedo simplemente escoger donde se ve bien, y luego guardarlo. Básicamente, son sólo tres arcos los que estoy dibujando. Estoy mapeando cada una de las distancias, esa distancia total. El algo complicado es que tengo que iniciar un arco donde el último lo dejó, y podría asegurarme de que eso está funcionando de nuevo usando otra técnica que
discutimos que era introducir algo de transparencia. Entonces, si el color del trazo ahora es ligeramente transparente, solo
puedo asegurarme como puedes ver aquí, que está dibujando justo donde sale el último arco. Entonces, sé que estos datos están funcionando correctamente. Supongo que si iba a ampliar esto aún más, podría darle una tipografía personalizada y luego traer parte del código para guardar esto como PDF. Este siguiente ejemplo, vamos a tomar ese mismo conjunto
de datos de distancias mensuales caminadas y corridas y cicladas, y aplicarlas a algunas curvas bezier. Entonces, éste otra vez, tengo la tensión ajustada a mouse x. Entonces, puedo encontrar un lugar donde me guste, y estoy trayendo los datos de la misma manera que hemos hecho antes. Entonces, estoy configurando estas matrices y obteniendo la distancia total, obteniendo cada una de las distancias para caminar, y correr, y ciclismo, y un nombre de mes. Pero aquí, se puede ver que hay mucha repetición. He recogido ese código bezier, que teníamos antes y aquí líneas bezier forma. Entonces, es este código para dibujar cada uno de los diferentes tipos de datos tiene su propia línea. Se puede ver que aquí está pasando mucha repetición. Esto hace que sea difícil de leer y potencialmente crea oportunidades para que lleguen errores. Entonces, en el refinamiento que he proporcionado, lo que he hecho es igual a la función que les mostré antes. He tomado toda esta pieza del bucle de dibujo, y lo he convertido en una función. Entonces ahora, lo que quiero dibujar estas curvas, en lugar de tener que llamar me gusta escribir el mismo código tres veces diferentes. Aquí mismo, dice, “Cycle Line” Puedes ver que solo uso esta función llamada, “Draw_Bezier”, y todo lo que necesita que haga es enviarlo a los datos y al color que quiero usar, que he configurado aquí. He configurado una matriz de diferentes colores. Entonces, la función toma en esa matriz de valores y el color que le envío, y este es exactamente el mismo código. Simplemente se generaliza ahora como una función. Entonces, en cualquier momento que quiera usar un bezier, podría recoger esto y usarlo más adelante. También le he dado a esto una función
pulsada de ratón para que guarde un PDF cuando lo dibuje, y he etiquetado todos los diferentes puntos con sus valores. Entonces ahora, puedo ver cuántas millas estuvieron involucradas? Cuando me gusta la tensión que tengo en mis curvas, puedo presionar el botón del ratón, y ahora he guardado el PDF, ahí está. Puedo traerlo al ilustrador, o colocarlo en InDesign, o simplemente imprimirlo, y hacer lo que quiera con él. Esos son un par de ejemplos de cómo todos estos diferentes kits de piezas del kit de herramientas, se
suman en un boceto completo, y algunas de las técnicas para tratar suavizar el proceso de obtener estas diversas piezas de código para trabajar juntos y evolucionar hacia bocetos más avanzados que quizás quieras diseñar.
8. Conclusión: El encargo de esta clase es usar Procesamiento para visualizar un conjunto de datos, ya sea uno de los que proporcioné o algo que encuentre o cree por su cuenta. Un par de conjuntos de datos que proporcioné, que creo que son algo interesantes, una son todas las fechas de nacimiento en 2003 y cuántas personas nacieron en cada uno de estos años. Aquí hay algunos patrones interesantes que puedes descubrir. Ahí hay otro más pequeño. Eso son simplemente las temperaturas altas y bajas para diversas ciudades alrededor de Estados Unidos. Puedes decidir geocodificarlos o simplemente trazar los diferentes patrones en la temperatura. Entonces si te sientes muy capaz o aventurero, aquí
hay un CSB de seis megabytes que habla de cada árbol de Manhattan. Creo que este es un conjunto de datos realmente jugoso y podría llevar a muchas visualizaciones bastante interesantes. Si estás empezando a sentirte cómodo con todo esto y
buscas la siguiente forma de subir de nivel usando Procesamiento, te
recomiendo todas las herramientas didácticas de Dan Shiffman. Tiene un libro que es particularmente inspirador para mí, llamado “La naturaleza del código”, que trata con muchos algoritmos naturales en formas de hacer resultados realmente hermosos usando Procesamiento. Esta clase está destinada a estudiantes que tengan un poco de familiaridad con el Procesamiento. Si no te sientes cómodo con algunos de los conceptos básicos que discutimos inicialmente, por favor regresa y prueba la clase Building Maps with Processing e Illustrator que es una introducción más práctica a estos conceptos básicos. Espero que experimenten con estos, se familiaricen con las diferentes piezas de este kit de herramientas, y también publiquen sus experimentos y preguntas en el foro en Skillshare.
9. ¿Qué sigue?:
Nicholas Felton, Information Designer
