mondiran (dumesversion).js

var state=0;
var offsetX, offsetY;
var n=20;
var selectedColor;
var sliderStart=100;
var sliderEnd=320;
var dragging=false;
var draggingX=0;
var x=100;
var y=440;
var a=270;
var b=420;
var d=20;
var a1 = 230;
var b1= 420;
var a2=190;
var b2=420;
var a3=150;
var b3= 420;

var rect1Color;
var rect2Color;
var rect3Color;
var rect4Color;
var rect5Color;
var rect6Color;
var rect7Color;
var rect8Color;
var rect9Color;
var rect10Color;
var rect11Color;
var rect12Color;
var rect13Color;
var rect14Color;
var rect15Color;
var rect16Color;
var rect17Color;
var rect18Color;
var rect19Color;
var rect20Color;
var rect21Color;

var x1=0;
var y1=0;
var x2=140;
var y2=0;
var x3=260;
var y3=0;
var x4=380;
var y4=0;
var x5=0;
var y5=60;
var x6=60;
var y6=60;
var x7=260;
var y7=60;
var x8=0;
var y8=160;
var x9=60;
var y9=260;
var x10=160;
var y10=260;
var x11=260;
var y11=160;
var x12=320;
var y12=160;
var x13=260;
var y13=260;
var x14=380;
var y14=60;
var x15=0;
var y15=300;
var x16=60;
var y16=300;
var x17=160;
var y17=300;
var x18=260;
var y18=300;
var x19=60;
var y19=340;
var x20=160;
var y20=340;
var x21=380;
var y21=300;

// it's a good idea to use array.

function setup() {
  createCanvas(420, 500);
  background(255);

  selectedColor = color(255,50);
  
  rect1Color = color(255,50);
  rect2Color = color(255,50);
  rect3Color = color(255,50);
  rect4Color = color(255,50);
  rect5Color = color(255,50);
  rect6Color = color(255,50);
  rect7Color = color(255,50);
  rect8Color = color(255,50);
  rect9Color = color(255,50);
  rect10Color = color(255,50);
  rect11Color = color(255,50);
  rect12Color = color(255,50);
  rect13Color = color(255,50);
  rect14Color = color(255,50);
  rect15Color = color(255,50);
  rect16Color = color(255,50);
  rect17Color = color(255,50);
  rect18Color = color(255,50);
  rect19Color = color(255,50);
  rect20Color = color(255,50);
  rect21Color = color(255,50);

}

function draw() {
  // draw background
  background(255);
  if (state===0){

  fill(255);
  rect(190,300,60,20);
 
  fill(0);
  textSize(12);
  text("START", 202, 314);
  }
  
  else if(state===1){
  //sliderline
  line(sliderStart,440,sliderEnd,440)
  //sliderbutton
  fill(x,60,20);
  ellipse(x,y,10,10)
  if (dragging&&mouseX>100&&mouseX<320){
    x=mouseX-draggingX;
  }


  //three buttons
  fill('red');
  noStroke();
  ellipse(150, 420, 20, 20);

  fill('yellow');
  noStroke();
  ellipse(190, 420, 20, 20);

  fill('blue');
  noStroke();
  ellipse(230, 420, 20, 20);
  
  fill('black');
  noStroke();
  ellipse(270, 420, 20, 20);
  
  
  //rollover button
  if (dist(mouseX, mouseY, a, b) < d/2) {
   fill(100);
  } else {
   fill('black');
  }
  ellipse(a, b, d, d);

  if (dist(mouseX, mouseY, a1, b1) < d/2) {
  fill(43,125,255);
  } else {
  fill('blue');
  }
  ellipse(a1, b1, d, d);

  if (dist(mouseX, mouseY, a2, b2) < d/2) {
  fill(254,255,219);
  } else {
  fill('yellow');
  }
  ellipse(a2, b2, d, d);

  if (dist(mouseX, mouseY, a3, b3) < d/2) {
     fill('#ff7575');
  } else {
   fill('red');
  }
  ellipse(a3, b3, d, d);
  

   // write Mondorian
  fill(x, 60,20);
  textFont("Helvetica");
  textSize(18);
  text("say hello to Mondrian", 126, 470);
  
  // set stroke properties
  strokeWeight(4);
  stroke(51);
  
  
  // draw rect1
  fill(rect1Color);
  rect(x1, y1, 7*n, 3*n);
  
  // draw rect2
  fill(rect2Color);
  rect(x2, y2, 6*n, 3*n);
  
  // draw rect3
  fill(rect3Color);
  rect(x3, y3, 6*n, 3*n);
  
  // draw rect4
  fill(rect4Color);
  rect(x4, y4, 2*n, 3*n);
  
  // draw rect5
  fill(rect5Color);
  rect(x5, y5, 3*n, 5*n);
  
  // draw rect6
  fill(rect6Color);
  rect(x6, y6, 10*n, 10*n);  
  
  // draw rect7
  fill(rect7Color);
  rect(x7, y7, 6*n, 5*n);
  
  // draw rect8
  fill(rect8Color);
  rect(x8, y8, 3*n, 7*n);
  
  // draw rect9
  fill(rect9Color);
  rect(x9, y9, 5*n, 2*n);
  
  // draw rect10
  fill(rect10Color);
  rect(x10, y10, 5*n, 2*n);
  
  // draw rect11
  fill(rect11Color);
  rect(x11, y11, 3*n, 5*n);
  
  // draw rect12
  fill(rect12Color);
  rect(x12, y12, 3*n, 5*n);
  
    // draw rect13
  fill(rect13Color);
  rect(x13, y13, 6*n, 2*n);
  
  // draw rect14
  fill(rect14Color);
  rect(x14, y14, 2*n, 12*n);
  
  // draw rect15
  fill(rect15Color);
  rect(x15, y15, 3*n, 5*n);
  
  // draw rect16
  fill(rect16Color);
  rect(x16, y16, 5*n, 2*n);
  
  // draw rect17
  fill(rect17Color);
  rect(x17, y17, 5*n, 2*n);
    
  // draw rect18
  fill(rect18Color);
  rect(x18, y18, 6*n, 5*n);
  
  // draw rect19
  fill(rect19Color);
  rect(x19, y19, 5*n, 3*n);
  
  // draw rect20
  fill(rect20Color);
  rect(x20, y20, 5*n, 3*n);
  
  // draw rect21
  fill(rect21Color);
  rect(x21, y21, 2*n, 5*n);

  
  // mouseCursor
  noStroke();
  fill(selectedColor);
  ellipse(mouseX,mouseY, 10,10);
  }

 
}


