Aprende P5js

Name: Aprende P5js
Rating: 4.7 (38 reviews)

El poder de Processing con la flexibilidad de JavaScript

Created byFrancisco Javier Arce Anguiano

Last updated 4/2026

Spanish

What you'll learn

Aprenderá las bases de p5js , manejo de los eventos básicos y las formas de dibujo básicos, como cuadrados, círculos, rectángulos, elipses, arcos , líneas
Creará polígonos, curvas bezier, curvas, funciones para las curvas, concatenar curvas bezier cúbicas, polígonos con cuadráticas, crear una estrella con polígono
Utilizará los eventos del movimiento del ratón, detectar el botón sostenido, detectar la rueda del ratón, eventos del teclado, el pulsar y soltar una tecla.
Aprenderá a manejar, cambiar y animar texto en p5js, cambiar el tamaño de la letra, desplegar el texto en una curva bezier y cargar fuentes externas.
Aprenderá a hacer elementos HTML o DOM como: botones, cajas de entrada, cajas de verificación. deslizadores, botones de radio, selectores de colores
Aprenderá a utilizar la rotación, la translación, la escala, la función pop() y push().
Utilizará el modo WebGL para crear figuras 3D como cubos, esferas, elipsoides, toroides y planos, utilizará los materiales naturales, ambientales y reflejantes
Creará una imagen, cargará una imagen externa, deplegarla en el canvas, aplicará una tinta o un filtro, manejo de transparencia, lectura y manipulación de px.

Course content

10 sections • 112 lectures • 11h 6m total length

Bienvenida al curso Aprende p5js para JavaScript5:57
La versión actual de p5.js es la 2.0, que se encuentra actualmente en beta y puedes encontrar más información y actualizaciones en el repositorio de GitHub del proyecto.
La versión 2.0 de p5.js introduce cambios y mejoras significativas, incluyendo una nueva estructura interna y nuevas funcionalidades. Puedes explorar la página beta de p5.js 2.0 para ver los ejemplos y la documentación actualizada.
Antes de empezar el curso "Aprende p5js, de Processing a JavaScript"6:19
En esta clase verás algunas características generales sobre el manejo del curso.
Versión 2.0 (beta)2:17
p5.js 2.0 trae varios cambios y mejoras. Se eliminaron algunas funciones que ya están disponibles en JavaScript, facilitando el mantenimiento de la biblioteca y la colaboración de nuevos desarrolladores.
El editor de la plataforma p5js5:23
El editor del paquete está muy estable. Es una buena opción para su aprendizaje.
Introducción a p5js6:57
p5.js es una librería de JavaScript basada en el lenguaje Processing.
p5.js está orientado a artistas y diseñadores.
La librería se usa con JavaScript y HTML, enfocada a navegadores Web.
El canvas y el manejo del color en p5js8:02
Por medio de la función
createCanvas(w,h [,render]);
Donde render es P2D o WEBGL.
Si no define el canvas con esta instrucción, el canvas se establece como 100x100px.
Crear líneas y animación en p5js7:18
Podemos dibujar una línea por medio de la función:
line(x1, y1, x2, y2);
line(x1, y1, z1, x2, y2, z2);
La función draw() para la animación7:02
La función draw() se ejecuta después de la función setup() en forma cíclica.
El ciclo se detiene con la función noLoop().
Si la función noLoop() es ejecutada dentro de setup(), draw() se ejecuta sólamente una vez.
La función draw() puede ser controlada con noLoop(), redraw() y loop().
Los eventos mousePressed y mouseRelease6:38
Un evento es una acción que no sabemos cuando va a ocurrir, por eso debemos de estar atentos (listener) para detectarlos.
La función mousePressed() detecta cuando oprimes el botón del ratón.
La función mouseReleased() detecta cuando liberas el botón derecho del ratón.
Las constantes mouseY y mouseX6:37
Por medio de las constantes mouseX y mouseY podemos conocer las coordenadas del ratón sobre el canvas.
Crear puntos en p5js4:38
Por medio de la función point(x,y) podemos dibujar un punto de tamaño strokeWeight(n), del color stroke();
Crear rectángulos con p5js5:09
Podemos dibujar un rectángulo por medio de la función
rect(x, y, w, h, [tl], [tr], [br], [bl])
Crear cuadrados con p5js5:02
Podemos dibujar un cuadrado por medio de la función:
square(x, y, s, [tl], [tr], [br], [bl]);
Por medio de la función fill() podemos cambiar el color de una forma.
Crear círculos, elipses y triángulos con p5js8:23
Podemos dibujar un cuadrado por medio de la función:
circle(x, y, d);
Por medio de la función fill() podemos cambiar el color de una forma.
Crear cudriláteros con p5js6:48
Dibuja un cuadrilátero, un polígono de cuatro lados.
El primer par de parámetros (x1, y1) corresponde a las coordenadas del primer vértice y los pares siguientes deben seguir según las manecillas del reloj o en contra.
Crear arcos con p5js8:59
Para dibujar un arco utilizamos:
arc(x, y, w, h, start, stop, [modo], [detail]);
x,y son las coordenadas
w,h son el ancho y alto
Modificar los parámetros de una elipse con ellipseMode()6:35
Modifica la interpretación de los parámetros de una elipse.
Modificar los parámetros de un rectángulo con rectMode()7:07
rectMode(CORNER) interpreta los dos primeros parámetros de rect() como la esquina superior izquierda de la figura, mientras que los parámetros tercero y cuarto son el ancho y la altura. Valor por omisión.
Suavizar o no suavizar las líneas3:50
Dibuja las figuras geométricas con bordes suaves (sin aliasing).
smooth() mejorará la calidad de las imágenes cuyo tamaño ha sido modificado.
noSmooth() puede ser usado para deshabilitar el suavizado de las figuras geométricas, imágenes y tipografía.
Modificar las terminaciones de las líneas7:05
strokeCap(): Define el estilo de los extremos de las líneas. Estos extremos pueden ser cuadrados, extendidos o redondeados: SQUARE, PROJECT, y ROUND.
El extremo por defecto es redonedeado (ROUND).
Apuntes a la sección 10:02
En esta clase encontrarás los apuntes de la sección.
Cuestionario sección 1.

