Basándonos en nuestra incursión anterior en P5.js para gráficos vectoriales SVG, ahora nos adentramos nuevamente en el ámbito de la programación de arte digital, con renovado entusiasmo y propósito. Motivada por la relación simbiótica entre la tecnología y la expresión artística, nuestra exploración surge de la demanda de herramientas innovadoras para crear obras de arte en formato SVG adaptadas a los plotters de pluma iDraw. Como defensores de la creatividad mediante la programación, nuestro objetivo es proporcionar a los artistas digitales las habilidades y los conocimientos necesarios para aprovechar todo el potencial de P5.js y transformar así la imaginación en obras maestras tangibles sobre un lienzo digital. ¿Necesitas archivos SVG con código? Descárgalos aquí>>>
Paso 1: Crear el lienzo
Para comenzar nuestro viaje por la programación de arte digital con P5.js, primero establecemos el lienzo en el que nuestra obra cobrará vida. Mediante la función createCanvas() de P5.js, definimos un lienzo de 400x400 con fondo negro y sin relleno, preparando el escenario para nuestra exploración creativa.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Paso 2: Dibujar círculos dispuestos en un cuadrado en el centro
Observamos detenidamente el círculo interior de pequeños círculos y encontramos un patrón: consta de 64 círculos distribuidos uniformemente a lo largo de una circunferencia con un diámetro de 75. En este punto, podemos utilizar un bucle for para definir las coordenadas (X, Y) de los centros de los círculos pequeños. Concretamente, en cada iteración del bucle, el valor de 'i' aumentará en π/32 hasta que 'i' supere el valor de TAU (que representa un círculo completo). El cuerpo del bucle puede escribirse de la siguiente manera.
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
Los valores X e Y son coordenadas polares. ¿Por qué sumar 200? Porque en P5.js, el origen del sistema de coordenadas se encuentra en la esquina superior izquierda, y los valores positivos de Y aumentan hacia abajo.
Por lo tanto, para colocarlo en el centro, debemos sumar la mitad del ancho y la altura del lienzo, que es 200. Utilizamos el comando ellipse(x,y,6,6) para dibujar un círculo con un diámetro de 6 píxeles. A continuación, observemos los círculos de la sección central. Sus centros se encuentran en los lados de un cuadrado de 280 de lado, centrado en el lienzo. Podemos restringir la posición de los centros de los círculos mediante una instrucción IF, de la siguiente manera:
if(X>320) X=320;
if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
if(X>320) X=320;
Si la coordenada X es mayor que 320, establecemos la coordenada X en 320. La coordenada Y permanece sin restricciones. Esto significa que los círculos del anillo exterior conservarán sus coordenadas Y, mientras que todas sus coordenadas X se establecerán en 320. Como resultado, la parte roja se desplaza hacia la parte verde, tal como se muestra en el diagrama.
De forma similar，if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
Paso3 : conectar las formas de los pasos 1 y 2 con líneas
Ahora que los valores de X e Y se encuentran en la circunferencia del círculo pequeño más interior, y que X e Y representan los centros de los círculos del cuadrado central, podemos conectarlos mediante el comando de línea: line(x,y,X,Y);
Paso 4: dibujar pequeños círculos en el anillo exterior y conectarlos directamente con los círculos del paso 2
Como desplazamos los círculos exteriores hacia el centro, volvamos a añadir los círculos más externos. En este punto, los valores de x e y vienen dados por r * sin(i) y r = cos(i). Inicialmente, r tenía el valor 78, pero ahora es 170. Solo tenemos que asignar valores a x e y:x=sin(i)*r+200; y=cos(i)*r+200;Ahora, x e y representan los centros de los pequeños círculos exteriores. Dibujar los círculos y las líneas completa esta sencilla obra de arte digital. El código es el siguiente: circle(x,y,6); line(x,y,X,Y);
Puedes ajustar el valor de subdivisión de PI en el bucle for para hacer que la obra de arte digital sea más compacta o más dispersa.
El código completo es el siguiente:
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
function draw() {
background(0);
for(i=0;i<TAU;i+=PI/36){
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
r=78;
x=sin(i)*r+200;
y=cos(i)*r+200;
r=170;
let X=sin(i)*r+200;
let Y=cos(i)*r+200;
if(X>320) X=320;
if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
circle(X,Y,6);
line(x,y,X,Y);
x=sin(i)*r+200;
y=cos(i)*r+200;
circle(x,y,6);
line(x,y,X,Y);
}
}
Resumen
En conclusión, nuestra exploración de la programación de arte digital con P5.js ha revelado un ámbito de creatividad ilimitada y posibilidades infinitas. Al reflexionar sobre la intrincada danza entre el código y la imaginación que ha dado vida a nuestra obra, recordamos el poder transformador de la tecnología en manos de los artistas. Inspirados por este viaje, invitamos a otros creativos a emprender su propia odisea de programación y a aprovechar las herramientas y técnicas que hemos descubierto para crear sus propias obras maestras. Y para quienes deseen llevar sus creaciones digitales al mundo físico, recomendamos sinceramente utilizar nuestro producto: plotters de pluma iDraw , para plasmar sus obras con precisión y elegancia, tendiendo un puente entre el mundo digital y el físico en busca de la excelencia artística.
Más artículos relacionados: