Dijeron que JavaScript no podía hacer arte hermoso – Estaban equivocados

Hola a todos, bienvenidos a mi sesión. Estoy contento de que estén aquí. En esta charla, estoy a punto de llevarlos a un viaje donde pueden crear obras de arte solo con JavaScript. Así que acompáñenme. Comencemos.

Bueno, un poco sobre mí. Mi nombre es Trahan Ismara. Soy un ingeniero web experimentado de Indonesia. Actualmente trabajo como ingeniero frontend en DT Labs. Es una empresa de blockchain con sede en Singapur. Recientemente, ayudé al sector privado, como ayudar en asuntos gubernamentales, bajo Telkom Indonesia.

Y he estado activo en la comunidad tecnológica, hablando en algunas conferencias sobre diversos temas. Como accesibilidad, rendimiento, IA, etcétera. Y también hago un poco de contenido. Como hacer podcasts, tutoriales, y mucho más. Si quieren conectarse conmigo, por favor siéntanse libres de hacerlo. Me alegraría si lo hicieran.

Así que sí, eso es un poco sobre mí. Vamos a empezar. Aquí está nuestro problema, nuestra agenda sobre la que vamos a profundizar. El primero es el gran concepto erróneo sobre el arte digital. Y luego vamos a desglosar cómo funcionan las artes digitales, las obras de arte, en JavaScript. Y finalmente, al final, vamos a hacer un ejercicio práctico para comenzar nuestra obra de arte en JavaScript.

Así que sí, durante décadas, entendemos lo que significa el arte digital. Es usar una computadora, usando un lápiz o pincel muy avanzado. Por supuesto, con herramientas sofisticadas, como CorelDRAW, Photoshop, y obviamente, dispositivos un poco caros, tal vez hardware, etcétera. Lo cual es realmente genial.

No hay nada malo en absoluto. Pero nosotros, como desarrolladores, como programadores, también queremos crear arte digital, pero con algo diferente y fuera de lo común. Tal vez con un poco de lógica, un poco de código.

Echa un vistazo a este ejemplo de imagen, la segunda imagen. Esta segunda imagen no está dibujada por algunas líneas, ni por algunas herramientas sofisticadas, aplicación de escritorio a la que necesitas suscribirte, como por mes, etcétera. Esta imagen, la segunda, está realmente escrita en JavaScript. Esto es realmente solo en JavaScript. Si miras de cerca, hay un patrón tan consistente y persistente de hexágonos aquí.

Como muchos de ustedes, yo veía JavaScript solo como un lenguaje para validación de teléfonos o anuncios emergentes, algo así. Es solo funcionalidad, no algo hermoso. Luego me encontré con una pieza como esta. Me cautivó su textura orgánica y sus patrones integrados.

Pero necesitamos saber cómo está sucediendo esto en primer lugar. Quiero decir, antes de que JavaScript se convirtiera en algo hermoso, hay algo de historia detrás. Así que en el primer paso, simplemente, teníamos el JIP.

Así que solo tenemos animación básica solo para mover la imagen. Se desarrolló entre los años 87 y 89 por CompuServe. Es como una casa de software, algo así, la agencia. Era una empresa de servidores en ese entonces. Crearon, inventaron la animación JIP. Así que alguien quería enviar la imagen, ese montón de imágenes. La forma alternativa o la manera más fácil de hacerlo es simplemente usando el JIP.

Luego, más tarde, se introdujo por primera vez el término DHTML. Es solo como un término simple, no elegante. Es solo como términos simples para HTML dinámico. Es solo, ya sabes, cuando ves el JavaScript temprano solo para mover imágenes y cuadros de texto, algo así. Y también se introdujo en el ámbito del Internet Explorer allá por el 97. Y luego todos conocemos al rey de Macromedia Plus. Así que luego vino el indiscutible rey de la animación web durante décadas. Si veías algo hermoso en ese entonces, como una web animada interactiva, casi con certeza era plus. Luego, más tarde, fue adquirido por Adobe.

