function setup(){

  createCanvas(400,400);

  // frameRate(100);

  // stroke(0);

  // strokeWeight(1);

  rect(0,0,400,400);  

​

  // background(178, 223, 219);

  // cnv.mouseOut(clear);

}

​

​

function mousePressed(){

  push();

  noStroke();

  //random color selector

  // r = random(0,255);

  // g = random(100,200);

  // b = random(50,200);

  let r = color(211,37,48);

  let y = color(249,208,48);

  let b = color(65,73,124);  

  colorList = [r, y, b]; 

  a = colorList[int(random(3))];

  b = colorList[int(random(3))];

  c = colorList[int(random(3))];

  fill(a);

  fill(b);

  fill(c);

  //starting point

  let x1 = 40;

  let y1 = 80;

  let x2 = random(60,100);

  let y2 = random(120,140);

  let x3 = random(170,190);

  let y3 = random(150,180);

  let x4 = random(200,220);

  let y4 = random(250,260);

  let x5 = random(230,280);

  let y5 = random(270,305);

  let x6 = random(300,330);

  let y6 = 320;

  let x7 = 360;

  //width and height, stick together guys! 

  let w1 = x2-x1;

  let h1 = y2-y1;

  let w2 = x2-x1;

  let h2 = y6-y4;

  let w3 = x3-x2;

  let h3 = y4-y2;

  let w4 = x4-x3;

  let h4 = y2-y1;

  let w5 = x5-x4;

  let h5 = y5-y2;

  let w6 = x6-x5;

  let h6 = y3-y2;

  let w7 = x7-x6;

  let h7 = y3-y1;

  let w8 = x7-x5;

  let h8 = y6-y5;

  //wall

  fill(255);

  rect(40,80,320,240);

  //shape and fill

  fill(a);

  rect(x1,y1,w1,h1);

  rect(x4,y2,w5,h5);

  rect(x6,y1,w7,h7);

  fill(b);

  rect(x1,y4,w2,h2);

  rect(x5,y2,w6,h6);

  fill(c);

  rect(x2,y2,w3,h3); 

  rect(x3,y1,w4,h4);

  rect(x5,y5,w8,h8);

  pop();

  push();

  strokeWeight(5);

  strokeCap(SQUARE);

  //vertical lines

  line(x2,y1,x2,y6);

  line(x3,y1,x3,y4);

  line(x4,y1,x4,y6);

  line(x5,y1,x5,y6);

  line(x6,y1,x6,y5);

  //horizontal lines

  line(x1,y2,x6,y2);

  line(x4,y3,x7,y3);

  line(x1,y4,x4,y4);

  line(x1,y5,x2,y5);

  line(x4,y5,x7,y5);

  pop();

​

}

​

function keyPressed(){

  // //frame

  // //strokeWeight(200);

  // push();

  // noStroke();

  // r = random(180,220);

  // g = random(180,190);

  // b = random(180,240);

  // // fill(255,g,b);

  // fill(r,g,b);

  // rect(0,0,400,80);

  // rect(0,0,40,400);

  // rect(360,80,40,400);

  // rect(0,320,400,80);

  // pop();

  //save a copy

  saveCanvas('My Mondrian', 'jpg');

​

}

​

​

function draw(){

  push();

  noStroke();

  fill(0);

  textAlign(CENTER);

  //headline

  textSize(30);

  textFont('Courier New');

  text('Mondrian Generater',200,60);

  //instruct

  textSize(15);

  text('1. Click to get a random Mondrian',200,350);

  text('2. Press any key to save a copy',200,370);

  // text('3. Scroll on the canvas to save a copy',200,380);

  pop();

​

}

​

//abandoned 

// function setup() { 

//   createCanvas(400, 400);

//   background(255,255,255);

// } 

​

// function draw() { 

//   rect(x1,y1,320,240);

//   //rects

//   push();

//   noStroke();

//   //red

//   fill(211,37,48);

//   rect(x2,y2,120,120);

//   rect(x3,y1,20,40);

//   rect(x5,y5,100,40);

//   //yellow

//   fill(249,208,48);

//   rect(x1,y1,40,40);

//   rect(x4,y2,40,160);

//   rect(x6,y1,40,60);

//   //blue

//   fill(65,73,124);

//   rect(x1,y4,40,80);

//   rect(x5,y2,60,20);

//   pop();

//   //lines

//   push();

//   fill(100);

//   strokeWeight(5);

//   //vertical

//   line(x2,y1,x2,y6);

//   line(x3,y1,x3,y4);

//   line(x4,y1,x4,y6);

//   line(x5,y1,x5,y6);

//   line(x6,y1,x6,y5);

//   //horizontal

//   line(x1,y2,x6,y2);

//   line(x4,y3,x7,y3);

//   line(x1,y4,x4,y4);

//   line(x1,y5,x2,y5);

//   line(x4,y5,x7,y5);

//   pop();

//   //frame

//   push();

//   stroke(255);

//   strokeWeight(5);

//   fill(255,255,255,0);

//   rect(x1,y1,320,240);

//   pop();

// }

​