Diagonal Composition

//i spent a lot of time playing around with these diagonal overlapping squares

//overall i feel like they are too heavy and divide the composition more than i would like them to, but i did what i could with them 

​

function setup() {

  createCanvas(600, 600);

  noFill();

}

​

function draw() {

  background("rgb(99,99,213)");

  stroke("rgb(219,219,248)");

  strokeWeight(10)

​

  //circles with heavy stroke weight

  ellipse(100, 350, 50);

  ellipse(450, 300, 50);

  ellipse(300, 450, 50);

​

  //circles with lighter stroke weight

  strokeWeight(5);

  ellipse(100, 100, 20);

  ellipse(400, 500, 20);

  ellipse(350, 120, 20);

  ellipse(220, 250, 26);

  ellipse(235, 175, 26);

  ellipse(375, 400, 26);

  ellipse(225, 500, 26);

​

  //rectangles on sides

  stroke("rgb(189,189,249)");

  rect(0, 150, 100, 40);

  rect(0, 215, 100, 40);

  rect(495, 450, 100, 40);

  rect(495, 385, 100, 40);

​

// translate to the center of the canvas

  translate(width / 2, height / 2); 

​

  // draw squares above the mirror line

  for (let i = 0; i < 10; i++) {

    let size = 80 - i * 3; // decrease size for each square

    let depth = i * 30; // increase depth for each square

    let x = depth;

    let y = -depth;

    drawSquare(x, y, size);

  }

​

  // draw squares below the mirror line

  for (let i = 0; i < 10; i++) {

    let size = 80 - i * 3; // decrease size for each square

    let depth = i * 30; // increase depth for each square

    let x = -depth;

    let y = depth;

    drawSquare(x, y, size);

  }

}

//draw squares

function drawSquare(x, y, size) {

  stroke("rgb(189,189,249)");

  rect(x - size / 2, y - size / 2, size, size);

}