Programación creativa 2.0 con JavaScript: animación, sonido y color
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.»
¿Qué aprenderás en este curso online?
28 lecciones & 20 recursos adicionales
¿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.
- 99% valoraciones positivas (184)
- 21.015 estudiantes
- 28 lecciones (2h 47m)
- 20 recursos adicionales
- Online y a tu ritmo
- Disponible en la app
- Audio: Inglés, Español (Latam), Francés, Italiano, Portugués, Türkçe
- Inglés · Español · Portugués · Alemán · Francés · Italiano · Polaco · Neerlandés · Türkçe
- Nivel: Iniciación
- Acceso ilimitado para siempre
¿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
Bruno Imbrizi
Un curso de Bruno Imbrizi
Bruno Imbrizi nació en Brasil y actualmente trabaja como programador creativo en Londres (Inglaterra). Estudió Diseño Gráfico y arrancó su carrera poniendo en práctica sus habilidades y conocimientos. Con el tiempo, llegó a combinar su talento para el diseño con otra de sus pasiones: la programación.
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.
Polecam, fajna zabawa
Excelente! Buena fuente de inspiración para creativos incursionando en programación
I will recommend this to my friend who likes to know more on javascript designing
Recomendado para principiantes que quiera incorporar su lado artístico a la codificación.
Just getting started into creative coding and this course is definitely a great point to begin at.