Y luego, con el tiempo, innovación tras innovación, la tecnología está avanzando más. Así que haciendo innovación y luego también el desarrollo de la tecnología está yendo realmente, realmente rápido, realmente más inteligente. Y luego el problema nunca se resolvió correctamente o de una gran manera. Y luego, en 2008, salió una nueva versión de HTML, que tiene muchas más características. Una de ellas, introdujeron el elemento canvas. Obviamente, con el soporte de la interfaz gráfica, la interfaz de la tarjeta gráfica, obteniendo algo de innovación y procesador también. Mejorando la tecnología, es como encajar juntos. Así que eso está rompiendo las barreras, cómo realmente la animación o el arte digital realmente funciona en JavaScript.

Básicamente, el mecanismo de cómo la animación o algo como el arte funciona en JavaScript, en HTML. Lo primero, es lo mismo que cómo funciona, el CSS en la web. {{^}}Básicamente, cargarán CSS, pero en lugar de CSS, usan JavaScript como la entrada para cargarlo. Y luego analizará el JavaScript. Creamos el DOM. Y luego a partir de eso, si estás usando el canvas, el canvas se transformará en algo como estilo bitmap, tipo bitmap, algo así. Y luego, obviamente, con el soporte de la tarjeta gráfica, te dirá que renderizará más suavemente, más versátil y más rápido.

Y la tecnología detrás del software en la animación que se renderiza en el navegador, hay dos herramientas. Una es WebGL. WebGL es como una biblioteca gráfica web que puede renderizar el alto rendimiento de interactividad. Versión 2D y gráficos 3D. Y luego el canvas es solo parte del HTML que permite el renderizado dinámico y scriptable de las formas 2D y 3D, curvas, algo así. Y la diferencia entre esas herramientas, cuando usas el canvas, puedes imaginar como cuando pintas en un lienzo de papel blanco, algo así. Puedes simplemente imaginar, hacer algo de imaginación. Pero si sabes cómo usar tu pintura, usar tu lápiz, la pintura va a ser buena. Si intentas entender WebGL, WebGL es algo así como cuando haces alguna animación, pero en WebGL, tiene muchos más efectos.

Es más como al siguiente nivel o el siguiente efecto en el cine de Hollywood, algo así. Lo que significa que ambos tienen la misma misión de hacer alguna animación, pero van a tener dos estilos diferentes. Cómo renderizan la animación en el navegador también. El arte en JavaScript se está volviendo cada vez más diverso. Las herramientas, hoy en día, se están volviendo cada vez más ricas, versátiles y tan diversas. Por ejemplo, si quieres crear alguna animación para el estilo animate, puedes simplemente usar el Animate.js. Y luego salió la versión más nueva, las nuevas herramientas, Trash.js viene de Vue. Puedes crear animación, animación 3D usando el Vue.js con Trash.js. Pero obviamente, aquí, estamos usando solo el canvas. Cómo ver que podemos crear algo hermoso solo con el canvas. Y obviamente, GSAP también es realmente poderoso.

Si quieres echar un vistazo a cómo funcionan las otras herramientas que mencioné aquí, puedes hacerlo. Pero en este tema, vamos a profundizar en el canvas. Y obviamente, hay algo increíble en el canvas. Hay una biblioteca de herramientas que heredó del Canvas API, que fue creada por Matt Deloria. Matt Deloria es un artista canadiense, programador, creative coder. Él hizo el marco beta para crear la obra de arte. Se llama Canvas Sketch. Vamos a usar el Canvas Sketch para nuestro próximo masterclass.

El Canvas Sketch es solo un asistente si quieres hacer alguna obra de arte en Javascript usando el canvas. En lugar de usar el Canvas API. Solo necesitamos usar el Canvas Sketch. Simplemente lo hace más fácil de simplificar para el Canvas Sketch. Y obviamente, el artista que me inspiró mucho es también Matt Deloria. Él trabaja en algo realmente hermoso, el arte. Su trabajo realmente me ha inspirado a hacer también algunas obras de arte en Javascript. Es algo realmente genial aquí.

