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

Hola a todos, soy Frank Forrest, un artista generativo y también desarrollador de juegos y supongo que muchas otras cosas. Pero ahora mismo estoy principalmente centrado en el arte generativo. Y realmente me he estado enfocando 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 solo voy a darles una rápida... mostrarles rápidamente qué es lo que he estado haciendo. En qué he estado trabajando.

Entonces, veamos si puedo hacer eso. Tendrán que tener paciencia conmigo un poco porque todavía... No he usado Zoom mucho. Así que todavía estoy acostumbrándome al flujo de las cosas aquí. Bueno, espero que todos puedan ver mi pantalla ahora. Así que les estoy mostrando un sitio web llamado Twitter, que es un sitio web para publicar programas super pequeños de JavaScript. Todos estos programas son solo de 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 lo que otras personas crean y remix ideas. Como que muchos de estos son 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 hacerlo un poco más rápido para navegar por estas cosas.

Así que he hecho más de mil de estos. He cubierto prácticamente todos los temas posibles que puedas imaginar. Ordenaré por los más populares. Cualquier cosa desde como un tipo de paisaje. Todo esto es arte generativo y este es el tipo de cosas que aprenderás en esta masterclass. Todos estos son programas muy, muy pequeños. Quiero enfatizar esto aquí. Puedes ver que el código está literalmente ahí en la pantalla. Así que si yo, por ejemplo, fuera a uno de estos, ahora puedes ver el código aquí mismo e incluso puedes editar el código. Este es el tipo de cosas que voy a mostrarles. Vamos a trabajar hacia esto. Así que no espero que entiendan exactamente lo que está pasando aquí. Así que, por ejemplo, podría tocar estos números para cambiar un poco los colores. Hacerlo más verde, o tal vez hacerlo más azul o lo que sea. Así es como yo estaría quizás ajustando lo que está pasando con este arte generativo. Puedo hacer estos en lugar de un cuadrado grande, puedo hacerlos como cuadrados pequeños, o podría poner muchos más de ellos, tal vez. O lo que sea. Así que con eso vamos a jugar hoy.

Entonces veo que algunas personas tienen la cámara encendida. Así que solo quiero saludar a Luz y Gleb. Gracias. Sabes, no quiero que nadie se sienta obligado a encender su cámara. Bartosz, gracias. Sabes, solo siéntete tranquilo. Haz lo que te resulte más cómodo. Aunque me ayudará si sientes que quieres compartir tu pantalla si estás trabajando en algo. Porque vamos a estar, quizás remezclando algunos de los trabajos de cada uno, creo que eso sería divertido.

Entonces, comencemos totalmente desde cero. Vamos a comenzar simplemente creando un nuevo archivo de texto, un nuevo archivo HTML. Así que puedes hacer esto. No necesitas ningún tipo de programa especial. Solo vas a hacer clic derecho. Vas a crear un nuevo archivo. Lo voy a llamar index.html. Puedes llamarlo como quieras. Index.html es como el nombre estándar que se usa para los archivos HTML porque se abrirá automáticamente si vas a esa carpeta. Así que ahora tenemos un archivo HTML. Es un archivo vacío. Así que voy a abrir el bloc de notas. Ahora tengo notepad++, pero solo voy a usar el bloc de notas regular aquí. Lo voy a arrastrar allí. Ahora, no hay nada allí. 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. Solo 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 un uno a uno. Tengo HTML a la izquierda, y tengo el navegador web a la derecha. Así que si solo escribo algunas letras aquí, lo guardo y voy a mi navegador web y lo recargo, verás que esas letras aparecen en mi navegador web. Porque un archivo HTML, realmente es muy flexible. Y se abrirá automáticamente como un archivo de texto o lo que necesites.

Entonces, vamos a crear 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 de estilo lienzo. Así que para crear un lienzo, es realmente así de simple, acabamos de crear un lienzo. Ahora necesitamos JavaScript code para operar en ese lienzo. Así que para hacer eso, creamos un bloque de script, donde hacemos script y usamos etiquetas de ángulo de soporte, y hacemos un script de barra 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 es, solo lo voy a almacenar en una variable. Hablaré un poco más sobre las variables, pero lo almacenaremos 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 en punto y coma, porque rara vez puede suceder algo que no se supone que deba hacer si no haces eso, pero realmente no necesitas puntos y comas. Bueno, ahora tengo acceso a nuestro contexto. Así que te voy a mostrar cómo dibujar un cuadrado, un rect. Hay una función llamada fill rect. Y estas funciones pueden parecerte muy simples. ¿Cómo se supone que debo hacer arte increíble con solo un fill rect? Pero realmente, estos son los bloques de construcción. A nivel fundamental, estarás llamando a fill rect. Y mucho, la mayoría de mi arte usa fill rect o como estos comandos simples, porque al nivel más bajo, eso es realmente a lo que se reduce. Así que fill rect tiene cuatro parámetros, eso es solo la posición X e Y y el ancho y la altura. Así que si digo, 100, 100 y luego 500 y luego 100, vamos a obtener un rectángulo que espero 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 cómo crear un archivo de texto, un archivo HTML que tiene una forma dibujada en él. Así que 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 almacenado nuestro contexto2d, que es como nuestra interfaz para dibujar y cosas en este lienzo específico. Y está almacenado en la variable llamada x. Así que haré x.DillStyle. Igual a rojo, la palabra rojo. Y luego voy aquí a 5. Deberían tener un rectángulo rojo, ¿verdad? Entonces, por lo general, no vas a usar nombres de colores. Así que esto es solo soportado por HTML. Hay muchos nombres de colores. Otra forma de hacerlo es con, si alguna vez has visto estos códigos hexadecimales. Entonces usarías un símbolo de hash. Y luego, puedes hacer 6 o 4 o 3 números. Yo suelo usar solo 3. Así que eso va a ser los componentes rojo, verde y azul. Entonces, si haces F, eso sería para rojo. 0, 0. Hagamos. Hagamos un verde. Así que sería 0 rojo, verde completo y 0 azul. Así que tenemos eso. Ahora, Chris, puedes dibujar más rectángulos si quieres. Así que tenemos uno verde. Solo voy a copiar y pegar. Y esto no distingue entre mayúsculas y minúsculas, al menos para esta parte de él, para la parte del color. Así que haré un rectángulo rojo.

Y luego simplemente lo moveré a un lugar ligeramente diferente. Presiono F5. No funcionó. Aquí, veamos. Voy a mostrarte cómo abrir el depurador aquí. Así que estoy usando Chrome. Puedes estar usando Firefox o algo más. Ambos tienen depuradores. En Chrome, normalmente presiono F12 para abrir el depurador. También puedes, a veces no está permitido. Puedes hacer, creo, más herramientas, las herramientas de desarrollador. Creo que es lo mismo en Firefox. Si alguien, ¿por qué estoy chateando? Oh, espera. Vale. Déjame abrir mi chat para ver qué dice. Vale. Si alguien tiene una pregunta, puede publicarla en el chat y yo la atenderé de inmediato. Porque realmente, esta masterclass es totalmente flexible. Nunca la he hecho antes y no tengo idea de lo que la gente no sabe. Así que, oh, quizás estoy fuera del lienzo. Quizás, um. Sí. Bueno, ¿cuál es el tamaño del lienzo por defecto? Es, um, creo que 300 por 150, creo que podrías tener razón. Así que hagamos el lienzo más grande. Vamos, vale, te mostraré un truco para mostrar el lienzo completo. Así que lo que podemos hacer es hacer un uno completo, E nueve. Así que cuando haces una E, algo como uno E nueve, eso es notación científica. Así que eso es solo un número realmente grande. Alrededor de mil millones. Solo haremos eso y luego veremos cómo se ve el lienzo. Vale, ahora puedes ver que el lienzo es realmente 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 dot width igual a lo que quieras que sea. Um, solo voy a usar notación científica aquí si quieres hacerlo más grande. Um, espera, eso debería desaparecer. Vale. Lo hicimos más grande. Um, quiero mostrarte muy rápido. Otro truco para deshacerse de. Esto, ¿ves este pequeño espacio blanco en la parte superior izquierda de la imagen aquí? Um, hagamos que estos, um, llenen la ventana completa. Así que voy a usar estas variables que se llaman ancho interior y altura interior, que ya están predefinidas para nosotros. Eso va a 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í, etiqueta de cuerpo, que se supone que debes tener, pero no tenemos una de todos modos, realmente no necesitas una. Lo principal es que queremos establecer el estilo, el margen, el estilo de margen de CSS. CSS puede ser confuso, pero no necesitas saber mucho sobre él. Todo lo que necesitas saber ahora es que puedes hacer margen igual a cero. ¡Boom! Las barras se han ido. Llena completamente el tamaño. Incluso puedo ir, si voy a pantalla completa y presiono recargar. Ahora va a llenar toda la escena. Puedes escuchar si quieres en un evento de redimensionamiento, no tengo eso ahora, está bien. Pero el punto es que está llenando toda la pantalla con lo que queramos. Así que puedes hacer eso o, oh, puedo mover esta cosa. Solo descubriendo esto, vale. Así que puedes hacer eso o puedes, puedes, ¿de qué estoy hablando? Estilo de cuerpo de margen de ancho y altura. No necesariamente necesitas hacer que tu lienzo use ancho interior y altura interior. Puedes querer hacer que tu lienzo, muchas veces para el arte generativo, solo hago que mi lienzo sea un cuadrado, algo así. Y si haces eso, puedes querer añadir una etiqueta de estilo aquí que diga algo como, algo así como, voy a salir de aquí pronto. Así que ahora solo estoy, si entiendes, sujetando esto, estoy usando el ancho, estilo de ancho. Ayuda saber un poco de CSS. No necesitas saber mucho de CSS, pero puedes querer saber cómo posicionar tu lienzo y cosas así. Solo los conceptos básicos. Así que creo que eso es prácticamente 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 tienes eso, no va a funcionar. Y este es un archivo válido de HTML. Esto es todo lo que necesitas saber para HTML. Así que espero que todos hayan seguido hasta ahora. Vamos a pasar al siguiente paso. Voy a mostrarte algo distinto a la codificación en vivo. Que es lo que vamos a estar haciendo durante la mayor parte de esto. Lo que quizás no te des cuenta de lo increíble que es JavaScript es esta console aquí donde estoy ahora. Puedes escribir comandos allí. Cualquier comando y sucederá. Puedes usar esto en cualquier sitio web. Te voy a mostrar cómo funciona la codificación en vivo allí, porque es útil para la depuración. Puedo usar esto para una calculadora. Si quiero sumar dos números o multiplicar números juntos, abriré esto y empezaré a escribir cosas allí. También puedes hacer puedes literalmente escribir tu code justo aquí. Vamos a hacer que nuestro estilo de relleno sea rojo de nuevo.

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 es una forma mucho mejor de iterar, al menos para estos pequeños proyectos. Así que no voy a estar usando la console aquí. Solo quería mostrarles lo útil que es en que es esencialmente lo mismo que voy a mostrarles a continuación. Puedes simplemente escribir tu code en la console y hacer que se ejecute 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 super pequeños se reducen al mínimo. No vamos a aprender sobre code golfing hoy, que es mucho de lo que este sitio web es, que es la práctica de tomar un programa y reducirlo tanto como sea posible para caber en este espacio increíblemente pequeño. Pero la otra parte de eso, el aspecto de eso que sí quiero compartir es la parte de edición en vivo de eso. Así que voy a empezar un nuevo tweet aquí mismo haciendo clic en el botón de nuevo tweet. Y la parte de edición en vivo es una locura. Así que por ejemplo, hay como nueve de esas cosas ahora mismo. Ahora, si quiero cambiar cuántas de esas cosas se están moviendo, literalmente puedo presionar un botón, y cambia automáticamente. No necesito recargar nada. No necesito presionar ningún tipo de botón especial o algo así. Literalmente puedes escribir cosas, y sucederá automáticamente. He encontrado esto muy útil para el arte generativo. Porque a veces cuando estás trabajando en un programa, tardará un tiempo en compilar, varios segundos hasta un minuto, o no puedes iterar tan rápido. Porque no hay una interfaz uno a uno donde lo que estás escribiendo se muestra directamente. Entonces, creo que así es como vamos a trabajar la mayor parte de hoy. Excepto si no voy a usar Twitter. Hice un sitio que es mucho más fácil de usar que Twitter, creo, se llama así que si quieres, voy a pegarlo en el chat aquí. Este es mi editor de code personal. No es perfecto. Lo hice hace unos años cuando todavía estaba aprendiendo JavaScript. Así que, simplemente lo he estado empujando. Realmente necesito empezar desde cero. Pero para nuestro propósito hoy, va a ser genial. Tienes resaltado de sintaxis. Tienes una gran pantalla de visualización, y tenemos la interacción en tiempo real. Codificación en vivo. También podrías usar... ¿Has oído hablar de CodePen? Puedes usar CodePen, aunque, creo que necesitas hacer clic en un botón para recargar allí.