Crear polígonos en p5js10:21
Podemos dibujar figuras más complejas por medio de beginShape() y endShape().
En medio de estas sentencias definimos los puntos por medio de vertex().
No podemos usar figuras como circle(), rect(), etc.
Curvas Bezier4:39
Dibuja una curva Bezier cúbica (cuatro puntos) en la pantalla.
Los primeros dos parámetros especifican el primer punto ancla y los dos últimos especifican el segundo punto ancla, las coordenadas intermedias son los puntos de control primero y segundo de la curva.
Funciones para las Curvas Bezier11:06
bezierPoint() Evalúa la curva Bezier en la posición t para los puntos a, b, c, d.
Los parámetros a y d son los puntos primero y último de la curva, mientras que b y c son los puntos de control.
El parámetro final t varía entre 0 y 1.
Curvas6:22
curve() Dibuja una curva con cuatro puntos: el primero y el cuarto serán los puntos de control, el segundo y el tercero serán los puntos de inicio y de fin.
Podemos concatenar varias curvas con curveVertex().
Funciones para las Curvas9:44
curvePoint() Evalúa la curva Bezier en la posición t para los puntos a, b, c, d.
Los parámetros a y d son los puntos de control de la curva, mientras que b y c son los puntos de inicio y final de la curva.
El parámetro final t varía entre 0 y 1.
Concatenar curvas Bezier7:09
Especifica las coordenadas de un vértice para una curva Bezier. Cada llamada a la función bezierVertex() define la posición de dos puntos de control y un punto ancla de una curva Bezier, añadiendo un nuevo segmento a la línea o figura.
Concatenar curvas5:13
La función curveVertex () se utiliza para establecer una serie de puntos que se conectan en una curva.
Tiene dos parámetros que establecen la coordenada xy: la coordenada y del vértice.
quadraticVertex()6:16
Especifica las coordenadas de vértices par curvas Bezier cuadráticas.
Cada llamada a quadraticVertex() define la posición de uno de los puntos de control y ancla de una curva Bezier, añadiendo un nuevo segmento a la línea o figura.
Crear una estrella con p5js10:11
Por medio de vertex() podemos realizar una forma como una estrella.
Calculamos el ángulo interno y externo, así como el número de puntas.
Crear una flor con curvas Bezier6:02
Por medio de curvas Bezier podemos realizar una forma como una flor.
Calculamos el ángulo interno y externo, así como el número de pétalos.
Apuntes a la sección 20:02
En esta clase encontrarás los apuntes de la sección.
Crear polígonos y curvas

