Basándonos en nuestra incursión previa en P5.js para gráficos vectoriales SVG, ahora nos adentramos en el ámbito de la codificación de arte digital con renovado vigor y propósito. Motivados por la relación simbiótica entre la tecnología y la expresión artística, nuestra exploración se impulsa por la demanda de herramientas innovadoras para la creación de obras de arte en formato SVG diseñadas para los plotters de pluma iDraw. Como defensores de la creatividad mediante la codificación, nuestro objetivo es equipar a los artistas digitales con las habilidades y conocimientos necesarios para aprovechar al máximo el potencial de P5.js, transformando así la imaginación en obras maestras tangibles sobre un lienzo digital. ¿Necesitas algunos archivos svg con código? Descárgalos aquí>>>
Paso 1: Crear el lienzo
Para comenzar nuestro viaje en la codificación de arte digital 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 de pequeños círculos y encontramos un patrón: consiste en 64 círculos distribuidos uniformemente a lo largo de una circunferencia con un diámetro de 75. En este punto, podemos usar un bucle for para definir las coordenadas (X, Y) de los centros de los pequeños círculos. Específicamente, para 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 y Y son coordenadas polares. ¿Por qué sumar 200? Porque en P5.js, el origen del sistema de coordenadas está en la esquina superior izquierda, con valores positivos de Y que aumentan hacia abajo.
Entonces, para posicionarlo en el centro, necesitamos sumar la mitad del ancho y alto del lienzo, que es 200. Usamos el comando ellipse(x,y,6,6) para dibujar un círculo con un diámetro de 6 píxeles. A continuación, veamos los círculos en la sección central. Los centros están en los lados de un cuadrado con lado de 280, centrado en el lienzo. Podemos restringir la posición de los centros de los círculos usando una sentencia IF, así:
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, entonces se establece X en 320. La coordenada Y permanece sin restricciones. Esto significa que los círculos del anillo más externo tendrán sus coordenadas Y sin cambios mientras que sus coordenadas X se fijarán todas en 320. Esto provoca que la parte roja se desplace hacia la parte verde, como se muestra en el diagrama.
De manera similar, if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
Paso 3, Conectar las formas de los pasos 1 y 2 con líneas
Ahora que los valores de X y Y están sobre la circunferencia del círculo pequeño más interno, y X y Y representan los centros de los círculos en el cuadrado central, podemos conectarlos usando el comando línea: line(x,y,X,Y);
Paso 4, Dibujar pequeños círculos en el anillo más externo y conectarlos directamente con los círculos del paso 2
Como desplazamos los círculos más externos hacia el centro, vamos a añadir nuevamente los círculos más externos. En este punto, los valores de x e y se calculan como r * sin(i) y r * cos(i). Inicialmente, r era 78, pero ahora es 170. Solo necesitamos 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 externos. 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 la obra digital 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 codificación de arte digital con P5.js ha revelado un mundo 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 codificación, aprovechando las herramientas y técnicas que hemos descubierto para crear sus propias obras maestras únicas. Y para quienes buscan llevar sus creaciones digitales al mundo físico, extendemos una recomendación sincera para utilizar nuestro producto - iDraw Pen Plotters - para plasmar sus obras con precisión y elegancia, cerrando la brecha entre los mundos digital y físico en la búsqueda de la excelencia artística.
Más artículos relacionados: