Qué es p5.js y Cómo usarlo?
Hoy quiero explicar p5.js. También soy p5.principiante de js, así que intentemos familiarizarnos con p5.js juntos!
p5.js está escrito en JavaScript, pero originalmente está procesando (https://processing.org/). El procesamiento es una herramienta de codificación visual para artes visuales. Lo interesante es que el procesamiento no es solo para desarrolladores, sino también para artistas, diseñadores, investigadores y aquellos que quieren disfrutar haciendo artes. p5.js se usa en JavaScript por lo que podemos usarlo con DOM.
el siguiente es El p5.sitio oficial de js.
https://p5js.org/
Cómo usar p5.js
Hagamos algo sencillo hoy. Nuestro objetivo es conocer pequeños consejos y hacer una animación.
Paso 1: Crea un archivo HTML y crea un enlace a p5.js y su propio archivo JavaScript.
La forma más fácil de obtener un enlace es ir al sitio oficial y encontrar CDN. Copia algo p / p5.min.js y pégalo en tu HTML.
Paso 2: Hacer un círculo
La función creativeCanvas(ancho del lienzo, altura del lienzo) establece el tamaño del lienzo.
la función background () establece un color del lienzo que hacemos. * Uso el parámetro de color, pero puede usar otros parámetros. Consulte el sitio oficial (https://p5js.org/reference/ # / p5 / background).
La función noStroke() significa que no hay contorno de la elipse.
elipse (ubicación x de la elipse, ubicación y de la elipse, el ancho de la elipse, la altura de la elipse) .función dibuja la elipse.
¡No olvides abrir tu HTML en tu navegador!
Paso 3: Vamos a hacer que sus elipse mover!
bucles de función draw () para siempre. Por lo tanto, lo único que tienes que hacer es hacer que los conjuntos de ubicación y sean 0 y luego aumentarlos. A continuación, se obtiene una animación que la elipse mueve de la parte superior a la parte inferior del lienzo.
Paso 4: Hacer muchos puntos y moverlos infinitamente
Vamos a hacer el paso final aquí.
la función random () crea un número flotante aleatorio. En mi código, establezco » random (width)». Esto significa que devolverían de 0 a 500, que es el ancho máximo del lienzo. Si es solo random(), se establece de 0 a 1. Entonces, es posible que ya te des cuenta If Si es aleatorio (6, 10), devolvería de 6 a 10. Es bastante fácil de entender, ¿no?
Que es hoy en día! Espero que pueda recibir una propina de mi correo. Intentaré hacer cosas más complicadas y compartir mi experiencia aquí de nuevo más tarde.