Bien, avancemos un poco más. En nuestro ejemplo aquí, estamos empezando a adentrarnos en las variables. Cuando les mostré por primera vez ese pequeño dibujo de un cuadrado, no estaba utilizando las variables. Obviamente, estás realmente limitado con lo que puedes hacer cuando estás escribiendo todo específicamente. Ni siquiera es realmente arte generativo. Es solo como 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 code aquí, así que C es nuestro lienzo, es lo mismo que era en el otro. Lo que hace esta primera línea es limpiar el lienzo. Me resultó un poco confuso al principio por qué esto incluso limpiaría el lienzo. Pero lo que JavaScript piensa que está sucediendo es cambiando el ancho, esencialmente. No está cambiando realmente el ancho porque está haciendo una operación a nivel de bits sobre cero. Prácticamente cualquier cosa que hagas que modifique el ancho limpiará 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 está limpiando el lienzo. Hay un par de formas diferentes en las que puedes 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 usamos eso. Así que eso está limpiando el lienzo. De vuelta 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 solo si alguna vez has visto un bucle en C++ funciona exactamente de la misma manera. Tiene tres partes. Realmente tres secciones. Realmente solo una de ellas importa. Hacen que parezca que es realmente importante lo que hacen estas secciones, pero la única sección que importa es la sección del medio. Esa es la condición del bucle. Y cuando eso se vuelve falso, automáticamente va a detener el bucle. Este i menos menos puede ser un poco confuso. Todo lo que significa es que va a empezar en 1,000 y sigue atrayendo hasta que llega a cero. Así que en realidad tengo miedo de cambiar esto. Veré qué pasa. Sí. Yo... Necesitamos retractar i. i no es igual a cero. Ahí vamos. Así que esa es otra forma de hacerlo. Exactamente el mismo code. Normalmente esto es más como lo que verías. Probablemente verías i igual a eso. Entonces i es como mayor que 0, algo así. Hay tantas formas de hacer esto. No hay una forma correcta o incorrecta. Solo estamos recorriendo esto. Así que podríamos ver esta forma aquí. Así que veamos un poco más sobre cómo se crea. Bueno, sabemos lo que es esta función fill rect. Eso es solo dibujar un rect. Tiene cuatro parámetros. Un espacio en blanco es totalmente... es totalmente ignorado en JavaScript. Así que cuando estoy tratando de averiguar algo, a menudo me gusta espaciar las cosas en líneas y ver así. Así que tenemos nuestra X, tenemos nuestra Y, tenemos nuestro ancho, tenemos nuestra altura. Y nosotros... así que podemos ver que nuestro ancho y nuestra altura son 29. Ahora, lo genial de esto es que podemos simplemente mover las cosas alrededor para ver qué está pasando. Sí, esa es nuestra profundidad allí con cada uno de estos cuadrados. ¿Qué pasa si hacemos esto más bajo? ¿Qué pasa? Bueno, hay menos de esos. Si lo hacemos más grande, no hay mucho cambio. Bueno, veamos las dos primeras partes de nuestro fill rect. Así que estos valores aquí, podrían parecer un poco aleatorios para ti, pero en realidad tienen un muy cosa útil. Hay una razón por la que son así. No te he hablado de throw todavía, pero es bastante útil, al menos en este contexto. Esta no es la forma en que normalmente usarías throw, pero lo uso a menudo en este tipo de contexto para simplemente ver qué cosas son iguales. Así que tenemos el ancho es 1920. El ancho sobre dos es 960. Así que eso es en realidad por qué eso está ahí. Puedo lanzar eso allí solo para que sea más fácil de ver. La altura es 1080, la altura sobre dos es 540. Así que lo pondremos allí. Luego quitaré el throw para que vuelva al resto del code. Ahora, si pongo ese throw en la parte inferior, entonces estaría bien. Aquí es donde está poniendo el throw, por cierto. No sé si la gente lo vio, pero... Así que tenemos nuestro ancho y nuestra altura. Todo esto está configurado automáticamente por Twitter. Ahora, podrías estar preguntándote, como, ¿por qué el lienzo mide 1920 de altura, lo que sea? Eso es porque Twitter lo configuró para ser así. Eso es porque con ese HTML code que habíamos escrito, usan HTML code y dice el ancho y la altura para ser 1920 por 1080. Eso es lo que usan en Twitter. Es una resolución de 1080p. Así que es una cosa bastante estándar en la industria.

Muy bien. Así que tenemos nuestro ancho y nuestra altura aquí. Así que esto es la posición X e Y. ¿Y qué pasaría si no tuviéramos esto? ¿Qué sucedería? Bueno, va a ser un cero. Va a estar 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 simplemente tocan números para averiguar qué hacen, si no recuerdo o para experimentar. Así que tenemos nuestro ancho y nuestra altura aquí.

Este S y C, podrías estar confundido. Lo entiendo. Y Deweiter define solo un par de operadores matemáticos, seno y coseno de uno de ellos, que define como S y C mayúsculas. También hay una T mayúscula para tan. Pero esto es realmente lo mismo que Math.sine y Math. Hay muchas cosas buenas en la biblioteca matemática de JavaScript. Prácticamente lo que pensarías que estaría allí, todas las funciones de rasgo y cosas así. Seno y coseno son algunas de las funciones más utilizadas en el arte generativo para todo tipo de propósitos. Así que tenemos eso resuelto. Seno y coseno.

Y este valor T es la otra variable que se pasa a esta función. Y ese T, puedo lanzar T al igual que lanzar cualquier cosa, se imprime aquí mismo. Ese es el tiempo en segundos. Así que estoy multiplicando T veces pi sobre 2, que es para hacer que esta animación sea un bucle de dos segundos, o tal vez un bucle de un segundo. Porque, por supuesto, cualquier cosa... Todo esto está operando en radianes, si estás familiarizado con radianes versus grados. Los grados van de cero a 360. Pero realmente, cualquier lenguaje de programación por defecto, usa 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. Así que si no tuviéramos pi aquí, ¿qué pasaría? Bueno, esto está controlando realmente qué tan rápido gira esto. Ahora, si te das cuenta, si lo pongo demasiado rápido, parece que parece que está girando más lento de alguna manera, porque está empezando a golpear esa frecuencia donde está aliasing con el tiempo real. Y estos números también podrían jugar. Estos números multiplicando i. OK. Ahora tenemos un bucle. Ahora tenemos diferentes formas. ¿Qué pasaría si me deshago de esto? ¿Qué pasa si muevo t aquí arriba? Muévelos a ambos o cambia estos valores aquí. Estos son los tipos de cosas con las que puedes jugar. Añadamos algo de color a esto. Añadamos algo de color a esto. Te mostraré una forma de añadir color dinámicamente. Usaremos la función HSL que es súper útil en el arte generativo. Es tono, saturación, luminosidad. Así que van a haber tres parámetros diferentes para esta función y también alfa que no vamos a usar. Estas pequeñas marcas de garrapata… ¿cómo las llaman? Acentos graves, creo. Se utilizan para hacer, 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 añadir cadenas juntas. Así que si tuviera Q coma saturación, necesitamos un signo de porcentaje. Porcentaje coma, y luego valor, porcentaje. Simplemente funciona. Vale. Tenemos un rojo. Tengo rojo, siempre jugando con estos valores, siempre pinchando los valores porque eso te ayudará a tener una idea de lo que está pasando. Esto, me resultó un poco confuso al principio, pero el parámetro de luminosidad. Así que es cero, es negro al 50. Es el color completo de cualquier color que hayas establecido. Y a medida que te mueves hasta cien, vuelve a cero para volver a blanco. Así que si queremos un color, sería 50. Ahora, todo rojo. Eso está genial y todo, pero ¿qué pasa si queremos diferentes colores? ¿Qué pasa si meto el ojo allí como el tono? Bueno, eso es diferente. Creo que vamos a intentar... No borrar la pantalla. Así que si, solo estoy usando una tasa de comentario aquí, puedes, puedes sentirte libre de comentar cosas si quieres. Eso es un poco interesante. Vamos a darle un poco menos de arco iris. Así que voy a reducir el ojo un poco para que el tono no esté barriendo una porción tan grande. Podría usar, Podría usar, podría almacenar esta posición x en una variable. No voy a empezar en x minúscula porque x minúscula ya se usa. Recuerda, ya he hecho eso antes. Ahora tenemos x. Así que ahora está cambiando a lo largo del eje x. ¿Verdad? O podría usar, podría hacer lo mismo para y. Creo que es bueno de alguna manera una vez que tienes tu code en marcha, para separar cosas. Hacerlo más fácil de ver cómo funcionan las cosas. Ahora tengo x e y. Ahora hagamos un pequeño truco de arte generativo. ¿Qué pasaría si hacemos algo como x e y y hacemos algún tipo de combinación de x e y? ¿Sabes, como x e y o x o y? ¿Qué tal x veces y? Eso es un poco demasiado. Sabes que puedes jugar con estos diferentes, Me gusta algo como esto. Me gusta hacer esto, 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 un tipo de Arte de Turno, ¿sabes? Incluso podríamos hacer que cambie de color con el tiempo, también.

¿Y si mezclo tiempo allí? Veamos qué pasa. Nada. ¿Es eso porque? Oh, a veces haces algo y resulta que el valor simplemente no es lo suficientemente grande como para marcar la diferencia. Personalmente, no me gusta eso. Creo que lo que podría verse mejor, solo estoy jugueteando aquí, vamos a entrar en otra cosa en un segundo.