function mousePressed() {
  if (dist(mouseX, mouseY, 150, 420) < 10) {
    selectedColor = color('Red');
    offsetX = 150 - mouseX;
    offsetY = 420 - mouseY;
  }
  else if (dist(mouseX, mouseY, 190, 420) < 10) {
    selectedColor = color('Yellow');
    offsetX = 190 - mouseX;
    offsetY = 420 - mouseY;
  }
  else if (dist(mouseX, mouseY, 230, 420) < 10) {
    selectedColor = color('Blue');
    offsetX = 230 - mouseX;
    offsetY = 420 - mouseY;
  }
  else if (dist(mouseX, mouseY, 270, 420) < 10) {
    selectedColor = color('Black');
    offsetX = 270 - mouseX;
    offsetY = 420 - mouseY;
  }
  else if (mouseX >190 && mouseX < 250 && mouseY >300 && mouseY<320){
    state=1;
  }
  else if (dist(mouseX,mouseY,x,y)<5){
    dragging=true;
  }

}

function mouseReleased() {
  
  if (mouseX > x1 && mouseX < x1+7*n && mouseY > y1 && mouseY < y1+3*n) {
    rect1Color = selectedColor;
  }
  else if (mouseX > x2 && mouseX < x2+6*n && mouseY > y2 && mouseY < y2+3*n) {
    rect2Color = selectedColor;
  }
  else if (mouseX > x3 && mouseX < x3+6*n && mouseY > y3 && mouseY < y3+3*n) {
    rect3Color = selectedColor;
  }
    else if (mouseX > x4 && mouseX < x4+2*n && mouseY > y4 && mouseY < y4+3*n) {
    rect4Color = selectedColor;
  }
  else if (mouseX > x5 && mouseX < x5+3*n && mouseY > y5 && mouseY < y5+5*n) {
    rect5Color = selectedColor;
  }
    else if (mouseX > x6 && mouseX < x6+10*n && mouseY > y6 && mouseY < y6+10*n) {
    rect6Color = selectedColor;
  }
  else if (mouseX > x7 && mouseX < x7+6*n && mouseY > y7 && mouseY < y7+5*n) {
    rect7Color = selectedColor;
  }
    else if (mouseX > x8 && mouseX < x8+3*n && mouseY > y8 && mouseY < y8+7*n) {
    rect8Color = selectedColor;
  }
  else if (mouseX > x9 && mouseX < x9+5*n && mouseY > y9 && mouseY < y9+2*n) {
    rect9Color = selectedColor;
  }
    else if (mouseX > x10 && mouseX < x10+5*n && mouseY > y10 && mouseY < y10+2*n) {
    rect10Color = selectedColor;
  }
  else if (mouseX > x11 && mouseX < x11+3*n && mouseY > y11 && mouseY < y11+5*n) {
    rect11Color = selectedColor;
  }
    else if (mouseX > x12 && mouseX < x12+3*n && mouseY > y12 && mouseY < y12+5*n) {
    rect12Color = selectedColor;
  }
  else if (mouseX > x13 && mouseX < x13+6*n && mouseY > y13 && mouseY < y13+2*n) {
    rect13Color = selectedColor;
  }
  else if (mouseX > x14 && mouseX < x14+2*n && mouseY > y14 && mouseY < y14+12*n) {
    rect14Color = selectedColor;
  }
  else if (mouseX > x15 && mouseX < x15+3*n && mouseY > y15 && mouseY < y15+5*n) {
    rect15Color = selectedColor;
  }
    else if (mouseX > x16 && mouseX < x16+5*n && mouseY > y16 && mouseY < y16+2*n) {
    rect16Color = selectedColor;
  }
  else if (mouseX > x17 && mouseX < x17+5*n && mouseY > y17 && mouseY < y17+2*n) {
    rect17Color = selectedColor;
  }
  else if (mouseX > x18 && mouseX < x18+6*n && mouseY > y18 && mouseY < y18+5*n) {
    rect18Color = selectedColor;
  }
  else if (mouseX > x19 && mouseX < x19+5*n && mouseY > y19 && mouseY < y19+3*n) {
    rect19Color = selectedColor;
  }
    else if (mouseX > x20 && mouseX < x20+5*n && mouseY > y20 && mouseY < y20+3*n) {
    rect20Color = selectedColor;
  }
  else if (mouseX > x21 && mouseX < x21+2*n && mouseY > y21 && mouseY < y21+5*n) {
    rect21Color = selectedColor;
  }
  else if (mouseX>0&&mouseX<420&&mouseY>400&&mouseY<500){
    dragging=false;
  }
  
  
  selectedColor = color(255,50); // brightness, opacity
}