Domina p5.js: Animaciones Interactivas para Web

What you will learn:

Fundamentos de p5.js y dibujo de formas geométricas
Creación de polígonos y curvas Bézier complejas
Manejo de eventos de ratón y teclado para interacciones
Manipulación y animación de texto con fuentes externas
Integración de elementos HTML dinámicos en tus diseños
Transformaciones geométricas (rotación, traslación, escala)
Modelado 3D con WebGL y manejo de materiales y luces
Manipulación de imágenes: carga, filtros, transparencia, pixeles

Description

Sumérgete en el mundo de la programación creativa con nuestro curso integral de p5.js. Descubre cómo esta poderosa librería, basada en Processing y la flexibilidad de JavaScript, te permitirá diseñar animaciones interactivas y visuales para la web. Aprenderás desde los fundamentos del dibujo y manejo de eventos hasta la creación de figuras 3D con WebGL y la manipulación de imágenes.

Domina los fundamentos: Dibuja formas geométricas, crea animaciones fluidas, y maneja eventos del ratón y teclado con precisión.
Explora las curvas y polígonos: Crea diseños complejos con curvas Bézier, polígonos, y funciones avanzadas para generar figuras únicas y atractivas.
Interactúa con el usuario: Implementa eventos de ratón y teclado para crear animaciones responsivas y experiencias interactivas.
Integra texto y elementos HTML: Añade texto animado, carga fuentes personalizadas, e integra elementos HTML (botones, selectores, etc.) para enriquecer tus proyectos.
Domina las transformaciones: Utiliza rotaciones, translaciones, escalas y otras transformaciones para manipular tus diseños con precisión.
Crea en 3D con WebGL: Da vida a tus diseños con figuras 3D como cubos, esferas y más, utilizando materiales y luces para lograr efectos realistas.
Manipula imágenes: Carga, edita, aplica filtros, y manipula píxeles para crear efectos visuales asombrosos.
Recursos adicionales: Accede a herramientas de desarrollo web para optimizar tus diseños y crear proyectos profesionales.

Este curso es ideal para diseñadores web, desarrolladores y artistas digitales que buscan integrar animaciones interactivas en sus proyectos web. Requiere conocimientos básicos de JavaScript y HTML. ¡Inscríbete ahora y transforma tus ideas en realidad!

Curriculum

Introducción a p5.js

Esta sección te introduce a los conceptos básicos de p5.js. Comenzarás con una bienvenida al curso y una guía de lo que aprenderás. Luego, explorarás la configuración del canvas, el manejo del color, y crearás tus primeras animaciones con líneas, formas geométricas básicas (rectángulos, cuadrados, círculos, elipses, triángulos, cuadriláteros, arcos), y el uso de las funciones `draw()` y `setup()`, además del manejo de eventos `mousePressed` y `mouseReleased`. Aprenderás también a usar las constantes `mouseY` y `mouseX`, y a crear puntos. La sección finaliza con ejercicios prácticos y apuntes que resumen los conceptos claves.

Polígonos y Curvas en p5.js

Aquí profundizarás en la creación de polígonos y curvas en p5.js. Aprenderás a usar las funciones para crear curvas Bézier, incluyendo la concatenación de curvas Bézier cúbicas y el uso de `quadraticVertex()` para polígonos con cuadráticas. Desarrollarás proyectos como la creación de una estrella usando polígonos y una flor con curvas Bézier, reforzando tu comprensión de las funciones y técnicas aprendidas. Al final de la sección, encontrarás apuntes para repasar.

Manejo de Eventos en p5.js

Esta sección se centra en el manejo de eventos en p5.js. Aprenderás a detectar el movimiento del ratón, el estado del botón del ratón (sostenido o no), eventos de la rueda del ratón, y eventos del teclado. Cubrirás `keyTyped()`, `keyPressed()`, `keyIsDown()`, y `keyReleased()`, con ejemplos prácticos para cada evento. También se incluye un ejemplo del uso de `mouseX` y `mouseY`. Los apuntes al final de la sección ayudan a consolidar tu aprendizaje.

Manejo de Texto con p5.js

Aprenderás a manejar, modificar y animar texto en p5.js. Cubrirás la adición de texto como etiquetas, la carga de fuentes externas, el control del ascendente, descendente e interlineado del texto, y la animación del texto. También se incluye un ejercicio de desplegar el texto a lo largo de una curva Bézier. La sección concluye con apuntes para un repaso completo.

Elementos HTML desde p5.js

En esta sección, aprenderás a crear y manipular elementos HTML desde p5.js. Crearás botones, selectores, cajas de entrada, casillas de verificación, deslizadores, botones de radio, selectores de color, etiquetas de imagen, etiquetas `input file`, reproductores de audio y video, y más. También aprenderás a eliminar estos elementos y a capturar imágenes desde la cámara web. La sección incluye ejemplos prácticos y apuntes resumidos.

Transformaciones en p5.js

Domina las transformaciones como la translación, rotación, escala, el uso de matrices de transformación, y las funciones `push()` y `pop()` para manipular el estado del canvas. La sección incluye ejemplos prácticos y apuntes para complementar tu comprensión de estas técnicas.

Figuras 3D con WebGL

Esta sección te introduce al mundo del 3D con WebGL en p5.js. Aprenderás a crear cubos, esferas, elipsoides, cilindros, conos, toroides y planos. Explorará los diferentes tipos de materiales (normalMaterial, ambientMaterial, specularMaterial, emissiveMaterial) y el manejo de luces (pointLight, directionalLight) para dar realismo a tus creaciones. La sección incluye ejemplos y apuntes.

Manejo de Imágenes

Aprenderás a manejar imágenes en p5.js: crear imágenes, guardar el canvas como imagen, cargar imágenes externas, desplegarlas, aplicar tintas y filtros, manejar la transparencia, y manipular píxeles. La sección incluye un ejemplo práctico y apuntes que resumen los conceptos clave.

Bonus: Herramientas de Desarrollo Web

Esta sección bonus proporciona recursos adicionales para mejorar tus habilidades de desarrollo web. Aprenderás a usar herramientas para seleccionar colores, armonizar paletas, descargar fuentes e iconos, crear gradientes, y trabajar con diseños flexibles usando cajas flexibles y diseños `grid`.

Conclusión

La sección final resume el curso y proporciona acceso a los archivos del curso.

Deal Source: real.discount