¿Todos están en la misma página con donde 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 testing si I es mayor que cero, aprendimos nuestro bucle, un bucle. Números aleatorios, aún no hemos hecho. Eso es algo muy, muy clave para el arte generativo. Hagamos algo... Empecemos desde cero. Empecemos desde cero. Hagamos algo... Llenemos un cuadrado con un gradiente aleatorio, ya sabes. Así que haremos un cuatro I igual a 99. Este es solo un paradigma que a menudo copio. Así que estamos buscando entre I y J. Hmm, no quiero hacer eso. No creo que quiera hacerlo de esa manera. En cambio... Quiero usar esta función llamada math random para obtener los valores X e Y y asegurarme de que esto es lo suficientemente grande. Bueno, tenemos algo. Es un pequeño par de esquinas de la pantalla, así que estos math random... Intentemos lanzarlo de nuevo. Math random va a estar lanzando, va a devolver un valor entre cero y uno. Menos de uno, pero entre cero y uno. ¿Qué pasa si somos el ancho y la altura de nuestro cuadrado? Hagámoslo un poco más alto que ancho para que podamos ver qué está pasando. Ahí vamos. Así que... Eso no es realmente la x y la y, eso es más como el desplazamiento de x y y. Así que deshagámonos de eso y movámoslo allí. Ahora tenemos un cuadrado que está en el mismo lugar cada vez. Solo va a terminar llenándose hasta un cuadrado completo. Pero se llena al azar. Hagámoslo un poco más grande para que puedas ver qué está pasando aquí. Ves 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 hacer esto un poco más fácil. Esto es súper simple, nada complicado. Solo voy a usar una simple función de flecha. Así que quieres hacer r... El nombre de nuestra función es simplemente r en minúscula. Tomaremos un valor que será, llamémoslo A, supongo. Esta va a ser una función de número aleatorio. Va a devolver MathRandom veces A. Así que, en lugar de llamar a MathRandom veces W, podemos llamar a Rw, y podemos llamar a Rh. Tenemos eso. Así que, si queremos, digamos, que nuestra x esté en una posición diferente cada vez, podemos hacer algo así. Nuestra y para estar en una posición diferente cada vez, podemos hacer algo así. Si queremos que nuestro ancho y nuestra altura sean diferentes, mantengamos un ancho mínimo de 50, una altura mínima de 50. Una altura mínima de 50. Y solo vamos a usar la altura, ancho, y tenemos eso. Demosle un color aleatorio, también. Solo voy a usar esta función, que se llama R mayúscula, que, de nuevo, es proporcionada por Twitter. Funciona como esa función HSL que te mostré antes. Pero úsala, es RGB. Así que puedo hacer RGB. Pero podría hacer algo como. Oh, sí. Demosle 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. Mucho arte general es realmente ajustar valores hasta que obtienes algo que parece interesante. Porque es súper fácil hacer algo que está tan cerca de ser interesante, pero realmente solo necesita ser ajustado ligeramente de manera diferente para cruzar la línea de meta. No estoy diciendo que esto sea genial o algo así, pero es un buen comienzo. Estos valores aleatorios, es lo que se llama una aleatoriedad uniforme. Eso significa que va a devolver el valor entre 0 y 1 es 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 a dos símbolos de estrella como ese. Así que si tomamos esto a una potencia, verás cómo, 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 decimos que 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 es porque la salida está entre 0 y 1. Lo que realmente necesitamos hacer es multiplicar el resultado del seno por h. Y el seno está tomando un valor entre 0 y 2 pi. Me gusta cómo se ve en realidad.

Hagamos eso aquí también. ¿Qué pasa si hacemos otras cosas? ¿Qué tal tan? ¿Qué hace eso? Eso no está bien. Tan no devuelve un valor entre 0 y 1. Devuelve un valor entre negativo infinito. Así que, por supuesto, vas a obtener 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 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. Vamos a llegar a eso en un segundo. Si tienes colores aleatoriamente por todas partes así, no va a lucir bien. Entonces, ¿qué pasa si hacemos algo como... Digamos, r10 es menor que dos. Digamos, haremos un rojo. Rojo y negro. No olvides tu coma. Eso podría ser confuso. Este bucle for aquí, no usé corchetes. Así que necesito una coma para hacer el bucle for un bucle completo. Yo aconsejaría usar corchetes la mayoría de las veces. 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 hacer. Quería hacerlo más como eso. Así que ahora, vamos a darle un poco de pop de rojo. También podemos darle un poco de azul. Estos valores de aleatoriedad ahora, los estoy usando como un booleano. Así que está tomando aleatorio entre 0 y 10. Es menos de 2. Si fuera a hacer menos de 20, siempre sería rojo. Puedes ajustar estos valores como quieras. Así que aleatorio, ¿cómo está todo el mundo en el chat? ¿Alguien tiene alguna pregunta sobre algo? ¿Debería seguir disparando aquí? Bonitos colores.

Déjame ver 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 van a ser 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. Así que déjame mostrarte cómo funcionan. Mantengamos lo que tenemos aquí y sigamos construyendo a partir de ello. Así que sí, vamos a... Sí, construyamos esto. Añadamos algunos círculos a esto. Eso podría ser interesante y ver qué pasa.

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

Este programa es en realidad un poco pesado porque está dibujando todos estos puntos. He descubierto que los 1E4 fill Rex, eso son 10,000 fill Rex por fotograma, es un poco demasiado para la mayoría de los ordenadores. Normalmente vas a querer quedarte... 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 vas mucho más allá de eso, puede ser increíblemente lento. Increíblemente, súper lento. Añadamos círculos ovalados y cosas así encima de esto. De hecho, mantengamos esto. Voy a copiar y pegar el mismo estilo de relleno. Así que para el óvalo, podría usar el mismo color. Podría usar un color diferente. ¿Quién sabe?

Ahora, lo de los círculos, no hay un comando directo, fill circle, pero podrías hacer uno si quieres. Puedes hacer tu propia función como acabo de mostrarte. Y quizás hagamos eso en un segundo. Primero, hagamos el círculo. Es una función llamada arc. Lo voy a hacer así primero. Tengo miedo de lo que podría pasar 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. Sólo quieres asegurarte de usar ángulos que sean lo suficientemente grandes para cubrir 2 pi. Así que 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 empezar un nuevo camino cada vez que hace un arco. Parece bastante cool. Es bastante cool, no voy a mentir. Necesita empezar un nuevo camino cada vez que hace un arco. Necesita hacer… a menos que quieras enlazar eso. Así que si empieza un nuevo camino cada vez que hace el arco, entonces no obtendrás eso todos estos círculos conectados juntos. Y esto es generalmente lo que quieres hacer para dibujar un círculo. Primero llama a begin path, luego llama a arc, luego llama 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, una altura, un ángulo, y luego… Un ángulo es en términos de un ángulo de rotación. Así que si, ahora es cero, así que si digo que lo ponga en estos diferentes ángulos, verás cómo está rotando ese óvalo. Voy a dejarlo en cero por ahora. Así que tenemos nuestros círculos dentro, óvalos dentro de los cuadrados. Creo que podría ser interesante si estos anchos y alturas cambian en función de… basado en el tiempo. Quizás podría hacer que se adelgace con el tiempo o algo así, eso a veces puede parecer interesante, o más grueso con el tiempo quizás. Oh sí, quiero mostrarte lo que ha pasado ahí, de hecho. Estos errores que aparecen. Twitter y este programa CapGIS te mostrarán los errores aquí mismo. De lo contrario, probablemente verás errores aquí en la console cuando presiones F12. Y realmente tienes que mirar esos errores porque significan algo. Siempre ha sido un poco molesto para mí que estos con los valores altos necesitan ser como, no pueden ser negativos. ¿Qué? Creo que todo el mundo sabe cómo se vería si estos valores son negativos. No sé por qué decidieron restringir eso. Pero simplemente vamos a llamarlo valor absoluto. Valor absoluto. Así es como dibujas un círculo o una elipse o incluso parte de una elipse. Déjame mostrarte cómo dibujar una media elipse. Ahí es donde uso estos números, que controlan cuánto de la elipse quieres hacer. Y llegas a 2pi. Eso va a ser una elipse completa. Pi va a ser, recuerda que decíamos 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 de nuevo confundido, como por qué esto no es un cuarto de una elipse? Está como conectando, saliendo de esto, puedes ver al usuario, hay como una parte de cuerda. No sé cuál es el nombre de esta cosa. Pero ¿qué pasa si quieres un cuarto de la elipse, cómo lo harías? Necesitamos otro punto, que está en el centro de la elipse. No está trazando un punto en el centro de la elipse para nosotros. Así que necesitamos llamar a esta función line2. Para movernos allí. Ahora, el primero- ahora está trazando el punto en el centro de la elipse. Y podemos ver cómo sería una cuña de un cuarto de esa elipse. Y esto, podemos alimentar el tiempo aquí. Podemos hacer todo tipo de cosas para experimentar con este arte.

Bueno, hagamos más cosas con líneas. Um, vamos a, dejaré esto por ahora. Me gusta jugar con ello yo mismo, comentarlo en mi code mientras experimento. En lugar de un fill rect, me estoy volviendo loco aquí. ¿Qué tal si hago un, um, no escribamos mucho más code. Hagamos como una línea 2. Ahora no estoy viendo 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, de nuevo, recuerda, no llamando a beginPath. Está conectando todo junto, y no solo conectando, está redibujando en cada fotograma. No queremos eso. Llamamos a beginPath. Y vemos nuestras líneas. Hay demasiadas líneas. Ni siquiera podemos verlas. Hagamos menos, ¿qué tal menos líneas? Ahora puedo ver nuestras líneas. Así que estoy usando un fill. ¿Qué tal 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, va a suponer que estoy tratando de hacer un polígono y conectar esas líneas de esa manera. También hay una función genial llamada even-odd que podrías 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 hacemos stroke y fill, y puedes controlar el el ancho del stroke también. Digamos que quiero hacerlo más grande o más pequeño. Recomendaría no hacer el ancho de la línea tan grande porque he encontrado que hay una gran diferencia 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 pasar. Y así he notado algunos problemas con eso, el ancho de la línea. Y puedes establecer el color de la 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í tienes una idea. Mezclémoslo todo. Así que tenemos un fill style y tenemos un stroke style. Así que tenemos nuestro fill y tenemos nuestro stroke. Así que hagamos ambos. Hagamos un fill y un stroke. Tenemos fill rect. Voy a rellenar algo aquí. Oh sí, fill. Estoy tratando de ver si hay algunos, oh sí hay algunos colores detrás de él. No está realmente resaltando, sin embargo. Asegurémonos de que lo tengo arriba porque la línea se está dibujando encima de, encima en lugar de debajo. Podría ser, ¿qué tal si quiero más, qué tal si quiero separarlos? Haremos la línea primero y luego haremos el, vamos después, encima de la línea. Solo 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, haremos esto un poco, un poco demasiado ocupado. Vamos solo por un segundo. Vale. ¿Qué tal como, rotación? ¿Qué tal si queremos hacer un cuadrado que no esté perfectamente alineado ortogonalmente con el lienzo? También puedes hacer eso. Hay un par de formas diferentes de hacer eso. ¿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 ahora mismo, así que simplemente no está haciendo nada. Pero si yo fuera a hacer algo como translate, Ahora debería, No creo que esté funcionando. traducir todo, oh, ¡lo está! ¡Oh, eso es por qué! Porque, estamos haciendo, me confundí porque las líneas no están siendo traducidas. Deshagámonos de eso, así puedo ver lo que estoy haciendo. Entonces, los cuadrados están siendo traducidos. Tenemos nuestra Y y nuestra X traducida. Entonces, por supuesto, nuestra traducción es literalmente solo estos parámetros, estos campos aquí, así que tenemos una Y, estos dos primeros parámetros aquí, así que pongámoslos. 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 lo que está pasando... ext.rotate... voy a... voy a ver... Creo que gran parte de la programación es simplemente averiguar por qué las cosas no están funcionando... Estoy tratando de eliminar... rotar relleno. No sé... ¿alguien puede ver por qué eso no sería... Oh. Rotando... Creo que estás rotando los píxeles. ¿Cómo puede funcionar la rotación? Ponlo aquí arriba. Pero, cuando lo pongo allí 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.

