Basándonos en nuestra exploración anterior de P5.js para gráficos vectoriales SVG, ahora nos adentramos nuevamente en el ámbito de la creación de arte digital mediante código, 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 código, 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 recorrido por la creación de arte digital mediante código con P5.js, primero establecemos el lienzo en el que nuestra obra cobrará vida. Utilizando 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 cuidadosamente el círculo interior formado por 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 pequeños círculos. En concreto, 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 lado 280, 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 más exterior conservarán sus coordenadas Y, mientras que todas sus coordenadas X se establecerán en 320. Como resultado, la parte roja se desplaza a la parte verde, tal como se muestra en el diagrama.
Del mismo modo，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 más exterior y conectarlos directamente con los círculos del paso 2
Como desplazamos los círculos más exteriores hacia el centro, volvamos a añadirlos. En este punto, los valores de x e y vienen dados por r * sin(i) y r = cos(i). Inicialmente, r era 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 más 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 creación de arte digital mediante código 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 recorrido, invitamos a otros creativos a emprender su propia odisea de programación, aprovechando 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, conectando los mundos digital y físico en busca de la excelencia artística.
Más artículos relacionados: