Explora código creativo con p5.js

Feb 2, 2026

Cómo

[dieciséis]

Pasar un día con Brendan Dawes a Generar londres y descubre cómo Los datos son dawesome . En este taller durante todo el día, explicará cómo tomar los datos que nos rodean todos los días y lo convierten en algo hermoso usando el procesamiento y p5.js. Reservar ahora !

p5.js Es una biblioteca diseñada para llevar el poder de Procesando a la web. Su objetivo es introducir artistas, diseñadores y educadores al mundo de la programación, al tiempo que ofrece herramientas versátiles para llevar a los desarrolladores e ingenieros a las artes visuales.

Vamos a bucear y crear nuestro primer 'boceto'. Nuestro objetivo es construir una herramienta de dibujo que transforme una imagen simple en un campo de estrellas animadas. Primero, definiremos algunas variables globales y escribiremos nuestro configuración() función. P5 configuración() Se ejecuta una vez, cuando se carga el boceto, por lo que es el lugar ideal para manejar la inicialización.

Descarga los archivos que necesitarás aquí .

 var HINTIMAGE, SKOYIMAGE, STARS = [];
Configuración de la función () {...}

Dentro de nuestro configuración Función, crearemos un lienzo y esconderemos el cursor del mouse para que podamos dibujar los nuestros. De forma predeterminada, P5 agrega un esquema alrededor de las formas: queremos deshabilitar los accidentes cerebrovasculares en este caso.

 createcanvas (800,500);
nocursor ();
nastroke ();

The background image – this night sky scene provides the setting for our animation

A continuación, cargaremos un par de imágenes. Uno servirá como fondo, en este caso, una escena del cielo nocturno. La otra será la imagen 'Sugerencia': el diseño blanco y negro se basará en nuestro diseño final. La idea es poner la mayoría de las estrellas sobre píxeles negros en nuestra imagen de sugerencia, para recrear el diseño en nuestra escena de fondo. Sería fácil crear estas imágenes con las herramientas de texto y dibujo de P5, pero por el bien de la brevedad usaremos activos estáticos.

 HINTIMAGE = loadImage ("// bit.ly/hintimage");
SkyImage = LoadImage ("// Bit.ly/skyImage");

The hint image, which dictates the positioning of our stars

La función de sorteo

Eso es para configuración() ! Otra función clave es dibujar() . Se llama en un bucle continuo, lo que es útil para animaciones y agregar elementos a lo largo del tiempo.

 Dibujo de función () {...}

Dentro de la función Draw, nuestra primera tarea es llenar el lienzo con nuestra imagen de fondo. P5 no borra automáticamente el lienzo entre dibujar() Llamadas, por lo que necesitamos hacer esto cada cuadro o terminaremos con algunos efectos extraños de acumulación. Para colocar una imagen cargada en el lienzo, use el imagen() Funcionar y dar coordenadas X e Y para posicionar.

 Imagen (SkyImage, 0, 0);

A continuación, agarraremos la ubicación actual del mouse y lo almacenaremos como unector P5.Vector usando createvector () . Este objeto viene con prácticas funciones para lidiar con los puntos en el espacio, pero en su mayoría solo lo usamos como un contenedor.

 Var Posición = CreateVector (ROOGEX, Moundyy);

Usando nuestra posición de ratón recién almacenada, podemos dibujar nuestro cursor. Configuraremos el color de dibujo con llenar() Pasando los valores y uso de RGB elipse() Para dibujar un círculo en la ubicación del mouse.

 Rellenar (255, 192, 0);
Elipse (Position.x, Position.y, 8, 8);

Solo queremos dibujar nuevas estrellas mientras se presiona el mouse, así que revisaremos P5's ratón antes de continuar. Si el mouse está abajo, necesitamos calcular un buen lugar para que nuestra próxima estrella termine. Haremos eso con una función personalizada llamada Findpixel () , que definiremos más tarde.

Discover the creative side of code with Brendan Dawes at Generate London

Una vez que tengamos un objetivo, crearemos una nueva instancia de un objeto STAR personalizado (más abajo) y lo empujaremos al final de nuestra matriz STAR. Si terminamos con más de 2,000 estrellas, comenzaremos a descartar los más antiguos.

 IF (ROGEISPONSED) {
var target = findpixel ();
var star = nueva estrella (posición, objetivo);
estrellas.push (estrella);
if (Stars.Length & GT; 2000) Stars.Shift ();
}

Finalmente, volveremos a pasar por nuestra variedad de estrellas y llamaremos. actualizar() y dibujar() en cada uno de ellos. Vamos a bucearemos en estos métodos más adelante.

 para (var i = 0; i & lt; stars.length; i ++) {
estrellas [I] .Update ();
estrellas [I] .DRAW ();
}

Funciones de ayuda

Ahora configuración() y dibujar() están en su lugar, trabajaremos en las funciones y objetos del ayudante. Primero, definiremos una función que encuentra una posición de descanso para cada nueva estrella. Todo lo que tenemos que hacer es verificar algunos píxeles al azar en nuestra imagen de sugerencia, usando obtener() Para ver si son negros o blancos.

En realidad, solo tenemos que mirar su valor rojo, porque en ambos casos los valores de RGB coinciden. Si encontramos un píxel no blanco, lo devolveremos porque hemos llegado a nuestro diseño. Si no, simplemente devolveremos el último píxel marcado y serviremos como una estrella aleatoria.

 Función Findpixel () {
var x, y;
para (var i = 0; i & lt; 15; i ++) {
x = piso (aleatorio (hintimage.width));
y = piso (aleatorio (hintimage.height));

if (rojo (hintimage.get (x, y)) & lt; 255) se rompe;
}
devolver createvector (x, y);
}

El último es nuestro objeto estrella personalizado. Simplemente, queremos un contenedor reutilizable que almacene información sobre cada estrella, y también proporciona un medio para actualizarlos y dibujarlos. JavaScript no proporciona una manera de crear clases en un sentido tradicional, pero podemos obtener el mismo resultado definiendo una función y extendiéndonos por nuestras propias necesidades.

Cada estrella tiene algunas propiedades (posición inicial, ubicación final y un diámetro generado al azar), que definiremos en una "función constructor" que se llama para cada nueva estrella creada en nuestro bucle de dibujo.

 Función STAR (Posición, Target) {
esta.posición = posición;
este.Target = objetivo;
este.diameter = aleatorio (1, 5);
}

Siguiente añadiremos un actualizar() Método para estrella, que usará P5.Vector lerp () Para calcular una nueva ubicación entre las posiciones actuales y de destino de una estrella. En este caso, estamos moviendo el cuatro por ciento de la distancia restante por cada sorteo, lo que de manera efectiva nos da un efecto de facilidad.

Si quisiéramos obtener fantasía, también podríamos simular algo de física aquí, pero por ahora lo mantendremos simple.

 Star.Prototype.Update = Función () {
esto.position = p5.vector.lerp (
esta posición,
esto.Target,
0.04
)
};

Estrellas de dibujo

Finalmente, Star's dibujar() Método en realidad dibuja la estrella al lienzo. Una vez más, estamos usando llenar() y elipse() , aunque esta vez estamos llamando llenar() Con un valor de escala de grises y un valor alfa para la transparencia.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination

Para darle a las estrellas un brillo, el valor alfa se determina utilizando P5's ruido() función. Esto devuelve el valor de ruido de Perlin para las coordenadas especificadas, lo que significa que obtiene una secuencia suave y fluida de números aleatorios. Para el tercer parámetro, estamos pasando un valor basado en el tiempo en lugar de un valor espacial, para que el ruido se anime con el tiempo.

 STAR.PROTOTYPE.DRAW = FUNCIÓN () {
var alfa = ruido (
esto.Target.x,
esto.Target.y,
MILLIS () / 1000.0
)

rellenar (255, alfa * 255);

elipse(
esto.position.x, esto.position.y,
este.diéter, este.
)
};

¡Eso es para nuestro primer boceto! Haga clic y arrastre para ver aparecer nuevas estrellas y cumplir con la imagen de sugerencia.

¿Que sigue?

Desde aquí, puede agregar algunos elementos HTML para controlar las variables utilizando el complemento P5.DOMOM o incluso agregar sonido a las imágenes usando p5.sound .

Solo hemos rayado la superficie de lo que es posible con p5.js, y con nuevas características en el camino, aún hay más que esperar. ¡Diviértete!

Aprenda más sobre el lado creativo de la codificación en Generar londres ! Brendan Dawes le enseñará cómo usar el procesamiento y p5.js para convertir los datos en cosas de la belleza en su taller ;También estará hablando de la alegría de trabajar con Papel, plástico y píxeles. . Reserva tu boleto ahora !

Explora código creativo con p5.js

La función de sorteo

Funciones de ayuda

Estrellas de dibujo

¿Que sigue?

Cómo - Artículos más populares

Cómo limpiar los pinceles: la guía definitiva

Cómo dibujar a una persona

30 puntas de representación de Keyshot

Cómo construir un sitio de blogs con Gatsby

Control de versión maestra para equipos remotos

Crea acabados especiales de impresión en InDesign

Documentar sus sistemas de diseño con Fractal

Prototipo de un botón de acción flotante en Pixate

Categorías