¿Qué está pasando? ¿Qué está pasando aquí? Definitivamente, Oh, a veces simplemente investigar puede ayudar mucho. ¿Ustedes... están empezando a ver qué está pasando aquí? Entiendo. Entiendo. Esto en realidad fue bastante genial. Entonces, noten que este ancho y altura ya no es vertical y horizontalmente. Estoy rotando la dirección. El orden de las operaciones a veces es un poco complicado de entender con estas cosas de rotación y traducción. Y usualmente lo que hago es como crear una función que hace... Una vez que entiendo qué está pasando, creo una función, es como dibujar un cuadrado rotado donde paso una posición de ángulo y sé que la función siempre hace lo que espero que haga. Así que aquí estamos rotando el ángulo del dibujo, como el ángulo de sombreado. Pero si pusiera rotar aquí arriba, lo estamos rotando antes. Así que también está rotando la posición. Así que es un buen ejemplo de cuán diferente puede ser esto. ¿Y si queremos ambos? ¿Puedo conseguir ambos? Puedo conseguir ambos. Demos a esto un valor aleatorio también. Vaya, eso no es tan bueno. Eso no es tan bueno. 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 el mismo para cada cuadrado. Además, ya que estamos rotando aquí, decidí agregar un poco de rotación. Aleatoriemos eso también. Oh, de nuevo, quiero que este ángulo sea el mismo, no aleatorizado cada vez. Así que el rectángulo sería... Necesitamos almacenarlo en una variable. Y necesito, ya que estamos rotando, necesito ampliar este x e y. Así que ahora está cambiando de ancho y alto. El ancho es 23. Creo que necesito hacer que la altura sea más también, probablemente me va a gustar eso. Demos un poco más, un poco más de jugo. Genial. Sí, tenemos un poco de efecto esponjoso aquí con el sombreado. Estoy haciendo y, voy a hacerlo lo suficientemente lejos, porque estamos rotando como aleatoriamente la mitad de ellos son, 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 vas a estar equivocado. Pero no hay otra forma de hacerlo que intentarlo. ¿Qué pasa si traduzco primero, luego roto, luego hago mi otra traducción. Así que traduciendo al centro del lienzo primero, entonces puedo reducir un poco estos y obtener un relleno más, más apretado, más apretado. No está en la parte superior. ¿Por qué no estás en la parte superior de eso? Oh, necesito probablemente porque estos rectángulos deberían estar cubriendo la barrida completa de dos pi. Vale, ahí vamos. Estos ángulos, recuerda que este es un ángulo entre cero y uno, o cero y dos, pero el ángulo realmente sube hasta dos pi. Así que probablemente deberías hacer eso allí también. Diré, así que otra cosa que probablemente debería empezar a decirte es como guardar tu trabajo y guardar como, progreso incremental de tu trabajo. De la manera. Una de las cosas que me gusta de Capgis es que puedo simplemente presionar guardar. Y automáticamente guardará un archivo de texto de esta cosa que acabo de hacer. Luego, eventualmente, cuando vuelva a él, puedes simplemente arrastrar el texto archivo directamente de vuelta a él y hacer que lo cargue para ti. Así que solo quería mostrar cómo tú, cuando presionas recargar, dirá que esto ha code cargado pero es, ya sabes, no no va a ejecutarse de inmediato porque hay problemas que pueden ocurrir. Debería probablemente mostrarte cuál de esos problemas puede ocurrir, que puede ocurrir, um R antes de que te suceda para que sepas qué hacer cuando suceda. Así que JavaScript es un poco molesto sobre bucles infinitos así que intentemos causar un bucle infinito aquí teniendo un bucle for que nunca nunca decrementa la variable um. Ahora afortunadamente, afortunadamente esto en CAPJS y twitter ambos inyectan code en estos bucles for que quizás ni siquiera veas pero está ahí. Te lo demostraré. Te lo demostraré. Puede que ni siquiera veas que el code está ahí pero está ahí. Así que te estoy lanzando lo que resulta ser el nombre de esta función. Verás que este es el code. Este es nuestro code pero no escribimos este code. No escribimos este code. No escribimos este code. Eso es porque este sistema simplemente inyecta un poco de code allí para prevenir que ocurra un bucle infinito. Porque los bucles infinitos realmente apestan. Te voy a mostrar qué pasa cuando no tienes eso. Así que volvamos y cómo prevenir que ocurra. Tenemos i menos menos de vuelta a nuestro vieja cosa. Deshagámonos de este lanzamiento aquí de vuelta a nuestra vieja cosa. Vale. Ahora voy a desmarcar la protección de bucle. Eso va a desactivar esto. Así que es va a ser nuestro code crudo ejecutándose. Ahora, ¿qué crees que va a pasar cuando borre esto? Tengo miedo de hacerlo. Espero que estemos bien. No sé. ¿Crees que debería intentarlo? Tengo miedo, aunque, porque estoy haciendo esto por ti para ahorrarte la frustración que Acabo de hacer. Ahora esto está congelado. Todavía puedo hacer clic en otras pestañas. Usualmente lo que puedes hacer es simplemente hacer clic si en Chrome, haz 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 va a 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 jugueteando y es muy fácil que esto suceda. Vale. Afortunadamente conseguimos esto. Bueno. Vale.

Así que ahora va a aparecer. Se va a guardar. El programa está cargado, modifica code, o despausa para ejecutar. Tenemos la protección de bucle de nuevo activada. Así que eso es para que sepas que puede suceder. No es el fin del mundo si sucede. Te voy a mostrar otra forma de prevenir que suceda. La forma antigua. Así que imagina que tienes la protección de bucle, apagada, si eliminas la variable de 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 por aquí. No está en esta parte. Quiero cambiar cómo funciona, básicamente. Lo que puedes hacer es desactivar el code. A veces lo haremos eliminando parte del bucle for. Ahora es mal code. No se va a ejecutar. Así que podemos hacer lo que queramos. Puedes tomar I, podemos moverla aquí abajo y todavía queremos mantener la I como la variable de bucle. Y después de haber hecho mi pequeña cosa, puedo poner el bucle for de nuevo y estamos listos para continuar. Así que eso es solo una pequeña cosa de la que hay que estar al tanto que es una de las cosas trampa. Probablemente te vas a encontrar con ello 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 incluso peor en detectar esos. Y sí, he tenido que reiniciar mi ordenador una o dos veces.

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. Algunos de estos aquí, por ejemplo. Pero este artista también ha creado, algunos de estos no son rectángulos, algunos de ellos 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. Multipropósito un circo, creo que vi este, creo que compré uno de estos. Parece que sí, lo hice. Soy el número uno, por cierto. Pondría el número uno y dije, 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í es 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 llenado 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, ya sabes, divides a la mitad cada una de esas mitades divididas cada una de esas divididas. Esto, para mí, parece más un llenado 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? Sabes, e intento meterlo allí y esto es un llenado de espacio ajustado por lo que en realidad está poniendo cosas tan ajustadas como puede 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 una 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 complicados 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. 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 y 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. 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 tiene una pregunta real básica, pero ¿tienes buenos recursos para explicar los diferentes conceptos matemáticos entre algunas de las técnicas de arte generativo? Es una buena pregunta. Um, bueno, lo que sucede con el arte generativo es que puede 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 excelente manera porque, como te mostré aquí, puedes buscar y luego encontrar ejemplos. 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. Comienzas a obtener algo similar. Así que Twitter es un gran recurso para encontrar ejemplos. Textiles. Um. He visto un par de cosas en Twitter relacionadas 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í 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 rectángulos y se vuelve aburrido. Entonces, realmente, la forma en que sientas tu arte es lo que lo hará especial y único, y eso es 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, necesitas textura. Y también hay muchas cosas en Twitter para eso. Sé que hace poco hice algunos de estos, 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. Puedes ver todo el code aquí. Es un fragmento de code 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 code son, bueno, en realidad esta primera parte del code es la X, lo único 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, veo, no quiero buscar un nuevo arte generativo Quiero buscar como textiles reales, sí, como este tipo de formas, este tipo de símbolos de acolchado, incluso como patterns tipo floral, todas estas cosas son algunos de los primeros tipos de forms de arte generativo antes de que estuvieran disponibles las computadoras. 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 detalle. Gracias Frank. Sí, gracias, gracias Liz.

Espero que eso ayude. Lo hace. Los textiles son realmente una buena fuente de inspiration, creo, para el arte generativo. Sabes, encuentro que hay dos cosas que me inspiran, ya sea por cosas en el mundo real que veo, y a veces simplemente tomo una foto en mi teléfono o lo que sea, de inmediato, si veo algo interesante. Podría ser una alfombra. Podría ser solo un patrón de aceite, una mancha de aceite en el suelo, o O a veces me inspiro en el otro lado, que es solo matemáticas, supongo. Solo conceptos imaginarios, que no están basados en el mundo real. Y esos son, hay diferentes formas de abordarlo. Entonces sí, los textiles son geniales. Volvamos a... Gracias. Haré esa investigación. Gracias. Sí, busca alrededor. Hay muchas cosas buenas. Creo que probablemente hay uno o dos en fxhash que vale la pena revisar. Bueno, sé, déjame ver este. Sé Creo que se llama ¿telar? Hay muchas cosas que están basadas en textiles. Que querrás investigar. Es realmente... Es hermoso. Tema, es hermoso, sí. Y hay otras formas de presentar el arte generativo. Sabes, al principio todo va a estar en la computadora pero para presentarlo es posible que eventualmente quieras intentar no solo imprimirlo sino, digamos, 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, ya sabes. Eso sería genial en realidad. Sabes, tener una manta basada en tu propio arte generativo. Hay formas de hacer eso, así que piensa en cómo llevar tu arte generativo fuera de la computadora y llevarlo al mundo real.