Detectar el movimiento del ratón con p5js8:10
La función mouseMoved() es llamada cada vez que el ratón se mueve y un botón del ratón no está siendo presionado.
Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método.
Detectar si se tiene botón sostenido con p5js6:02
La función mouseDragged() es llamada cada vez que el ratón se mueve y un botón del ratón está siendo presionado.
Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método.
Otros eventos y constantes del ratón10:10
pmouseX y pmouseY guardan las posiciones del apuntador del ratón del frame anterior.
mouseButton: detecta el botón del ratón que fue presionado.
constraint(): limita un valor en un rango determinado.
dist() calcula la distancia entre dos puntos.
Detectar el evento de la rueda del ratón con p5js3:27
La función mouseWheel() es llamada cada vez que se detecta un evento de rueda de ratón vertical, ya sea generado por un ratón o por un touchpad.
La propiedad event.delta regresa la distancia que el ratón ha avanzado.
Eventos del teclado con keyTyped()8:17
La función keyTyped() se ejecuta cuando el usuario presiona una tecla y se almacena en la constante key.
Cuando se sostiene presionada una tecla, el sistema operativo maneja su tasa de repetición.
Eventos del teclado con keyPressed()5:49
La función keyPressed() es llamada una vez cada vez que una tecla es presionada. El código de la tecla presionada es almacenado en la variable keyCode.
Para las teclas con valor ASCII que son presionadas, el valor es almacenado en la variable key. Sin embargo, no distingue entre letras mayúsculas y minúsculas.
Detectar una tecla pulsada con keyIsDown()7:06
La función keyIsDown() comprueba si la tecla está presionada.
Puedes ingresar cualquier número representando el código de tecla keyCode de la tecla, o usar cualquier de los nombres de la variable keyCode.
Eventos del teclado con keyReleased()3:15
La función keyReleased() es llamada una vez cada vez que una tecla es soltada.
key y keyCode funciona igual que en las funciones anteriores.
Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método.
Ejemplo del uso de mouseX y mouseY3:02
Por medio de la posición del ratón podemos realizar efectos con diferentes formas.
Apuntes a la sección 30:02
En esta clase encontrarás los apuntes de la sección.
Manejo de eventos

Manejo del texto en p5js5:26
text() Dibuja texto en la pantalla. Muestra la información especificada en el primer parámetro en la pantalla, en la posición especificada por los parámetros adicionales.
Añadir texto como etiquetas7:44
Utilicemos una actividad anterior para agregarle etiquetas.
Cargar fuentes externas5:44
Carga un archivo de fuente de letra (.otf, .ttf) desde un archivo o URL, y retorna un objeto PFont. Este método es asíncrono, lo que significa que puede que no finalice antes de que la siguiente línea en tu bosquejo sea ejecutada.
Manejar el ascendente, descendente e interlineado del texto8:06
textAscent() Devuelve el ascendente de la fuente actual en su tamaño actual. El ascendente representa la distancia, en píxeles, del carácter más alto sobre la línea de base.
Desplegar el texto en una curva4:30
Podemos utilizar una curva Bezier para dibujar el texto letra por letra.
Animación del texto con p5js11:32
El texto puede ser animado como cualquier otro objeto en p5js.
Apuntes a la sección 40:02
En esta clase encontrarás los apuntes de la sección.
Manejo de textos

