Codificación creativa: crea piezas visuales con JavaScript

Introducción a la codificación para diseñadores visuales

“Hola y bienvenido al final de este curso de Domestika. En esta lección final, haremos un resumen de lo que hemos visto hasta ahora y agregaré algunos consejos para ayudarlo en su viaje hacia la codificación creativa. El código es un idioma. Para usar una metáfora con el lenguaje hablado, cuando queremos expresar algo, no se trata de cuántas palabras usamos, sino de cómo elegimos unir las palabras que conocemos. Recorrimos un largo camino. Partimos de un archivo vacío, de conceptos fundamentales como variables y funciones. Mencioné que los íbamos a usar en todas partes y lo hicimos. La mejor forma de aprender es siempre con el ejemplo y vimos bastantes. También vimos matrices, bucles, condicionales y números aleatorios. Y vimos cuánto podíamos hacer con solo esos pocos conceptos. El entorno que elegimos para ejecutar nuestro código fue el navegador, que es muy accesible y familiar. Ahora sabemos que también podemos usarlo para crear imágenes. Vimos cómo crear una página HTML y escribir JavaScript en ella. Luego vimos una configuración más elaborada usando canvas-sketch. Nos brindó un entorno con algunas ventajas sobre comenzar desde cero, como facilitar el cambio de dimensiones de nuestro boceto y también recargarlo automáticamente tan pronto como se guardó el código. Hay más en Canvas-Sketch de lo que vimos en el curso, así que te recomiendo que eches un vistazo a la documentación de Github. Hay información sobre cómo preparar su boceto para imprimir en formatos grandes, cómo exportar GIF y también cómo preparar la obra de arte para trazadores de lápiz. El primer boceto que hicimos juntos fue una cuadrícula simple. Teníamos 5 filas y 5 columnas. Si intentó cambiar ese número, bien hecho por experimentar. Es posible que se haya dado cuenta de que la cuadrícula ya no estaría centrada, porque estábamos usando valores codificados. Más tarde vimos una forma más flexible de hacer las cosas. Así que siéntete libre de volver al bosquejo 01 y mejorarlo con lo que sabes ahora, es un buen ejercicio.

En nuestro segundo bosquejo usamos un poco de trigonometría. Ojalá mi profesor de matemáticas me hubiera mostrado cómo hacer cosas creativas con trigonometría cuando estaba en la escuela. Esta es otra cosa interesante sobre la codificación creativa, las matemáticas simples son muy útiles. Es posible que descubra que algunos conceptos matemáticos finalmente encajan, ciertamente me pasó a mí. En nuestro tercer boceto vimos más matemáticas con Pitágoras y también aprendimos cómo animarlo. El navegador siempre vuelve a pintar el lienzo, por lo que todo lo que tenemos que hacer es cambiar los valores con el tiempo. Nuevamente, te recomiendo que eches un vistazo a la documentación del bosquejo del lienzo y veas cómo podrías crear un bucle animado, asegurándote de que tus valores cambien y eventualmente vuelvan a su punto original. En nuestro cuarto boceto, le mostré cómo normalizar un valor, que consiste en cambiar su rango original a un número entre 0 y 1. Esto es muy útil y se ve en todas las áreas de la programación. Si algún día lo necesita, digamos convertir un color en un ángulo o los decibelios de una muestra de audio en la altura de un terreno, sabe que puede hacerlo si normaliza los valores. Para el boceto final, quería mostrarte cómo usar la tipografía de una manera creativa, pero quizás lo más interesante que aprendimos fue cómo leer los valores de color de los píxeles en nuestro lienzo. Usamos una letra grande, pero nada nos impedía usar cualquier otra imagen. Un emoji, un icono, un logotipo, todos esos son píxeles y el efecto funcionaría igual de bien. Realmente me gustaría ver tus imágenes. No tengas miedo de experimentar con todo. Te di algunos consejos, pero en realidad se trata de explorar. Si establecemos un valor en 5, intente con 500. Intente girar las cosas hacia los lados, intente escalar las cosas hacia arriba o hacia abajo, pruebe con círculos en lugar de cuadrados o círculos encima de cuadrados. Y quizás lo más importante es intentar mezclar cosas, usar algo del boceto 02 en el boceto 05 o viceversa. Comparta sus bocetos en el foro haciendo clic en el botón "Crear su proyecto" arriba. De esa forma, todos aprenderemos unos de otros. Estaré allí para responder preguntas y brindar orientación. Ha sido genial compartir mis ideas y mi pasión contigo. Gracias y adiós. ”

Transcripción parcial del vídeo

“Proyecto final En esta lección, me gustaría recapitular lo que hemos visto y compartir unos consejos para ayudarte en la programación creativa. El código es un lenguaje. Para usar una metáfora del lenguaje, no se trata de cuántas palabras usamos, sino cómo juntamos las palabras que conocemos. Recorrimos un largo camino. Partimos de un archivo vacío, a partir de conceptos fundamentales como variables y funciones. Mencioné que los usaríamos en todas partes, así fue. La mejor manera de aprender es con el ejemplo y vimos bastantes. También vimos "arrays", bucles, condicionales y números aleator...”

Generamos automáticamente esta transcripción y puede haber erratas.

Resumen del curso: Codificación creativa: crea piezas visuales con JavaScript

• Nivel: Iniciación
• 97% valoraciones positivas (1209)
• 58333 estudiantes
• 6 unidades didácticas
• 21 lecciones (2h 42m)
• 5 recursos adicionales

• Categoría

  3D y Animación, Diseño Web y App

• Áreas

  JavaScript, Motion Graphics, Multimedia, Programación