Bien. Intentemos, así que voy a volver a hacer un sistema tipo fuego. ¿Cómo podemos hacer fuego? Te mostraré trucos. Bien, fuego, comencemos con el fondo negro. Voy a hacer, voy a trabajar un poco rápido aquí. Solo voy a hacer un fill rect lo suficientemente grande 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 voy a hacer un poco más fácil. Voy a usar esta cadena de plantilla. Y básicamente es una forma más sencilla de crear estas cadenas. ¿Tenemos rojo en la tonalidad, saturación? Tenemos rojo. Así que la idea con esto es solo este signo de dólar, los corchetes rizados son solo una forma de Quiero decir, es fundamentalmente equivalente a esto, pero solo un poco, ocupa menos espacio, y finalmente se vuelve más fácil de leer una vez que te acostumbras. También hay alfa aquí, es posible que no te des cuenta, pero hay un parámetro alfa, que puedes establecer entre cero y uno, totalmente opcional. Así que tenemos un círculo rojo, ese es el primer paso para dibujar fuego, lo creas o no. Esto no va a ser el mejor fuego del mundo porque estoy empezando. Quiero que esto sea, vamos, uh, no está en la parte inferior. Necesito múltiples, como necesito, necesito que esto esté en movimiento. Necesito que se esté encogiendo. Necesito que esté cambiando de color. Necesito que sea, um, todas estas cosas. Así que vamos, vamos a obtener un porcentaje. Simplemente lo llamaré P P, y vamos a lanzar, vamos a almacenar el tiempo allí por ahora. Así que básicamente porcentaje, va a ser tiempo, se va a repetir cada segundo. Esta es la división modular, se repetirá cada segundo. Así que tenemos nuestra P, um, y queremos que esto se mueva hacia arriba, hacia arriba no hacia abajo. Bien, tenemos nuestra llama moviéndose hacia arriba. Queremos que se esté encogiendo en tamaño. Así que está creciendo, no queremos que crezca, queremos que se encoja. Así que en lugar de P queremos uno menos P. Bien, tenemos que encoger, tenemos que encoger. Tenemos um ¿qué más? Cambio de color. Nosotros queremos un cambio de color. Um así que quieres que empiece en un color amarillento. Um tono oh esto siempre me confunde. El tono está entre 0 y 360 así que el amarillo es como un 60 uh vamos a hacer algo así. Um T veces 50 así que estamos yendo de un amarillo... Oh no T veces 50, P veces 50. Ve de un amarillo a un tipo de color rojizo aquí. Todavía no se parece mucho al fuego. Um así que el siguiente paso sería um sería crear un bucle aquí. Porque obviamente solo una llama no va a ser suficiente. Bien, vamos a hacer mil llamas. Por supuesto, todas están encima de las demás, así que no vamos a ver ninguna diferencia allí. Vamos a esparcirlas un poco. Bien, las tenemos un poco esparcidas. Vamos a esparcir, esparcimos en el eje x. Vamos a esparcir en el eje del tiempo. Si eso tiene sentido. ¿Quién es negativo, por qué eres negativo? T es igual oh seguro. Vaya, hola, hola. Esto, queremos revolverlo un poco. Revolviéndolo al potenciarlo y modarlo por 1, que es esencialmente aleatorizarlo por ahí. Me gustaría hacer esto un poco más ancho aquí. Vamos a añadir aleatoriedad vertical 2, a veces tomaré un signo de un valor y le daré un pow, y luego lo multiplicaré por algo y eso nos dará una bonita aleatoriedad. GENIAL. Oh eso es tan bueno. ¿Eso está empezando a darme un fuego? ¡Todavía tenemos mucho más trabajo por hacer! Quiero obtener más amarillo. Queremos más amarillo. Y luego queremos.. Creo que hacemos.. Déjame mostrarte la mezcla aditiva. Porque tienes que usar la mezcla aditiva para el fuego. Déjame mover esto rápido para ustedes. La operación de composición global es realmente muy útil. Lo que hace es controlar cómo se mezclan estos colores. Por defecto hace tu mezcla alfa. Como nuestro alfa es uno, significa que va a dibujar justo encima de él. Para alfa es menos de uno se mezclará. Pero el fuego no funciona así, es más como un efecto aditivo. Así que déjame mostrarte cómo funciona. 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 más ligero, no más claro, sino más ligero. No queremos mantener lo más ligero, queremos añadirlos. Queremos sumarlos. Demasiado deslumbrante. No queremos que estén deslumbrados. Aquí es donde entrará el alfa. Eso es tan bueno. Un poco de fuego. ¿Qué más podemos hacer? Está apareciendo un poco. Hay un par de cosas que podemos hacer. Puedo hacer que este emisor sea redondo, probablemente. Eso es redondeado. Eso es quizás cierto. Luego podemos controlar... Creo...

Los colores son un poco demasiado... Necesitamos agregar aleatoriedad al color también. Estoy usando esta función S en todas partes. Esto es muy útil porque puedes... Llamas a seno, y pasas un valor que está pálido. Básicamente obtienes un valor aleatorio sembrado de vuelta, lo cual es necesario para esto. No puedo usar math random aquí porque si usara math random, solo voy a Ayudarte. No querrás hacer eso. Voy a adjuntarlo a la partícula misma, y agregar solo un poco de... Un poco de aleatoriedad a eso. ¿Pero sabes qué? Eso, creo que es la saturación lo que más lo está matando. Dejemos eso 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 controlar eso es con la cantidad de partículas que se superponen, cuánto como azul hay, que básicamente se está agregando por la saturación. Porque cuanto más baja la saturación, más se igualan los colores. O este parámetro alfa aquí. ¿Qué está pasando aquí? Veo una forma extraña allí. Me pregunto qué está pasando exactamente. Déjame abrir esto un poco. Ahí vamos. No sé si recuerdas antes cuando estábamos usando las funciones laterales pero eso es una de las desventajas de esta forma de obtener un valor aleatorio sembrado, es que va a terminar empujándolo a los lados, negativo uno y positivo uno. Así que puedes hacer algo como esto es otra forma de obtener un valor aleatorio sembrado. Es como potenciar un entero y luego como modding y finalmente va a terminar con algo un tanto aleatorio allí. Creo que esto es probablemente demasiado allí. Creo que esto necesita estar más allá. Creo que mi, um. Eres un poco más brillante. Y yo, el amarillo es demasiado brillante y el rojo no es lo suficientemente brillante. Estoy empezando a llegar al punto en que casi como ajustar aquí es el siguiente paso. ¿Ves cómo está apareciendo en la parte inferior? Te mostraré cómo arreglar eso. Convirtamos este alfa en un parámetro aquí. Y entonces P es el porcentaje, whoop. No. P es la altura. Finalmente la altura 1 menos P es la altura. ¿Verdad? No estoy seguro. Consigamos alfa 1. Déjame pasar P aquí. Veamos si está cambiando aquí. Sí, eso está cambiando con la altura. ¿Pero por qué no? Oh, está desvaneciéndose en la parte inferior ahora. Eso es correcto. Sí. Bien. Entonces lo arregló. Bien. Entonces, si ves cómo está como apareciendo en la parte inferior aquí, esto es porque los, estos círculos simplemente están apareciendo con un alfa completo y para los sistemas de partículas, entran en un tamaño cero o como se desvanecen rápidamente o algo para cubrir este, como pop, así que ahora tenemos un desvanecimiento, así que se está desvaneciendo. Creo que el tamaño final podría, podría simplemente aumentar al pequeño un poco, el pequeño, el tamaño de la aleatoriedad. Eso es lo que necesitamos. Necesitamos como más aleatoriedad, como en todas partes, porque eso es, eso es lo que realmente hace fuego. Interesante. Es un poco demasiado predecible ahora mismo. Como por ejemplo, el, el tamaño de la forma, vamos a tener como aleatorizar eso parece un, un poco de aleatorización. Digo, ¿qué hago veces haciendo un diferente, como tomé un seis, un diferente poder cada vez. Así que no está como bloqueado en la misma semilla aleatoria que estos otros. Tengo, S tengo un valor. Esto va a 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, sabes, tu seno o coseno para estar entre cero y uno, es solo un simple. 0.5 y luego sobre dos. Así que ahora podemos quizás como agregar algo de aleatoriedad a como tamaño de estas cosas. Eso es demasiado. Quiero decir, esto es demasiada aleatoriedad. Esto se aleatoriza entre cero y uno. Masajea eso un poco. Así que en lugar de entre cero y uno haremos X, Y descarga bits. Ampliemos esto un poco. Bien. Está llegando allí. Está llegando allí. Está llegando allí. Bien. Va a bajar estos un poco. Bajar estos valores un poco. Los ajustes marcan una gran diferencia en estas cosas. Y eso, y como, no puedo decirte cuánto es la codificación generativa es ajustar. Realmente se trata mucho de como experimentar. Y a veces como tienes que probar ideas locas y cosas. Porque así es como a menudo se te ocurren las cosas más geniales es cuando a veces cometes un error y algo genial sucede, asegúrate de investigarlo, porque eso podría ser todo lo que estás supuesto a encontrar en primer lugar. O como, ya sabes, guárdalo. Lo guardaré ahora mismo. También puedes escribir un nombre aquí para que lo guardes y luego puedes volver a más tarde muy fácilmente. ¿Qué fuego? Um, hagamos un par de cosas más rápido aquí. Um, el fuego no es redondo. Uh, así que tenemos X, Y, y luego tenemos un ángulo y luego tenemos un tamaño, que sería hagamos eso. Hagamos eso.

Seis regalos. Whoa. Hola. Oh, espera, ¿olvidé algo? A menudo era como, deshacer. Hola. No nos lleves. Oh sí. Fuego. Brasas. Eso es un buen, ok. Entonces Chris Evans es brasas de fuego. No te saques un camino recto en la parte superior. Podrías agregar algo de oscilación aleatoria extra y la partícula en el eje X, luego aumenta la frecuencia, pero reduce la amplitud a medida que sube. Sabes, eso, eso ayudaría a algún movimiento de lado a lado.