Crear un botón desde p5js5:04
Podemos crear un botón dentro del DOM (la página HTML).
Podemos utilizar .size() para cambiar el tamaño del mismo.
Usamos .mousePressed() para ejecutar la función.
Crear un elemento Select desde p5js6:15
Podemos crear una lista de selección con createSelect().
Añadimos una opción con .option()
Asociamos una función con .changed()
Recuperamos el valor con .value()
Crear una caja de entrada desde p5js8:35
Podemos crear una lista de selección con createInput().
La posición con .position()
Asociamos una función con .input()
Recuperamos el valor con .value()
Crear un chechbox desde p5js6:03
Podemos crear una lista de selección con createCheckbox().
La posición con .position()
Asociamos una función con .changed()
Recuperamos el valor con .value()
Crear un deslizador con p5js3:35
Podemos crear una lista de selección con createSlider().
La posición con .position()
Asociamos una función con .changed()
Recuperamos el valor con .value()
createSlider(min, max, [value], [step])
Crear un botón de radio desde p5js4:45
Podemos crear una lista de selección con createRadio().
La posición con .position()
Asociamos una función con .changed()
Recuperamos el valor con .value()
Crear diferentes etiquetas HTML desde p5js9:30
createP()
createDiv()
createSpan()
createElement()
Crear un selector de color4:08
Podemos crear un selector de colores con createColorPicker().
La posición con .position()
Asociamos una función con .input()
Recuperamos el valor con .color()
Crear una etiqueta de imagen desde p5js3:56
Podemos crear un selector de colores con createImg().
La posición con .position()
Crear una etiqueta input file desde p5js3:00
Podemos crear un selector de archivos con createFileInput().
La posición con .position()
Reproducir un video desde p5js7:46
Crea un elemento HTML5 <video> en el DOM para una reproducción simple de audio / video.
Mostrado por defecto, puede ocultarse con .hide () y dibujarse en el lienzo usando .video ().
Reproducir un audio desde p5js4:56
Crea un elemento oculto HTML5 <audio> en el DOM para una reproducción de audio simple.
El primer parámetro puede ser una cadena a un archivo de audio o un arreglo de cadenas a diferentes formatos del mismo audio.
Capturar las imágenes de la cámara de video de la cámara web3:23
Crea un nuevo elemento HTML5 <video> que contiene la alimentación de audio / video de una cámara web.
El elemento está separado del canvas y se muestra de forma predeterminada.
El elemento puede ocultarse usando .hide().
Remover los elementos HTML creados desde p5js5:02
select(): Busca en la página un elemento con la ID, clase o nombre de etiqueta (usando los prefijos '#' o '.' para especificar una ID o clase respectivamente y ninguno para una etiqueta) y lo devuelve como un elemento p5.
Ejemplo en el uso de elementos DOM desde p5js8:18
Separamos las palabras con split y las hacemos bailar en el canvas.
Activamos y desactivamos el baile con el evento mousePressed()
Apuntes a la sección 50:02
En esta clase encontrarás los apuntes de la sección.
Crear elementos HTML desde P5js

Realizar una translación en p5js4:10
Especifica una cantidad a desplazar los objetos dentro de la ventana mostrada.
El parámetro x especifica la traslación de izquierda a derecha, el parámetro y especifica la traslación de arriba a abajo.
La rotación de formas en p5js4:51
Escalar las formas con scale()5:39
scale(): Aumenta o decrementa el tamaño de una figura por medio de expandir o contraer sus vértices.
Los objetos siempre escalan desde su origen relativo al sistema de coordenadas.
Los valores de escalamiento son porcentajes decimales.
Aplicar una matriz de transformación9:12
Multiplica la matriz actual por la especificada según los parámetros.
Esto es muy lento porque tratará de calcular el inverso de la transformada, así que evítalo cuando sea posible.
Sesgar o cortar una forma con shearX y shearY5:22
Corta la figura en torno al eje x según el monto especificado por el parámetro ángulo.
Los ángulos deben ser especificados según el modo actual de ángulo angleMode().
Las funciones push() y pop() para almacenar y restaurar los estados de p5js4:41
La función push() guarda la configuración actual de estilo de dibujo, y pop() restaura esta configuración.
Estas funciones siempre son usadas en conjunto.
Ejemplo de uso de transformaciones7:50
Podemos utilizar una función seno o coseno para tener valores positivos y negativos en forma cíclica.
Apuntes a la sección 60:02
En esta clase encontrarás los apuntes de la sección.
Transformaciones en P5js