El siguiente es Bruno Imbrizzi. Bruno también es un creative coder. Me uní a su clase en línea. Es realmente genial para enseñar sobre cómo usar el canvas. Su trabajo también es realmente asombroso. Su obra de arte, puedes simplemente visitar su sitio web, etc. El último artista es Koby Yu. Koby es cualquiera que quiera comenzar su obra de arte en Javascript. Para comenzar a hacer arte en Javascript, podemos empezar ahora mismo. Hagamos algo de arte. Puedes simplemente verificar aquí, ir a mi repositorio. Puedes ver en este repositorio, ya hice el módulo y la flor hoy. Frecuencias que necesitamos tener, requisitos antes de comenzar cómo obtener uno. Necesitamos asegurarnos de que Node.js ya esté instalado, y luego obviamente el PS code y el navegador web también.

Para comenzar, podemos simplemente verificar el terminal abierto. Luego podemos ver aquí, puedes seguir adelante aquí. Necesitamos instalar el canvas sketch CLI primero solo para hacer la experiencia más fácil para ti, y la experiencia del desarrollador se vuelve más conveniente, sin problemas. Necesitamos instalar este canvas sketch CLI. Tal vez necesite intervenir. Algo como esto. Ups. Canvas sketch CLI. Si ya está hecho en mi máquina, puedes simplemente verificar la versión de canvas sketch. Ahí lo tienes. Después de eso, podemos simplemente crear alguna carpeta.

Digamos que queremos ... Digamos que queremos ... Después de eso, podemos simplemente ... Abrir. Ups. Está bien. Puedes simplemente crear una nueva carpeta. Luego aquí, podemos simplemente canvas sketch new ... Necesitamos especificar el nombre del archivo primero. Algo como eso. Algo como eso. Algo como esto. Canvas sketch y nuevo ... Se va a crear en un nuevo archivo. Y luego ... Sketch.js. Nuevo y abrir. Está bien. Ya tenemos el canvas que podemos crear aquí.

Aquí, podemos hacer algo como si quisieras rellenar el texto aquí. Quieres hacer algo realmente genial aquí. Podemos simplemente crear aquí. Por ejemplo, veamos aquí. Podemos cambiar la dimensión, resolución, etcétera. Aquí, quiero establecer ... Veamos. Quiero establecer la fuente. Algo como este. Fuente. Quiero hacer algo como esto. Puedes simplemente usar como aquí. Hello Canvas. También podemos cambiar aquí.

Ups. Negro. Lo que quieras. Ups. Rojo. Ahí lo tienes. Así que, sí. Esto va a ser realmente interesante. Lo primero aquí es indicar para rellenar el fondo. Y luego se va a renderizar el rectángulo aquí. ¿Verdad? Y luego para el blanco aquí, añadimos algo de texto. Así que, necesito añadir un blanco aquí. Así que, esto es como un arte simple, algo así. Si quieres hacer algo hermoso. Veamos. Queremos añadir algo como una curva o algo.

Queremos añadir algo como curvas. Bien. Por ejemplo, queremos crear algo como aquí. Esto va a ser blanco. Necesito cambiar eso a blanco. Y luego vamos a establecer algo como, ya sabes, como queremos crear algo abstracto con líneas. Y rectángulos. Y hacerlo como, ya sabes, puedes convertirlo en algo como animación, GIF o formato y MP4.

Entonces, para hacer eso, podemos simplemente añadir algo primero al sketch aquí. Necesitamos añadir algo como partículas. Así que, aquí, dijimos que queremos añadir partículas. Podemos simplemente añadir aquí. Podemos crear algo como clave aquí. Primero, necesitamos establecer como todo. Así que, vamos a ser columnas como. Y luego las filas van a ser algo como esto. Y luego lo que voy a hacer es.

Lo siento. Voy a hacer las filas algo así. Y luego voy a añadir la celda. Así que, la celda va a estar aquí. Luego añadimos como. Así que, va a ser heredado de este. Así que, esto en realidad puedes añadir algo aquí. Sí. Y luego para el. Para esto y para el centro, podemos añadir algo como esto. Y luego después de eso, queremos añadir algo como puntos. Así que, para añadir algún punto, podemos simplemente añadir algo como esto. Para el.