Um, aunque muchos de los efectos de fuego que ves son de dos partes, donde el efecto de brasa es un efecto completamente separado que se agrega encima de el fuego, um, que, ya sabes, usa el sistema de flota completamente separado para esas pequeñas brasas que, que aparecen y flotan, pero, um, agreguemos un poco de oscilación aquí. Entonces, si solo hiciera algo como esto, te darás cuenta de que estoy pasando. Estoy llamando al signo del tiempo. Hagamos eso un poco más rápido, oscilando de un lado a otro. Ahora. No queremos, no queremos que oscile de un lado a otro juntos. Eso no es bueno. No queremos que oscile tan rápido tampoco. Solo estoy haciendo eso para que puedas ver lo que está pasando aquí. Queremos que sea como agregar 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, no es aleatorio porque es, es un número entre uno y mil, pero puede ser casi aleatorio porque como, 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, de nuevo, solo para mostrarte, si, si me deshago de la oscilación, se ve muy, ya sabes, vertical como eso. Entonces agregamos esta oscilación. Ahora se parece más y más a fuego. Todo lo que hagamos lo hará más parecido al fuego. A veces quieres poner un gran, valor muy grande para ver exactamente qué cosas están haciendo. Ahora puedo ver qué está haciendo eso. Esta es parte de ajustar. Cuando estás ajustando, debes poner un valor grande, para ver cuál es el valor, cuál es realmente el máximo. Si no pones un valor lo suficientemente grande, no estás ajustando correctamente porque nunca estás viendo, nunca estás viendo la cosa completa. Y a menudo es bueno poner un, ya sabes, valor bajo o un valor negativo también, para ver qué está pasando. A medida que, ya sabes, iteras hacia, hacia tu ajuste. Como otra buena técnica es dividir a la mitad y dividir a la mitad y multiplicar. Entonces esto es demasiado, esto es demasiado rápido. Entonces, vamos a fingir que no sé nada. Solo voy a dividir eso a la mitad. Entonces hagamos. Ok. Entonces es como dividir eso a la mitad de nuevo. Ok. Eso todavía es demasiado. Es dividir eso a la mitad de nuevo. También estás notando, ¿ves esto? ¿Como esta clase de cosa? Creo que probablemente está sucediendo porque lo estoy pasando. Si yo fuera a multiplicar eso, probablemente sería un poco menos notable. Me gustaba cómo estaba. Es como un movimiento circular, que parece casi como un vértice, como un, como lo haría un fuego. Ahora, si empiezo a hacerlo demasiado bajo, realmente no lo notas en absoluto. Quieres 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 eso no está mal. Oh, sí. Iba a, um, un fuego no es redondo. Uh, arco elipse. Queremos elipse, este es el radio. Obviamente no, todavía no tenemos una función R. No hicimos nuestra función. Ok. 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. Pasa demasiado tiempo pensando en ellos. Para el arte generativo es mejor simplemente saltar y, uh, ponerse en movimiento. Entonces tenemos nuestro R cero. Estoy cambiando esto a Elipse ahora está funcionando exactamente igual. Solo quiero mostrarte como, ¿qué pasaría si hay un poco de, um, un poco de aleatoriedad, um, a menudo uso Q como nombre de variable porque es como accesible para mí. Um, entonces lo que estoy haciendo con Q aquí es que estoy tomando uno más va a ser firmado. Va a ser como en última instancia un valor sembrado aleatoriamente, y va a ser como cerca de uno. Puedo controlar cuán cerca de uno es dividiendo aquí. ¿Correcto? El signo va a estar entre negativo uno y uno, agregándole uno. Y, uh, entonces va a ser algo por ahí. Solo quería conseguir un poco de ovalidad para eso. Um, dependiendo de ¿es eso correcto? No, no. Tiempo veces Q. Eso es definitivamente correcto. Uh, R veces Q, parece ser un poco más grande. Eso es todo. Ahora tenemos un poco de variedad en la forma, pero todavía, todavía siempre son, um, verticales u horizontales, lo que da una idea de lo que está pasando, así que podemos, esto, esto, esta variable aquí es la variable de ángulo para tu recuerdo para, um, para las elipses y podemos controlar eso. Entonces, solo para mostrarte aquí, puedo, puedo recordar, podría pinchar estos valores para ver qué sucederá. Y como puedo mostrar esto, esto está controlando el ángulo de las elipses juntas. Entonces, en lugar de usar, en lugar de ser un ángulo fijo, solo voy a lanzar algo como el ojo allí de nuevo.

Ese es nuestro valor sembrado de referencia. Y ahora tenemos un poco más de variación. Normalmente para, um, un fuego, no usarías óvalos o círculos, sino que usarías, um, como una textura con la iluminación de una textura ahumada. Así que tiene, así que no está tan claro exactamente como qué, um, la delineación de esa forma es, o como muchas más partículas, que no puedes ver ni siquiera ese individuo con un mucho más bajo, veamos qué pasa. Hagamos, hagamos 10 veces más partículas. Y vamos, um, 10mo con una 10ma parte del alfa. Vale. Ahora, por supuesto va a ir lento. Va a ir super lento. Ya sabes. Buen día. Gracias. Gracias, James. Espero que la gente esté siguiendo cómo funciona esto. Hay, cubrí mucho aquí. Um, así que James, ¿hay algo más con este fuego en lo que debería profundizar, o es este un buen comienzo? Eso es brillante. Realmente lo disfruté. Eso es realmente útil. Gracias. Muchas gracias. Así que hay otras formas de hacerlo, por supuesto. Um, otra forma de hacerlo, que yo, yo no quiero entrar demasiado en este momento, pero eso sería como usar un sistema orientado a objetos. Y así es como funcionan muchos sistemas de partículas. Y la forma en que eso funcionaría es que tú, um, crearías un objeto. Um, y ese objeto es la partícula. Tiene una posición, posición X e Y. Y tiene como un, um, color en un tiempo, un tiempo de vida. Y puedes como, por, hay como miles de esas partículas en la lista y tú estás continuamente añadiendo partículas, ya sabes, y todas esas partículas las estás moviendo hacia arriba y desvaneciéndose lentamente y controlando de esa manera. Y eso, eso es en realidad 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 estar dando una charla sobre mi pequeño motor JS para, um, para esta cosa en, uh, este fin de semana. Creo que no sé el día exactamente el séptimo, creo, pero una de las cosas que acabo de añadir es esta herramienta de edición de partículas. Apenas he empezado a trabajar con esto, pero esto hace, así que bajo el capó, esto utiliza un sistema de partículas y se te da acceso para controlar como estos, um, estos diferentes parámetros, que son como los parámetros mínimos que esperas, como el color de inicio, el color final. Um, puede, puede elegir entre un color de inicio y un color de inicio B y un color A y un color B para obtener alguna variación. Uh, entonces te gusta. Sí, esto es solo, esto es cosas de partículas estándar. Estás empezando tu tamaño final, ya sabes, tu velocidad, tu velocidad. Um, esto está un poco desordenado. Tengo que trabajar en esto. He notado algunos problemas con él desde que lo creé que causaron que no sea más fácil de usar. Um, pero en última instancia te da, te da una idea de cómo funcionan los sistemas de partículas, ya sabes, y hay múltiples formas de hacerlo. Si quisieras hacer un fuego que fuera completamente estático, sin moverse en absoluto, probablemente lo harías de una manera totalmente diferente porque esto está todo preocupado con el movimiento. Y si estás interesado en como, um, fuego no móvil, eso es otra cosa. Así que también revisa en Twitter porque hay muchas otras formas de hacer fuego. Hay todas estas, um, formas de simulación de hacerlo. Hay formas ingeniosas. Aquí hay otra que hice. Esto utiliza, ya sabes, algo similar a lo que les mostré, pero estoy en el DWEET, no pude encajar como el, um, la operación compuesta global, por ejemplo. Así que podría, podría agarrar esto y tirarlo aquí. Um, oh, no, lo hice, lo hice encajar allí. Usé la pantalla uno, que es, que es muy similar a la, um, no la exacta. Creo que la pantalla es la misma que la más ligera. En realidad. No, no es la misma. Se ve un poco diferente. Se ve un poco diferente. Me gusta más tarde. Honestamente, pero no se desvanece ni nada de eso. Así que eso es, eso es un buen lugar para ir a buscar ideas. Um, no te olvides de las brasas también. Esa parte de estos efectos de ajuste a menudo requiere múltiples efectos superpuestos. Sí. Y en este caso, tienes que tener las brasas cerca unas de otras para crear el, um, resultado. Porque cuando piensas en, incluso cuando piensas en cómo funciona el fuego, hay dos cosas muy distintas que ocurren. Hay como el fuego en sí. Y luego están estas pequeñas brasas que se alejan. Y ellos simplemente no lo usan. Y en realidad hay tres cosas. Um, hay un humo, hay un humo también. Así que el humo, no va a quedar bien. Um, sí, supongo que hay fuegos sin humo, pero normalmente quieres humo y eso va a funcionar de manera diferente. Funcionará de manera similar en algunos aspectos, donde podrías tener, ya sabes, estos círculos que se desvanecen o se desvanecen, pero no va a usar una operación compuesta más ligera, como una mezcla aditiva. Probablemente será solo, um, negro oscuro, algo así. Vamos a convertir esto en humo muy rápido. Um, guardemos fuego. Así que vamos a deshacernos de mi relleno negro. Vamos a deshacernos de mi, um, deshacernos de mi tono. Vamos a deshacernos de mi, um, tono de saturación, tal vez saturación de valor. Voy a, yo, yo, um, eso no, no importa. Vamos a darle algún valor, un poco de variación de humo allí. Um, um, ahora el humo podría verse mejor si no se volviera pequeño. En la parte superior en lugar de, como, um, más como se desvaneció en la parte superior, se hizo más grande, en realidad. Y luego se desvaneció. Tienes que pensar en cómo funcionan estas cosas. Um, es una diferencia sutil, pero cuando algo empieza grande y se hace pequeño versus, ya sabes, empieza pequeño, se hace grande. Um, eso afectará. Así que aquí tenemos con hey, ese es nuestro radio. Así que el radio es uno menos P. Puedes hacer algo como eso.

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, eso es algo como humo. Puedes ver cómo tomé el fuego y luego lo convertí en humo. Y ahora, ¿qué pasaría si, vamos a volverse locos. Copia esto y pégalo allí abajo. Para tener algo de fuego en el humo. Creo que se vería mejor si el humo pudiera usar menos humo. Está un poco lento ahora. Siempre mantén un ojo en tu conteo de partículas y cosas así. Si lo estás usando en tiempo real. El arte generativo normalmente no es arte generado en tiempo real. Y eso es, eso es una de las cosas que amo 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 demonios 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 pregunta si habrá una grabación. Me han dicho que habrá una grabación de esto. Oh sí. Estaba hablando sobre, estaba hablando sobre los juegos, juegos y cosas así. Así que la mayoría del arte generativo es como estático realmente o como en última instancia no importa cuánto tiempo tarda en dibujar. Y eso es una de las cosas que amo de eso porque he trabajado en videojuegos durante tanto tiempo. Y como tener este componente interactivo, un componente en tiempo real para los videojuegos, que de alguna manera son arte generativo, lo hace mucho más difícil de manejar porque necesitas preocuparte. ¿Hay demasiadas partículas? Va a ser lento. ¿Qué pasa si el usuario presiona un botón, va de una manera que no se supone que debe ir, pero no tienes que preocuparte por eso aquí. Entonces, si va lento, no es un gran problema. Entonces, si estuviera usando cosas en tiempo real, ajustaría la cantidad de partículas. Así que iba a ajustar eso un poco y solo iba a mover el humo un poco más alto. Así que está comenzando un poco por encima del fuego, algo así.

Bueno. Entonces, ¿qué estamos haciendo? Espero que no me estuviera moviendo 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 ustedes entendieran era cómo lo construí a partir de lo básico. Si recuerdan, comenzamos con solo un círculo rojo y luego empezamos a hacer que ese círculo se moviera hacia arriba y cambiara de color y una vez que tuvimos eso, comenzamos a agregar más partículas y a construir a partir de ahí. Creo que es difícil empezar en las cosas y difícil saber por dónde empezar. Y, una vez que empiezas, consigues ese impulso. Puede ser mucho más fácil llegar al siguiente paso, pero a veces solo saber por dónde empezar puede ser un poco complicado. Así que la idea es simplemente comenzar, sabes, realmente simple, muy simple, intenta desglosarlo a la cosa más simple que puedas imaginar y luego simplemente construye lentamente para obtener lo que quieres.