Crear un cubo con WebGL8:05
box(): Dibuja una caja con ancho, altura y profundidad dados.
rotateX(): Rotación en el eje x.
rotateY(): Rotación en el eje y.
rotateZ(): Rotación en el eje z.
Crear una esfera con WebGL10:09
sphere(): Dibuja una esfera de radio dado.
sphere([radius], [detailX], [detailY])
Crear un cilindro con WebGL4:29
cylinder(): Dibuja un cilindro de radio dado.
cylinder([radius], [height], [detailX], [detailY], [bottomCap], [topCap])
Crear un cono con WebGL6:53
cone(): Dibuja un cono de radio y altura dados.
cone([radius], [height], [detailX], [detailY], [cap])
Crear un elipsoide con WebGL4:55
ellipsoid(): Dibuja un elipsoide de radio dado.
ellipsoid([radiusx], [radiusy], [radiusz], [detailX], [detailY])
Crear un toroide con WebGL3:29
torus(): Dibuja un toroide con radio y tubo dado.
torus([radius], [tubeRadius], [detailX], [detailY])
Crear un plano en WebGL4:24
Utilizar WebGL con una forma 2D: quad()6:07
Tipos de materiales: normalMaterial7:06
normalMaterial(): Aplica con los colores del arcoiris la figura geométrica.
Tipos de materiales: ambientMaterial9:09
ambientMaterial(): Crea una luz ambiente con color. Es como fill(), sin embargo, el color total se ve afectado por las funciones de luz que lo preceden.
Ubicación de las luces: pointLight9:56
pointLight(): Crea una luz puntual con color y posición.
pointLight(v1, v2, v3, x, y, z)
pointLight(v1, v2, v3, position)
pointLight(color, x, y, z)
pointLight(color, position)
Tipos de materiales: specularMaterial6:05
specularMaterial(): El material specular es una forma técnica de describir un material que refleja la luz en una sola dirección. Este efecto a menudo se percibe en el mundo real como vidrioso, parecido al agua o una bola de billar.
Ubicación de luces: directionalLight9:44
directionalLight(): Crea una luz direccional con color y dirección. Los rayos de luz brillan en una dirección determinada, pero no tienen un punto de origen específico y no pueden colocarse más cerca o más lejos de una forma geométrica.
Material emisivo: emissiveMaterial2:46
emissiveMaterial() Establece el color emisivo del material utilizado para la figura dibujada en la pantalla.
Este es un nombre inapropiado en el sentido de que el material en realidad no emite luz que afecta a los polígonos circundantes.
Manejar el brillo: Shininess6:04
shininess() Establece la cantidad de brillo en la superficie de las formas.
Se utiliza en combinación con specularMaterial() para establecer las propiedades del material de las formas.
El valor predeterminado y mínimo es 1.
Ejemplo del manejo de luces10:26
Podemos realizar un juego de luces sobre una forma geométrica.
Apuntes a la sección 70:02
En esta clase encontrarás los apuntes de la sección.
Las figuras 3D con WebGL

Crear una imagen con createImage()6:22
createImage(): Creamos un objeto para almacenar una imagen de ancho x alto x 4 (RGBA).
Antes de acceder a los pixeles de una imagen, los datos deben ser cargados con la función loadPixels().
Guardar el canvas como una imagen5:08
saveCanvas(): Guarda el canvas actual como una imagen. Podemos guardarla en formato jpg, png.
saveCanvas(selectedCanvas, [filename], [extension])
saveCanvas([filename], [extension])
Cargar una imagen de archivo al canvas7:10
loadImage(): Carga una imagen desde una ruta de archivo y crea un objeto p5.Image. Si quieres asegurarte que esté lista antes de hacer algo con ella, ubica la función loadImage() dentro de preload().
Desplegar una imagen4:07
image(): Despliega una imagen dentro del canvas.
image(img, x, y, [width], [height])
image(img, dx, dy, dWidth, dHeight, sx, sy, [sWidth], [sHeight])
Aplicar una tinta a una imagen2:26
tint(): Las imágenes pueden ser teñidas en colores específicos o hacerse transparentes al incluir un valor alpha.
Para aplicar transparencia a una imagen sin afectar su color, usar blanco como color de teñido y especifica un valor alpha.
Quitar una tinta a una imagen2:35
Modo de una imagen4:57
modeImage(): Define el modo de imagen. Modifica la ubicación desde la que las imágenes son dibujadas, por medio de cambiar la manera en que los parámetros dados a image() son interpretados.
Manejo de transparencias en las imágenes con p5js6:44
Por medio de la función tint() podemos hacer transparente una imagen.
Mezclar imágenes con p5js10:57
Por medio de la función blend() podemos combinar o mezclar dos imágenes con las siguientes opciones: BLEND | DARKEST | LIGHTEST | DIFFERENCE | MULTIPLY| EXCLUSION | SCREEN | REPLACE | OVERLAY | HARD_LIGHT | SOFT_LIGHT | DODGE | BURN | ADD | NORMAL
Manejar los filtros en p5js5:29
THRESHOLD: convierte la imagen a pixeles blancos y negros dependiendo de si están arriba o abajo del umbral definido por el parámetro. El parámetro debe estar entre 0.0 (negro) y 1.0 (blanco). Si no se especifica ningún valor, el valor por defecto es 0.5.
Manejo de pixeles en p5js9:24
loadPixels: Carga los datos de los pixeles en pantalla al arreglo pixels[]. Esta función siempre debe ser llamada antes de leer o escribir en el arreglo pixels[].
Ejemplo uso de imágenes6:40
Podemos leer los datos de pixeles, no del canvas, sino del archivo de imágenes con loadPixels() y procesarlas con las demas funciones.
Apuntes a la sección 80:02
En esta clase encontrarás los apuntes de la sección.
Crear imágenes

