Programación creativa 2.0 con JavaScript: animación, sonido y color
Un curso de Bruno ImbriziProgramador creativo
Un curso de Bruno Imbrizi, Programador creativo
Descubre técnicas de programación creativa para crear imágenes en JavaScript que combinen color, movimiento y sonido
Programar es como hacer un puzle: un ciclo constante de aprendizaje, errores y repeticiones que pueden dar como resultado algo magnífico. Bruno Imbrizi es un diseñador gráfico que se ha dedicado durante la última década a perfeccionar el arte de la programación creativa.
Su herramienta estrella es JavaScript y con ella ha realizado animaciones, láminas y piezas interactivas para clientes como Google, Spotify y Nike. Además, ha sido galardonado con premios como el Adobe Cutting Edge Award y el FITC a la mejor instalación digital.
Este es el segundo curso de Bruno en Domestika. En el primero, Codificación creativa: crea piezas visuales con JavaScript, te enseñará lo imprescindible para programar y dibujar con código desde cero.
¿Qué lograrás con este curso?
«Te enseñaré varias técnicas para realizar visuales atractivos con JavaScript.»
Aprenderás a programar una visualización inmersiva y a realzarla con elementos de sonido.
Desarrollarás composiciones de programación llenas de color.
Animarás tus piezas e incorporarás la interacción del cursor
¿Qué aprenderás en este curso online?
28 lecciones & 20 recursos adicionales
La configuración en línea
5 minutos, 4 segundos
Distribución
4 minutos, 51 segundos
Agregar colores
8 minutos, 50 segundos
Máscara de recorte
6 minutos, 29 segundos
Datos de imagen
8 minutos, 53 segundos
¿Qué incluye este curso?
En primer lugar, Bruno Imbrizzi te presentará un resumen de las herramientas básicas de JavaScript. Luego, configurarás tu ambiente para ejecutar el código y crear tus bocetos.
Más tarde, aprenderás a dibujar formas básicas crudas solamente con código, a añadir el color y a encoger o distorsionar tus diseños.
El siguiente paso será crear curvas para diferentes bucles, desde los elementos de diseño hasta los gráficos, introduciendo diferentes puntos en el segmento, animándolos y aprendiendo a desarrollar la interacción del cursor con las imágenes.
Luego, darás forma a una visualización de audio reproduciendo archivos de sonido, leyendo sus datos y utilizando frecuencias para crear animaciones.
Por último, experimentarás con partículas y aprenderás a establecer su comportamiento aplicando diferentes fuerzas e interferencias, además de modificar su tamaño y su color.
¿Cuál es el proyecto del curso?
Desarrollarás una serie de composiciones de programación para un navegador web empleando elementos como color y sonido.
Proyectos de estudiantes del curso
¿A quién está dirigido este curso online?
A cualquier persona interesada en llevar sus habilidades de programación al siguiente nivel para crear composiciones animadas únicas.
Requisitos y materiales
Para realizar el curso se requieren conocimientos previos de programación.
En cuanto a los materiales, necesitarás acceso a un dispositivo en el que hayas instalado JavaScript.
Opiniones
- hace 3 meses
Polecam, fajna zabawa
- hace 7 meses
Excelente! Buena fuente de inspiración para creativos incursionando en programación
- hace 8 meses
I will recommend this to my friend who likes to know more on javascript designing
- hace 9 meses
Recomendado para principiantes que quiera incorporar su lado artístico a la codificación.
- chillwill47PLUShace 11 meses
Just getting started into creative coding and this course is definitely a great point to begin at.
Bruno cuenta con más de 10 años de experiencia y ha trabajado en agencias, estudios de diseño, productoras y conocidas marcas como Dell, Adidas y Universal Music. Ha aparecido en publicaciones online como WIRED o Londonist y ha recibido numerosos premios, como el Adobe Cutting Edge Award y el FITC a la mejor instalación digital.
Contenidos
- U1
Introducción
- Sobre mí
- Influencias
- U2
La puesta en marcha
- Resumen de JavaScript
- La configuración en línea
- La configuración offline
- Boceto de lienzo
- U3
Sesgar
- Dibujar un rectángulo
- Dibujar un rectángulo sesgado
- Distribución
- Agregar colores
- Máscara de recorte
- Establecer una semilla aleatoria
- U4
Curvas
- Dibujar una curva cuadrática
- Interacción de cursores
- Puntos múltiples
- Crear una cuadrícula
- Segmentos
- Animación
- U5
El sonido
- Presionando el "Play"
- Analizador
- Frecuencias
- Arcos
- Crear un póster
- U6
Partículas
- Dibujar una sola partícula
- Aplicación de fuerzas
- Distribuyendo las partículas
- Modificación de escala y colores
- Datos de imagen
- PF
Proyecto final
- Programación creativa 2.0 con JavaScript: animación, sonido y color
Qué esperar de un curso de Domestika
Aprende a tu ritmo
Disfruta aprendiendo desde casa, sin horarios y a tu ritmo. Tú decides cuándo seguir con cada unidad.
Aprende de los mejores profesionales
Aprende los métodos y técnicas más útiles con los mejores profesionales del sector creativo.
Conoce a profesores expertos
Cada profesor te transmitirá sus conocimientos con pasión, ofreciéndote explicaciones claras y una perspectiva profesional en cada lección.
Certificados
PLUSSi eres Plus, obtén un certificado personalizado y firmado por tu profesor. Compártelo en tu porfolio, en las redes sociales o donde quieras.
Ponte en primera fila
La alta calidad de los vídeos permitirá que no te pierdas ni un solo detalle. Gracias al acceso ilimitado, podrás ver las lecciones todas las veces que necesites para perfeccionar tus habilidades.
Comparte conocimientos e ideas
Pregunta, pide opinión y ofrece soluciones. Comparte tu experiencia de aprendizaje con otros estudiantes de la comunidad tan apasionados por la creatividad como tú.
Conecta con una comunidad creativa global
Esta comunidad cuenta con millones de usuarios de todo el mundo, personas curiosas y con ganas de explorar y expresar su creatividad.
Realiza cursos profesionalmente producidos
Domestika selecciona cuidadosamente los profesores y produce cada curso internamente para garantizar una experiencia de aprendizaje online excelente.
Preguntas frecuentes
Este curso está diseñado para estudiantes con nivel intermedio. Se recomienda tener conocimientos básicos de JavaScript y conceptos de programación antes de inscribirse para aprovechar mejor las lecciones.
Necesitarás acceso a un navegador web moderno y herramientas como StackBlitz, CodeSandbox, Node.js, npm y un editor de código como Sublime Text. No se requiere hardware especializado.
Aprenderás conceptos fundamentales de programación creativa, cómo usar JavaScript y las APIs Canvas para visuales interactivos, técnicas de arte generativo, configuración de proyectos, exportación de obras y cómo integrar audio para visualización.
El curso se enfoca principalmente en programación creativa 2D usando JavaScript y las APIs Canvas, pero también introduce conceptos de visualización 3D y frameworks como Processing y OpenFrameworks.
Sí, el curso incluye instrucciones detalladas para configurar y usar StackBlitz y CodeSandbox para desarrollo en el navegador, facilitando empezar a programar sin instalaciones locales.
Aprenderás a exportar tus obras generativas basadas en navegador como imágenes PNG de alta resolución, que luego podrás imprimir o compartir en línea.
Sí, el curso cubre cómo crear visuales interactivos y bocetos animados usando JavaScript, la API Canvas y Canvas Sketch, incluyendo lógica por cuadros y entrada del usuario.