xxxxxxxxxx94
// This is an iterative pattern with 64 incomplete circles, each of which contains 7 inner arcs, forming a droplet-like shape. It is an interactive function. If you linger you mouse in any one of them, it would have a radient effect, in which the center pattern would be thicker while the ones around it would be thicker too. When you click on the mouse, the center pattern would enlarge, followed by its surrounding ones. So move around your mouse and press it randomly (you can save it by pressing Q too~)!function setup() { createCanvas(800, 800); frameRate(2);}function draw() { background(220); noFill(); for (x = 50; x < width; x = x + 100) { for (y = 50; y < height; y = y + 100) { for (i = 10; i < 80; i = i + 10) { //use for loop to draw the basic array of arc let d = dist(mouseX, mouseY, x, y); if (d < 50) { strokeWeight(4.5); arc( x, y, i, i, random(0, PI), random(PI, PI / 2, PI / 4, (PI * 3) / 4) ); // if mouse lingers, make the closest arc thicker } else if (d >= 50 && d <= 150) { strokeWeight(1.5); arc( x, y, i, i, random(0, PI), random(PI, PI / 2, PI / 4, (PI * 3) / 4) ); // if mouse lingers, make the second closest arc thicker but less } else if (d >150 && d <= 200) { strokeWeight(0.7); arc( x, y, i*0.7, i*0.7, random(0, PI), random(PI, PI / 2, PI / 4, (PI * 3) / 4) ); // if mouse lingers, make the second closest arc thicker but less } else { strokeWeight(0.3); arc( x, y, i*0.5, i*0.5, random(0, PI), random(PI, PI / 2, PI / 4, (PI * 3) / 4) ); // other outside ones would be thinner } if (mouseIsPressed === true && d < 50) { arc( x, y, i * 5, i * 5, random(0, PI), random(PI, PI / 2, PI / 4, (PI * 3) / 4) ); // if mouse pressed, the center would be 5 times bigger } else if (mouseIsPressed === true && d >= 50 && d <= 150) { arc( x, y, i * 1.5, i * 1.5, random(0, PI), random(PI, PI / 2, PI / 4, (PI * 3) / 4) ); // if mouse pressed, the adjacent ones would be 1.5 times bigger } } } }}function keyPressed(){ if (key == "q"){ saveCanvas('IanW666.jpg') }}