Seleccionar un color en una página web con ColorZilla3:08
ColorZilla es una herramienta que nos permita detectar un color de un elemento de una página web.
Herramientas para armonizar colores en web10:21
Herramientas para armonizar colores en web.
Páginas para descargar fuentes e iconos6:59
Páginas para descargar fuentes e iconos
Crear gradientes de forma sencilla por medio de dos herramientas10:14
Herramientas para las Cajas flexibles8:20
Herramientas para las Cajas flexibles
Herramientas para objetos SVG y Curvas Bezier Cuadráticas8:04
Herramientas para objetos SVG y Curvas Bezier Cuadráticas
Herramienta para diseños display: grid;7:51
Herramienta para diseños display: grid;

Requirements

Conocimientos generales de HTML, CSS y JavaScript.

Description

La librería p5js es una poderosa herramienta orientada a artistas, diseñadores, profesores y principiantes de programación que nos permitirá hacer tareas creativas y de animación que se ejecuta perfectamente en las páginas web. Esta basada en el popular lenguaje Processing con la enorme flexibilidad de JavaScript. Los objetivos de este curso son:

Aprender las bases de p5js , manejo de los eventos básicos y las formas de dibujo básicos, como cuadrados, círculos, rectángulos, elipses, arcos , líneas y cuadriláteros.
Crear polígonos, curvas bezier, curvas, funciones para las curvas, concatenar curvas bezier cúbicas, polígonos con cuadráticas, crear una estrella con los polígonos y una flor con curvas.
Utilizar los eventos del movimiento del ratón, detectar el botón sostenido, detectar la rueda del ratón, eventos del teclado, el pulsar y soltar una tecla.
Aprender a manejar, cambiar y animar texto en p5js, cambiar el tamaño de la letra, desplegar el texto en una curva bezier y cargar fuentes externas.
Aprender a hacer elementos HTML o DOM como: botones, cajas de entrada, cajas de verificación. deslizadores, botones de radio, selectores de colores, reproductores de audio y video.
Aprender a utilizar la rotación, la translación, la escala, la función pop() y push().
Utilizar el modo WebGL para crear figuras 3D como cubos, esferas, elipsoides, toroides y planos, utilizará los materiales naturales, ambientales y reflejantes, así como el manejo de luces.
Crear una imagen, cargará una imagen externa, deplegarla en el canvas, aplicará una tinta o un filtro, manejo de transparencia, lectura y manipulación de pixeles.

Este curso esta dirigido a diseñadores y desarrolladores web que deseen crear animaciones interactivas visibles en navegadores web. Necesitas tener conocimientos previos de JavaScript y de HTML. En el capítulo final necesitarás un servidor local o un servidor web para poder cargar recursos externos a nuestras páginas. En todo momento contarás con los archivos del curso y los apuntes de cada sección.

Who this course is for:

Diseñadores y desarrolladores web

Aprende P5js

What you'll learn

Explore related topics

Course content

Introducción a p5js21 lectures • 2hr 6min

Crear polígonos y curvas en p5js11 lectures • 1hr 17min

Manejo de eventos en p5js10 lectures • 55min

Manejo de texto con p5js7 lectures • 43min

Crear elementos HTML (DOM) desde p5js16 lectures • 1hr 24min

Las transformaciones en p5js8 lectures • 42min

Las Figuras 3D con WebGL17 lectures • 1hr 50min

Manejo de imágenes13 lectures • 1hr 12min

Bonus: Herramienta de desarrollo web7 lectures • 55min

A manera de conclusión al curso "Aprende p5js, de Processing a JavaScript"2 lectures • 2min

Requirements

Description

Who this course is for: