- Cursos
- Tecnología
- Desarrollo Web
- Aprende la librería p5js para JavaScript
Aprende la librería p5js para JavaScript
Todo el poder de Processing con la flexibilidad de JavaScript.
Descripción del curso
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. Está basada en el popular lenguaje Processing con la enorme flexibilidad de JavaScript.
Contenido del curso
Introducción a la librería p5js
01:46:26- Introducción a p5js06:58AVANCE
- El canvas y el manejo del color en p5js08:03
- Crear líneas y animación en p5js07:19
- La función draw() para la animación07:03
- Los eventos mousePressed y mouseRelease06:39
- Las constantes mouseY y mouseX06:38
- Crear puntos en p5js04:39
- Crear rectángulos con p5js05:10
- Crear cuadrados con p5js05:03
- Crear círculos, elipses y triángulos con p5js08:24
- Crear cudriláteros con p5js06:49
- Crear arcos con p5js09:00
- Modificar los parámetros de una elipse con ellipseMode()06:36
- Modificar los parámetros de un rectángulo con rectMode()07:08
- Suavizar o no suavizar las líneas03:51
- Modificar las terminaciones de las líneas07:06
Crear polígonos y curvas en p5js
01:17:13- Crear polígonos en p5js10:22
- Curvas Bezier04:40
- Funciones para las Curvas Bezier11:07
- Curvas06:23
- Funciones para las Curvas09:45
- Concatenar curvas Bezier07:10
- Concatenar curvas05:14
- quadraticVertex()06:17
- Crear una estrella con p5js10:12
- Crear una flor con curvas Bezier06:03
Manejo de eventos en p5js
55:27- Detectar el movimiento del ratón con p5js08:11
- Detectar si se tiene botón sostenido con p5js06:03
- Otros eventos y constantes del ratón10:11
- Detectar el evento de la rueda del ratón con p5js03:28
- Eventos del teclado con keyTyped()08:18
- Eventos del teclado con keyPressed()05:50
- Detectar una tecla pulsada con keyIsDown()07:07
- Eventos del teclado con keyReleased()03:16
- Ejemplo del uso de mouseX y mouseY03:03
Manejo de texto con p5js
43:08- Manejo del texto en p5js05:27
- Añadir texto como etiquetas07:45
- Cargar fuentes externas05:45
- Manejar el ascendente, descendente e interlineado del texto08:07
- Desplegar el texto en una curva04:31
- Animación del texto con p5js11:33
Crear elementos HTML desde p5js
01:24:31- Crear un botón desde p5js05:05
- Crear un elemento Select desde p5js06:16
- Crear una caja de entrada desde p5js08:36
- Crear un chechbox desde p5js06:04
- Crear un deslizador con p5js03:36
- Crear un botón de radio desde p5js04:46
- Crear diferentes etiquetas HTML desde p5js09:31
- Crear un selector de color04:09
- Crear una etiqueta de imagen desde p5js03:57
- Crear una etiqueta input file desde p5js03:01
- Reproducir un video desde p5js07:47
- Reproducir un audio desde p5js04:57
- Capturar las imágenes de la cámara de video de la cámara web03:24
- Remover los elementos HTML creados desde p5js05:03
- Ejemplo en el uso de elementos DOM desde p5js08:19
Las transformaciones en p5js
41:52- Realizar una translación en p5js04:11
- La rotación de formas en p5js04:52
- Escalar las formas con scale()05:40
- Aplicar una matriz de transformación09:13
- Sesgar o cortar una forma con shearX y shearY05:23
- Las funciones push() y pop() para almacenar y restaurar los estados de p5js04:42
- Ejemplo de uso de transformaciones07:51
Las Figuras 3D con WebGL
01:50:03- Crear un cubo con WebGL08:06
- Crear una esfera con WebGL10:10
- Crear un cilindro con WebGL04:30
- Crear un cono con WebGL06:54
- Crear un elipsoide con WebGL04:56
- Crear un toroide con WebGL03:30
- Crear un plano en WebGL04:25
- Utilizar WebGL con una forma 2D: quad()06:08
- Tipos de materiales: normalMaterial07:07
- Tipos de materiales: ambientMaterial09:10
- Ubicación de las luces: pointLight09:57
- Tipos de materiales: specularMaterial06:06
- Ubicación de luces: directionalLight09:45
- Material emisivo: emissiveMaterial02:47
- Manejar el brillo: Shininess06:05
- Ejemplo del manejo de luces10:27
Manejo de imágenes
01:14:08- Crear una imagen con createImage()06:23
- Guardar el canvas como una imagen05:09
- Cargar una imagen de archivo al canvas07:11
- Desplegar una imagen04:08
- Aplicar una tinta a una imagen02:27
- Quitar una tinta a una imagen02:36
- Modo de una imagen04:58
- Manejo de transparencias en las imágenes con p5js06:45
- Mezclar imágenes con p5js10:58
- Manejar los filtros en p5js05:30
- Manejo de pixeles en p5js09:25
- Ejemplo uso de imágenes06:41
- Despedida al curso "Aprende p5js"01:57
Valoraciones
No hay ninguna valoración para este curso.
¿Por qué pagar por un curso cuando puedes tenerlos todos?
Prueba la Suscripción ahoraO quiero saber más
Cursos que quizás te interesen
- 10 €11 h5
- 19 €1 h0