Hubo un par de preguntas que podría ser capaz de responder. ¿Alguien más tiene alguna pregunta o algo que pasé demasiado rápido? Quiero comprobar cuánto tiempo nos queda. No estoy seguro si esto dura hasta otros 45 minutos o otro, ¿alguien sabe? Creo que termina a las 12. Espera, oh eso es, esto es, termina a las 11. ¿Se supone que esto debería terminar ahora, o deberíamos seguir adelante? Supongo que sí, supongo que sí hablamos durante un rato. Pero, um, estoy feliz de, estoy feliz de seguir hasta alrededor de las 12. Eso es más o menos lo que planeé desde el principio. Entonces, si, no parece que nadie tenga ninguna pregunta. Así que lo que puedo hacer es simplemente, um, empezaremos a movernos hacia una conclusión. Estoy tratando de pensar en otras cosas que podrían ser importantes para compartir. Um, en, para las personas que están aprendiendo este tipo de cosas. Un par de otras cosas que quería mencionar. Así que hablamos sobre, sobre guardar, guardar tu trabajo, guardar el progreso incremental de tu trabajo. Eso es muy importante porque, um, podrías cometer, cometer un error y luego querrás volver a una versión anterior. O a veces simplemente te gusta que las cosas cambien tanto que quieres, que terminas yendo en una dirección totalmente diferente, pero aún quieres tener las cosas anteriores disponibles para, um, usar para otra idea. Um, pero también quiero enfatizar que es, es realmente importante construir tu propia biblioteca. Y eso es realmente solo como un archivo de texto que vas a guardar, o podría ser un documento de Google o lo que sea más cómodo para ti, donde pegas tus propios fragmentos de code y cosas que vas a usar a menudo. Como por ejemplo, esta cadena de plantilla de tipo HSL podría ser útil o como una función aleatoria, lo que sea útil, vas a construir tu propia biblioteca de funciones y cosas para que uses. Muy, muy útil. El ruido es, um, puede agregar, um, una capa de calidad, supongo, al arte generativo. Um, así que por ejemplo, aquí está una de, una de las piezas que he hecho llamada cómics astronómicos. Hay un poquito de ruido. Ahora puedo encenderlo y apagarlo. Es posible que ni siquiera puedas ver, no sé si puedes verlo con la compresión. Um, hay otros, hay otros que tienen más ruido. Um, pero este poquito de ruido que puedes agregar encima de 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 solo como tener un poquito de, está bien, aquí, déjame mostrarte otro que he hecho. Um, mi, uh, bytes en escala de grises es una composición muy simple para la intención de infraestructura, porque tiene ruido. Así que tengo un control deslizante de ruido aquí. Puedo controlar. Es sutil y un truco mágico. puedes verlo a través de la compresión de lo que sea que estés viendo esto, pero cuando lo ves en tu pantalla, tener ruido añade mucho. Y todo eso son solo píxeles aleatorios añadidos encima. Píxeles aleatorios de muy baja alfa 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 cómo añadir ruido y hay, hay diferentes maneras de hacer eso. Y probablemente podrías simplemente 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 para hacer arte general con JavaScript, pero yo, yo personalmente prefiero, um, creo que eso es a lo que apuntaba el juego que estaba señalando era el copiar y pegar. Prefiero, um, JavaScript vainilla. Um, algunos otros aspectos del arte caritativo. Vamos um, creo que he cubierto, creo que en realidad lo hice muy bien hasta ahora. He cubierto prácticamente todo lo que quiero cubrir. Estoy, probablemente solo voy a seguir con otra demostración de algo. Y si alguien quiere algo específico, voy a, voy a elegir algo al azar. Pero estaremos bien. Podríamos hacer como estrellas, como un campo de estrellas tipo de cosa. 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. Metí algunas cosas en ella. Creo que eso podría ayudar a tener una mejor comprensión de, um, algunos de estos generadores de números aleatorios y cómo estoy haciendo es números aleatorios sembrados y todo ese tipo de cosas. Vuelvo a mi, solo presiono reset aquí. Quiero dibujar estrellas. Entonces, cómo, cómo dibujamos como nuevo, cómo dibujamos, tracemos estos puntos al azar sin usar una función aleatoria en absoluto. De acuerdo. Y creo que esto ayudará con la cosa pseudo aleatoria, que es super importante. Entonces, ¿qué pasa si queremos llenar este lienzo con estos puntos? Hay cien puntos. Queremos llenarlo al azar. Sabemos, sabemos cuán grande es el lienzo 1920 por 1080. Así que empecemos de la manera más simple posible que podríamos hacer algo como esto ese es el enfoque ingenuo. Lo haremos un poco más grande para que podamos verlos más fácilmente. Al pasar una i a ambos ejes X e Y obtenemos una línea. Eso la gente entiende lo que 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 que ambos ejes están como atados juntos. Ambos ejes están atados juntos. Eso es el problema. Eso es el problema que estamos teniendo aquí. Entonces, ¿cómo desatas estos ejes? Bueno, podemos hacer lo que dije. Podemos convertir este ojo en casi, usarlo como un número aleatorio, generador de números pseudoaleatorios, básicamente. Entonces hagamos i mod, así que la altura. Simplemente hagámoslo altura, simple. Así que no va a cambiar nada todavía, ¿verdad, porque i es menor que la altura. La altura está en 1080. Pero, ¿qué pasaría si decimos, ¿qué pasa si simplemente multiplicamos i por algo? Veamos qué pasaría. Oh, obtenemos más de estos. Bueno, eso es interesante. ¿Qué pasaría si yo, okay, cómo está pasando eso ahora? Así que estamos obteniendo casi como una cuadrícula tipo de situación en marcha, pero no es aleatorio, ¿verdad? Es casi como si estos ejes x e y todavía estuvieran vinculados. Están vinculados de alguna manera, pero simplemente no de la misma manera que antes. Así que aquí está el truco. Para convertir esto en hacer que i no esté en altura, lineal, ya no, necesitamos que sea no lineal. Así es como salimos de esto, y lo vamos a hacer apilando I. Literalmente puedes hacer I veces I. Así que vamos a notar algunos artefactos aquí inicialmente. Eso es este tipo de cosa aquí. Si hacemos un poder más alto, esto empieza a desaparecer.

Aquí hay más artefactos, notando artefactos. En realidad, no creo que los artefactos desaparezcan. Esto se debe a que I es un entero, la altura es un entero, y en última instancia, estamos viendo cosas interesantes sobre matemáticas. Puedes hacer una cosa de arte generativo como con esto, realmente. Permíteme ir al ancho completo. Puedes hacer algunas 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 no entero. Si usas cualquier cosa que no sea un entero, eso te dará algo mucho más aleatorio.

Ahora, si uso un valor cercano a uno, comenzaremos a notar nuevamente nuestros, los números que X e Y están comenzando a vincularse. ¿Qué pasa si solo vemos lo que sucede con el tiempo? Como puedes ver, T se está haciendo más grande. Vaya, mi gato acaba de morderme. Es loco así. Cuando me gusta, no le gusta que escriba. Quiere que lo acaricie todo el tiempo. Me asustó, lanza T. Entonces, como puedes ver, T se está haciendo más grande. Ahora no necesita ser muy, muy grande para empezar a ver esta Aleatoriedad. Te mostré que esa es una forma de obtener esta Aleatoriedad. Y hay otra forma de obtener la Aleatoriedad, que te mostré es como algo como tomar el signo de un número como I. Entonces tomas I, y luego simplemente vamos a multiplicar eso, como, oh, eso fue algo interesante. Hagamos nuestro profesor de nuevo y veamos qué pasa. Necesitas algunos patterns geniales aquí. De acuerdo. Oh, lo siento. Pero lo que esperaba es si I llega, Oh, es hora. Así que queremos pal I. Ahora, si pal I, comenzamos a obtener, Veamos cómo se ve eso. Comienza a entrar rápidamente en territorio de aleatoriedad. Oh, puedes ver. Entonces, esto es, solo te estoy mostrando un par de diferentes formas en las que puedes experimentar con pseudo aleatoriedad aquí. Honestamente, no importa lo que hagas. Así que ahora tenemos esto, estos, estos vendrán estrellas, ya sabes, llenando el cielo. Hagamos que sean altas en lugar de ser blancas en lugar de negras. No es una estrella, fondo negro. Luego haremos que el estilo de relleno sea blanco. Hacemos que el estilo de relleno sea blanco. Tenemos nuestras estrellas y ¿podemos hacer que las estrellas se muevan? Entonces quieres decir que queremos hacer como, un efecto de paralaje de estrella genial en marcha. Estoy moviendo todas las estrellas, todas las estrellas fuera de la pantalla. 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 hacia atrás en el lado izquierdo de la pantalla. Entonces vamos a querer hacer una división modular, un ancho. Así que ahora se están moviendo y están llegando al otro lado, pero también se vería bien si fueran, estaban moviéndose a diferentes velocidades, ¿verdad? Se están moviendo a la misma velocidad. Eso no es tan genial. Entonces en lugar de 99, haremos uno de nuestros pequeños trucos aquí. Ahora math sine es lo mismo que S. Así que lo reemplazaré. Haremos uno de nuestros pequeños trucos. Haremos S veces el seno de I a la 4ª. Va a ser demasiado pequeño inicialmente para ver. Así que veamos cómo se ven estos valores. Bueno, estamos obteniendo demasiado alto allí. Veamos si podemos bajar de nuevo. Un poco de variación allí. Probablemente sería nieve si estuviera en el eje Y, ¿verdad? Tendremos que hacer que estos chicos sean más pequeños y probablemente varíen un poco de tamaño, como tal vez 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 agarrar mi code HSL. Y quiero pegarlo aquí. Tan pronto como regrese. Y tono, saturación, luminosidad, no necesitamos alfa, no. Quería tal vez como, estaba pensando, tal vez le daría a algunos de estos solo un poco de tono, que es... Oh, seguro, eso es... Entendido. Así que podemos dejar nuestra saturación 99. Y para la aleatoriedad, era como 50. Ahí es donde obtenemos nuestro color. Entonces tal vez yo haría como... Algo como... Voy a ir por... Consigue un poco de color allí, puedo ver cómo estoy empezando a obtener algo de rojo allí. Pensé que podría ser bueno simplemente... obtener algo... Hagamos el signo allí. El signo simplemente me da mucho más control sobre lo que está pasando. No quiero eso. Nota cómo estoy usando un PAL diferente para cada uno de estos, porque si no lo hago, eso va a hacer que estén usando la misma semilla aleatoria. Esencialmente si yo fuera a decir, esto es I a los tres. Ahora si pongo I a los tres en ambos ejes X e Y, empezamos a tener ese mismo problema de nuevo. O si esto es I a los cuatro, o si pongo I a los cuatro aquí, eso va a vincular la luminosidad con el tono, lo que esencialmente significa que no vas a ver como cualquier cosa que sea roja también va a tener una luminosidad de cero o una luminosidad baja o lo que sea. Entonces, queremos que sean como, ya sabes, totalmente no relacionados entre sí. Tenemos nuestro pequeño cielo aquí. Así que, creo que eso es una buena, demostración bastante buena de cómo hacer un fondo de cielo. Entonces, desde aquí, puedes seguir agregando. Entonces, tenemos nuestras estrellas aquí. En realidad, solo voy a agarrar este mismo code y por ahora simplemente lo haré rojo. Y solo, pensé que podría ser genial tener como algunas, solo haré clic en esto. Sí, creo que podría ser bueno tener algunas como olas en la parte inferior como el agua, como tal vez como eso o facturas o hagamos olas, hagamos olas. Entonces, tenemos nuestra I, tenemos nuestra Y, tenemos nuestro ancho.

