var density; //changes how thick the arcs are
//changes the colors
var col1;
var col2;
function setup() {
createCanvas(400, 300);
background(240);
}
function draw() {
//redraws a new canvas every time the mouse is pressed
fill(240);
rect(0,0,400,300);
//sets the colors based on the x coordinate of the mouse
col1 = mouseX/(400/255);
col2 = mouseX/(400/255);
for (var a = 0; a < 400; a += density) {
//draws the top left arc
stroke(180,255 - col2,180);
line(a, 0, 0, 400-a);
//draws bottom left arc
stroke(255 - col1,180,180);
line(400 - a, 300, 0, 300 - a);
//draws bottom right arc
stroke(180,col2,180);
line(a, 300, 400, 300 - a);
//draws top right arc
stroke(col1,180,180);
line(a, 0, 400, a);
}
}
//changes the thickness of the arcs by drawing a different # of lines
function mousePressed() {
density = random(5,12);
}
Using the for loop took me a while because it is different enough from python to really throw me off. Once I figured it out, I had fun making different shapes, but I settled for something symmetrical because the other shapes I made weren’t very aesthetically pleasing. Then I played with colors.