Sí. Y luego los puntos. Ups. Punto algo como esto. Aquí, podemos para el. Los puntos, luego vamos a renderizar aquí. Para renderizar el punto, podemos simplemente. Seguro. Espera. Necesitamos cambiar esto a negro. Y luego para los puntos, todavía tenemos algo como esto. Y luego para el contexto, vamos a guardarlo primero. Establecer método aquí. En Canvas Sketch o en Canvas en general. Es como guardar el paso. Lo que pasó con el estilo anterior. Así que, antes necesitamos asegurarnos de que esté seguro en el virtual. A RAM algo como esto antes de que se transforme en renderizado en el navegador. Así que, necesitamos dibujar el punto aquí. O en algo como esto. En lugar de eso, necesitamos. Punto. Sí. Y luego. Sí. Espera. Necesitamos dibujar el punto. Punto. Dibujar. Luego va a ser contexto aquí.

Entonces, el contexto va a regresar de este y el dibujo en realidad viene de. Aquí. Así que, necesitamos agregar la clase point. Este. Luego tenemos algo método grow. Sí. Algo como esto. Sí. Y luego. Sí. Y luego. Podemos guardar.

Bien. Veamos qué tenemos aquí. Canvas Sketch. Dibujar. Sí. Porque va a ser. Estos necesitan ser fill style. Voy a ser el azul. Y luego vamos a como. Context. Este. Y luego contexto comenzar. Sí.

Lo siento. Va a ser. Entonces. Hacer algo. Sí. Debería ser. Azul. Azul. Azul. Azul. Último punto. En realidad tenemos. Empujar el nuevo punto. Aquí. Así que, en lugar de. Aquí. En realidad necesitamos. Empujar a los. Nuevos puntos. Algo como esto. Espera. Nuevo punto. Oh. X e Y. X e Y. Está llegando. Oh, sí. Olvidé. Necesitamos agregar algo de lab X e Y. Algo como esto.

Y luego. Sí. Para la X. Podemos decir algo como esto. Luego. Esto. Necesito solo como. Esto.

Swan. Ups. Necesito. Algo. Esto. Está bien. Eso está cambiando. Pero.

No vi. Las curvas. Así que, tal vez. Necesitamos cambiar. A. A. Y. Como. Oh. X. Y. Filled style. Espera. Déjame ver.

Hay algo. Sucediendo. Aquí. Lanzar. En. Luego. Oh, sí. Necesito restaurar. El. Texto. Así que. Necesitamos restaurar. De nuevo. Al. Anterior. Eso.

Espera. Debería ser. Hay un azul. Estilo. Aquí. O en. Rosa. Algo como esto. Espera. Ups. Ups. Sí. Tal vez no necesitamos. Este.

Y luego. Traducir. Para empezar. De nuevo. Pero. Luego. Sí. Pero. Sí. Si tú. Quieres ver. Otra. Referencia. Aquí. Puedes simplemente. Crear algo. Como esto. Puedes simplemente ver. Aquí. Haz lo que. Quieras. Pero. Si tú. Quieres. Añadir algo de. Interactividad. Puedes usar.

Esto. Aquí. Como. Animar. Y luego. Podemos. Especificar. Cuántos. Pb. Como. Algo como esto. Pero. Obviamente. Podemos simplemente. También. Ver. En mi. Repositorio aquí. Ya hice. Todo el. La. La animación. Algo como esto. Oh sí. Puedes simplemente. Copiarlo todo. Aquí. Ahora podemos ver. Cómo. El.

Algo como esto. Ver. Si echas un vistazo. Aquí. Podemos hacer. Lo que queramos. Así que. Sí. Si quieres. Aprender más. Sobre la animación. Y. Puedes simplemente. Revisar. El anterior. Repositorio. Y. Por favor. Conéctate. En las redes sociales. Gracias. Por. Tu atención. Gracias. Por. Ver mi. Sesión. Nos vemos. En la próxima conferencia.