Arte generativo para NFT con JavaScript y p5js

1. Introducción: Hola y bienvenidos a mi curso. Mi nombre es Dan Burgess y soy, entre otras cosas, músico y desarrollador web. Y vamos a aprender a crear un programa de arte generativo que se ejecute en el navegador usando JavaScript y una biblioteca JavaScript llamada p5.js. Entonces vamos a dibujar un NFT, un diseño de estilo usando código. Y entonces el programa generará una variación única del diseño con cada actualización de página. También serás para guardar las imágenes que generes en tu disco duro. Lo que estás viendo ahora en la pantalla son algunos ejemplos. Entonces si te has estado preguntando cómo se hacen las variaciones NFT, Este curso será una gran introducción. Así que basta con dar click en la siguiente lección y llámelo junto a mí. Hoy he estado aquí. Gracias. Una de ellas es más me tengo que ir. Ambos sois un 2. Configuración del entorno: De acuerdo, entonces para este proyecto vamos a usar Visual Studio Code en nuestro editor de código. Ya lo tengo instalado en mi computadora. Pero si no lo haces, puedes descargarlo e instalarlo justo desde la página web, que se llama Visual Studio.com. Por lo que ya lo tengo aquí. Entonces dentro de Visual Studio Code, vamos a crear dos archivos y guardarlos en la misma carpeta. Entonces voy a hacer clic en Nuevo archivo, y lo vamos a guardar. Y lo voy a llamar índice punto HTML. Simplemente voy a guardar esto en mi escritorio en una nueva carpeta llamada Jan art. ¿ De acuerdo? Necesitamos uno o archivo. Voy a guardarlo en la misma carpeta y llamarlo script dot js. Ahora estoy en el archivo index.html. Necesitamos algún HTML repetitivo que sea muy fácil de hacer y recurso al código simplemente tecleamos HTML. Y nos da, aquí hay diferentes opciones para diferentes formatos. Voy a seleccionar el que termina en cinco. Y aquí tenemos nuestro HTML básico. Lo último que necesitamos hacer es incluir aquí en el archivo HTML tres dependencia así a dependencias más nuestro script. Entonces para eso, justo debajo de la etiqueta de título, vamos a agregar una etiqueta de script. Pregúntale a la fuente. Vamos a añadir p5.js. Esta es dependencia que vamos a estar usando y el enlace estará en la siguiente descripción. Entonces lo copio esta versión, 1 punto para punto 0, Min y lo pego aquí. Y necesitamos uno más. Este. El enlace también está en la descripción. Es este paquete aquí llamado p5.js, SVG. Y si nos desplazamos aquí en GitHub, está justo aquí al principio. Basta con añadir esta línea al proyecto. Por lo que ya tiene la etiqueta de script. Entonces voy a reemplazar todo el asunto. Y también necesitamos nuestro guión, éste de aquí. Entonces es un guión, guión dot js. Ahorramos. Estamos bien para ir el script.js. Lo vamos a dejar en blanco por ahora. 3. Dibujar nuestro diseño: Entonces si abro la carpeta general con nuestro proyecto en mi escritorio ahora mismo, un abridor de ojos, index.html, y mi navegador. No va a pasar nada porque el guión, no lo tenemos ahí todavía. Entonces vamos a escribir versión básica del guión en el que dibujamos nuestro diseño básico. De acuerdo, Entonces en nuestro archivo script.js, vamos a agregar una función JavaScript. Vamos a llamarlo a través todo esto realmente todo lo que necesitamos podemos empezar a tirar aquí. Entonces, antes que nada, voy a fijar nuestro peso del trazo. Pongamos esto en cinco. Ahora, hagamos nuestros antecedentes. Entonces digamos por ejemplo, bloque de fondo. Vamos a ahorrar. Y voy a volver a abrir el archivo index.html en mi navegador y ver qué pasa. De acuerdo, entonces tenemos antecedentes aquí. Es bastante pequeño, pero está aquí. Entonces eso significa que está funcionando. De acuerdo, entonces vamos a agregar otra función justo antes de la función de comedero. Y lo vamos a llamar configuración todo minúscula. Y dentro de esta función, vamos a poder establecer el tamaño de nuestro lienzo. Entonces eso va a ser crear lienzo. Voy a pasar en 600 por 600 pixeles. Y como tercer argumento, sólo queremos poner como VG en todos los gorras. Por lo que voy a abrir de nuevo nuestro archivo con mi navegador. Y ahora mismo es 600 por 600. De acuerdo, entonces para mi fondo, en lugar de usar negro, voy a usar un hacha, bueno, número hexadecimal de color HTML. Y estoy aquí en HTML color codes.com. Voy a dejar ese enlace en la descripción y solo puedo escoger un color y me va a dar el código hexadecimal. Entonces por ejemplo, algo así, este rojo. Voy a copiar esto. De acuerdo, entonces voy a guardar y refrescar el documento para ver si funciona y simplemente funciona perfectamente. Entonces voy a dibujar el cuerpo de mi diseño. Entonces voy a usar un color diferente por ahora. Voy a decir que llene el relleno. Y hagamos, por ejemplo, algún tipo de amarillo dentro de comillas simples irá. Y vamos a dibujar una elipse en, vamos a darle como las coordenadas más 2, trescientos seiscientos noventa seis cuarenta para 40. Va a refrescarse. Y aquí está nuestro cuerpo. Entonces, ¿de dónde me meto en estas dos funciones, configurar y dibujar de como cómo funcionan? Bueno, básicamente ya que estamos usando p5.js, lo siento, p5 js como dependencia. Solo estamos usando sus convenciones. Si vamos a su documentación, voy a dejar ese enlace en la descripción. Vemos que funciona exactamente así. Necesitamos una función que se llama configuración en dentro de ella, crear lienzo. Y pasamos en el ancho y la altura. Y luego un dibujo de función en el que dibujamos cosas. Y hay cosas diferentes que vamos a dibujarlo como fondo como lo hicimos, o podemos dibujar una elipse igual que aquí. Entonces en la elipse, estamos pasando en cuatro parámetros diferentes aquí. Entonces si vamos a la documentación p5.js y vamos a referencia. Aquí bajo forma, aquí está la función de elipse. Y vemos que se necesitan cuatro parámetros igual que pasamos n. y aquí dice lo que significan, dice por defecto, los dos primeros parámetros establecen la ubicación del centro de la elipse. Entonces le estamos dando 306, 90. Y el tercero, cuarto parámetros establecen las formas, ancho y alto. Y ahí es donde nos dan a 640 y por 40. De acuerdo, Entonces después del cuerpo, vamos a dibujar las orejas. Vamos a decir que fallan en elegir un color diferente para alguna encuesta, algo verde. Y luego vamos a necesitar dos elipses. Entonces para la primera, voy a pasar, digamos un 125, 135. Hagamos 170. 170. Para el oído derecho. Hagamos cuatro, 75, 135 hincharse. Por lo que están a la misma altura en el fondo. Y también 140, perdón, 170, 170. Entonces son del mismo tamaño, k Así que vamos a refrescarnos. Y ahí vamos. Aquí están las orejas. De acuerdo, Así que vamos a hacer ahora la parte interna del oído. Rellenar en un color diferente a un verde más oscuro. Y esto van a ser dos elipsis más. Entonces vamos así 125, igual que el oído externo. Hagamos 135, mismo centro, y luego hagamos 140 y 140. Entonces es más pequeño, más pequeño. Y por cierto, estamos usando la herramienta de elipse, pero estos son todos círculos porque la altura y el ancho de la elipse, Aquí está hola, aquí está el ancho son lo mismo. Y la otra que acabas de hacer va a ser una elipse y va a ser 475 y luego 135, y luego 140 y 140 para ir. Entonces vamos a refrescarnos y a ver cómo se ve eso . Y ahí vamos. Entonces hagámosle la cara. Fui a decir llenar. Vamos a darle otro color. Hagamos un poco de azul, otra elipse. Y le vamos a dar 300. Hagamos treinta y cuatro, cincuenta, cuatro cuarenta. Vamos a refrescarnos. Y ahí vamos. Ahí está nuestra cara. Entonces vamos a hacer los ojos. Cayó sobre otro color. Hagamos morado. Está bien. Eso es una elipse. Y vamos al 30 al 50. Dibujemos un 22 en el otro ojo. Entonces otra elipse. Vamos a hacer 370. Y los mismos valores, 250, lo queremos a la misma altura y luego al mismo tamaño, 282. De acuerdo, vamos a refrescarnos. Ahí vamos. Entonces hagamos los PBLs. Entonces van a tener el mismo centro, pero el fracaso va a ser negro. Entonces podríamos simplemente escribir negro, o podemos usar el código hexadecimal, que es justo esto. Todos los ceros. Entonces elipse. Y por supuesto el centro va a ser el mismo, así que van a ser dos treinta y doscientos cincuenta. Y queremos que la pupila sea más pequeña. Entonces hagamos 30 por ejemplo. El correcto. Entonces van a ser 375, 250, y luego 30 y 32 años. Bueno, vamos a refrescarnos. Y ahí vamos. De acuerdo, entonces hagamos esta nota. Falla. Bueno, escojamos otro color. De acuerdo, y esta va a ser otra elipse. Entonces pasemos por 100, 390. Y hagamos 200 por 200. Entonces es un círculo otra vez. Vamos a refrescarnos. Y ahí vamos. Y vamos a hacer la boca. Entonces lo voy a hacer negro. En el código para negro es todo ceros. Entonces eso son seis ceros. Y aquí dentro, voy a hacer algo diferente. Voy a hacer un arco, un arco. Y si miramos la documentación, haremos referencia. Aquí está nuestro arco. Es así como funciona. Si se llama sólo con x, y, w, a para iniciar y detener, el arco serán drones fallados. Es un segmento de pastel abierto. Entonces lo que queremos hacer aquí es que vamos a hacer exactamente Eso es cierto. 300, eso es x. Hagamos 420, y hagamos 70 y 65, el ancho y la altura. Y luego para empezar y parar, vamos a hacer, Empecemos justo en 0. Y terminemos en Pi k Así que veamos cómo se ve eso. Sí, perfecto. Y sólo nos falta la nariz. Sólo va a ser negro también. Entonces si no hicimos nada, seguirá siendo negro porque la última vez que llamamos fallar, dijimos que era negro, pero todavía lo vamos a volver a escribir aquí también. Por lo que es Xeon tiene su color como la Clara explícitamente. Por lo que 000, 000, 000, 000. Y esto va a ser una elipse. Y vamos a hacer 300, 350. Y hagámoslo un círculo otra vez. Por lo que sólo 80 por 80. De acuerdo, entonces vamos a refrescarnos. Y aquí está nuestro oso. 4. Cómo hacer colores aleatorios: De acuerdo, entonces tenemos codificados todos nuestros colores, rectángulo con forma de clorofila. Lo tenemos ahora mismo tenemos un color que Claire, por lo que estos cambian, pero queremos que los colores cambien cada vez que actualicemos la página solo para que sea idea general. Entonces para eso, vamos a sacar los colores de aquí de la función de relleno. Y vamos a colocarlos en una matriz JavaScript y dejar que la computadora escoja al azar uno de esos colores. Entonces para eso, en la parte superior, vamos a agregar una matriz. De acuerdo, contras, colores. Va a ser una matriz. Y aquí dentro vamos a sumar todos los colores que queremos usar. Por lo que podemos sumar este. Y podemos sumar todas las demás. Entonces aquí hay otra. Oh, está bien, así que ahí vamos. He agregado todos los colores que habíamos estado usando en nuestro ejemplo. Entonces ahora es el momento de llamar a la función de relleno. En lugar de codificar duro el color como teníamos antes. Ahora todos los colores están aquí. Vamos a pasar en una función que elegirá aleatoriamente uno de los colores de esta lista aquí de esta matriz JavaScript que incluye todos los colores que queremos usar. Entonces escribamos esa función. De acuerdo, entonces llamémoslo función gran color. No vamos a pasar ningún argumento. Y así es como lo vamos a hacer. Vamos a crear una variable llamada índice que va a ser Math.floor. Y va a haber punto matemático aleatorio multiplicado por longitud de punto de los llamantes, que es la longitud de esta matriz. Entonces este es 1234567. Y entonces sólo vamos a devolver el array de la persona que llama con el índice aleatorio que hemos generado. ¿De acuerdo? Entonces esto aquí, este índice recoge un número para una posición en la matriz aquí dentro. Y luego le devolvemos el color en esa posición, demanda. Entonces ahora cada vez que usamos nuestro color, en lugar de tener la coloración aquí, vamos a llamar a la función de llamada rand. De acuerdo, así que haré eso también por el cuerpo. Para los oídos, para los oídos internos, para el rostro, los ojos. Voy a dejar negros a los pupilas, humo. Está bien. Voy a dejar negra la boca y la nariz. Está bien. Entonces voy a guardar y refrescar y ver si funciona. Está bien. Por lo que no funcionó. Averigüemos qué pasó aquí. De acuerdo, sí, olvidé el paréntesis aquí. Queremos ejecutar la función. Asegurémonos de que ponga todas las demás. Entonces vamos a refrescarnos y ver si esta vez funciona. Y no funciona. Sí, tengo un error tipográfico aquí. Es longitud. De acuerdo, entonces estamos consiguiendo algo muy trippy y esto no es lo que queremos. El motivo es porque estamos llamando a la función justo aquí, dentro de la función de sorteo. Entonces en lugar de hacia abajo, vamos a hacer es establecer los colores para las diferentes partes del cuerpo a algunas variables fuera de la función. Y entonces sólo usaremos la variable aquí dentro. Por ejemplo, podemos decir dejar que el color BG sea igual a color FRAND. Y luego aquí, diremos B a color. Entonces intentemos eso. Y ahí vamos. Ahora el fondo es un estático, así que voy a hacer eso mismo por todas las demás partes del cuerpo. Entonces hagámoslo. El color del cuerpo es igual a color R1. Vamos a sustituir aquí. Lo mismo para el IRS, lo mismo para los oídos internos, y lo mismo para los ojos. Y por último, lo mismo para los nevados. Entonces vamos a refrescarnos. Y nos olvidamos de los oídos internos. ¿ Qué pasa ahí? Sí, aquí está. Tenemos dos sustituidos por la variable. Está bien, perfecto. Y verás que cada vez que nos refresquemos, nuestro script ahora está seleccionando diferentes colores al azar. No obstante, esto es un poco demasiado colorido para mí. Quiero que algunos colores coincidan, por ejemplo, la fase y las orejas. Entonces vamos a usar menos variables para los diferentes colores. Entonces voy a quedarme uno para el fondo, voy a quedarme con uno para la cara. Y me voy a quedar uno para los ojos, pero eso es todo. Entonces para las orejas, internas y externas, y para esta nota, solo voy a usar el color del cuerpo. Entonces aquí está la fase también utiliza el color del cuerpo. Este nodo utiliza el color del cuerpo. ¿De acuerdo? Sí, eso tiene un poco más de sentido. No obstante, a veces los que llaman se repiten en, por ejemplo, aquí, este guión está usando los mismos colores, el mismo color para los ojos, y para el cuerpo, la cara, etcétera. Y no quiero eso. Entonces vamos a modificar nuestra función de color aleatorio. Y vamos a decir lo siguiente. En primer lugar, vamos a crear una matriz aquí a la que vamos a llamar. Usa llamadores, índices, vale, y esta es una matriz vacía. Entonces ahora aquí en la función vamos a decir mientras se usan, los llamantes en existe, el punto incluye índice. Entonces eso significa que si en esta matriz ya tenemos este índice, entonces vamos a reescribir el valor del índice generando uno nuevo. Si no está en esta matriz como esta en este momento, porque esto está vacío, entonces este valor se mantendrá. Y lo último que queremos hacer es después de esto, después de tener un índice, vamos a agregar este índice a esta matriz. Entonces vamos a decir usa colores en el índice Porsche. ¿De acuerdo? Ahora si refrescamos, veremos que ahora los tres colores siempre son diferentes. 5. Corrección de ojos: De acuerdo, entonces nuestro guión está funcionando muy bien. Yo sólo voy a añadir un poco de detalle a los ojos. Yo sólo voy a añadir un poco de blanco. Entonces para eso, ¿qué tenemos nuestros ojos aquí? Bueno, vamos a hacer es vamos a copiar todo este asunto. ¿ De acuerdo? Y vamos a tener una elipse externa que es realmente un círculo que toma todo el espacio. Pero éste, lo vamos a hacer blanco. Podríamos simplemente escribir aquí blanco. O podemos usar los códigos de color HTML, que son FF, FF, FF, FF. Y luego el segundo, lo vamos a dejar con el color hielo que genera el guión. Pero lo vamos a hacer más pequeño. Entonces digamos 59 por 59. Lo mismo en este. De acuerdo, voy a guardar y refrescar. Eso irá. Esto es mejor. 6. Lightening algunos colores: De acuerdo, Entonces estamos usando el mismo color para el cuerpo, la fase, los nevados, las orejas, etcétera. Pero voy a añadir un poco de función solo para que tengamos diferentes tonos de este color. Particularmente lo que estoy planeando hacer es que voy a hacer la cara, la oreja externa, y el cuerpo sea un poco más ligero, y dejaré el auto real que ha sido seleccionado para el oído interno y para este nodo. Y luego el fondo, siempre lo voy a hacer más claro que el color real. Entonces para eso, habrá un enlace en la descripción a este archivo GitHub. Y es una función para Leiden en un color, este, es un poco complicado. Bueno, solo podemos copiarlo y pegarlo y luego lo incluiremos en nuestro guión. Entonces voy a copiar y voy a pegarlo. Y lo voy a pegar en la parte inferior. Ahí vamos. Por lo que esta función toma un color en formato HTML que comienza con el signo de libra, y luego va a tomar un por ciento. ¿ De acuerdo? Entonces voy a usar esa función. Veamos de fondo. Entonces en lugar de color de fondo, vamos a utilizar la función luz y paréntesis de color. Y pasamos en el color de fondo. Y entonces digamos 30. Entonces vamos a refrescarnos. De acuerdo, sí, vamos a elegir un color para el fondo y automáticamente lo está haciendo más ligero de lo que originalmente es. Entonces vamos a hacer lo mismo con el paréntesis de color del cuerpo . Y luego pasamos en el color del cuerpo. Y entonces vamos a hacer sólo el 10 por ciento aquí. Y voy a copiar toda esta línea. Yo también lo voy a usar en los oídos exteriores. También voy a usar esto en su cara. Y también voy a usar esta cosa que decía en el cuerpo, en el oído y en la cara. Y eso debería funcionar. Entonces vamos a refrescarnos. Sí, perfecto. 7. Descarga de archivos: De acuerdo, Y lo último que vamos a hacer es que vamos a añadir un poco de función en la parte inferior. Y esta función nos va a dejar descargar el archivo. Es hora de que nos refresquemos. Entonces va así. Se va documento, punto, agregar evento, oyente. El tipo de evento que vamos a escuchar, Va a ser contenido DOM cargado. Y lo que estamos diciendo es cuando el contenido del documento está totalmente cargado a lo siguiente y vamos a pasar en una función. Esto se denomina función de flecha en JavaScript. Por lo que es un conjunto de paréntesis y R0, que es el igual más mayor que signo. Y luego corchetes rizados con punto y coma. Y aquí dentro de una función con lo que vamos a hacer es establecer el tiempo de espera. Y esto va a tomar otra función de flecha como primer argumento. Y aquí dentro, vamos a hacer es abrir llaves y cerrar llaves. Y dentro, vamos a decir Guardar como V, g paréntesis, y luego SVG, todo minúscula. Y luego una coma después del corchete rizado de cierre. Y 500, lo que significa 500 milisegundos. Significa hacer esto después de 500 milisegundos. Entonces vamos a guardar, vamos a refrescarnos y veamos si funciona. Sí, nos está pidiendo que lo descarguemos. Entonces lo descargaré de nuevo. Está bien. Aquí, si abro mis Descargas, aquí están todos mis ositos de peluche. 8. Modificar la paleta de colores y las formas de colores: De acuerdo, entonces en la última lección, quiero mostrarles cómo experimentar con esto, un guión para crear su propio diseño original. Entonces, en primer lugar, voy a comentar la función que agregamos en la última lección. Y para eso, hay diferentes formas de hacerlo. Simplemente podemos hacer este asterisco de barra inclinada hacia adelante y luego añadimos otro al final. Asterisco barra inclinada hacia adelante, o al revés. Y ahora esta función va a ser ignorada. Yo sólo estoy haciendo eso. Por lo que no nos pide que descarguemos el archivo cada vez que actualicemos mientras estamos experimentando. ¿ De acuerdo? Entonces básicamente, puedes experimentar en primer lugar, modificando los colores. Puedes tener diferentes colores, puedes agregar más, puedes sacar algunos colores. Lo único es que se debe respetar la sintaxis de una matriz JavaScript con todas las diferentes cadenas para los llamantes siempre encerrados entre comillas simples. Y agregas una coma al final en todos ellos excepto la última. Por lo que ahora tenemos pocos colores. Y vamos a pasar por código de color HTML y simplemente experimentar, tratar de agregar algunos nuevos colores. Entonces, sumémosle éste. Y agreguemos algún tipo de gris. Vamos a gris claro también. ¿ De acuerdo? Y vamos a tener tantos colores como queramos aquí, ya que la función para generar un color aleatorio se toma en consideración la longitud de esta matriz. No necesita ser ningún terreno específico. Puedes usar tantos colores como quieras. Entonces vamos a refrescarnos y veamos cómo. Ahora el guión también se tira en los nuevos colores. Aquí está nuestro gris. ¿ De acuerdo? Y luego lo otro que puedes hacer es en la función de dibujo, puedes modificar todos estos. Por ejemplo, si modificamos el peso del trazo, las líneas que se dibujan serán mucho más delgadas. Al igual que esto. Además, puedes modificar cada elemento individual o incluso puedes crear elementos desde cero. Se puede experimentar con los labios con el nombre posterior. Recuerde que los dos primeros parámetros son x e y, que determinan el posicionamiento del centro de la elipse dentro del Canvas. Y estos dos últimos son la altura y el ancho de esa elipse. Entonces por ejemplo, podríamos hacer la fase, podríamos hacerla más delgada modificando esta que es la anchura. Hagámoslo 400. Ahí vamos. Y también podríamos agregar algo al fondo. Podríamos agregar una elipse, por ejemplo, que tenga su centro justo en medio del lienzo. Ya que el lienzo es de 600 por 600, será de 300, 300. Y entonces podemos hacer que se lleve todo el lienzo y será un círculo en el fondo que se lleve todo el lienzo seiscientos, seiscientos. Podemos hacer de eso un color diferente. Entonces llene. Y podemos agregar una nueva variable para eso. El color del círculo es igual al color sram. Digamos que el color del círculo aquí. A ver si funcionó. Ahí vamos. Entonces en la sección de descripción y vas a tener un enlace a todo mi guión. Puedes comprobarlo. Ahí está si cometes algún error, etcétera. Y siéntete libre de, siéntete libre experimentar y modificar todos los diferentes parámetros e incluso tratar de dibujar algo desde cero con elipses en los arcos. Y si te sientes muy aventureros, incluso puedes leer la documentación p5.js y usar diferentes formas nuevas que ni siquiera hemos usado en este curso.