El ancho va a ser uno, lo que va a ser un pixel para cada uno de estos. Simplemente va a ir hasta el fondo de la pantalla. Lo estoy bajando, lo estoy bajando, lo estoy bajando. Entonces, esto es nuestro x, esto es nuestro y, ahora queremos añadir un poco de onda aquí. Así que esta es nuestra función seno. Estos i, no vamos a hacer que se mueva todavía, así que no vamos a usar tiempo todavía. Solo vamos a usar eso. Ahora, tenemos este extraño efecto de peine, eso es solo porque i es demasiado grande, porque recuerda, estamos pasando radianes a esta función seno. Así que queremos que sea una diferencia muy pequeña entre cada i. I es, un radián no es pequeño, un radián es grande. Así que lo bajamos mucho. Y luego decimos si le añadimos t, eso está añadiendo nuestro valor de tiempo a él. Voy a hacer que se mueva en la otra dirección, así que obtenemos menos t. Y vamos a mover un poco más rápido. Vale. Y podemos hacer eso, y podemos hacer eso, y tal vez podemos darle un poco de color que sea un poco más adecuado para el agua. Solo voy a darle algo así como, se ve bastante bien con el, un amarillo, un color un poco blanquecino. Así que le voy a dar algo bastante claro.

Quería, oh, vamos, esto solo está usando una ola, pero una de las cosas geniales que puedes hacer es como superponer olas una encima de la otra. Así que vamos a superponer otra ola con una configuración ligeramente diferente aquí y una velocidad de movimiento ligeramente diferente aquí. Y luego puedes, tal vez, hacerlo un poco más bajo. Hagamos eso un poco, ahí vamos. Sí, no es perfecto, pero es un comienzo, es un comienzo. Esto es en realidad, es más como un paisaje que un, que un, vamos a hacer un paisaje. Vamos a hacer un paisaje. Así que en lugar de, eso va a ser demasiado para renderizar. Así que voy a hacer, en lugar de tantos, voy a hacer como, una octava parte, de tantos. Eso significa que probablemente tendré que, pero es por un, No me preocupo por limpiar ninguna de estas matemáticas. Solo agrego números allí cuando y como me apetece. 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 nuestra Y, tenemos nuestro estilo de relleno. Voy a copiar esto, tono saturación, luminosidad, la saturación será 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 fue entre cero y uno o cero y ocho. Vale. Solo tengo una forma abreviada de hacer las cosas, a veces que yo, a veces haré J y necesitamos cambiar el color. Vale. Ahora tenemos capas. Ahora tenemos capas. Necesitamos, necesitamos hacer algo más. Mezclemos estos generadores de números aleatorios. Todos están usando I, no están usando J. Así que metamos a J en la mezcla. Y metamos a J en esta mezcla aquí 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 que, no debería estar moviéndose a una velocidad diferente porque eso va a hacer que no parezca terreno. Eso va a hacer que parezca más agua. De hecho, debería, creo que necesito, necesito hacer algo como esto para que funcione correctamente. Para hacer que, 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 él. Esa parte está funcionando bien, pero todo lo que quería hacer es hacer que, hacer que se mueva más rápido en primer plano para que, vale, aquí vamos. Y tal vez darle un poco de un diferente, como hagamos que las estrellas se muevan en la otra dirección, ¿o puedo hacer que esas 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, rango de tonos más ajustado. Y le daremos un desplazamiento para que no sea todo rojo, no es todo rojo, se vería mejor si fuera como un, ahí vamos. Incluso podemos darle al cielo, ya sabes, como un más, como un tinte azulado, tipo de tinte. Ya sabes, y luego podemos, tal vez, oh, apuesto a que, apuesto a que las estrellas se verían mejor con el aditivo. Solo voy a añadir eso. No sé por qué, a veces es lento cuando vuelvo a esto. Usualmente no lo hace. Podría ser porque estoy grabando. Eso me va a dar las estrellas. Volveré a ponerlo, como fuente sobre. Tenemos nuestras estrellas, tenemos nuestro terreno. Eso es bastante genial. Tal vez agregaría árboles allí a continuación o edificios o algo así, ya sabes, o agregar más, tratar de hacer que el terreno se vea un poco más interesante en lugar de solo una onda sinusoidal aquí. Puedes agregar otras ondas sinusoidales para diferenciar aún más. Ahí vamos. Eso es algo. Así que no es tan obvio lo que está pasando. Bueno, ¿qué opinan ustedes de eso? ¿Es una buena escena? Oh, vale.

Entonces Artaz dice que necesita irse y nos agradece por la sesión. Creo que casi he terminado ahora. Planeo ir hasta las 12. Así que probablemente no tenga suficiente tiempo para hacer otra demostración completa, pero definitivamente podría responder preguntas o intentar mostrar algo que me perdí. Estoy tratando de pensar en cosas que me perdí, no porque probablemente me perdí muchas cosas. ¿Qué más podemos hacer? No estoy seguro. Siento que eso es, una vez que empezamos 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 a ustedes una buena introducción ajustada que incorpora todo. Y está mostrando, estoy mirando mi, me gusta la hoja aquí, mi hoja de trucos aquí. Tal vez te mostraré un poco más de cosas de JavaScript. No estoy seguro de cuántas personas están más familiarizadas con JavaScript y quieren saber más detalles sobre cómo funcionan los arrays o no profundizan en eso, sino más bien cómo lo usarías en el arte general u objetos u otros tipos de, ya sabes, o podría mostrarte más sobre cómo podrías obtener el shim, un shim trabajando para algo como, y para crear una entidad. ¿Qué pasa si la codificación cubrió todo eso en un CDScape? Renderizado de texto. Hagamos el renderizado de texto. Quiero asegurarme de que todos sepan cómo hacer eso. Eso es importante. ¿Cómo puedo saltar eso? Hay un par de cosas que debes saber sobre el renderizado de texto. Voy a hacerlo justo encima de esto. Voy a hacerlo justo encima de todo. Porque realmente no importa. Vamos a darle una bonita fuente roja. Y luego el texto de relleno funciona de manera similar a estas otras funciones. No se usa tan a menudo en el arte generativo, pero se usa bastante a menudo. Es muy útil para debugging y cosas así también. Se usa mucho en los juegos. Se usa mucho en Twitter. Técnicamente es un poco más pequeño hacer fill rect o fill text que fill rect si solo quieres un punto. Entonces podrías hacer como fill text y luego cero y luego como tu posición X e Y. Entonces la primera parte es el texto que se va a imprimir. Es super pequeño. Justo allí. Puedes controlar el tamaño y la fuente del texto muy fácilmente así como esto. Fuente igual. Hay un par de diferentes unidades que puedes usar. Los píxeles es uno de los más fáciles. Va a ser solo PX. Eso es como aproximadamente el tamaño de los píxeles. Ahora no ha cambiado todavía. Eso es porque necesitas definir una fuente. Así que puedo usar... En realidad no importa lo que escribas aquí. Cualquier cosa que escribas funcionará literalmente. Así que 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 poquito de espacio, podrías ver esto en Twitter. Como hacer esto, como agregar una comilla aquí dentro es como un truco para hacerlo... Piensa que hay un nombre de fuente allí, que es técnicamente requerido para que esto funcione. Así que tienes tu tamaño de fuente, pero puedes cambiar. Tienes tu fuente... Oh, hay otro parámetro para la fuente también, que es opcional, que apretará la fuente. Digamos que queremos que esto sea un poco más grande. Pero ahora está como envolviendo el lado de la pantalla. No quieres eso. Entonces vamos a pasar ese tercer parámetro, que controla el tamaño de la fuente. Mira, como aplastándolo y estirándolo. Y si ese valor es demasiado alto, no terminará haciendo nada. Es en realidad solo el valor máximo, supongo. Así que si lo tiene establecido más alto que el valor máximo, entonces no verás nada. Y por supuesto, voy a este sitio web todo el tiempo para agarrar emojis, que son divertidos para jugar en Twitter. Entonces puedes agarrar tu emoji. Agarra tu emoji, y puedes escribir tus emojis allí igual que podrías con cualquier tipo de texto. También serán aplastados también, igual que todo lo que está pasando. Emojis, ¿qué más sobre el texto? Oh, también hay... Digamos que queremos que el texto esté perfectamente centrado. Puedes hacer x.center, que 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 esto en Arte Regenerativo? Haría algo como esto. Así que en lugar de puntos aquí, agarraría este código aquí. Pégalo allí, pega eso allí, pega eso allí. Ahora, mueve eso de allí. E incluso podríamos hacer algo como, vamos a agarrar otra fruta. Y, ya sabes, decide 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 pasa cuando borro este ancho. Ya no estoy limpiando la pantalla. Así que estoy obteniendo como un relleno de esto. Estos emojis están llenando la pantalla, básicamente. Están añadiendo color. Así que sí, los emojis son una forma divertida de jugar con, jugar con esas cosas. Definitivamente quería hablar sobre el texto, así que lo conseguimos. ¿Hay algo más que me perdí que te gustaría ver? Me quedan unos 10 minutos, planeo hacer esto. Creo que voy a mostrarles más cosas de Twitter. Far Awaitings, para darte algo de inspiración sobre los tipos de cosas que puedes hacer. Encuentro Twitter tan inspirador. Y cuando me metí en el arte generativo, realmente profundamente en él, hace como 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 como que no, no sé, supongo que siempre he estado trabajando con videojuegos durante tanto tiempo en estos grandes proyectos. E incluso en mis propios proyectos indie, todavía son razonablemente grandes. Así que pensar que puedes hacer todo este arte increíble, esto no es mío, por cierto, solo estoy buscando por los tweets más impresionantes. Saber que puedes crear este arte impresionante 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.

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 de jugar. Espero que me atropelle. Oh, lo hace. Oh, genial. Aquí hay todo tipo de juegos geniales y cosas así. 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 estoy viendo 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. Realmente profundiza en cómo funciona. Si te interesa más el aspecto del code-golfing. Este es el City Of Shadows es definitivamente uno de mis mejores. Donde hay una ciudad ahí dentro, 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, intentar recrear eso con solo algunas reglas simples, ya sabes, arquitectura, Torre Eiffel, edificios, tantos árboles. Túneles, los túneles son algo bueno, bastante fáciles. Para hacer eso, atraer, esto es un atractor de Lawrence, diferentes tipos de ecuaciones matemáticas a veces pueden realmente inspirar, una idea general de arte como esa. Oh, los fractales también son grandes. También tengo algunos fractales aquí. Probablemente se rendericen muy lentamente. Subdivisión, ya sabes, solo intentando crear efectos simples. Tuve una serie en la que intentaba 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 una serie de efectos aplicados para hacerla 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 largo formato. Hay como dos tipos de arte generativo. Siento que hay arte generativo que no es de largo formato, lo que significa que como artista curarás el resultado. Generarás, ejecutarás tu 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, probablemente compartirlo. 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 largo formato. 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 listados. Permíteme abrir uno mío porque sé que tendrá parámetros disponibles. Como tu arte generativo de largo formato 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 la gente está acuñando estas cosas, los resultados simplemente van apareciendo a medida que avanzamos y no sabemos exactamente cómo podrían verse. Para este, tenía una pequeña posibilidad de que algo sucediera donde no habría á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 encontrar inspiration. Ya sabes, Twitter también es bueno para que la gente publique sus trabajos en progreso. No estoy diciendo que debas comprar ninguna de estas cosas, pero eso realmente depende de ti. Pero, solo ir aquí y ver lo que otras personas han hecho, y también tal vez intentar hacerlo tú mismo. Recomendaría experimentar y probarlo. 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 de 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. 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 enfocado en Indie, no, he estado más enfocado en cosas de desarrollo de juegos, honestamente. Pero ahora estoy completamente metido en el arte generativo. Así que puedes seguirme allí para ver todas mis últimas cosas.