​

// ## Define a Color Palette

let c1 = '#FFF3E4FF';

let c2 = '#EED6C4FF';

let c3 = '#6B4F4F88';

let c4 = '#48343488';

let c5 = '#889EAFEE';

let c6 = '#506D84BB';

let c7 = '#e68f0eBB';

​

// # Define Landmarks 

// here I define 4 points that I'm going to re-use

// often in my code, they will serve as a base 

// coordinates for all my shapes

​

let x1, x2, x3, x4; // We can initialize the variables so that they are global

let y1, y2, y3, y4; // but we can't assign them width and height proportions yet

​

​

function setup() {

  createCanvas(600, 600); // now that width and height have been initialized

  // we can assign the 4 point values some proportions of width and height

  // point 1 ~ top left

  x1 = width/4; 

  y1 = height/4;

  // point 2 ~ top right

  x2 = width/7*6; 

  y2 = height/6;

  // point 3 ~ bottom right

  x3 = width/5*4; 

  y3 = height/8*5

  // point 4 ~ bottom left

  x4 = width/5;

  y4 = height/5*4

  // also don't forget to change the rectangle mode

  rectMode(CENTER);

}

​

function draw() {

  background(c1);

  drawBrownThings();

  drawYellowThings();

​

}

​

function drawBrownThings(){

  noStroke();

  fill(c3);

​

  triangle( x2 - mouseX/10, y2 - mouseY/10, 

            x3 + mouseX/10, y3 + mouseY/10, 

           x4 - mouseY/10, y4 + mouseX/10);

}

​

function drawBlueThings(){

  noFill();

  stroke(c2);

  strokeWeight(5);

  circle(x1, y1, mouseX/4+100);

  strokeWeight(1);

  circle(x1, y1, mouseX/4+110);

  stroke(c5);

  circle(x1, y1, mouseY/2+100);

  noStroke();

  fill(c5);

  circle(x1, y1, mouseY/6+60);

  stroke(c4);

  strokeWeight(5);

  circle(x3, y3, mouseX);

    fill(c6)

  noStroke();

  rect(x4,y4,mouseY/3+50, mouseX/4+50);

  noFill();

  stroke(c5);

  strokeWeight(2)

  rect(x4,y4,mouseY/4+50, mouseX/3+50);

  stroke(c4);

  strokeWeight(2)

  rect(x4,y4,mouseX/2+50, mouseX/2+50);

}

​

function drawYellowThings(){

  // Here I'm going to calculate the midpoints between all 4 points

  // midpoint between point 1 and point 2

  let x12 = (x1 + x2)/2;

  let y12 = (y1 + y2)/2;

  // midpoint between point 2 and point 3

  let x23 = (x2 + x3)/2;

  let y23 = (y2 + y3)/2;

  // midpoint between point 3 and point 4

  let x34 = (x3 + x4)/2;

  let y34 = (y3 + y4)/2;

  // midpoint between point 4 and point 1

  let x41 = (x4 + x1)/2;

  let y41 = (y4 + y1)/2;

  noFill();

  stroke(c7);

  strokeWeight(1);

  // now I'm going to join all the midpoint together with lines

  line(x12, y12, x23, y23);

  line(x23, y23, x34, y34);

  line(x34, y34, x41, y41);

  line(x41, y41, x12, y12);

  // now I'm going to join all the midpoints to my mouse position

  line(mouseX, mouseY, x12, y12); 

  line(mouseX, mouseY, x23, y23); 

  line(mouseX, mouseY, x34, y34); 

  line(mouseX, mouseY, x41, y41); 

​

}

​

​