For this assignment of making an art piece using Conditionals & Loops, I tried to combine the meditative aspects of Zen art with the precision of code, resulting in a unique and soothing digital art piece.
Concept
The concept of creating Zentangles is to relax, do art, appreciate the simplicity and be grateful for the opportunity and time to do the art! A Zentangle is usually drawing repetitive basic shapes & curves on a tile of paper or cardboard. For me, this tile was the p5.js canvas, the repetitive shapes – for loops I used and my code – the pencil!
The sketch(es)!
I began with a lot of thoughts and abstract ideas on how to go about doing this and made a countless number of edits, bigger or smaller shapes, darker or lighter mode, time-based creation or mouse-interactive creation, corner positioned or center positioned, and I just couldn’t pick so I decided to give all of them to this blog post!
This one is the mouse-interactive one where, hovering over different positions on the Canvas enables different colors and shapes. To temporarily pause we can mouse click, keypress ‘s’ to stop or release mouse click to resume.
This one is time-based where it changes the color, radius and spacing based on a set time and frameRate. Mouse click pauses the loop by doing noLoop(), and releasing resumes the loop using loop().
.
A part of the code that I’m happy about is the math and the logic that went into making the circles and squares rotate and move in a specific way. I used the map() function to re-map the range of values that the radius of the circle can take, translate() to modify the center, followed by creating a function to check the position of the cursor to adjust color and spacing. For the time based one, I just used the frameCount.
function makeArt(maxRadius,spacing,numCircles,minRadius)
{
translate(width / 2, height / 2);
for (let i = 0; i < numCircles; i++) {
let x = cos(angle) * spacing * i;
let y = sin(angle) * spacing * i;
let radius = map(i, 0, numCircles, minRadius, maxRadius);
let outerRadius = maxRadius*1.25;
rectMode(CENTER);
rotate(angle);
rect(0, 0, outerRadius * 1.5, outerRadius * 1.5);
rect(outerRadius*1.5, outerRadius*1.5, 17, 17 );
push();
translate(x, y);
rotate(-rectAngle);
ellipse(0, 0, radius);
pop();
}
angle += 0.01;
rectAngle += 0.31;
Reflections
I’m enjoying the assignments for this class and feel like I’m challenging myself to think more out of the box. This felt like the perfect first step towards balancing the ‘Order & Chaos’ like from the Casey Reas read! For improvements, I think I could add more shapes or curves and not just stick to the ones I did and maybe try to create a more complex mandala/zentangle!