Cómo crear arte generativo increíble con código JavaScript simple

    Rate this content
    Bookmark

    En lugar de dibujar manualmente cada imagen como en el arte tradicional, los artistas generativos escriben programas capaces de producir una variedad de resultados. En este masterclass aprenderás cómo crear arte generativo increíble utilizando solo un navegador web y un editor de texto. Comenzando con conceptos básicos y avanzando hacia teoría avanzada, cubriremos todo lo que necesitas saber.

    165 min
    12 Apr, 2022

    Comments

    Sign in or register to post your comment.

    Video Summary and Transcription

    El masterclass sobre Arte Generativo y JavaScript abarca varios temas, incluyendo dibujar formas, usar el depurador y estilos CSS, y explorar variables y colores. También profundiza en la creación de efectos de fuego, dibujar líneas y formas, y trabajar con oscilación y partículas. El masterclass enfatiza la importancia de guardar el trabajo, experimentar y construir a partir de los conceptos básicos. Destaca los usos del arte generativo en diferentes industrias y se inspira en textiles y el mundo real. En general, proporciona una visión general completa de las técnicas de arte generativo y sus aplicaciones.

    Available in English

    1. Introducción a Generative Art y JavaScript

    Short description:

    Hola a todos, soy Frank Forrest, un artista generativo y también un desarrollador de juegos. Me he enfocado en aprender JavaScript para el arte generativo. Les mostraré un sitio web llamado Twitter, donde publico programas de JavaScript súper pequeños. Estos programas son todos arte generativo y pueden experimentar, mezclar ideas e incluso editar el código. Trabajaremos para crear arte generativo similar en este masterclass.

    Hola a todos, soy Frank Forrest, un artista generativo y también un desarrollador de juegos y supongo que muchas otras cosas. Pero en este momento estoy principalmente enfocado en el arte generativo. Y realmente me he enfocado en, especialmente este año, pero incluso hace un par de años comencé a aprender JavaScript porque había estado aprendiendo C++ durante mucho tiempo. Así que no estoy seguro si ustedes están familiarizados con el tipo de cosas que hago. Así que les daré una rápida... les mostraré rápidamente lo que he estado haciendo. Lo que he estado haciendo.

    Entonces, déjenme ver si puedo hacer eso. Tendrán que tener paciencia conmigo porque todavía... No he usado Zoom tanto. Así que todavía estoy tratando de adaptarme aquí. Bien, espero que todos puedan ver mi pantalla ahora. Les estoy mostrando un sitio web llamado Twitter, que es un sitio web para publicar programas de JavaScript súper pequeños. Todos estos programas tienen solo 140 caracteres y todos son programas de arte generativo. Y creo que es un sitio web realmente genial para experimentar y jugar con diferentes ideas y ver qué otras personas crean y remix ideas. Muchos de estos son en realidad remixes de cosas de otras personas. Pero si yo... Este no es el sitio web real, por cierto. Este es un sitio web que hice para que sea un poco más rápido navegar por estas cosas.

    He hecho más de mil de estos. He cubierto prácticamente todos los temas posibles que puedas imaginar. Voy a ordenarlos por los más populares. Desde paisajes hasta otro tipo de cosas. Todo esto es arte generativo y este es el tipo de cosas que aprenderán en este masterclass. Estos son todos programas muy, muy pequeños. Quiero enfatizar esto aquí. Pueden ver el código literalmente ahí en la pantalla. Así que si, por ejemplo, voy a uno de estos, ahora pueden ver el código aquí mismo e incluso pueden editar el código. Esto es lo que les voy a mostrar. Vamos a trabajar hacia esto. Así que no espero que entiendan exactamente qué está sucediendo aquí. Por ejemplo, podría cambiar estos números para cambiar los colores. Hacerlo más verde, o tal vez más azul o lo que sea. Así es como podría ajustar lo que está sucediendo con este arte generativo. Puedo hacer que en lugar de ser cuadrados más grandes, sean cuadrados más pequeños, o puedo poner muchos más, tal vez. O lo que sea. Eso es con lo que vamos a jugar hoy.

    2. Creando un Archivo HTML y Dibujando Formas

    Short description:

    Vamos a empezar creando un nuevo archivo HTML. Te mostraré cómo dibujar un cuadrado usando la función fill rect. Luego te mostraré cómo aplicar color a la forma usando nombres de colores HTML o códigos hexadecimales. Ahora, Chris, puedes dibujar más rectángulos si quieres.

    Veo que algunas personas tienen la cámara encendida. Así que solo quiero saludar a Luz y Gleb. Gracias. No quiero que nadie se sienta obligado a encender su cámara. Bartosz, gracias. Solo siéntanse cómodos. Hagan lo que les resulte más cómodo. Aunque me ayudaría si quieren compartir su pantalla si están trabajando en algo. Porque vamos a estar, tal vez, mezclando un poco el trabajo de cada uno. Creo que sería divertido.

    Así que empecemos desde cero. Vamos a empezar creando un nuevo archivo de texto, un nuevo archivo HTML. Puedes hacer esto. No necesitas ningún programa especial. Solo tienes que hacer clic derecho. Vas a crear un nuevo archivo. Lo voy a llamar index.html. Puedes llamarlo como quieras. Index.html es un nombre estándar que se utiliza para los archivos HTML. Porque se abrirá automáticamente si vas a esa carpeta. Ahora tenemos un archivo HTML. Es un archivo vacío. Voy a abrir el bloc de notas. Tengo notepad++, pero voy a usar el bloc de notas normal aquí. Lo voy a arrastrar ahí. Ahora, no hay nada en él. Así que queremos crear un archivo HTML desde cero. Y ahora, lo que pasa es que hay muchas cosas complicadas con HTML. Y no voy a enseñar nada de eso. Voy a ir directamente a la cantidad mínima de HTML que necesitas para crear arte generativo. Así que vamos a ello. Tenemos nuestro archivo HTML aquí a un lado. Al otro lado, voy a abrir un navegador web. Y lo que puedo hacer es arrastrar el archivo HTML al navegador web. Así que ahora tengo una relación uno a uno. Tengo HTML a la izquierda, y tengo el navegador web a la derecha. Así que si escribo algunas letras aquí, lo guardo y voy al navegador web y lo recargo, verás que esas letras aparecen en el navegador web. Porque un archivo HTML, en realidad es muy flexible. Y se abrirá automáticamente como un archivo de texto o lo que necesites.

    Así que creemos un lienzo porque no necesitas un lienzo para el arte generativo. Puedes crear arte generativo con cualquier cosa que puedas imaginar. Pero la mayoría del arte generativo utiliza un sistema de dibujo estilo lienzo. Así que para crear un lienzo, es realmente así de simple, acabamos de crear un lienzo. Ahora necesitamos código JavaScript para operar en ese lienzo. Así que para hacer eso, creamos un bloque de script, donde escribimos script y usamos etiquetas de corchetes angulares, y hacemos una barra diagonal para terminar el bloque. Ahora tenemos nuestro bloque configurado aquí. Y queremos poder dibujar en ese lienzo. Así que necesitamos obtener un contexto 2D, que voy a guardar en una variable. Hablaré un poco más sobre variables, pero lo guardaremos en una variable, vamos a hacer X igual a C, que es el lienzo, cuando hago IDC, eso crea automáticamente una variable para el lienzo. Así que vamos a hacer X igual a C punto, obtener contexto. Eso nos dará nuestro contexto 2D para el lienzo. Y JavaScript es tan flexible, deberías terminar las líneas con punto y coma, porque rara vez puede ocurrir algo que no debería si no lo haces, pero realmente no necesitas punto y coma. Bien, ahora tengo acceso a nuestro contexto. Así que te mostraré cómo dibujar un cuadrado, un rectángulo. Hay una función llamada fill rect. Y estas funciones pueden parecerte muy simples. Como, ¿cómo se supone que debo hacer arte increíble con solo un fill rect? Pero en realidad, estos son los bloques de construcción. A nivel fundamental, estarás llamando a fill rect. Y la mayoría de mi arte utiliza fill rect o comandos simples como estos, porque en el nivel más básico, eso es realmente lo que importa. Así que fill rect tiene cuatro parámetros, que son la posición X e Y y el ancho y el alto. Así que si digo 100, 100 y luego 500 y luego 100, obtendremos un rectángulo que espero que sea bastante ancho, un poco fuera del lado. Ahora voy a presionar F5. Eso es un rectángulo. Así que espero que todos hayan podido seguir hasta ahora de cómo crear un archivo de texto, un archivo HTML que tiene un dibujo en él. Esto es lo más básico. Ahora, déjame mostrarte cómo aplicar color a esa forma. Nuevamente, estamos operando en este objeto llamado x. Así que hemos guardado nuestro contexto 2D, que es un poco nuestra interfaz para dibujar y demás en este lienzo específico. Y se guarda en la variable llamada x. Así que voy a hacer x.DillStyle. Es igual a rojo, la palabra red. Y luego voy aquí a F5. Debería haber un rectángulo rojo, ¿verdad? Aunque normalmente, no vas a usar nombres de colores. Esto es solo compatible con HTML. Hay muchos nombres de colores. Otra forma de hacerlo es con, si alguna vez has visto estos códigos hexadecimales. Así que usarías un símbolo de almohadilla. Y luego, puedes hacer 6 o 4 o 3 números. Yo normalmente solo uso 3. Así que eso sería los componentes rojo, verde y azul. Así que si pones F, eso sería cuatro de rojo. 0, 0. Hagámoslo. Hagamos un verde. Así que sería 0 de rojo, todo el verde y 0 de azul. Así que tenemos eso. Ahora, Chris, puedes dibujar más rectángulos si quieres. Así que tenemos uno verde. Voy a copiar y pegar. Y esto no distingue entre mayúsculas y minúsculas, al menos en esta parte, para la parte del color. Así que voy a hacer un rectángulo rojo.

    3. Usando el Depurador y Estilos CSS

    Short description:

    Te mostraré cómo abrir el depurador y usarlo para depurar. También aprenderemos cómo hacer que el lienzo sea más grande y llenar toda la ventana. Explicaré cómo usar el estilo CSS margin para eliminar las barras de desplazamiento y los espacios. Cubriremos los conceptos básicos de HTML, incluyendo la creación de un lienzo y una etiqueta de script. Por último, demostraré la consola y cómo usarla para programación en vivo y depuración.

    Y luego lo moveré a un lugar ligeramente diferente. Presiona F5. No funcionó. Aquí, vamos a ver. Te mostraré cómo abrir el depurador aquí. Estoy usando Chrome. Puede que estés usando Firefox u otro navegador. Ambos tienen depuradores. En Chrome, generalmente presiono F12 para abrir el depurador. También puedes, a veces no está permitido. Puedes hacer, creo, más herramientas, las herramientas de desarrollo. Creo que es lo mismo en Firefox. Si alguien, ¿por qué estoy chateando? Oh, espera. Bien. Permíteme abrir mi chat para poder ver lo que dice. Bien. Si alguien tiene una pregunta, puedes publicarla en el chat y la responderé de inmediato. Porque esta masterclass es totalmente flexible. Nunca la he hecho antes y no tengo idea de lo que la gente no sabe. Entonces, oh, tal vez estoy fuera del lienzo. Tal vez, um. Sí. Bueno, ¿cuál es el tamaño del lienzo por defecto? Creo que es 300 por 150, creo que puedes tener razón. Así que hagamos el lienzo más grande. Hagamos, okay, te mostraré un truco para mostrar el lienzo completo. Así que lo que podemos hacer es hacer uno completo, E nueve. Cuando pones una E, algo como uno E nueve, eso es notación científica. Así que es como un número muy grande. Alrededor de mil millones. Hagamos eso y luego veamos cómo se ve el lienzo. Bien, ahora puedes ver que el lienzo es muy pequeño. Este es el tamaño real del lienzo aquí.

    Hay un par de formas diferentes de establecer el tamaño del lienzo. Puedes hacerlo así C.width = lo que quieras que sea. Um, solo voy a usar notación científica aquí para hacerlo más grande. Um, espera, eso debería desaparecer. Bien. Lo hicimos más grande. Um, quiero mostrarte muy rápido. Otro truco para eliminar. Esto, ¿ves este pequeño espacio en blanco en la parte superior izquierda de la imagen aquí? Um, hagamos que estos, um, llenen toda la ventana. Así que voy a usar estas variables que se llaman innerWidth y innerHeight, que ya están predefinidas para nosotros. Eso será igual al tamaño completo de la ventana. Pero todavía hay estos pequeños espacios y también una barra de desplazamiento. Así que no queremos barras de desplazamiento y no queremos pequeños espacios. No queremos nada de eso. Así que voy a poner otra etiqueta aquí, una etiqueta body, que se supone que debes tener, pero de todos modos no necesitas realmente una. Lo principal es que queremos establecer el estilo, el margen del estilo CSS. CSS puede ser confuso, pero no necesitas saber mucho al respecto. Todo lo que necesitas saber por ahora es que puedes hacer margin = cero. ¡Boom! Las barras desaparecieron. Llena completamente el tamaño. Incluso puedo ir, si voy a pantalla completa y presiono recargar. Ahora ocupará toda la escena. Puedes escuchar si quieres en un evento de cambio de tamaño, no lo tengo ahora, está bien. Pero la idea es que ocupe toda la pantalla con lo que queramos. Así que puedes hacer eso o, oh, puedo mover esto. Solo estoy descubriendo esto, okay. Así que puedes hacer eso o puedes, puedes, ¿de qué estoy hablando? Estilo de margen del cuerpo y altura. No necesariamente necesitas hacer que tu lienzo use innerWidth e innerHeight. Es posible que desees hacer que tu lienzo, muchas veces para el arte generativo, solo hago que mi lienzo sea cuadrado, algo así. Y si haces eso, es posible que desees agregar una etiqueta de estilo aquí que diga algo como, algo así, voy a salir de aquí bastante pronto. Así que ahora solo estoy, si entiendes, acotando esto, estoy usando el ancho, el estilo de ancho. Ayuda saber un poco de CSS. No necesitas saber mucho de CSS, pero es posible que desees saber cómo posicionar tu lienzo y cosas así. Solo lo básico. Así que creo que eso es todo lo que necesitamos saber sobre HTML. Aprendimos cómo crear un lienzo, cómo crear tu etiqueta de script. Asegúrate de poner tu etiqueta de cierre de script. Eso es muy importante. Si no la tienes, no funcionará. Y este es un archivo HTML válido. Esto es todo lo que necesitas saber para HTML. Así que espero que todos hayan seguido hasta ahora. Pasaremos al siguiente paso. Voy a mostrarte algo que no sea programación en vivo. Que es lo que vamos a hacer la mayor parte del tiempo. Lo que quizás no te des cuenta de lo increíble que es JavaScript es esta consola aquí donde estoy ahora. Puedes escribir comandos allí. Cualquier comando y sucederá. Puedes usar esto en cualquier sitio web. Voy a mostrarte cómo funciona la programación en vivo en ella, porque es útil para depurar. Puedo usar esto para una calculadora. Si quiero sumar dos números o multiplicar números juntos, abriré esto y comenzaré a escribir cosas allí. También puedes hacer puedes literalmente escribir tu código aquí. Hagamos que nuestro estilo de relleno sea rojo de nuevo.

    4. Usando Twitter y un Editor de Código Personal

    Short description:

    Debería ver un cuadrado rojo apareciendo de inmediato. Y siento que esa es una forma mucho mejor de iterar, al menos para estos proyectos pequeños. A continuación está Twitter. Me encanta este sitio web. Es todo JavaScript, y estos programas súper pequeños están comprimidos. La parte de edición en vivo es increíble. Literalmente puedes escribir cosas y sucederán automáticamente. He encontrado esto muy útil para el arte generativo. Hice un sitio que es mucho más fácil de usar que Twitter, creo, se llama mi editor de código personal. No es perfecto. Pero para nuestro propósito hoy, será genial. Tienes resaltado de sintaxis. Tienes una pantalla de vista grande y tenemos la interacción en tiempo real. Programación en vivo.

    Debería ver un cuadrado rojo apareciendo de inmediato. No necesité recargar. No necesité hacer nada. Simplemente lo escribí y apareció automáticamente. Y siento que esa es una forma mucho mejor de iterar, al menos para estos proyectos pequeños. Así que no voy a usar la consola aquí. Solo quería mostrarte lo útil que es, ya que es básicamente lo mismo que te mostraré a continuación. Puedes simplemente escribir tu código en la consola y ejecutarlo en tiempo real allí. A continuación está Twitter. No sé si todos estaban aquí cuando lo mostré por primera vez. Pero me encanta este sitio web. Es todo JavaScript, y estos programas súper pequeños están comprimidos. No vamos a aprender sobre golf de código hoy, que es gran parte de lo que es este sitio web, que es la práctica de tomar un programa y comprimirlo tanto como sea posible para que quepa en este espacio increíblemente pequeño. Pero la otra parte de ello, el aspecto que quiero compartir, es la parte de edición en vivo. Así que voy a comenzar un nuevo tweet aquí mismo haciendo clic en el botón de nuevo tweet. Y la parte de edición en vivo es increíble. Por ejemplo, ahora hay como nueve de esas cosas. Ahora, si quiero cambiar cuántas de esas cosas se están moviendo, simplemente puedo presionar un botón y automáticamente cambia. No necesito recargar nada. No necesito presionar ningún tipo de botón especial ni nada. Simplemente puedes escribir cosas y sucederán automáticamente. He encontrado esto muy útil para el arte generativo. Porque a veces, cuando estás trabajando en un programa, lleva tiempo compilarlo, varios segundos o incluso un minuto, o no puedes iterar tan rápidamente. Porque no hay una interfaz uno a uno donde tu escritura aparezca directamente. Así que creo que así es como vamos a trabajar la mayor parte del día. Excepto que no voy a usar Twitter. Hice un sitio que es mucho más fácil de usar que Twitter, creo, se llama mi editor de código personal. No es perfecto. Hice esto hace unos años cuando todavía estaba aprendiendo JavaScript. Así que simplemente lo he estado mejorando. Realmente necesito comenzar desde cero. Pero para nuestro propósito hoy, será genial. Tienes resaltado de sintaxis. Tienes una pantalla de vista grande y tenemos la interacción en tiempo real. Programación en vivo. También podrías usar... ¿Alguna vez has oído hablar de CodePen? Puedes usar CodePen, aunque creo que necesitas hacer clic en un botón para recargar allí.

    5. Usando Variables y Dibujando Formas

    Short description:

    Ahora nos adentramos en las variables, que nos permiten controlar diferentes aspectos de nuestro arte generativo. Las variables en JavaScript son fáciles de usar, y en este código, borramos el lienzo usando una operación a nivel de bits. La variable de bucle 'i' se utiliza para crear un bucle, y la función fill rect se utiliza para dibujar rectángulos. Los valores de ancho y alto utilizados en la función tienen razones específicas, y se pueden ajustar para cambiar la apariencia de la forma. El tamaño del lienzo se establece en una resolución estándar de la industria de 1920 por 1080.

    De acuerdo, avancemos un poco más. En nuestro ejemplo aquí, comenzamos a utilizar variables. Cuando les mostré por primera vez ese pequeño dibujo de un cuadrado, no estaba utilizando variables. Obviamente, estás muy limitado en lo que puedes hacer cuando escribes todo específicamente. Ni siquiera es realmente arte generativo. Es simplemente dibujar formas. Pero comienza a convertirse en arte generativo cuando puedes dibujar muchas más cosas en la computadora de las que podrías dibujar en la vida real. Puedes controlar todas estas cosas con variables. Una variable en JavaScript es realmente simple. No necesitas hacer nada para definir una variable. Este es el código aquí, así que C es nuestro lienzo, es lo mismo que era en el otro. Lo que hace esta primera línea es borrar el lienzo. Al principio me resultaba un poco confuso por qué esto borraría el lienzo. Pero lo que JavaScript piensa que está sucediendo es que está cambiando el ancho, esencialmente. En realidad, no está cambiando el ancho porque está haciendo una operación a nivel de bits sobre cero. Prácticamente cualquier cosa que hagas que modifique el ancho borrará el lienzo. Incluso si no está modificando el ancho, si es un operador aritmético para el ancho. Así que esta primera línea simplemente borra el lienzo. Hay un par de formas diferentes de hacerlo. Puedes hacer veces igual a uno o lo que quieras. O incluso puedes usar la variable de altura. El ancho es solo una letra más corta, así que lo usamos. Así que eso es borrar el lienzo. Volvamos a las variables.

    La única variable que estamos usando aquí es i. i es lo que llamaríamos una variable de bucle. Así que esto es un bucle. Es una configuración muy simple. Es como si alguna vez hubieras visto un bucle en C++, funciona exactamente de la misma manera. Tiene tres partes. Tres secciones realmente. Realmente solo una de ellas importa. Parece que es muy importante lo que hacen estas secciones, pero la única sección que importa es la sección intermedia. Esa es la condición del bucle. Y cuando eso se vuelve falso, automáticamente se detendrá el bucle. Esto de i menos menos puede ser un poco confuso. Todo esto significa es que comenzará en 1,000 y seguirá restando hasta que llegue a cero. Así que en realidad tengo miedo de cambiar esto. Veré qué sucede. Sí. Necesitamos restar i. i no es igual a cero. Ahí vamos. Esa es otra forma de hacerlo. Mismo código exacto. Por lo general, esto es más como lo verías. Probablemente verías i igual a eso. Luego i es mayor que 0, algo así. Hay tantas formas de hacer esto. No hay una forma correcta o incorrecta. Simplemente estamos recorriendo esto. Así que podríamos ver esta forma aquí. Veamos un poco más cómo se crea. Bueno, sabemos qué es esta función fill rect. Eso es simplemente dibujar un rectángulo. Tiene cuatro parámetros. Un espacio en blanco es completamente... se ignora en JavaScript. Así que cuando intento descifrar algo, a menudo espaciaré las cosas en líneas y simplemente veré así. Tenemos nuestro X, tenemos nuestro Y, tenemos nuestro ancho, tenemos nuestra altura. Y... así que podemos ver que nuestro ancho y nuestra altura son 29. Ahora, lo genial de esto es que podemos simplemente mover las cosas para ver qué está sucediendo. Sí, esa es nuestra profundidad allí con cada uno de estos cuadrados. ¿Qué sucede si lo hacemos más bajo? ¿Qué sucede? Bien, hay menos de esos. Si lo hacemos más grande, no hay mucho cambio. Bueno, veamos las dos primeras partes de nuestro fill rect. Estos valores aquí, pueden parecer un poco aleatorios, pero en realidad tienen una utilidad muy útil. Hay una razón por la que son así. Aún no les he hablado de throw, pero es bastante útil, al menos en este contexto. Esto no es cómo se usa normalmente throw, pero lo uso a menudo en este tipo de contexto para simplemente ver qué valores tiene algo. Así que tenemos que el ancho es 1920. El ancho entre dos es 960. Así que eso es en realidad por qué está ahí. Puedo poner eso allí solo para que sea más fácil de ver. La altura es 1080, la altura entre dos es 540. Así que lo pondremos allí. Luego quitaré el throw para que vuelva al resto del código. Ahora, si pongo ese throw al final, entonces estaría bien. Aquí es donde se muestra el throw, por cierto. No sé si la gente lo vio, pero... Tenemos nuestro ancho y nuestra altura. Todo esto se configura automáticamente por Twitter. Es posible que te preguntes, como, ¿por qué el lienzo tiene 1920 de ancho y lo que sea de altura? Eso es porque Twitter lo configuró así. Eso es porque con ese código HTML que habíamos escrito, usan código HTML y dicen que el ancho y la altura sean 1920 por 1080. Eso es lo que usan en Twitter. Es una resolución de 1080p. Así que es algo bastante estándar en la industria.

    6. Explorando Dimensiones de Formas, Funciones y Color

    Short description:

    Exploramos el ancho y alto de la forma, el uso de las funciones seno y coseno, y el impacto del valor T en la velocidad de la animación. Se introduce la función HSL para agregar color de forma dinámica. Experimentamos con diferentes valores y observamos los efectos. También combinamos las variables x e y para crear diversos efectos de arte generativo.

    De acuerdo. Así que tenemos nuestro ancho y nuestro alto aquí. Esta es la posición X y la posición Y. ¿Y qué pasaría si no tuviéramos esto? ¿Qué sucedería? Bueno, sería cero. Estaría centrado en cero. Así que queremos que esté centrado en el centro.

    Ahora esta siguiente parte es como el ancho de esta forma aquí. Así que podríamos jugar con estos números. Todos ellos solo son números para probar y ver qué hacen, si no recuerdo o para experimentar. Así que tenemos nuestro ancho y nuestro alto aquí.

    Estas S y C pueden ser confusas. Lo entiendo. Y Deweiter solo define un par de operadores matemáticos, el seno y el coseno, que define como S mayúscula y C mayúscula. También hay una T mayúscula para la tangente. Pero en realidad, es lo mismo que Math.seno y Math. Hay muchas cosas útiles en la biblioteca matemática de JavaScript. Básicamente, todo lo que pensarías que estaría allí, todas las funciones trigonométricas y demás. El seno y el coseno son algunas de las funciones más utilizadas en el arte generativo para todo tipo de propósitos. Así que eso ya lo tenemos resuelto. Seno y coseno.

    Y este valor T es la otra variable que se pasa a esta función. Y ese T, puedo imprimir T como cualquier otra cosa, se muestra aquí. Ese es el tiempo en segundos. Así que estoy multiplicando T por pi sobre 2, lo que hace que esta animación sea un bucle de dos segundos, o tal vez de un segundo. Porque, por supuesto, todo esto funciona en radianes, si estás familiarizado con radianes frente a grados. Los grados van de cero a 360. Pero en realidad, cualquier lenguaje de programación por defecto utiliza radianes, que van de cero a 2 pi. Así que solo requiere un poco de pensamiento. Pero una vez que te acostumbras, pi es 180, 2 pi es 360, pi sobre 2 es 90. No sé. Supongo que te acostumbras después de un tiempo. ¿Qué pasaría si no tuviéramos pi aquí? Bueno, en realidad esto controla qué tan rápido gira esto. Ahora, si te fijas, si lo pongo demasiado rápido, parece que está girando más lento de alguna manera, porque está empezando a coincidir con la frecuencia del tiempo real. Y estos números también se pueden ajustar. Estos números multiplicando i. De acuerdo. Ahora tenemos un bucle. Ahora tenemos diferentes formas. ¿Qué pasaría si me deshago de esto? ¿Qué pasaría si muevo t aquí arriba? Los muevo a ambos o cambio estos valores aquí. Estos son los tipos de cosas con las que puedes experimentar. Agreguemos algo de color a esto. Agreguemos algo de color a esto. Te mostraré una forma de agregar color de forma dinámica. Usaremos la función HSL, que es muy útil en el arte generativo. Es matiz, saturación, luminosidad. Así que habrá tres parámetros diferentes para esta función y también alfa, que no vamos a usar. Estos pequeños acentos graves... ¿cómo se llaman? Creo que se llaman acentos graves. Se usan para, ya sabes, olvidémonos de eso por ahora. Mantengámoslo simple. Solo usaremos comillas regulares. Con Java, JavaScript es genial con las cadenas. Literalmente puedes simplemente unir cadenas. Así que si tuviera Q coma saturación, necesitamos un signo de porcentaje. Porcentaje coma y luego valor, porcentaje. Simplemente funciona. De acuerdo. Tenemos un rojo. Tengo rojo, probando diferentes valores, siempre probando los valores porque eso te ayudará a tener una idea de lo que está sucediendo. Esto, al principio me confundió un poco, pero el parámetro de luminosidad. Así que en cero, es negro, en 50. Es el color completo de cualquier color que establezcas. Y a medida que subes a cien, vuelve a cero para volver a blanco. Así que si queremos un color, ese sería 50. Ahora, todo es rojo. Eso está bien y todo, pero ¿qué pasa si queremos diferentes colores? ¿Y si pongo i ahí como matiz? Bueno, eso es diferente. Creo que intentemos... No borrar la pantalla. Así que, solo estoy usando un comentario aquí, si quieres, siéntete libre de comentar cosas si quieres. Eso es interesante. Hagámoslo un poco menos arcoíris. Así que voy a reducir un poco i para que el matiz no se extienda sobre una gran porción. Podría usar, podría usar, podría almacenar esta posición x en una variable. No la voy a llamar x minúscula porque ya se usa x minúscula. Recuerda, ya lo he hecho antes. Ahora tenemos x. Así que ahora está cambiando a lo largo del eje x. ¿Verdad? O podría hacer lo mismo para y. Creo que es bueno, de alguna manera, una vez que tienes tu código funcionando, separar las cosas. Hacerlo más fácil para ver cómo funcionan las cosas. Ahora tenemos x e y. Ahora hagamos un pequeño truco de arte generativo. ¿Qué tal si hacemos algo como x e y y hacemos algún tipo de combinación de x e y? Ya sabes, como x e y o x o y. ¿Qué tal x por y? Eso es un poco demasiado. Puedes probar con estas diferentes, me gusta algo así. Me gusta hacer estas diferentes funciones para obtener diferentes efectos. Probablemente haría esto un poco más grande para que llene toda la pantalla. Me gusta llenar todo mi lienzo. Ahora eso es como el arte generativo, ¿sabes? Incluso podemos hacer que cambie de color con el tiempo también.

    7. Mezclando Tiempo y Aleatoriedad en el Arte Generativo

    Short description:

    ¿Qué pasa si mezclamos el tiempo en el arte generativo? Vamos a explorar el concepto más a fondo llenando un cuadrado con un degradado aleatorio. Podemos lograr esto utilizando la función matemática random para generar los valores de X e Y. Al ajustar el ancho y alto del cuadrado, podemos controlar su apariencia. Además, podemos utilizar funciones para simplificar el código y hacerlo más manejable. También podemos introducir colores aleatorios para agregar interés visual. Experimentar con diferentes valores y funciones nos permite crear piezas únicas de arte generativo.

    ¿Qué pasa si mezclo el tiempo en esto? Veamos qué sucede. Nada. ¿Es eso porque? Oh, a veces haces algo y resulta que el valor no es lo suficientemente grande como para marcar la diferencia. Personalmente, no me gusta eso. Creo que podría verse mejor, solo estoy probando aquí, vamos a entrar en otra cosa en un segundo. ¿Está todo el mundo en la misma página con respecto a dónde estamos? ¿Hay alguien que... quiere que explique? ¿Quieres que explique más? No. Así que tenemos los conceptos básicos de la codificación en vivo, aprendimos sobre variables, aprendimos un poco sobre pruebas, al menos si I es mayor que cero, aprendimos nuestro bucle, un bucle. Los números aleatorios aún no los hemos hecho. Eso es algo muy, muy importante para el arte generativo. Empecemos desde cero. Empecemos desde cero. Hagamos algo... llenemos un cuadrado con un tipo de degradado aleatorio, ya sabes. Así que haremos un bucle de I a 99. Este es solo un paradigma que suelo copiar. Estamos buscando entre I y J. Hmm, no quiero hacerlo de esa manera. No creo que quiera hacerlo de esa manera. En su lugar, quiero usar esta función llamada math random para obtener los valores de X e Y y asegurarme de que esto sea lo suficientemente grande. De acuerdo, tenemos algo. Es una pequeña esquina de la pantalla, así que estos math random... Intentemos de nuevo. Math random va a devolver un valor entre cero y uno. Menor que uno, pero entre cero y uno. Entonces, ¿y si nuestro ancho y alto del cuadrado? Hagámoslo un poco más alto que ancho para poder ver qué está pasando. Ahí vamos. Eso no es realmente el x e y, es más bien el desplazamiento x e y. Así que deshagámonos de eso y movámoslo allí. Ahora tenemos un cuadrado que está en el mismo lugar cada vez. Simplemente se llenará hasta formar un cuadrado completo, pero se llenará al azar. Hagámoslo un poco más grande para que puedas ver qué está pasando aquí. Verás que se está llenando, pero ¿qué pasa si los dibujamos en un lugar diferente cada vez? Así que podemos ver un poco mejor. Así como usamos este aleatorio aquí, podemos usarlo... En realidad, aprendamos sobre funciones porque eso podría facilitar esto. Esto es súper simple, nada complicado. Voy a usar una simple función de flecha. Así que queremos hacer r... El nombre de nuestra función es simplemente r en minúscula. Tomaremos un valor que simplemente llamaremos A, supongo. Esta será una función de número aleatorio. Devolverá MathRandom multiplicado por A. Entonces, en lugar de llamar a MathRandom multiplicado por W, simplemente podemos llamar a Rw, y podemos llamar a Rh. Tenemos eso. Entonces, si queremos, digamos, que nuestro x esté en una posición diferente cada vez, podemos hacer algo así. Nuestro y esté en una posición diferente cada vez, podemos hacer algo así. Si queremos que nuestro ancho y nuestro alto sean diferentes, mantengamos un ancho mínimo de 50, una altura mínima de 50. Una altura mínima de 50. Y vamos a usar la altura, el ancho, y tenemos eso. Démole también un color aleatorio. Voy a usar esta función, que se llama R en mayúscula, que nuevamente es proporcionada por Twitter. Funciona como esa función HSL que te mostré antes. Pero úsala, es RGB. Pero podría hacer algo como. Oh, sí. Démole un color aleatorio. Eso es lo que quería hacer. Aleatorio. Esto es RGB, entre 256. Así que vamos a hacer 256. Tenemos colores aleatorios por todas partes. Quiero cuadrados más densos. Quiero puntos más pequeños para mis cuadrados. Me gusta más denso. Ahí vamos. Ahí vamos. Gran parte del arte generativo consiste en ajustar valores hasta obtener algo que se vea interesante. Porque es muy fácil hacer algo que esté tan cerca de ser interesante, pero que realmente necesita ajustarse ligeramente de manera diferente para llevarlo a la meta. No estoy diciendo que esto sea genial ni nada, pero es un buen comienzo. Estos valores aleatorios, se llama aleatoriedad uniforme. Eso significa que va a devolver el valor entre 0 y 1 de manera completamente uniforme. Como puedes ver, es una distribución uniforme. Pero no tiene que ser así. ¿Qué pasa si tomamos este valor, este resultado aquí? Y hacemos cosas con él. ¿Qué pasa si lo elevamos al cuadrado? Esto es PowerOf en JavaScript, con símbolos de estrella así. Entonces, si elevamos esto a una potencia, verás cómo eso, creo que podría verse mejor en el eje Y. Veamos cómo le da una distribución desigual hacia la parte superior de la forma. Bueno, menos dos es interesante. ¿Qué pasa si lo pasamos por la función seno? Sabemos que el seno toma un valor aproximadamente entre cero y 2 pi. No mucho. Apuesto a que esto está arriba porque la salida está entre 0 y 1. Lo que realmente necesitaríamos hacer es multiplicar el resultado del seno por h. Me gusta cómo se ve eso en realidad.

    8. Explorando Variables y Colores Aleatorios

    Short description:

    Vamos a explorar la diferencia entre la aleatoriedad uniforme y no uniforme. Podemos utilizar números aleatorios como booleanos y controlar los colores de nuestro arte generativo. Al ajustar los valores en el código, podemos lograr diferentes efectos visuales. Siéntete libre de experimentar y hacer cualquier pregunta que tengas.

    Hagamos eso aquí también. ¿Qué pasa si hacemos otras cosas? ¿Qué tal el tangente? ¿Qué hace eso? Eso no es bueno. El tangente no devuelve un valor entre 0 y 1. Devuelve un valor entre menos infinito. Así que, por supuesto, obtendrás un resultado muy diferente. El coseno es básicamente lo mismo que el seno para este propósito. Así que aprendimos un poco sobre variables aleatorias aquí y cómo pueden ser controladas. Hay una gran diferencia entre la aleatoriedad uniforme y la aleatoriedad no uniforme. Lo que haces con los números aleatorios. También podrías usar un número aleatorio como un booleano. Nuestros colores son realmente importantes. Lo vamos a ver en un segundo. Si tienes colores aleatorios por todas partes así, no se verá bien. Entonces, ¿qué pasa si hacemos algo como... Digamos, r10 es menor que dos. Digamos, haremos un rojo. Rojo y negro. No olvides la coma. Eso podría ser confuso. Este bucle for aquí, no usé llaves. Así que necesito una coma para que el bucle for sea completo. Recomiendo usar llaves la mayoría del tiempo. Hace que sea más fácil de leer. ¿Qué acabo de hacer? Ahora se elige aleatoriamente entre rojo y negro. Eso no es realmente lo que quería hacer. Quería hacerlo más así. Así que ahora, vamos a tener un poco de rojo llamativo. También podemos tener un poco de azul. Estos valores aleatorios ahora, los estoy usando como un booleano. Así que toma un número aleatorio entre 0 y 10. Si es menor que 2. Si fuera menor que 20, siempre sería rojo. Puedes ajustar estos valores como quieras. Entonces, ¿cómo va todo en el chat? ¿Alguien tiene alguna pregunta sobre algo? ¿Debería seguir adelante? Buenos colores.

    9. Dibujando Círculos y Óvalos

    Short description:

    Deberíamos aprender más formas de dibujar cosas, como círculos y líneas. JavaScript puede ralentizar tu navegador, así que ten cuidado. Dibujar demasiados puntos puede hacer que tu computadora se vuelva lenta. Puedes dibujar círculos usando la función arc y óvalos usando la función ellipse. Cambiar el ancho y alto con el tiempo puede crear efectos interesantes. Mantén un ojo en los errores y usa valores absolutos para números altos. Experimenta con diferentes ángulos para rotar óvalos. Puedes dibujar un cuarto de un óvalo usando la función line2. ¡Diviértete experimentando con el arte generativo!

    Veamos si... Lo siguiente que podemos aprender son... Probablemente deberíamos aprender más formas de dibujar cosas. Rect no es la única forma de dibujar cosas. Por supuesto, también puedes dibujar círculos y líneas. Y creo que los primitivos fundamentales serán realmente eso. Este rect que acabamos de aprender se alinea en círculos u óvalos. Tienes esos primitivos. Puedes hacer cualquier cosa.

    Los círculos son un poco más complicados. Permíteme mostrarte cómo funcionan. Mantengamos lo que tenemos aquí y sigamos construyendo a partir de eso. Sí, en realidad... Sí, construyamos esto. Agreguemos algunos círculos a esto. Eso podría ser interesante y veamos qué sucede.

    Otra cosa que quizás quieras hacer con tus composiciones es detenerlas automáticamente después de cierto tiempo. Entonces, si se vuelve demasiado ruidoso después de unos segundos, podría decir algo como t es mayor que cuatro. Así que ahora solo durará cuatro segundos y luego se detendrá. También podrías aumentar la velocidad que agregué para que sea un poco más rápido ver los resultados ahora. Creo que probablemente sea demasiado rápido. Eso va a... Una de las cosas difíciles de JavaScript, una de las desventajas de JavaScript, es que puede ralentizar tu navegador. Y luego necesitas empezar a hacer cosas en el navegador, y es bastante molesto.

    Este programa en realidad es un poco pesado porque está dibujando todos estos puntos. He descubierto que los 1E4 fill Rex, eso es 10,000 fill Rex por cuadro, es un poco demasiado para que la mayoría de las computadoras lo manejen. Por lo general, querrás mantener... Bueno, para el arte generativo, no importa, ¿verdad? Porque no es en tiempo real, no importa que sea lento, pero ten en cuenta que si te vas mucho más alto que eso, puede ser extremadamente lento. Lento, súper lento. Agreguemos círculos ovales y cosas encima de esto. En realidad, mantengamos esto. Voy a copiar y pegar el mismo estilo de relleno. Entonces, para el óvalo, podría usar el mismo color. Podría usar un color diferente. ¿Quién sabe?

    Ahora, lo que respecta a los círculos, no hay un comando directo como fill circle, pero podrías crear uno si quieres. También puedes crear tu propia función como te acabo de mostrar. Y tal vez lo hagamos en un momento. Primero, hagamos el círculo. Es una función llamada arc. Lo haré así primero. Tengo miedo de lo que podría suceder si lo hago así. Esta es la posición xy. Luego tienes tu radio, que simplemente usaría un ancho. Luego tienes tus ángulos para el arco, que son para un círculo. Realmente no importa. Solo asegúrate de usar ángulos lo suficientemente grandes para cubrir 2 pi. Entonces, 0 y 9 estarán bien para esto. Y luego voy a rellenar el arco.

    Ahora, lo que estás viendo aquí probablemente no es lo que esperabas ver porque necesita comenzar una nueva ruta cada vez que hace un arco. Se ve bastante bien. Es bastante bueno, no voy a mentir. Necesita comenzar una nueva ruta cada vez que hace un arco. Necesita hacerlo... a menos que quieras conectar eso. Entonces, si comienza una nueva ruta cada vez que hace el arco, entonces no obtendrás eso todos estos círculos conectados entre sí. Y esto es generalmente lo que quieres hacer para dibujar un círculo. Primero llamas a begin path, luego llamas a arc, luego llamas a fill. También hay otra función que es realmente útil. Es muy simple, muy similar a un arco, que se llama ellipse. Donde pasas un ancho, un alto, un ángulo y luego... Un ángulo es en términos de un ángulo de rotación. Entonces, si, ahora mismo es cero, así que si digo que lo establezca en estos diferentes ángulos, verás cómo está rotando ese óvalo. Por ahora, lo dejaré en cero. Así que tenemos nuestros círculos dentro, óvalos dentro de los cuadrados. Creo que podría verse interesante si estos anchos y altos cambian según el... basado en el tiempo. Tal vez podría hacer que se vuelva más delgado con el tiempo o algo así, eso a veces puede verse interesante, o más grueso con el tiempo tal vez. Oh sí, quiero mostrarte lo que ha sucedido allí, en realidad. Estos errores que están apareciendo. Twitter y este programa CapGIS te mostrarán errores aquí. De lo contrario, probablemente verás errores aquí en la consola cuando presiones F12. Y realmente tienes que mirar esos errores porque significan algo. Siempre ha sido un poco molesto para mí que estos valores altos deben ser como, no pueden ser negativos. ¿Qué? Así que creo que todos saben cómo se vería si estos valores fueran negativos. No sé por qué decidieron restringir eso. Pero simplemente lo llamaremos valor absoluto. Valor absoluto. Así es como dibujas un círculo o un óvalo o incluso parte de un óvalo. Permíteme mostrarte cómo dibujar medio óvalo. Ahí es donde uso estos números, que controlan cuánto del óvalo quieres hacer. Y te acercas a 2 pi. Eso será un óvalo completo. Pi será, recuerda que estábamos diciendo antes, radianes, pi es medio círculo, y sabes que pi sobre dos sería como un cuarto de círculo. Ahora podrías estar nuevamente confundido, como ¿por qué esto no es un cuarto de óvalo? Es como si estuviera conectando, saliendo de esto, puedes ver usuario, hay como una parte de cuerda. No sé cuál es el nombre de esta cosa. Pero ¿qué pasa si quieres un cuarto del óvalo, cómo lo harías? Necesitamos otro punto, que esté en el centro del óvalo. No es trazar un punto en el centro del óvalo para nosotros. Entonces necesitamos llamar a esta función line2. Para moverlo allí. Ahora, el primero... ahora está trazando el punto en el centro del óvalo. Y podemos ver cómo se vería una cuarta parte de ese óvalo. Y esto, podemos alimentarle tiempo aquí. Podemos hacer todo tipo de cosas para experimentar con este arte.

    10. Dibujando Líneas y Formas

    Short description:

    Vamos a experimentar con diferentes formas de dibujar líneas y formas. Podemos usar la función stroke para conectar líneas y la función fill para crear polígonos. Al ajustar el ancho de línea y el color, podemos controlar la apariencia de las formas. También podemos combinar las funciones fill y stroke para crear efectos únicos. Además, podemos usar las funciones save y restore para manipular la pila de renderizado y aplicar traslaciones y rotaciones a nuestras formas.

    Veamos, hagamos más cosas con líneas. Um, dejemos esto por ahora. Me gusta jugar con esto yo mismo, lo comento en mi código mientras experimento. En lugar de un fill rect, me estoy volviendo loco aquí. ¿Qué pasa si hago una, um, no escribamos mucho más código. Hagamos una línea 2. Ahora no veo nada todavía. ¿Por qué no veo nada? ¿Cómo se llama? Necesito llamar a una función para dibujar esa línea o rellenar esa línea. Ahora, nuevamente, recuerda, no llamar a beginPath. Está conectando todo junto, y no solo conectando, está redibujando en cada fotograma. No quiero eso. Llamamos a beginPath. Y vemos nuestras líneas. Hay demasiadas líneas. Ni siquiera podemos verlas. Tengamos menos, ¿qué tal menos líneas? Ahora puedo ver nuestras líneas. Estoy usando un fill. ¿Qué pasa si hacemos un stroke? Un stroke va a, ya sabes, conectar todas esas líneas a la línea. Conectar esas líneas a la línea. Pero si hago un fill, asumirá que estoy tratando de hacer un polígono y conectar esas líneas juntas así. También hay una función genial llamada even-odd que puedes pasar a fill. Lo siento. Eso es realmente confuso. Esta es solo mi notación abreviada para obtener un resultado ligeramente diferente. Así es como trazamos y rellenamos, y también puedes controlar el ancho del trazo. Entonces, digamos que quiero hacerlo más grande o más pequeño. Recomendaría no hacer el ancho de línea tan grande porque he descubierto que hay una diferencia bastante grande dependiendo de los navegadores, cómo interpreta este ancho de línea. Verás cómo estas líneas sobresalen. Realmente depende del navegador qué es exactamente lo que va a suceder. Y he notado algunos problemas con eso, el ancho de línea. Y puedes establecer el color de línea de la misma manera que puedes establecer el color de relleno. Se llama stroke style. Stroke style, y tienes fill style. O aquí hay una idea. Mezclémoslo todo junto. Así que tenemos un fill style y tenemos un stroke style. Así que tenemos nuestro relleno y tenemos nuestro trazo. Así que hagamos ambos. Hagamos un relleno y un trazo. Tenemos fill rect. Voy a rellenar algo aquí. Oh sí, relleno. Estoy tratando de ver si hay algunos, oh hay algunos colores detrás de eso. No resalta mucho sin embargo. Asegurémonos de que lo tengo arriba porque la línea se está dibujando encima del, encima en lugar de debajo. Podría ser, ¿qué pasa si quiero separar estos? Hagamos primero la línea y luego hagamos, vamos después, encima de la línea. Estoy jugando con cosas. No sé si algo de esto es bueno, solo experimentando con diferentes ideas de cosas que podrías querer probar. Hagámoslo un poco más grande. Puedes ver, lo haremos un poco, un poco ocupado. Vamos a hacerlo solo por un segundo. De acuerdo. ¿Qué tal, rotación? ¿Qué pasa si queremos hacer un cuadrado que no esté perfectamente alineado ortogonalmente con el lienzo? Así que también puedes hacer eso. Hay un par de formas diferentes de hacerlo. ¿Cuál sería la forma más fácil? Hay una función llamada save y restore, que es como empuja y saca la pila de la pila de renderizado. Así que en realidad no estamos haciendo nada en este momento, así que no está haciendo nada. Pero si hiciera algo como translate, Ahora debería, No creo que esté funcionando. traducir todo, oh, ¡sí está! ¡Oh, por eso! Porque, estamos haciendo, me confundí porque las líneas no se están traduciendo. Deshagámonos de eso, para que pueda ver lo que estoy haciendo. Entonces, los cuadrados se están traduciendo. Tenemos nuestra traducción de Y y X. Entonces, por supuesto, nuestra traducción es literalmente solo estos parámetros, estos campos aquí, así que tenemos un Y, estos primeros dos parámetros aquí, así que pongamos esos. Y ahora tenemos lo mismo que teníamos antes. Esto es funcionalmente equivalente. Tenemos nuestra traducción y tenemos una rotación. Una rotación te permitirá aplicar una rotación a... Necesito más filas para poder ver qué está pasando... ext.rotate... Voy a... Voy a ver... Creo que mucha programación es simplemente descubrir por qué las cosas no funcionan... Estoy tratando de borrar... rotar relleno. No sé... ¿alguien puede ver por qué eso no funcionaría... Oh. Rotar... Creo que estás rotando los píxeles. ¿Cómo puede funcionar la rotación? Ponlo aquí arriba. Pero, cuando lo pongo aquí abajo... oh. Creo que entiendo, ¿tal vez? Guardar... traducir... rotar. Honestamente, estoy un poco confundido. Pensé que la rotación funcionaría después de la traducción... bueno, me da un ángulo estático, pero el ángulo está aquí un valor que está rotado. Cuando lo pongo aquí abajo, no da un valor que esté rotado.

    11. Explorando Rotaciones y Bucles Infinitos

    Short description:

    Estamos explorando el concepto de rotar el ángulo del dibujo y la posición. Estamos experimentando con diferentes ángulos y dimensiones para crear efectos únicos. También estamos discutiendo la importancia de guardar el trabajo y el progreso incremental. Además, estamos abordando el problema de los bucles infinitos y cómo evitar que ocurran.

    ¿Qué está pasando? ¿Qué está pasando aquí? Eso definitivamente, oh, a veces simplemente explorar puede ser de gran ayuda. ¿Ustedes están empezando a ver qué está sucediendo aquí? Lo entiendo. Lo entiendo. Esto en realidad es bastante interesante. Así que, nota que el ancho y la altura ya no son verticales y horizontales. Estoy rotando como la dirección. El orden de las operaciones es un poco complicado de entender a veces con estas rotaciones y traslaciones. Y por lo general, lo que haré es crear una función que haga... Una vez que entienda lo que está sucediendo, crearé una función, como dibujar un cuadrado rotado donde paso un ángulo y una posición, y sé que la función siempre hace lo que espero que haga. Entonces aquí en realidad estamos rotando el ángulo del dibujo, como el ángulo de sombreado. Pero si pusiera la rotación aquí arriba, la estaríamos rotando antes. Entonces también estaríamos rotando la posición. Así que ese es un buen ejemplo de lo diferente que puede ser esto. ¿Qué pasa si queremos ambos? ¿Puedo tener ambos? Puedo tener ambos. Vamos a darle también un valor aleatorio. Wow, eso no está tan bien. Eso no está tan bien. Me gusta más con un ángulo estático. Oh, ¿sabes qué? Apuesto a que se vería mejor si este ángulo no se aleatorizara en cada iteración, sino que fuera el mismo para cada cuadrado, algo así. Así que son ángulos diferentes, pero iguales para cada cuadrado. Además, como estamos rotando aquí, decidí agregar un poco de rotación. Vamos a aleatorizar eso también. Oh, de nuevo, quiero que este ángulo sea el mismo, no aleatorizado cada vez. Entonces el rectángulo sería... Necesitamos guardarlo en una variable. Y como estamos rotando, necesito ampliar este x e y. Ahora mismo está cambiando el ancho y la altura. El ancho es 23. Creo que también necesito aumentar la altura, probablemente me gustará eso. Vamos a darle un poco más, un poco más de intensidad. Genial. Sí, tenemos un poco de efecto esponjoso aquí con el sombreado. Estoy haciendo que y, voy a hacerlo lo suficientemente lejos, porque estamos rotando y la mitad de ellos están, la mitad de ellos están fuera del punto central. Oh, la pantalla. ¿Qué pasa si hago, qué pasa si traduzco primero? Tienes que experimentar con estas cosas, y a menudo te equivocarás. Pero no hay otra forma de hacerlo que intentarlo. ¿Qué pasa si traduzco primero, luego roto, luego hago mi otra traducción? Así que primero traduzco al centro del lienzo, luego puedo reducir un poco estos y obtener un relleno más ajustado. No está en la parte superior. ¿Por qué no está en la parte superior? Oh, probablemente porque estos rectángulos deberían cubrir todo el barrido de dos pi. De acuerdo, ahí vamos. Estos ángulos, recuerda que es un ángulo entre cero y uno, o cero y dos, pero el ángulo realmente llega hasta dos pi. Así que probablemente deberías hacer eso también. Lo diré, otra cosa que probablemente debería empezar a decirte es que guardes tu trabajo y guardes el progreso incremental de tu trabajo. La forma. Una de las cosas que me gusta de Capgis es que puedo simplemente hacer clic en guardar. Y automáticamente guardará un archivo de texto de esta cosa que acabo de hacer. Luego, eventualmente, cuando vuelva a ella, simplemente puedes arrastrar el archivo de texto directamente de vuelta y que lo cargue por ti. Así que solo quería mostrar cómo, cuando haces clic en recargar, dirá que tiene el código cargado pero no se ejecutará de inmediato porque pueden ocurrir problemas. Debería mostrarte uno de esos problemas que pueden ocurrir, para que sepas qué hacer cuando suceda. Entonces JavaScript es un poco molesto con los bucles infinitos, así que intentemos causar un bucle infinito aquí al tener un bucle for que nunca decrementa la variable. Afortunadamente, afortunadamente esto en CAPJS y Twitter inyectan código en estos bucles for que ni siquiera puedes ver, pero está ahí. Te lo demostraré. Te lo demostraré. Es posible que ni siquiera veas que el código está ahí, pero está ahí. Te estoy lanzando, que casualmente es el nombre de esta función. Verás, este es el código. Este es nuestro código, pero no escribimos este código. No escribimos este código. No escribimos este código. Eso es porque este sistema simplemente inyecta un poco de código allí para evitar que ocurra un bucle infinito. Porque los bucles infinitos realmente son molestos. Voy a mostrarte qué sucede cuando no tienes eso. Así que volvamos y veamos cómo evitar que suceda. Tenemos i menos menos de vuelta a nuestro antiguo método. Vamos a deshacernos de este lanzamiento aquí, volver a nuestro antiguo método. De acuerdo. Ahora voy a desmarcar la protección de bucle. Eso va a desactivar esto. Así que será nuestro código sin procesar ejecutándose. Ahora, ¿qué crees que va a suceder cuando borre esto? Me da miedo hacerlo. Espero que estemos bien. No sé. ¿Ustedes creen que debería intentarlo? Me da miedo, sin embargo, porque estoy haciendo esto por ti para ahorrarte la frustración que acabo de experimentar. Ahora esto está congelado. Todavía puedo hacer clic en otras pestañas. Por lo general, lo que puedes hacer es simplemente hacer clic en Chrome, hacer clic en esta X en la parte superior de la pestaña. Esa es la forma más fácil de detener esto. Esto nunca volverá, estás bloqueado para siempre cuando esto sucede. Y es muy molesto. Puede suceder con cualquier tipo de programación, pero a menudo sucede con el arte generativo porque estás experimentando y explorando, y es muy fácil que esto suceda. De acuerdo. Afortunadamente, lo solucionamos. Bien. De acuerdo.

    12. Preventing Infinite Loops

    Short description:

    Ahora te mostraré otra forma de evitar bucles infinitos. Si deseas modificar el código sin causar un bucle infinito, puedes desactivar temporalmente el código eliminando parte del bucle for. Esto te permite hacer cambios sin que el código se ejecute. Una vez que hayas terminado, puedes restaurar el bucle for y continuar como de costumbre. Es importante tener en cuenta este problema, ya que puede ser una trampa común, especialmente con funciones recursivas. JavaScript no es muy bueno detectando este tipo de bucles infinitos, así que es algo a tener en cuenta.

    Ahora va a aparecer. Se va a guardar. El programa se carga, modificar código, o reanudar para ejecutar. Tenemos la protección de bucle de vuelta. Así que eso es para que sepas que puede suceder. No es el fin del mundo si sucede. Te mostraré otra forma de evitar que suceda. La forma antigua. Así que imagina que tienes la protección de bucle activada, desactivada, si eliminas la variable del bucle, como dije, es un bucle infinito. Nunca va a salir. Así que si quieres hacer algo así, muy rápidamente, digamos que quiero mover I aquí. No está en esta parte. Quiero cambiar cómo funciona, básicamente. Lo que puedes hacer es desactivar el código. A veces lo haremos eliminando parte del bucle for. Ahora es un código malo. No se ejecutará. Así que podemos hacer lo que queramos. Puedes tomar I, podemos moverlo aquí abajo y aún queremos mantener I como la variable del bucle. Y después de hacer mi pequeña cosa, puedo volver a poner el bucle for y estamos listos para continuar. Así que eso es solo una pequeña cosa de la que debes tener en cuenta, es una de las cosas que debes tener en cuenta. Probablemente te encontrarás con esto en algún momento. Así que definitivamente es bueno saberlo. Puede ser mucho peor con funciones recursivas. Peor que los bucles for. Porque JavaScript es aún peor detectando eso. Y sí, he tenido que reiniciar mi computadora una o dos veces.

    13. Generative Art and Its Uses

    Short description:

    El arte generativo tiene una amplia gama de usos, desde colgar en las paredes hasta aplicaciones comerciales como empaques y créditos de películas. Los videojuegos también incorporan aspectos generativos, como niveles y armas generados proceduralmente. El arte generativo no se limita a la programación informática y se puede encontrar en la jardinería y el paisajismo. Incluso el arte tradicional, como las pinturas de Bob Ross, puede seguir algoritmos generativos. Los efectos de fuego se pueden crear utilizando autómatas celulares o sistemas de partículas. Plataformas como FXHash muestran arte generativo, que a menudo combina múltiples conceptos. La subdivisión y las funciones recursivas son técnicas comunes en el arte generativo.

    Así que estoy hablando de cualquier cosa. Pero si hay algo específico que a alguien le interese sobre el arte generativo, ya sea algo que hayan visto y les guste, o si quieren hablar sobre cómo crearlo. Chris Evans tiene una pregunta. Dice que jugar con el código está bien, pero ¿qué tipos de usos has visto del arte generativo? Esa es una buena pregunta. El arte en sí mismo, quiero decir, el arte tiene una cantidad básicamente infinita de usos. El arte generativo específicamente puede usarse desde simplemente colgar en la pared, como lo que ven detrás de mí, hasta cosas más comerciales como empaques, créditos de películas, CD, álbumes, obras de arte. Ahora ya no usamos CDs, pero en revistas a menudo se ven fondos y texturas que son arte generativo, y hay tantos usos para esto. Luego están los videojuegos, donde hay mucha superposición entre ellos. Casi todos los videojuegos en estos días tienen aspectos generativos. Cuando los videojuegos comenzaron, nadie realmente pensaba en este tipo de cosas, pero hoy en día, tener cosas generadas proceduralmente en tu juego, ya sea niveles completos o partes pequeñas de un nivel, o incluso armas y cosas que puedes recoger y que tienen componentes generativos, como en Borderlands, cuando obtienes un arma, es un arma generativa que se genera combinando muchas cosas diferentes, tanto visualmente como funcionalmente. Aquí vemos que hay más de 17 millones de variaciones. Eso se debe a que combina estas diferentes cosas juntas. Así que hay videojuegos, diseño gráfico, jardinería. El arte generativo no se limita solo a la computadora. Hay muchas otras formas de arte generativo también. Estaba viendo a algunas personas que cultivan arte generativo en platos de pintura. Voy a compartir este enlace porque definitivamente vale la pena leerlo. Es un artículo que escribió Amy Goodchild sobre arte generativo. Y es una lectura realmente interesante para las personas interesadas en los fundamentos. Pero solo quiero ir al final para mostrarte de qué estaba hablando hace un segundo. Los sistemas naturales, aquí hay bacterias, aquí hay uno con condensación. Pero también piensa en la jardinería. ¿No es eso arte generativo en cierto sentido? Realmente, todo el arte, en mi opinión, es algo generativo. Es como una escala deslizante donde tienes arte generativo al 100%, donde todo es creado por una computadora, y tienes arte que no es generativo en absoluto, donde un artista está haciendo y pensando en cada cosa de manera muy específica. Pero gran parte del arte que se pinta y cosas así, en mi opinión, está más del lado generativo, al menos parte de él. Como todos recordamos con Bob Ross. Sus pinturas siguen un algoritmo generativo muy específico, donde tiene en mente un algoritmo de cómo pintar la escena. Primero vas a pintar el fondo. Y vas a hacer un cielo, que será un degradado de arriba a abajo. Luego pintaremos las montañas, y lo haremos de cierta manera. Y luego pintamos el nivel del suelo. Y luego sabemos cómo hacer los árboles. Son pequeñas cosas así. Y pinta un árbol de la misma manera cada vez. Al menos el árbol de hoja perenne. Hay un par de tipos diferentes de árboles para los que casi tiene estos algoritmos. Y también puedes crear un programa de computadora para hacer ese tipo de cosas. Si miro algunos de mis tweets, hice uno donde está ese árbol. Jugué un poco con el dibujo de árboles al estilo de Bob Ross, cosas muy simples. Pasemos a la siguiente pregunta, ¿cómo podemos crear un efecto de fuego? Uso Twitter como una excelente fuente de ideas. Creé este programa de búsqueda de tweets para poder buscar tweets. James tiene una pregunta, dice que los efectos de fuego son difíciles de crear y lo son, ¿alguna vez has intentado crear un efecto de fuego? Definitivamente tengo algunos consejos para ti, he creado muchos efectos de fuego. Busquemos en fuego y busquemos por impresionante. Veamos cuáles son los efectos de fuego más impresionantes. Tenemos a Yannatan, es genial. Aquí hay una versión diferente del fuego. Eso no es realmente fuego. Aquí hay uno que usa un autómata celular para simular fuego. Aquí tenemos otro fuego celular. Aquí hay otro autómata celular. También aparecen fuegos artificiales aquí. Aquí hay una onda de calor. Aquí hay uno de mis mejores fuegos con un autómata celular. Probablemente no nos adentraremos demasiado en los autómatas celulares, pero pueden ser una buena manera de simular este tipo de efectos, ya que cualquier tipo de simulación de fluidos puede funcionar bien para el fuego. La forma estándar de hacer fuego, aquí hay otro que hice, es con partículas. Voy a mostrarte cómo hacer fuego desde cero. Eso podría ser un buen ejercicio para nosotros. Antes de hacer eso, respondamos las otras preguntas en el chat. Pero ahí lo tienes. Llegaremos a cómo hacer fuego. Joss dice que ha estado recopilando un género de arte en FXHash, y dos de sus favoritos son Industrial Park y Harlequin Block Building. Ambos parecen generarse en una cuadrícula, que supongo que se basa en coordenadas. ¿Puedes darme un ejemplo básico de cómo lograr eso? Echemos un vistazo a estos. Si alguien no está familiarizado con FXHash, es una plataforma de arte generativo para comprar y vender arte generativo, y también para ver arte generativo. No es necesario comprar nada y es completamente gratuito ver y descargar todo en este sitio web. Aunque muchas personas venden su arte aquí, y honestamente es divertido ver el arte. Estoy esperando que aparezca este. A veces no aparecen de inmediato. Voy a intentar abrirlo en una ventana aparte. Eso puede ser porque es un poco lento. Quién genera o si te desplazas hacia abajo, son las miniaturas que se han pregenerado. Me parece que esto es una cuadrícula subdividida y luego cada una de ellas, por lo general, el arte generativo utiliza múltiples conceptos diferentes que se combinan. Y si solo tienes un concepto, probablemente no será tan interesante. Aquí tenemos, me gustaría ver un poco mejor, todavía estoy esperando que se cargue. Louis, también podría ser que IPFS a veces va muy lento. Intenta con este otro aquí. ¿O es esto? Dotcha. De acuerdo, este está utilizando un sistema de subdivisión. Puedes ver la diferencia aquí. Mientras que todos estos cuadrados son exactamente la misma forma en la cuadrícula. Aquí vas a tomar tu cuadrado, y luego lo divides en un montón de cuadrados pequeños, y luego posiblemente conectas algunos cuadrados vecinos como este. Mientras que en este otro Industrial Park, tienes tu cuadrado completo, luego básicamente creas una función recursiva que divide el cuadrado en muchas formas diferentes de manera pseudoaleatoria, que es lo que hace este. También tengo algunas piezas que hacen eso. Y ambas cosas son técnicas de arte generativo muy comunes. Por supuesto, solo hacer la subdivisión por sí sola no es interesante. Y por eso este artista hace otras cosas.

    14. Técnicas de Arte Generativo y Textiles

    Short description:

    Tienen una paleta de colores, lo cual es importante. El artista ha creado rectángulos redondeados con un aspecto uniforme. El artista combina el arte generativo e imágenes predefinidas. Twitter es un gran recurso para encontrar ejemplos. El texturizado es un aspecto clave del arte generativo. La textura agrega singularidad e importancia al arte. Hay muchos ejemplos en Twitter. Los textiles utilizan el arte generativo y han existido durante miles de años. Las máquinas de tejido crean patrones. Es todo arte generativo, solo un tipo diferente.

    Tienen una paleta de colores, lo cual es muy importante. Como viste cuando estaba usando colores aleatorios, no es tan interesante, pero cuando comienzas a elegir solo un par de colores para tu paleta, realmente puede hacer que las cosas resalten. Como algunos de estos aquí. Pero este artista también ha creado, algunos de estos no son rectángulos, algunos son como rectángulos redondeados. Y hay esta X en el medio, una cruz en el medio de todos ellos que le da un aspecto uniforme. Multipurpose a circus, creo que vi este, creo que compré uno de estos. Eso parece, sí, lo hice. Soy el número uno, por cierto. Puse el número uno y dije que me gusta este proyecto. Otras personas deberían comprar uno. Lo publiqué allí. No despegó realmente. Pero creo que es súper genial. Me gusta este. También tengo uno súper pequeño. Creo que tengo el más pequeño. Sí, tengo el más pequeño. Lo siento, pero estos se están cargando muy lentamente. No sé cuál es el problema, hombre.

    Aquí hay uno. Aquí está lo que viene. Aquí está cuando esto viene. Esto no es una subdivisión. La forma en que estoy viendo lo que estoy viendo ahora, parece más como un relleno de espacio. Entonces, una subdivisión es cuando tienes un cuadrado y, como, lo divides en secciones más pequeñas y más pequeñas, sabes, divides a la mitad cada una de esas mitades divididas cada una de esas divididas. Esto, para mí, se ve más como un relleno de espacio donde tomas un cuadrado, luego pones una forma dentro de él, tal vez un cuadrado, luego, ves, ¿dónde puedo poner otra forma? ¿Dónde está su apertura? Ya sabes, e intento meterlo allí y esto es un espacio apretado llenando, por lo que en realidad, como poniendo cosas tan ajustadas como sea posible a los cuadrados vecinos para llenar todo el espacio posible. Y, uh, entonces de lo que estamos hablando es de cómo lograr un. Un sistema de coordenadas basado en cuadrícula. Sí. Estoy tratando de pensar si creo que el fuego podría ser una mejor manera de comenzar porque estos, estos son un poco más, un poco más difíciles de hacer. ¿Este ya terminó? No, quiero echar un vistazo, parece interesante. Parece que hay, sí, hay pequeñas habitaciones y una Estoy tratando de determinar si estas habitaciones están generadas. No creo que estén generadas en realidad. Porque lo estoy viendo aquí y veo que solo en la miniatura, esta habitación y esta habitación parecen ser la misma habitación exacta. Esta habitación y esta habitación son la misma habitación, pero de un color diferente. Creo que esta, creo que esta pieza está utilizando, um, imágenes, una combinación de arte generativo e imágenes predefinidas. Creo que las están subdividiendo en cualquier lugar entre, parece que probablemente cinco y como siete u ocho, ya sabes, cuadrícula, luego en cada una de esas cuadrículas, luego en cada una de esas cuadrículas, eligen una imagen aleatoria que han, um, ya sabes, creado de antemano. Y estoy tratando de pensar si están rotando. No parece que estén aplicando rotaciones a la imagen. No, um, están colocando la imagen con un aleatorio o probablemente llenando el cuadrado primero con un color aleatorio, eso es la alfombra. Luego, encima de eso, están poniendo la imagen, que es la parte blanca para los muebles y cosas así. Y hay diferentes formas de hacer este tipo de cosas, pero creo que eso es lo que están haciendo en este. Um, así que podemos volver a todo esto. Solo voy a seguir respondiendo las preguntas.

    Real Chris Evans es una pregunta básica, pero ¿tienes buenos recursos para entender los diferentes conceptos matemáticos sobre algunas de las técnicas de arte generativo? Es una buena pregunta. Um, bueno, lo bueno del arte generativo es que puedes usar cualquier matemática que desees. Um, así que realmente no hay límite para lo que puedes hacer. Um, la mejor manera es realmente simplemente, bueno. Twitter es una gran manera porque, como te mostré aquí, puedes buscar y luego encontrar, um, ejemplos. Así que por ejemplo, necesito este llamado subdivision waves, que es un poco similar a ese diagrama de trabajo de circuito. Si lo bajara un poco, luego tal vez dibujara, ya sabes, diferentes rellenos con diferentes colores y cosas así. Comienzas a obtener algo similar. Así que Twitter es un gran recurso para encontrar ejemplos. Textiles. Um. He visto un par en Twitter relacionados con textiles. Entonces, uh, Luz, lo siento si estoy pronunciando mal tu nombre. Luz. Una variación en textiles. ¿Qué recomiendas? Técnicas interesantes para construir textiles con arte generativo. Bueno, el texturizado en sí mismo es un aspecto clave del arte generativo. E incluso como viste en este primero, se ve bien solo por el texturizado. También quita este texturizado y comienza a verse como, bien. Como cuadrados, como rectángulos y se vuelve aburrido. Así que realmente, la forma en que sientas tu arte es lo que lo hará especial y único, y eso es simplemente tan importante. Y también, cuando piensas en la pintura o en cualquier tipo de arte, como la textura. Es, a menudo, uno de los aspectos más importantes del arte, incluso si es como muy sutil, incluso si es como la falta de textura, ya sabes, pero generalmente no vas a usar solo colores planos porque a menos que el resto de la composición sea lo suficientemente interesante como para llevar todo lo que necesitas textura. Y también hay muchas cosas en Twitter para eso. Sé que hace poco hice algunos de esto, lo que estaba buscando allí, pero no creo, no creo que estuvieran listados allí. Hice un par, y a veces hago experimentos solo con textura. Por ejemplo, aquí hay un par de estudios de textura mínima que hice. Aquí hay otro. Entonces puedes ver esto, todo este código aquí. Es un código muy pequeño. Y es así porque solo estoy mostrando, ya sabes, puedes, puedes hacer, puedes experimentar como quieras esta primera parte. Estas partes del código son, bueno, en realidad esta primera parte del código es la X, realmente la única cosa que controla esta textura es esta última parte. Lo cual va a, ya sabes, cambiar completamente cómo se ve. ¿Qué pasa si hago algo así, o así? Solo estoy jugando aquí. Solo te estoy mostrando, como hay diferentes formas de crear texturas. También hay personas que se inspiran directamente en textiles. Los textiles utilizan mucho el arte generativo. Y son una de las primeras forms de arte generativo que probablemente hayamos visto, están en culturas que durante miles de años, realmente han estado tejiendo como estas mantas realmente geniales y serán grandes. Probablemente no, ver, no quiero buscar un nuevo arte generativo Quiero buscar como textiles reales, sí, como este tipo de formas, este tipo de símbolos, acolchado, incluso como patterns tipo floral, todas estas cosas son algunos de los primeros tipos de forms de arte generativo antes de que las computadoras estuvieran disponibles. Y luego, por supuesto, el tejido y cosas así, fueron algunas de las primeras aplicaciones de las computadoras, como ejecutar estas máquinas de tejido para crear estos patterns. Es todo arte generativo, solo un tipo diferente de arte generativo. Así que espero que esto responda algunas de tus preguntas. Voy a entrar en más detalles. Gracias Frank. Sí, gracias, gracias Liz.

    15. Inspiración de los textiles y el mundo real

    Short description:

    Los textiles son una gran fuente de inspiración para el arte generativo. Encuentro inspiración tanto en el mundo real como en conceptos imaginarios. Hay diferentes formas de abordar el arte generativo. Considera explorar el arte generativo basado en textiles y encontrar formas de llevar tu arte al mundo real.

    Espero que eso ayude. Lo hace. Los textiles son realmente una buena fuente de inspiración, creo, para el arte generativo. Sabes, encuentro que hay dos cosas que me inspiran, ya sea cosas en el mundo real que veo, y a veces tomo una foto en mi teléfono o lo que sea, en el momento, si veo algo interesante. Podría ser una alfombra. Podría ser solo un patrón de mancha de aceite en el suelo, o A veces me inspiro en el otro lado, que es solo como matemáticas, supongo. Solo como conceptos imaginarios, que no se basan en el mundo real. Y hay diferentes formas de hacerlo. Así que sí, los textiles son geniales. Volvamos a... Gracias. Investigaré eso. Gracias. Sí, busca alrededor. Hay muchas cosas buenas. Creo que probablemente haya uno o dos en fxhash que valen la pena revisar. Bueno, sé que, déjame ver esto. Sé que creo que se llama telar, ¿no? Hay muchas cosas basadas en textiles. Que deberías investigar. Es realmente... Es hermoso. El tema es hermoso, sí. Y hay otras formas de presentar el arte generativo. Sabes, al principio todo estará en la computadora, pero para presentarlo es posible que eventualmente quieras intentar no solo imprimirlo, sino qué tal si puedes, por ejemplo, enviar esto a alguien y hacer que tejan una alfombra con ello o algo así. Hay lugares en línea donde puedes hacer cosas como esa y eso sería increíble, ¿sabes? Eso sería realmente genial. Sabes, tener una manta basada en tu propio arte generativo. Hay formas de hacerlo, así que piensa en cómo sacar tu arte generativo de la computadora y llevarlo al mundo real.

    16. Creando un Efecto de Fuego

    Short description:

    Vamos a intentar crear un sistema tipo fuego. Comenzaremos con un fondo negro y dibujaremos un círculo rojo. Usaremos un porcentaje para controlar el movimiento, la reducción de tamaño y el cambio de color. Crearemos un bucle para dibujar múltiples llamas y dispersarlas. Utilizaremos mezcla aditiva para el efecto de fuego. Aún queda trabajo por hacer, pero nos estamos acercando a crear fuego.

    De acuerdo. Vamos a intentarlo, así que voy a volver a crear un sistema tipo fuego. ¿Cómo podemos hacer fuego? Te mostraré algunos trucos. Bien, comencemos con el fondo negro. Voy a trabajar un poco rápido aquí. Solo voy a hacer un rectángulo relleno lo suficientemente grande como para llenar toda la pantalla de negro. Tenemos un fondo negro.

    Dibujaré un círculo. Un radio, no veo nada porque es un color. Así que voy a usar HSHSL aquí, y como te mostré antes cómo hacer cosas, lo haré de una manera más sencilla. Usaré esta cadena de plantilla. Básicamente, es una forma más simple de crear estas cadenas. Hue, saturación, ¿tenemos rojo? Tenemos rojo. La idea con esto es simplemente que este signo de dólar, llave es solo una forma de quiero decir, es fundamentalmente equivalente a esto, pero ocupa menos espacio, y al final se vuelve más fácil de leer una vez que te acostumbras. También hay un parámetro de alfa aquí, es posible que no te des cuenta, pero hay un parámetro de alfa, que puedes establecer entre cero y uno, totalmente opcional. Así que tenemos un círculo rojo, que es el primer paso para dibujar fuego, aunque no lo creas. Esto no va a ser el mejor fuego del mundo porque estoy empezando. Quiero que esto sea, vamos, eh, no está en la parte inferior. Necesito múltiples, como necesito, necesito que esto se mueva. Necesito que se reduzca. Necesito que cambie de color. Necesito, um, todas estas cosas. Así que obtengamos, obtengamos un porcentaje. Solo lo llamaré P P, y vamos a lanzar, vamos a almacenar el tiempo allí por ahora. Básicamente, el porcentaje, se repetirá cada segundo. Esto es una división modular, se repetirá cada segundo. Así que tenemos nuestro P, um, y queremos que esto se mueva hacia arriba, hacia arriba, no hacia abajo. De acuerdo, tenemos nuestra llama moviéndose hacia arriba. Queremos que se reduzca de tamaño. Así como está creciendo, no queremos que crezca, queremos que se reduzca. Así que en lugar de P, queremos uno menos P. De acuerdo, tenemos que reducir, tenemos, um, ¿qué más? Cambio de color. Queremos cambiar de color. Um, así que queremos que comience con un color amarillento. Um, el matiz oh, esto siempre me confunde. El matiz está entre 0 y 360, así que el amarillo es como un 60, um, hagamos algo así. Um, T veces 50, así que vamos desde un amarillo... Oh, no es T veces 50, es P veces 50. Vamos desde un amarillo hasta un rojizo tipo de color aquí. Aún no se parece mucho a fuego. Um, así que el siguiente paso sería, um sería, supongo, crear un bucle aquí. Porque obviamente solo una llama no va a ser suficiente. De acuerdo, vamos a hacer, vamos a hacer mil llamas. Por supuesto, todas están una encima de la otra, así que no veremos ninguna diferencia allí. Vamos a, um, dispersarlas un poco. De acuerdo, las hemos dispersado un poco. Vamos a dispersarlas en el eje x. Vamos a dispersarlas en el eje del tiempo. Si eso tiene sentido. ¿Por qué eres negativo? T es igual a, oh, seguro. Whoa, hola, hola. Queremos mezclar eso un poco. Mezclándolo elevándolo a una potencia y tomando el módulo por 1, lo que es básicamente aleatorizarlo. Me gustaría que esto fuera un poco más ancho aquí. Agreguemos aleatoriedad vertical 2, a veces tomaré el signo de un valor y le daré una potencia, y luego multiplicaré eso por algo y eso nos dará una buena aleatoriedad. ¡BUENO! Oh, eso es tan bueno. ¿Esto comienza a parecer fuego? ¡Todavía tenemos mucho más trabajo por hacer! Quiero que sea más amarillo. Queremos más amarillo. Y luego queremos... Creo que hacemos... Bueno, déjame mostrarte la mezcla aditiva. Porque tienes que usar la mezcla aditiva para el fuego. Permíteme mover esto rápidamente para ustedes. La operación de composición global es realmente útil. Lo que hace es controlar cómo se mezclan estos colores. De forma predeterminada, realiza la mezcla alfa. Dado que nuestro alfa es uno, significa que se dibujará justo encima de él. Para alfa menor que uno, se mezclará. Pero el fuego no funciona así, es más como un efecto aditivo. Permíteme mostrarte cómo funciona eso. He estado en esta página unas 15 millones de veces para ver todas estas diferentes opciones que puedes hacer. Pero en última instancia, solo uso un par de ellas. Y lighter, no lighten, sino lighter. No queremos mantener el más claro, queremos sumarlos. Queremos sumarlos juntos. Demasiado brillante. No queremos que estén demasiado brillantes. Aquí es donde entra en juego el alfa. Esto es tan bueno. Un poco de fuego. ¿Qué más podemos hacer? Está apareciendo un poco. Hay algunas cosas que podemos hacer. Puedo hacer que este emisor sea redondo, probablemente. Eso es redondeado. Eso tal vez sea cierto. Luego podemos controlar... Creo que...

    17. Añadiendo Aleatoriedad y Ajustando Parámetros

    Short description:

    Los colores necesitan más aleatoriedad. La saturación es crucial para los efectos de fuego. Ajustar el parámetro alfa controla la apariencia. Solucionando el problema de aparición repentina en la parte inferior. Añadiendo más aleatoriedad para un efecto de fuego interesante. Ajustar y experimentar marca la diferencia. Guarda tu trabajo para futuras referencias. El fuego no es redondo, explora diferentes formas.

    Los colores están un poco... Necesitamos añadir aleatoriedad también al color. Estoy usando esta función S por todas partes. Es muy útil porque puedes... Llamas a la función seno y le pasas un valor pálido. Básicamente obtienes un valor aleatorio sembrado que es necesario para esto. No puedo usar Math.random aquí porque si lo usara, simplemente... Te ayuda. No quieres hacer eso. Lo voy a adjuntar a la partícula misma y añadir solo un poco de... Un poco de aleatoriedad a eso. Pero sabes qué? Esa, creo que es la saturación que lo está arruinando más que nada. Dejémoslo así porque quieres... Esto es lo que mucha gente se equivoca con el fuego. Cuando los colores se suman, quieres que se sumen a blanco. Solo se sumará a blanco si hay un poco de azul, pero no quieres demasiado blanco. Solo quieres un poquito de blanco. Y la única forma de controlarlo es con la cantidad de partículas superpuestas, cuánto azul hay, que básicamente se agrega mediante la saturación. Porque cuanto menor sea la saturación, más se igualarán los colores. O este parámetro alfa aquí. ¿Qué está pasando aquí? Veo una forma extraña allí. Me pregunto qué está sucediendo exactamente. Déjame abrir esto un poco. Ahí vamos. No sé si recuerdas antes cuando estábamos usando las funciones seno, pero eso es una de las desventajas de esta forma de obtener un valor aleatorio sembrado, es que se terminará empujándolo hacia los lados, menos uno y más uno. Entonces puedes hacer algo como esto, es otra forma de obtener un valor aleatorio sembrado. Es como elevar un entero y luego hacer un módulo, y al final terminará con algo bastante aleatorio allí. Creo que esto es probablemente demasiado allí. Creo que esto necesita estar más arriba. Creo que mi, um. Eres un poco más brillante. Y, el amarillo es demasiado brillante y el rojo no es lo suficientemente brillante. Estoy llegando al punto en el que casi es como ajustar aquí es el siguiente paso. ¿Ves cómo aparece repentinamente en la parte inferior? Te mostraré cómo solucionarlo. Convirtamos este alfa en un parámetro aquí. Y así P es el porcentaje, ups. No. P es la altura. En última instancia, la altura 1 menos P es la altura. ¿Verdad? No estoy seguro. Obtengamos alfa 1. Permíteme pasar P aquí. Veamos si está cambiando aquí. Sí, eso está cambiando con la altura. Pero ¿por qué no? Oh, ahora se está desvaneciendo en la parte inferior. Así es. Sí. De acuerdo. Así que lo solucionó. De acuerdo. Entonces, si ves cómo aparece repentinamente en la parte inferior aquí, esto se debe a que los círculos simplemente aparecen con un alfa completo y para los sistemas de partículas, entran con un tamaño cero o se desvanecen rápidamente o algo así para cubrir este efecto de aparición repentina. Creo que el tamaño final podría aumentar un poquito, un poquito, la aleatoriedad del tamaño. Eso es lo que necesitamos. Necesitamos más aleatoriedad, por todas partes, porque eso es lo que realmente hace el fuego. Interesante. Es un poco predecible en este momento. Por ejemplo, el tamaño de la forma, vamos a aleatorizar eso para que se vea un poco de aleatoriedad. Digamos, ¿qué hago multiplicando por un número diferente, como tomé un seis, un poder diferente cada vez. Entonces no está bloqueado en la misma semilla aleatoria que estas otras. Tengo, S tengo un valor. Esto será un valor entre cero y dos. Así que queremos que sea un valor entre cero y uno. Puedo hacer medio más seguro. Así que cada vez que quieras que tu seno o coseno esté entre cero y uno, es simplemente. 0.5 y luego dividido por dos. Así que ahora tal vez podamos añadir algo de aleatoriedad al tamaño de estas cosas. Eso es demasiado. Quiero decir, esto es demasiada aleatoriedad. Esto está aleatorizado entre cero y uno. Masajeemos eso un poco. En lugar de entre cero y uno, haremos X, Y bits de descarga. Ampliemos esto un poco. De acuerdo. Está llegando. Está llegando. Está llegando. De acuerdo. Vamos a bajar un poco estos valores. Bajar un poco estos valores. Ajustar marca una gran diferencia en esto. Y, no puedo decirte cuánto es el ajuste en la codificación generativa. Realmente se trata mucho de experimentar. Y a veces, tienes que probar ideas locas y cosas así. Porque así es como a menudo se obtienen las cosas más geniales, cuando a veces cometes un error y te das cuenta de que algo genial está sucediendo, asegúrate de investigarlo, porque eso podría ser todo lo que debías encontrar en primer lugar. O simplemente, ya sabes, guárdalo. Voy a guardar esto ahora mismo. También puedes escribir un nombre aquí para guardarlo y luego puedes volver a él más tarde de manera muy fácil. ¿Fuego? Um, hagamos algunas otras cosas rápidamente aquí. Um, el fuego no es redondo. Entonces tenemos X, Y, y luego tenemos un ángulo y luego tenemos un tamaño, que sería vamos a hacer eso. Hagamos eso.

    18. Creando un Efecto Similar al Fuego con Oscilación

    Short description:

    Agregamos oscilación para hacer que las partículas se balanceen de un lado a otro, creando un efecto similar al fuego. Ajustar los valores nos ayuda a lograr el movimiento deseado. Al agregar aleatoriedad y controlar el ángulo de las elipses, podemos crear variedad y hacer que la forma se asemeje al fuego.

    Seis presentes. ¡Whoa! Hola. Oh, espera, ¿me olvidé de algo? A menudo era como, deshacer. Hola. No nos lleves. Oh sí. Fuego. Brasas. Eso está bien, de acuerdo. Entonces Chris Evans es brasas de fuego. No te lleva en un camino recto en la parte superior. Podrías agregar algo de oscilación aleatoria adicional a la partícula en el eje X, luego aumentar la frecuencia, pero reducir la amplitud a medida que se eleva. Sabes, eso, eso ayudaría a un movimiento de lado a lado.

    Aunque muchos de los efectos de fuego que ves son de dos partes, donde el efecto de las brasas es un efecto completamente separado que se agrega encima del fuego, um, que, ya sabes, utiliza un sistema de partículas completamente separado para esas pequeñas brasas que aparecen y flotan, pero, um, agreguemos un poco de oscilación aquí. Entonces, si hiciera algo como esto, notarás que estoy pasando. Estoy llamando a la función seno del tiempo. Hagamos que eso sea un poco más rápido, balanceándose de un lado a otro. Ahora. No queremos, no queremos que se balancee de un lado a otro juntos. Eso no está bien. Tampoco queremos que se balancee tan rápido. Solo estoy haciendo eso para que puedas ver qué está sucediendo aquí. Queremos que se agregue a la partícula. Entonces I es el, como el identificador de la partícula que podemos usar para crear aleatoriedad. Y es como una semilla aleatoria, casi, no es aleatorio porque es un número entre uno y mil, pero puede ser casi aleatorio porque, por ejemplo, el seno toma un radian. Entonces, cuando pasas un valor entre uno y mil, podría ser, podría ser un número aleatorio. No sabe qué es este I. Entonces, nuevamente, solo para mostrarte, si elimino la oscilación, se ve muy, ya sabes, vertical así. Entonces agregamos esta oscilación. Ahora se parece cada vez más al fuego. Todo lo que hagamos lo hará más parecido al fuego. A veces quieres poner un valor grande, muy grande para ver exactamente qué está haciendo cada cosa. Ahora puedo ver qué está haciendo eso. Esto es parte del ajuste. Cuando estás ajustando, debes poner un valor grande para ver cuál es el valor máximo en realidad. Si no pones un valor lo suficientemente grande, no estás ajustando correctamente porque nunca ves, nunca ves el resultado completo. Y a menudo es bueno poner un valor bajo o un valor negativo también, para ver qué está sucediendo. A medida que te acercas, ya sabes, a tu ajuste. Otra buena técnica es dividir a la mitad y multiplicar a la mitad. Esto es demasiado, esto es demasiado rápido. Entonces, digamos. De acuerdo. Entonces, a la mitad de eso. Así que hagamos eso. A la mitad de eso de nuevo. De acuerdo. Eso todavía es demasiado. A la mitad de eso de nuevo. También te estás dando cuenta, ¿ves esto? Como este tipo de cosa. Creo que eso probablemente está sucediendo porque lo estoy pasando por. Si lo multiplicara, probablemente sería un poco menos notable. Me gustó cómo estaba, sin embargo. Es como un movimiento circular, que se asemeja casi a un vértice, como haría un fuego. Ahora, si comienzo a hacerlo demasiado bajo, realmente no lo notas en absoluto. Queremos que sea, eso es demasiado. Queremos que sea algo más como un efecto sutil. Sí. Tal vez algo como dos o tres. Uh, creo que no está mal. Oh sí, iba a, um, el fuego no es redondo. Uh, elipse de arco. Queríamos elipse, este es el radio. Obviamente no, no tenemos una función R todavía. No hicimos nuestra función. De acuerdo. Usaré R como la raza de mi, de mi círculo. No te preocupes por los nombres de tus variables. Gracias por eso. No te preocupes por los nombres de tus variables. No pierdas demasiado tiempo pensando en ellos. Para el arte generativo es mejor simplemente comenzar y, uh, moverte. Entonces tenemos nuestro R cero. Estoy cambiando esto a Elipse ahora está funcionando exactamente igual. Solo quiero mostrarte, qué pasa si hay un poco de, um, un poco de aleatoriedad, um, a menudo uso Q como nombre de variable porque es accesible para mí. Um, entonces lo que estoy haciendo con Q aquí es que estoy tomando uno más, va a ser el seno. Va a ser como un valor sembrado aleatoriamente, y va a estar cerca de uno. Puedo controlar qué tan cerca de uno está dividiendo aquí. ¿Verdad? El seno estará entre menos uno y uno, le sumamos uno. Y, uh, entonces va a ser algo así. Solo quería darle un poco de ovalidad. Um, dependiendo de ¿eso es correcto? No, no. Tiempo por Q. Eso definitivamente está bien. Uh, R por Q, parece ser un poco más grande. Eso es todo. Ahora tenemos un poco de variedad en la forma, pero aún siempre son, aún siempre son verticales u horizontales, lo que revela lo que está sucediendo, así que podemos, esta, esta variable aquí es la variable de ángulo para tus recuerda para, um, para elipses y podemos controlar eso. Entonces, solo para mostrarte aquí, puedo, puedo recordar, podría ajustar estos valores para ver qué sucederá. Y como puedo mostrar esto, esto está controlando el ángulo de las elipses en conjunto. Entonces, en lugar de ser un ángulo fijo, simplemente voy a poner algo como eye ahí de nuevo.

    19. Creando Efectos de Fuego con Partículas y Humo

    Short description:

    Esa es nuestra semilla predeterminada. Y ahora tenemos un poco más de variación. Por lo general, para un fuego, no usarías óvalos o círculos, sino una textura con un aspecto ahumado. Hay otras formas de crear fuego, como usar un sistema orientado a objetos y sistemas de partículas. Los sistemas de partículas implican crear objetos con propiedades de posición, color y tiempo de vida. Hay varias formas de controlar los sistemas de partículas, e incluso una herramienta de edición de partículas. Twitter es una gran fuente para encontrar diferentes formas de crear efectos de fuego. Se puede agregar humo al efecto de fuego utilizando círculos que se desvanecen, pero no utiliza mezcla aditiva como el fuego en sí.

    Esa es nuestra semilla predeterminada. Y ahora tenemos un poco más de variación. Por lo general, para, um, un fuego, no usarías óvalos o círculos, sino, um, como una textura con un aspecto ahumado. Así que no es tan claro exactamente cómo es la forma, o como mucho más partículas, que ni siquiera puedes ver como una individual con un valor mucho más bajo, veamos qué sucede. Hagamos, hagamos 10 veces más partículas. Y hagamos, um, 10 veces menos de la opacidad. De acuerdo. Ahora, por supuesto, irá lento. Ira muy lento. Ya sabes. Buen día. Gracias. Gracias, James. Espero que las personas estén siguiendo cómo funciona esto. He cubierto mucho aquí. Um, entonces James, ¿hay algo más con este fuego en lo que debería profundizar, o es un buen comienzo? Eso es genial. Realmente disfruté eso. Es muy útil. Gracias. Muchas gracias. Así que hay otras formas de hacerlo, por supuesto. Um, otra forma de hacerlo, de la cual no quiero profundizar ahora, pero sería usando un sistema orientado a objetos. Y así es como funcionan muchos sistemas de partículas. Y la forma en que funcionaría es que, um, crearías un objeto. Um, y ese objeto es la partícula. Tiene una posición, posición X e Y. Y tiene un, um, color en un momento, una vida útil. Y puedes, por ejemplo, hay miles de esas partículas en la lista y estás continuamente agregando partículas, ya sabes, y todas esas partículas se mueven hacia arriba y se desvanecen lentamente y se controlan de esa manera. Y eso, en realidad es cómo funcionan la mayoría de los sistemas de partículas. Um, solo tienes un buen ejemplo. Sombra para eso también. Voy a hacer una charla sobre mi pequeño motor JS para, um, para esto en el fin de semana. Creo que no sé exactamente el día, creo que el séptimo, pero una de las cosas que acabo de agregar es esta herramienta de edición de partículas. Apenas comencé a trabajar con esto, pero esto, bajo el capó, utiliza un sistema de partículas y solo tienes acceso para controlar estos diferentes parámetros, que son como los parámetros mínimos que esperas, como el color inicial, el color final. Um, puede, puede elegir entre un color inicial A y un color inicial B y un color A y un color B para obtener cierta variación. Uh, luego te gusta. Sí, esto es solo, esto es algo estándar de partículas. Estás estableciendo tu tamaño inicial y final, ya sabes, tu velocidad, tu velocidad. Um, esto está un poco desordenado. Tengo que trabajar en esto. He notado algunos problemas desde que lo creé que hacen que no sea tan fácil de usar. Pero en última instancia, te da una idea de cómo funcionan los sistemas de partículas, ya sabes, y hay varias formas de hacerlo. Si quisieras hacer un fuego que esté completamente estático, que no se mueva en absoluto, probablemente lo harías de una manera completamente diferente porque esto se trata de movimiento. Y si estás interesado en un fuego que no se mueve, eso es algo diferente. Así que también revisa Twitter porque hay muchas otras formas de hacer fuego. Hay todas estas formas de simulación para hacerlo. Hay formas complicadas. Aquí hay otro que hice. Esto utiliza, ya sabes, algo similar a lo que les mostré, pero en el DWEET, no pude ajustar la operación compuesta global, por ejemplo. Así que podría, podría copiar esto y pegarlo aquí. Um, oh, no, lo hice, lo hice encajar allí. Usé la opción screen, que es, que es muy similar a la, um, no exactamente. Creo que screen es lo mismo que lighter. En realidad, no es lo mismo. Se ve un poco diferente. Se ve un poco diferente. Me gusta más lighter. Sinceramente, pero no se desvanece ni nada por el estilo. Así que ese es un buen lugar para buscar ideas. Um, no te olvides de las brasas también. A menudo, ajustar estos efectos requiere agregar múltiples efectos superpuestos. Sí. Y en este caso, debes tener las brasas cerca una de la otra para crear el, um, resultado. Porque cuando piensas en, incluso cuando piensas en cómo funciona el fuego, hay dos cosas muy distintas sucediendo. Está el fuego en sí. Y luego están estas pequeñas brasas que vuelan. Y simplemente no las usas realmente. Y en realidad hay tres cosas. Um, también hay humo, también hay humo. Entonces el humo, no se verá bien. Um, sí, supongo que hay fuegos sin humo, pero normalmente quieres humo y eso funcionará de manera diferente. Funcionará de manera similar en algunos aspectos, donde puedes tener, ya sabes, estos círculos que se desvanecen, pero no utilizará una operación de mezcla aditiva como el fuego en sí.`

    20. Generative Art and Real-Time Performance

    Short description:

    Necesitamos más, necesitamos menos alfa. Lo multiplicaré un poco. Copia esto y pégalo allí abajo. Creo que se vería mejor si el humo usara menos humo. Siempre debes estar atento a la cantidad de partículas. El arte generativo no suele ser arte generado en tiempo real. Habrá una grabación de esto. La mayoría del arte generativo es estático, por lo que la velocidad de dibujo no importa. El arte generativo en tiempo real en los videojuegos es más desafiante. No tienes que preocuparte por problemas de rendimiento en el arte generativo. Si va lento, no es un gran problema. Ajusta la cantidad de partículas para su uso en tiempo real. Mueve el humo por encima del fuego para obtener un mejor efecto visual.

    Necesitamos más, necesitamos menos, necesitas menos alfa. Así que lo multiplicaré un poco. Queremos un punto de partida un poco más grande. Sí. Sí. Quiero decir, eso es algo como humo. Puedes ver cómo tomé el fuego y luego lo convertí en humo. Y ahora, ¿qué pasaría si, volvámonos locos? Copia esto y pégalo allí abajo. Para tener un poco de fuego sobre el humo. Creo que se vería mejor si el humo usara menos humo. Está un poco lento en este momento. Siempre debes estar atento a la cantidad de partículas y cosas así. Si lo estás usando en tiempo real. El arte generativo no suele ser arte generado en tiempo real. Y eso es una de las cosas que me encanta del arte generativo. Así que iba a hacer una introducción sobre mí mismo. Estoy seguro de que la mayoría de ustedes probablemente no saben quién diablos soy. Pero he trabajado en la industria de los videojuegos durante unos 20 años. Y por eso he hecho tantos sistemas de partículas y otras cosas así. Pero, ¿qué están diciendo? Arte generativo. Ni siquiera lo sé. Lo pensaré. No lo recuerdo. Sí, habrá. Andrea está preguntando si habrá una grabación. Me dijeron que habrá una grabación de esto. Oh sí. Estaba hablando de, estaba hablando de los juegos, los juegos y cosas así. Entonces, la mayoría del arte generativo es estático o, en última instancia, no importa qué tan rápido se dibuje. Y eso es algo que me encanta de ello porque he trabajado en juegos de video durante tanto tiempo. Y tener este componente interactivo, un componente en tiempo real en los juegos de video, que de alguna manera son arte generativo, hace que sea mucho más difícil lidiar con ello porque tienes que preocuparte. ¿Hay demasiadas partículas? Va a ir lento. ¿Qué pasa si el usuario presiona un botón, va de una manera que no se supone que vaya, pero aquí no tienes que preocuparte por eso. Así que si va lento, no es tan grave. Entonces, si lo estuviera usando en tiempo real, ajustaría la cantidad de partículas hacia abajo. Así que iba a ajustarlo un poco hacia abajo y simplemente iba a mover el humo un poco más arriba. Así que comienza un poco por encima del fuego, algo así.

    21. Comenzando con lo Básico y Avanzando

    Short description:

    Comienza con lo básico y avanza gradualmente. Puede ser desafiante saber por dónde empezar, pero una vez que comienzas, se vuelve más fácil progresar. Descompón las cosas en pasos simples y construye a partir de ahí.

    De acuerdo. Entonces, ¿qué estamos haciendo? Espero no haberme movido demasiado rápido. Sabes, definitivamente pasé por ese ejemplo de fuego, pre gang busters. Creo que una de las cosas que realmente quería que entendieran es cómo lo construí desde lo básico. Si recuerdas, comenzamos con solo un círculo rojo y luego comenzamos a hacer que ese círculo se mueva hacia arriba y cambie de color, y una vez que lo tuvimos, comenzamos a agregar más partículas y construir a partir de ahí. Creo que es difícil comenzar las cosas y difícil saber por dónde empezar. Y una vez que comienzas, obtienes ese impulso. Puede ser mucho más fácil pasar al siguiente paso, pero a veces solo saber por dónde empezar puede ser un poco complicado. Entonces, la idea es simplemente comenzar, ya sabes, realmente simple, tan simple como intentar descomponerlo en la cosa más simple que puedas imaginar y luego construir lentamente para obtener lo que deseas.

    22. Tiempo, Guardar Trabajo, Ruido y Dibujar Estrellas

    Short description:

    Hubo un par de preguntas sobre el tiempo y guardar el trabajo. Es importante guardar el progreso incremental y construir tu propia biblioteca de fragmentos de código útiles. Agregar ruido al arte generativo puede mejorar su calidad y hacer que se sienta más como arte. Se prefiere usar JavaScript puro en lugar de bibliotecas como p5 JS. La próxima demostración se centrará en dibujar estrellas sin usar una función aleatoria. Al convertir el índice en un generador de números pseudoaleatorios, podemos desvincular los ejes x e y y crear una distribución más aleatoria de puntos.

    Hubo un par de preguntas a las que tal vez pueda responder. ¿Alguien más tiene alguna pregunta o algo que haya pasado demasiado rápido? También quiero verificar cuánto tiempo nos queda. No estoy seguro si esto continúa hasta otros 45 minutos o si alguien lo sabe. Creo que termina a las 12. Espera, oh eso es, esto es, termina a las 11. Huh. ¿Se supone que esto ya terminó o debemos seguir? Supongo que sí, supongo que hablamos durante un tiempo. Pero, um, estoy feliz de seguir hasta aproximadamente las 12. Eso es más o menos lo que había planeado desde el principio. Entonces, si parece que nadie tiene preguntas. Lo que puedo hacer es simplemente, um, comenzaremos a avanzar hacia una conclusión. Estoy tratando de pensar en otras cosas que podrían ser importantes para compartir. Um, para las personas que están aprendiendo este tipo de cosas. Un par de cosas más que quería mencionar. Así que hablamos de guardar, guardar tu trabajo, guardar el progreso incremental de tu trabajo. Eso es muy importante porque, um, puedes cometer un error y luego quieres volver a una versión anterior. O a veces simplemente te gustan las cosas que cambian tanto que terminas yendo en una dirección totalmente diferente, pero aún así quieres tener las cosas anteriores disponibles para, um, usar en otra idea. Um, pero también quiero enfatizar que es, es realmente importante construir tu propia biblioteca. Y eso es realmente solo un archivo de texto que vas a mantener, o podría ser un documento de Google o lo que te resulte más cómodo, donde pegas tus propios fragmentos de código y cosas que vas a usar con frecuencia. Como por ejemplo, esta plantilla de cadena de texto HSL podría ser útil o una función aleatoria, lo que sea útil, vas a construir tu propia biblioteca de funciones y cosas que usarás. Muy, muy útil. El ruido puede agregar, um, una capa de calidad, supongo, al arte generativo. Um, por ejemplo, aquí hay una de las piezas que he hecho llamada cómics astronómicos. Hay un pequeño poco de ruido. Ahora puedo activarlo y desactivarlo. Es posible que ni siquiera puedas verlo, no sé si puedes verlo con la compresión. Um, hay otros, hay otros que tienen más ruido. Um, pero este pequeño poco de ruido que puedes agregar a tu trabajo final realmente puede hacer que se sienta como más como, como, supongo, más como arte. No sé cómo explicarlo de otra manera. Es como tener un poco de, okay, aquí, déjame mostrarte otro que he hecho. Um, mi, uh, bytes en escala de grises es una composición muy simple para identificar la infraestructura, porque tiene ruido. Aquí tengo un control deslizante de ruido que puedo controlar. Es sutil y un truco de magia. Puedes verlo a través de la compresión de lo que estás viendo esto, pero cuando lo ves en tu pantalla, tener ruido agrega mucho. Y todo eso son solo píxeles aleatorios agregados encima. Píxeles aleatorios de baja opacidad que, como, simplemente hacen que se sienta más real, ¿sabes? Así que eso es algo en lo que pensar. Si estás, si estás siendo un poco más compositivo, es como agregar ruido y hay, hay diferentes formas de hacerlo. Y probablemente puedas descargar una biblioteca para ayudar con eso. Creo que p5 JS tiene algunas cosas incorporadas para eso. Um, p5 JS es, um, es una biblioteca para usar en la creación de arte generativo con JavaScript, pero personalmente prefiero, um, um, creo que el juego al que me refería era el de copiar y pegar. Prefiero, um, JavaScript puro. Um, algunos otros aspectos del arte generativo. Um, creo que he cubierto, creo que lo he hecho bastante bien hasta ahora. He cubierto casi todo lo que quería cubrir. Probablemente solo voy a pasar a hacer otra demostración de algo. Y si alguien quiere algo específico, voy a, voy a elegir algo al azar. Pero estaremos bien. Podemos hacer algo como estrellas, como un campo de estrellas. Eso es bastante fácil de hacer. Um, sí, hagamos como una escena. Veamos como una escena de paisaje y luego veremos cómo va. Agreguemos algunas cosas a esto. Creo que eso podría ayudar a comprender mejor cosas como estos generadores de números aleatorios y cómo estoy haciendo números aleatorios sembrados y ese tipo de cosas. Vuelvo a presionar restablecer aquí. Quiero dibujar estrellas. Entonces, cómo, ¿cómo dibujamos, cómo dibujamos, vamos a trazar estos puntos al azar sin usar una función aleatoria en absoluto. Okay. Y creo que esto ayudará con lo del número pseudoaleatorio, que es muy importante. Entonces, si queremos llenar este lienzo con estos puntos, hay cien puntos. Queremos llenarlo al azar. Sabemos, sabemos qué tan grande es el lienzo, 1920 por 1080. Entonces, comencemos con nuestra forma más simple de hacer algo como esto que es el enfoque ingenuo. Hagámoslo un poco más grande para que podamos verlos más fácilmente. Entonces, al pasar un índice tanto al eje X como al eje Y, obtenemos una línea. Para que las personas entiendan qué es. Entonces, el problema no es que estén en una línea a lo largo de un eje. Pero el problema es que están en una línea en la que ambos ejes están vinculados. Ambos ejes están vinculados. Ese es el problema. Ahí es donde está el problema. Entonces, ¿cómo desvinculamos estos ejes, cómo desvinculamos estos ejes? Bueno, podemos hacer lo que dije. Podemos convertir este índice en casi, usarlo como un generador de números aleatorios, básicamente. Entonces, hagamos i mod, así que la altura. Solo hagámoslo altura, simple. Entonces, no vamos a cambiar nada todavía, ¿verdad, porque i es menor que la altura. La altura es 1080. Pero, ¿qué pasaría si decimos, qué pasa si simplemente multiplicamos i por algo? Veamos qué pasa. Oh, obtenemos más de estos. Bueno, eso es interesante. ¿Y si, okay, cómo está sucediendo eso ahora? Entonces, estamos obteniendo casi como una cuadrícula tipo de situación, pero no es aleatorio, ¿verdad? Es casi como si estos ejes x e y todavía estuvieran vinculados. Todavía están vinculados de alguna manera, pero no de la misma manera que antes. Entonces, aquí está el truco. Para convertir esto y hacer que i no esté en altura, lineal, necesitamos que sea no lineal. Así es como salimos de esto, y lo vamos a hacer mediante la elevación de i. Literalmente puedes hacer i por i. Entonces vamos a notar algunos artefactos aquí inicialmente. Eso es esta especie de cosa aquí. Si hacemos un exponente más alto, esto simplemente comenzará a desaparecer.

    23. Creando Aleatoriedad con Números no Enteros

    Short description:

    Aquí hay más artefactos, notando artefactos. En realidad, no creo que los artefactos desaparezcan. Esto se debe a que I es un número entero, la altura es un número entero y, en última instancia, estamos viendo cosas interesantes sobre matemáticas. Realmente puedes hacer algo de arte generativo con esto. Permíteme ir al ancho completo. Puedes hacer cosas geniales de arte generativo solo con esto, pero quiero que sea más aleatorio. Entonces, una forma de obtener más aleatoriedad es usar un número no entero.

    Aquí hay más artefactos, notando artefactos. En realidad, no creo que los artefactos desaparezcan. Esto se debe a que I es un número entero, la altura es un número entero y, en última instancia, estamos viendo cosas interesantes sobre matemáticas. Realmente puedes hacer algo de arte generativo con esto. Permíteme ir al ancho completo. Puedes hacer cosas geniales de arte generativo solo con esto, pero quiero que sea más aleatorio. Entonces, una forma de obtener más aleatoriedad es usar un número no entero. Si usas cualquier cosa que no sea un número entero, eso te dará algo mucho más aleatorio.

    Ahora, si uso un valor cercano a uno, comenzaremos a notar nuevamente nuestros números X e Y que comienzan a estar vinculados. ¿Y si solo observamos qué sucede con el tiempo? Como puedes ver, T está creciendo. Wow, mi gato acaba de morderme. Es así de loco. Cuando escribo, no le gusta. Quiere que lo acaricie todo el tiempo. Me asustó, lanza T. Como puedes ver, T está creciendo. Ahora no necesita ser muy, muy grande para comenzar a ver esta aleatoriedad. Te mostré esa es una forma de obtener esta aleatoriedad. Y hay otra forma de obtener la aleatoriedad, que te mostré, es algo así como tomar el signo de un número como I. Entonces tomas I y luego simplemente multiplicamos eso, oh, eso fue interesante. Hagamos nuestra enseñanza de nuevo y veamos qué sucede. Aquí tienes algunos patrones muy geniales. Bien. Oh, lo siento. Pero lo que esperaba es que si I se vuelve, oh, es hora. Entonces queremos pal I. Ahora, si pal I, comenzamos a obtener, veamos cómo se ve eso. Comenzamos a entrar rápidamente en el territorio de la aleatoriedad. Oh, puedes ver. Así que esto es, solo te estoy mostrando un par de formas diferentes en las que puedes experimentar con la pseudoaleatoriedad aquí. Honestamente, no importa lo que hagas. Ahora tenemos estas estrellas, ya sabes, llenando el cielo. Hagámoslas altas en lugar de blancas en lugar de negras. No es una estrella, fondo negro. Luego haremos que el estilo de relleno sea blanco. Haremos que el estilo de relleno sea blanco. Tenemos nuestras estrellas, ¿y podemos hacer que las estrellas se muevan? Entonces, queremos decir que queremos hacer como un efecto de paralaje de estrella genial. Estoy moviendo todas las estrellas, todas las estrellas fuera de la pantalla. Pero no queremos eso, ¿verdad? Queremos que sea, bueno, primero queremos que sea, cuando se mueven fuera del lado derecho de la pantalla, queremos que se muevan de nuevo al lado izquierdo de la pantalla. Entonces vamos a hacer una división modular, un ancho. Ahora se están moviendo y están apareciendo en el otro lado, pero también se vería bien si se movieran a diferentes velocidades, ¿verdad? Se están moviendo a la misma velocidad. Eso no es tan bueno. En lugar de 99, haremos uno de nuestros pequeños trucos aquí. Ahora el seno matemático es lo mismo que S. Simplemente lo colocaré aquí. Haremos uno de nuestros pequeños trucos. Haremos S multiplicado por el seno de I a la cuarta potencia. Inicialmente será demasiado pequeño para ver. Veamos cómo se ven estos valores. Bien, se están volviendo demasiado altos allí. Veamos si podemos bajarlos de nuevo. Un poco de variación allí. Probablemente sería nieve si estuviera en el eje Y, ¿verdad? Necesitaremos hacer que estos sean más pequeños y probablemente varíen en tamaño un poco, como algo así. Así que obtienes un poco de variedad en los tamaños de las estrellas. Y... Pero podríamos hacer nuestro... Solo usando mi biblioteca aquí. Voy a tomar mi código HSL. Y quiero pegarlo aquí. Tan pronto como regrese. Y matiz, saturación, luminosidad, no necesitamos alfa, no. Pensé que podría ser bueno darle a algunos de estos un poco de matiz, que es... Oh, seguro, eso es... Entendido. Podemos dejar nuestra saturación en 99. Y para la aleatoriedad, era como 50. Ahí es donde obtenemos nuestro color. Tal vez haría algo como... Voy a ir por... Obtén un poco de color allí, puedo ver cómo estoy comenzando a obtener algo de rojo allí. Pensé que podría ser bueno tener como, ya sabes, algunas olas en la parte inferior como el agua, como tal vez así o billings o hagamos olas, hagamos olas. Tenemos nuestro I, tenemos nuestro Y, tenemos nuestro ancho.

    24. Ajustando la Forma y Agregando Efecto de Onda

    Short description:

    Estamos ajustando el ancho y alto de la forma y agregando un efecto de onda usando la función seno. Al manipular los valores de i y t, podemos controlar el movimiento y la velocidad de la onda. Además, podemos aplicar colores a la forma para que se asemeje al agua.

    El ancho será de uno, que será de un píxel para cada uno de estos. Simplemente se irá hacia la parte inferior de la pantalla. Lo estoy disminuyendo, lo estoy disminuyendo, lo estoy disminuyendo. Entonces, este es nuestro x, este es nuestro y, ahora queremos agregar un poco de onda aquí. Esta es nuestra función seno o función senoidal. No haremos que i se mueva aún, así que aún no usaremos el tiempo. Solo vamos a usar eso. Ahora, tenemos este efecto extraño de peine, eso es porque i es demasiado grande, porque recuerda, estamos pasando radianes a esta función seno. Así que queremos que haya una diferencia muy pequeña entre cada i. Un radian no es pequeño, un radian es grande. Así que lo disminuimos mucho. Y luego, si le agregamos t, eso agrega nuestro valor de tiempo. Lo voy a hacer mover en la dirección opuesta, así que obtenemos menos t. Y vamos a moverlo un poco más rápido. Bien. Y podemos hacer eso, y podemos hacer eso, y tal vez podemos darle un poco de color que sea más adecuado para el agua. Solo le daré como un, se ve bastante bien con, un amarillo, un color blanquecino. Así que le daré algo bastante claro.

    25. Superponiendo Ondas y Creando un Paisaje

    Short description:

    Vamos a superponer ondas una encima de la otra para crear un paisaje. Podemos ajustar la configuración y la velocidad de movimiento de cada onda para lograr el efecto deseado. Al agregar múltiples capas y controlar su saturación, podemos crear una escena más dinámica. Mezclar los generadores de números aleatorios agrega variación. También podemos ajustar la dirección y el color de las estrellas para mejorar la composición general. Experimentar con diferentes elementos, como árboles o edificios, puede mejorar aún más el terreno. Las posibilidades son infinitas.

    Quería, oh, vamos a, así que esto solo está usando una onda, pero una de las cosas interesantes que puedes hacer es superponer ondas una encima de la otra. Así que vamos a superponer otra onda con una configuración ligeramente diferente aquí y una velocidad de movimiento ligeramente diferente aquí. Y luego tal vez puedas, hacerlo un poco más bajo. Hagámoslo un poco, ahí vamos. Sí, no es perfecto, pero es un comienzo, es un comienzo. En realidad, esto se parece más a un paisaje que a, que a, vamos a hacer un paisaje. Vamos a hacer un paisaje. En lugar de, eso va a ser demasiado para renderizar. Así que voy a hacer, en lugar de eso muchos, voy a hacer como un octavo, eso muchos. Eso significa que probablemente tenga que, pero es por un, no me preocupo por limpiar ninguna de esta matemática. Solo agrego números allí cuando, como me siento. Va a estar bien. Luego voy a, elevarlo más alto. Elevarlo más alto. Y quiero otro bucle. Quiero un J igual a ocho. Vamos a hacer ocho. Vamos a hacer ocho capas de paralaje aquí. Así que tenemos a Jay, tenemos a nuestro Y, tenemos a nuestro estilo de relleno. Voy a copiar esto, matiz saturación, luminosidad, la saturación sea como, veamos, bueno J es la capa. Eso es lo que queremos controlar la saturación. Queremos que nuestro J sea, ¿sabes qué tipo es más fácil? J va entre cero y uno o cero y ocho. De acuerdo. Solo tengo una forma abreviada de hacer las cosas, a veces hago J y necesitamos cambiar el color. De acuerdo. Ahora tenemos capas. Ahora tenemos capas. Necesitamos, necesitamos hacer algo más. Mezclaremos estos generadores de números aleatorios. Entonces todos están usando I, no están usando J. Así que pongamos a J en la mezcla. Y pongamos a J en esta mezcla también. Voy a usar un diferente, así que estoy usando J al cuadrado, ahora estoy usando J al cubo. Y para el paralaje, necesitamos el, no debería moverse a una velocidad diferente porque eso hará que no parezca terreno. Eso hará que parezca más como agua. De hecho, debería, creo que necesito, necesito hacer algo como esto para que funcione correctamente. Para que se mueva, Oh, eso no es lo que quiero. Eso no es lo que quiero. ¿Por qué es J, creo que lo que voy a hacer por ahora es simplemente deshacerme de eso. Esa parte funciona bien, pero todo lo que quería hacer es hacer que, hacer que se mueva más rápido en primer plano para que, okay, aquí vamos. Y tal vez darle un poco de, como hacer que las estrellas se muevan en la otra dirección, ¿o puedo hacer que se muevan en la otra dirección? Puedo, puedo hacer que esto se mueva en la otra dirección y darle un poco más, darle más variación al color. Pero mantengamos la paleta un poco más ajustada a un rango de tonos más estrecho. Y le daremos un desplazamiento para que no sea todo rojo, no sea todo rojo, se vería mejor si fuera como un, ahí vamos. Incluso podemos darle al cielo, ya sabes, como un tono más, como un azulado, tipo de tinte. Ya sabes, y luego podemos, tal vez, oh, apuesto a que las, apuesto a que las estrellas se verían mejor con la adición. Solo voy a agregar eso. No sé por qué, a veces es lento cuando vuelvo a esto. Por lo general, no lo es. Podría ser porque estoy grabando. Eso me dará las estrellas. Volveré a establecerlo, como fuente sobre. Tenemos nuestras estrellas, tenemos nuestro terreno. Es bastante interesante. Tal vez agregaría árboles o edificios o algo así, ya sabes, o agregar más, tratar de que el terreno se vea un poco más interesante en lugar de solo una onda seno aquí. Puedes agregar otras ondas seno para diferenciar aún más. Ahí vamos. Eso es algo. Así que no es tan obvio lo que está sucediendo. Bueno, ¿qué opinan de eso? ¿Es una buena escena? Oh, de acuerdo.

    26. Renderizado de Texto e Inspiración de Twitter

    Short description:

    Te mostraré más cosas de JavaScript, como el renderizado de texto. Podemos controlar fácilmente el tamaño y la fuente del texto. Puedes usar diferentes unidades para el tamaño de la fuente. Es posible agregar emojis como texto, y se pueden aplastar o estirar como cualquier otro texto. También puedes centrar el texto para tener más control sobre la posición. Los emojis se pueden usar como pincel para llenar la pantalla de color. Twitter es una gran fuente de inspiración para el arte generativo. Los programas pequeños en Twitter pueden crear arte increíble. Puedes crear arte genial con un código mínimo, lo cual es inspirador. Quería aprender cómo hacerlo y me sumergí en aprender todo.

    Entonces, Artaz dice que tiene que irse y nos agradece por la sesión. Creo que casi he terminado ahora. Planeo continuar hasta las 12. Probablemente no tenga suficiente tiempo para hacer otra demostración completa, pero definitivamente puedo responder preguntas o intentar mostrar cualquier cosa que me haya perdido. Estoy tratando de pensar en cosas que me haya perdido, no porque probablemente me haya perdido muchas cosas. ¿Qué más podemos hacer? No estoy seguro. Siento que eso, una vez que comenzamos a llegar al siguiente nivel de cosas, podríamos pasar literalmente horas en solo la cosa más pequeña. Así que siento que realmente les he dado una buena introducción concisa que incorpora todo. Y está mostrando, estoy mirando mi, me gusta la hoja aquí, mi hoja de trucos aquí. Tal vez les muestre un poco más de cosas de JavaScript. No estoy seguro de cuánto están familiarizados las personas con JavaScript y quieren saber más detalles sobre cómo funcionan los arreglos o no profundizar en eso, pero más como cómo lo usarías en el arte en general o en objetos u otros tipos de, ya sabes, o podría mostrarles más sobre cómo podrían obtener el shim, un shim funcionando para algo como, y crear una entidad. ¿Y si la programación cubriera todo eso en un CDScape? Renderizado de texto. Hagamos renderizado de texto. Quiero asegurarme de que todos sepan cómo hacerlo. Eso es importante. Cómo podría omitir eso. Hay un par de cosas que debes saber sobre el renderizado de texto. Voy a hacerlo justo encima de esto. Lo voy a hacer justo encima de todo. Porque realmente no importa. Démole una bonita fuente roja. Y luego fill text funciona de manera similar a estas otras funciones. No se usa tanto en el arte generativo, pero se usa bastante. También es muy útil para depurar y cosas así. Se usa mucho en los juegos. Se usa mucho en Twitter. En realidad, es técnicamente un poco más pequeño hacer fill text que fill rect si solo quieres un punto. Entonces podrías hacer fill text y luego cero y luego tu posición X e Y. Entonces la primera parte es el texto que se imprimirá. Es super pequeño. Puedes controlar fácilmente el tamaño y la fuente del texto así como así. Fuente igual. Hay un par de unidades diferentes que puedes usar. Los píxeles son una de las más fáciles. Será simplemente PX. Eso es aproximadamente el tamaño de los píxeles. Ahora no ha cambiado todavía. Eso es porque necesitas definir una fuente. Puedo usar... En realidad no importa lo que escribas aquí. Cualquier cosa que escribas funcionará literalmente. Entonces, si puedes usar Arial, esa es una fuente común que podrías querer usar. Impact es una buena fuente que podrías querer usar. Monospace es otra que uso muy a menudo. Y si quieres intentar... Si quieres ahorrar un poco de espacio, es posible que veas esto en Twitter. Haciendo esto, como agregar una comilla aquí adentro es un truco para hacer que parezca... Pensar que hay un nombre de una fuente allí, lo cual es técnicamente necesario para que esto funcione. Entonces tienes el tamaño de la fuente, pero puedes cambiarlo. Tienes tu fuente... Oh, también hay otro parámetro para la fuente, que es opcional, y que comprimirá la fuente. Entonces digamos que queremos que el texto esté perfectamente centrado. Puedes hacer x.center, lo cual es útil si estás usando este Arte Regenerativo, probablemente querrías tener más control sobre la posición o la posición exacta de esto. Entonces pensemos, ¿cómo usaría este Arte Regenerativo? Haría algo como esto. En lugar de puntos aquí, tomaría este código aquí. Pegarlo ahí, pegarlo ahí, pegarlo ahí. Ahora, mueve eso de ahí. E incluso podemos hacer algo como, vamos a tomar otra fruta. Y, ya sabes, decidir qué cosa vas a renderizar basado en condiciones o lo que sea. Y puedes usar estos emojis, es casi como un pincel. Mira lo que sucede cuando elimino este ancho. Ya no estoy limpiando la pantalla. Entonces estoy obteniendo un relleno de esto. Estos emojis están llenando la pantalla, básicamente. Están agregando color. Entonces sí, los emojis son una forma divertida de jugar, jugar con esas cosas. Definitivamente quería hablar sobre el texto, así que tenemos eso. ¿Algo más que me haya perdido y que te gustaría ver? Me quedan unos 10 minutos, planeo hacer esto. Creo que les mostraré un poco más de cosas de Twitter. Far Awaitings, para darte algo de inspiración sobre los tipos de cosas que puedes hacer. Encuentro que Twitter es tan inspirador. Y cuando me adentré por completo en el arte generativo, hace unos tres años, como este Twitter fue lo que más me inspiró, porque como estos programas más asombrosos son tan increíblemente pequeños que, no sé, supongo que siempre he estado trabajando con videojuegos durante mucho tiempo en estos grandes proyectos. E incluso en mis propios proyectos independientes, todavía son bastante grandes. Así que pensar que puedes hacer todo este arte genial y asombroso, esto no es mi trabajo, por cierto, solo estoy buscando los tweets más impresionantes. Saber que puedes crear este arte increíble con tan poco código, me pareció tan increíblemente inspirador que solo quería aprender cómo hacerlo. Y me sumergí y aprendí todo.

    27. Explorando el Arte Generativo y la Creación de Textos Largos

    Short description:

    Los árboles son un buen tema para el arte generativo. Hay varios tipos de arte generativo, como sprites de píxeles, diseños arquitectónicos, túneles, fractales y más. El arte generativo de texto largo, influenciado por los NFT, permite la generación automática basada en parámetros. Es emocionante experimentar y compartir tu arte generativo con otros. Gracias por ver y mantente actualizado siguiéndome en Twitter.

    Y me sumergí y aprendí todo. Los árboles son otro buen tema para el arte generativo. Aquí hay algunos emojis. Bueno, esto es un juego real. Esto es un juego real. Rápido para jugar. Espero que me atropelle. Oh, lo hace. Oh, genial. Hay todo tipo de juegos geniales y cosas aquí. Aquí hay uno genial. Pavel. Pavel es genial. Verás muchos que siguen este formato, que es lo que llamamos predeterminado, que es como cuando comienzas un nuevo tweet, se ve más o menos así. Y nos divertimos mucho remezclándolos. Aquí hay otro genial. Comienza como un cubo. Ahora mira. Ahora mira. Es como pensar en cómo llevarlo literalmente al siguiente nivel. Es asombroso. Tenemos cosas en 3D. Tenemos grandes lanzamientos. Ahora, todos estos son complicados, por cierto. A menudo, es mejor tener una idea realmente buena que tener un código súper complicado. La mayoría de estos se basan en ideas muy simples que están totalmente a tu alcance. Así que solo estoy mirando algunos de los diferentes que he visto aquí y que me gustan. Veamos cuánto tiempo nos queda. Creo que tengo algunos muy buenos. He hecho al menos más de mil de estos. En total, que cubren diferentes áreas. Para muchos de estos, también he hecho una descripción que explica completamente cómo funcionan. Por ejemplo, este, hice una descripción que desglosa cómo funciona todo en este tweet. Como realmente profundiza en cómo funciona. Si te interesa más el aspecto de code-golfing. Este es el City Of Shadows es definitivamente uno de mis mejores. Donde hay una ciudad allí, raycasting, shadow casting. Es bastante loco. Crear sprites de píxeles es algo con lo que mucha gente ha jugado. Escritura ascémica, donde estás haciendo escritura que no es real. No es algo que puedas leer, pero parece que podría serlo. La forma humana, tratar de recrear eso con solo algunas reglas simples, ya sabes, architecture, Torre Eiffel, edificios, tantos árboles. Túneles, los túneles son algo bueno, bastante fáciles. Para empezar, atraer, este es un atractor de Lawrence, diferentes tipos de ecuaciones matemáticas a veces pueden realmente inspirar, una general de nuestras ideas así. Oh, los fractales también son grandes. También tengo algunos fractales aquí. Probablemente se rendericen muy lentamente. Subdivisión, ya sabes, solo tratando de crear efectos simples. Tuve una serie completa donde intentaría pensar en una palabra que pudiera representar de alguna manera con código. Así que hice varios diferentes así, donde básicamente es una palabra con varios efectos aplicados para que sea especial. Más árboles, algunos ladrillos, algunos libros, un poco de todo, los laberintos son un buen ejemplo, algo para probar. Algo rebotando. Hay mucho rebote, el rebote es bueno. ¿Qué más puedo mostrarte? Entonces, otro gran lugar para buscar arte generativo inspiration es fx-hash. Ahí es donde creamos arte generativo de texto largo. Hay como dos tipos de arte generativo. Siento que hay arte generativo que no es de texto largo, lo que significa que como artista curarás el resultado. Generarás, ejecutarás su programa tantas veces como quieras ejecutarlo. Y cuando llegues a un resultado que te guste, lo guardarás como una imagen, un video, o lo que sea, y luego harás algo con él, lo compartirás, probablemente. Entonces ese es un tipo de arte generativo, y eso es totalmente válido. Pero luego está este nuevo tipo de arte generativo, que es realmente nuevo, siento que, porque ha surgido de los NFP, donde es más como arte generativo de texto largo. Y la forma en que funciona es que creas un programa, y en lugar de poder curar el resultado y elegir lo que se ve bien, el resultado se genera automáticamente cuando alguien compra ese NFT, y nadie sabe exactamente cómo se verá, porque esperamos que haya un montón de parámetros que controlen cómo se verá. Entonces, por ejemplo, iba a abrir cualquiera de estos. Hay todo tipo de parámetros para este arte generativo. Creo que este no tiene los parámetros enumerados. Permíteme abrir uno de los míos porque sé que tendrá parámetros disponibles. Como tu arte generativo de texto largo tiene todos estos diferentes parámetros, como podría ser para este en particular, se trata de un árbol, una escena de árbol. Tienes como un tiempo, tienes una estación, cuántos árboles hay, ese tipo de cosas. También hay un montón de cosas bajo el capó que ni siquiera te está mostrando que se generan al azar. Pero la idea es que no tienes control sobre el resultado. Y eso también es parte de la diversión, es que cuando las personas están acuñando estas cosas, los resultados simplemente aparecen a medida que avanzamos y no sabemos exactamente cómo podrían verse. Para este, tenía una posibilidad muy pequeña de que algo sucediera donde no haya árboles en absoluto. Solo sucedió una vez. Y podría haber sido un sol. Resultó ser una luna. Podría haberse visto diferente, y así es como se veía. Así que definitivamente animaría a las personas a experimentar, ya sea simplemente buscar en estos sitios de NFT para inspiration. Sabes, Twitter también es bueno para que las personas publiquen sus trabajos en progreso. Quiero decir, no estoy abogando por que debas comprar nada de esto, pero eso realmente depende de ti. Pero, solo ir aquí y ver lo que otras personas han hecho, y también intentar hacerlo tú mismo. Recomendaría experimentar con ello. Es muy divertido compartir tu arte con otras personas. Y así que creo que con eso, creo que vamos a terminar. Quiero agradecerles mucho desde el fondo de mi corazón a todos los que han, ya sabes, tomado el tiempo para ver Next Genes y a todos los demás que enviaron preguntas. Y gracias Gleb, eso es genial. Realmente espero que las personas aprendan cosas. Me muevo muy rápido. Entonces, y espero que este video esté disponible para ver más tarde para que las personas lo vean. Sígueme en Twitter para todas las últimas actualizaciones. Estoy 100% enfocado en el arte generativo en este momento. Hasta este año, he estado más en cosas de Indie, no, he estado más en cosas de desarrollo de juegos, honestamente. Pero ahora estoy como, estoy completamente en el arte generativo. Así que puedes seguirme allí para ver todas mis últimas cosas.

    Watch more workshops on topic

    JSNation 2023JSNation 2023
    116 min
    Make a Game With PlayCanvas in 2 Hours
    Featured WorkshopFree
    In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
    Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
    Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
    JS GameDev Summit 2022JS GameDev Summit 2022
    86 min
    Introduction to WebXR with Babylon.js
    Workshop
    In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
    You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
    For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.

    Check out more articles and videos

    We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

    JS GameDev Summit 2023JS GameDev Summit 2023
    7 min
    Boost the Performance of Your WebGL Unity Games!
    Unity, when deployed on the web, faces three critical challenges: build size, memory usage, and overall performance. This lecture delves deep into advanced optimization techniques to help you address each of these issues. Attendees will gain insights into:
    - Effective strategies for optimizing textures, audio, and models.- A detailed analysis of our ASTC experimentation with Unity, shedding light on the unexpected results despite Unity's claims.- A comprehensive guide to Unity's memory profiling tool and its implications.- An exploration of lesser-known Unity settings that remain underutilized by many developers.
    Additionally, we'll introduce our proprietary tool designed specifically for Unity optimization. We will also showcase CrazyGames' developer dashboard, our platform that enables developers to monitor and enhance the performance of their web-based games seamlessly. 
    Join us to equip yourself with the latest strategies and tools to elevate your Unity web gaming projects.
    JS GameDev Summit 2022JS GameDev Summit 2022
    33 min
    Unreal Engine in WebAssembly/WebGPU
    Top Content
    Traditionally, browser games haven't been taken seriously. If you want to target the web, that traditionally has meant compromising on your vision as a game developer. Our team at Wonder Interactive is on a mission to change that, bringing one of the world's premiere native game engines to the browser - Unreal Engine. In our talk, we'll dive into our efforts porting the engine to the browser and carrying on the pioneering unfinished work started at Epic Games nearly a decade ago in collaboration with Mozilla. We'll dive into what this means for the future of games in the browser, and the open metaverse on the web.
    React Advanced Conference 2021React Advanced Conference 2021
    27 min
    From Blender to the Web - the Journey of a 3D Model
    Top Content
    Creating 3D experiences in the web can be something that sounds very daunting. I'm here to remove this idea from your mind and show you that the 3D world is for everyone. For that we will get a model from the 3D software Blender into the web packed with animations, accessibility controls and optimised for web use so join me in this journey as we make the web more awesome.