Xindi Lyu_Final Project

sketch

var puzzle1A = [
  { x:40, y:40,active: false,color:138 },
  
]
var puzzle1B = [
  { x:40, y:120,active: false,color:138 },
  
]
var puzzle1C = [
  { x:40, y:210,active: false,color:138 },
  
]
var puzzle1D = [
  { x:40, y:300,active: false,color:138 },
  
]
var puzzle1E = [
  { x:40, y:380,active: false,color:138 },
  
]
var puzzle1F = [
  { x:40, y:460,active: false,color:138 },
  
]
var puzzle1G = [
  { x:40, y:540,active: false,color:138 },
  
]
var puzzle2A = [
  { x:40, y:40,active: false,color:31},
  
]
var puzzle2B = [
  { x:40, y:120,active: false,color:31 },
  
]
var puzzle2C = [
  { x:40, y:200,active: false,color:31 },
  
]
var puzzle2D = [
  { x:60, y:280,active: false,color:31 },
  
]
var puzzle2E = [
  { x:40, y:350,active: false,color:31 },
  
]
var puzzle2F = [
  { x:40, y:430,active: false,color:31 },
  
]
var puzzle2G = [
  { x:40, y:510,active: false,color:31},
  
]
var countB1=1;
var countB2=1;
var countB3=1;
var countB4=1;
var countB5=1;
var countB6=1;
var countB7=1;

var countA1=1;
var countA2=1;
var countA3=1;
var countA4=1;
var countA5=1;
var countA6=1;
var countA7=1;
var button;

var a=28;
// Set up canvas
function setup() {
  frameRate(16);
  // Create canvas using width/height of window.
  createCanvas(500, 600);  
  rectMode(CENTER);
  a=a+1;
}

// Draw on the canvas.
function draw() {
  background(100,48,40);
  stroke(50,48,40)
  strokeWeight(1.3);
  line(0,400,600,400);
  noStroke();
  fill(49,48,46);
  rect(380,360,60+random(0,5),80+random(0,3));
    rect(120,360,60+random(0,5),80+random(0,3));
  textSize(15);
  fill(random(100,105));
  
text("1800",360,360);
text("1662",100,360);
textStyle(BOLD);
textSize(15);

fill(100);
text("CLICK TO ENTER",50,500);
text("CLICK TO ENTER",350,500);


  if(a==20){
    puzzle2();
  }else if(a==10){
    puzzle1();
  }

}
function mouseClicked(){
  if(350<mouseX){
  a=20;
}else if(mouseX<150){
  a=10;
}
}
function puzzle1() {
background(67,99,138);
stroke(67,99,138);
var countA=countA1+countA2+countA3+countA4+countA5+countA6+countA7;

//triangle(288,160,358,160,323,195);
if (puzzle1A.length > 0) {
    for (var i = 0; i < puzzle1A.length; i++) {
     
      var ta=puzzle1A[i];
       var dist1A=dist(ta.x,ta.y,323,171.67)
 

        if(dist1A<10&mouseIsPressed){
        ta.x=323;
        ta.y=171.67
        countA1=0
      }
      noFill();
      stroke(ta.color-71,ta.color-39,ta.color);
      triangle(288,160,358,160,323,195);
      stroke(67,99,138);
      fill(28,41,81);
      triangle(ta.x-35,ta.y-11.67,ta.x,ta.y+23.33,ta.x+35,ta.y-11.67);
      }
    }
    

    if (puzzle1B.length > 0) {
    for (var i = 0; i < puzzle1B.length; i++) {
     
      var tb=puzzle1B[i];
       var dist1B=dist(tb.x,tb.y,305.5,211)
 

        if(dist1B<10&mouseIsPressed){
        tb.x=305.5;
        tb.y=211
        countA2=0
      }
       noFill();
      stroke(tb.color-71,tb.color-39,tb.color);
      beginShape();
      vertex(288,228);
      vertex(323,261);
      vertex(323,195);
      vertex(288,160);
      endShape(CLOSE)
      stroke(67,99,138);
      fill(28,41,81);
      beginShape();
      vertex(tb.x-17.5,tb.y+17);
      vertex(tb.x+17.5,tb.y+50);
      vertex(tb.x+17.5,tb.y-16);
      vertex(tb.x-17.5,tb.y-51);
      endShape(CLOSE);
      }
    }
       if (puzzle1C.length > 0) {
    for (var i = 0; i < puzzle1C.length; i++) {
     
      var tc=puzzle1C[i];
       var dist1C=dist(tc.x,tc.y,288,262)
 

        if(dist1C<10&mouseIsPressed){
        tc.x=288;
        tc.y=262;
        countA3=0
      }
       noFill();
      stroke(tc.color-71,tc.color-39,tc.color);
      beginShape();
      vertex(288,228);
      vertex(323,261);
      vertex(288,298);
      vertex(253,261);
      endShape(CLOSE)
      stroke(67,99,138);
      fill(28,41,81);
      beginShape();
      vertex(tc.x,tc.y-34);
      vertex(tc.x+35,tc.y-1);
      vertex(tc.x,tc.y+36);
      vertex(tc.x-35,tc.y-1);
      endShape(CLOSE);
      }
    }
    fill(28,41,81);

if (puzzle1D.length > 0) {
    for (var i = 0; i < puzzle1D.length; i++) {
     
      var td=puzzle1D[i];
       var dist1D=dist(td.x,td.y,253,285.67)
 

        if(dist1D<10&mouseIsPressed){
        td.x=253;
        td.y=285.67;
        countA4=0
      }
       noFill();
      stroke(td.color-71,td.color-39,td.color);
      triangle(253,261,288,298,218,298);
      stroke(67,99,138);
      fill(28,41,81);
      triangle(td.x,td.y-24.67,td.x+35,td.y+12.33,td.x-35,td.y+12.33);
      }
    }
    fill(28,41,81);
if (puzzle1E.length > 0) {
    for (var i = 0; i < puzzle1E.length; i++) {
     
      var te=puzzle1E[i];
       var dist1E=dist(te.x,te.y,234.75,253.75)
 

        if(dist1E<10&mouseIsPressed){
        te.x=234.75;
        te.y=253.75;
        countA5=0
      }
       noFill();
      stroke(te.color-71,te.color-39,te.color);
      beginShape();
      vertex(209,253.75);
      vertex(234.75,228);
      vertex(260.5,253.75);
      vertex(234.75,279.5);
      endShape(CLOSE)
      stroke(67,99,138);
      fill(28,41,81);
      beginShape();
      vertex(te.x-25.75,te.y);
      vertex(te.x,te.y-25.75);
      vertex(te.x+25.75,te.y);
      vertex(te.x,te.y+25.75);
      endShape(CLOSE);
      }
    }
if (puzzle1F.length > 0) {
    for (var i = 0; i < puzzle1F.length; i++) {
     
      var tf=puzzle1F[i];
       var dist1F=dist(tf.x,tf.y,288,315.17)
 

        if(dist1F<10&mouseIsPressed){
        tf.x=288;
        tf.y=315.17;
        countA6=0
      }
       noFill();
      stroke(tf.color-71,tf.color-39,tf.color);
      triangle(288,298,313.75,323.75,262.25,323.75);
      stroke(67,99,138);
      fill(28,41,81);
      triangle(tf.x,tf.y-17.17,tf.x+25.75,tf.y+8.58,tf.x-25.75,tf.y+8.58);
      }
    }
    if (puzzle1G.length > 0) {
    for (var i = 0; i < puzzle1G.length; i++) {
     
      var tg=puzzle1G[i];
       var dist1G=dist(tg.x,tg.y,236.5,315.17)
 

        if(dist1G<10&mouseIsPressed){
        tg.x=236.5;
        tg.y=315.17;
        countA7=0
      }
       noFill();
      stroke(tg.color-71,tg.color-39,tg.color);
      triangle(236.5,298,262.25,323.75,210.75,323.75);
      stroke(67,99,138);
      fill(28,41,81);
      triangle(tg.x,tg.y-17.17,tg.x+25.75,tg.y+8.58,tg.x-25.75,tg.y+8.58);
      }
    }
     fill(28,41,81);

if (countA<1){
hint1();
}
textSize(40);
textStyle(BOLD);
fill(255);
text(countA,400,50);
}

function puzzle2() {
  background(69,93,31);
  stroke(69,93,31);
  fill(33,64,22);
  var countB=countB1+countB2+countB3+countB4+countB5+countB6+countB7;
  
  if (puzzle2A.length > 0) {
    for (var i = 0; i < puzzle2A.length; i++) {
     
      var ka=puzzle2A[i];
       var dist2A=dist(ka.x,ka.y,336.67,176.67)
 

        if(dist2A<10&mouseIsPressed){
        ka.x=336.67;
        ka.y=176.67
        countB1=0
      }
      noFill();
      stroke(ka.color+38,ka.color+62,ka.color);
      triangle(320,160,370,160,320,210);
      stroke(69,93,31);
      fill(33,64,22);
      triangle(ka.x-16.67,ka.y-16.67,ka.x+33.33,ka.y-16.67,ka.x-16.67,ka.y+33.33);
      }
    }
  
  if (puzzle2B.length > 0) {
    for (var i = 0; i < puzzle2B.length; i++) {
     
      var kb=puzzle2B[i];
       var dist2B=dist(kb.x,kb.y,295,210)
 

        if(dist2B<10&mouseIsPressed){
        kb.x=295;
        kb.y=210;
        countB2=0
      }
      noFill();
      stroke(kb.color+38,kb.color+62,kb.color);
      rect(295,210,50,50);
      stroke(69,93,31);
      fill(33,64,22);
      rect(kb.x,kb.y,50,50);
      }
    }
 
  if (puzzle2C.length > 0) {
    for (var i = 0; i < puzzle2C.length; i++) {
     
      var kc=puzzle2C[i];
       var dist2C=dist(kc.x,kc.y,253.33,176.67)
 

        if(dist2C<10&mouseIsPressed){
        kc.x=253.33;
        kc.y=176.67
        countB3=0
      }
      noFill();
      stroke(kc.color+38,kc.color+62,kc.color);
      triangle(270,210,270,160,220,160);
      stroke(69,93,31);
      fill(33,64,22);
      triangle(kc.x+16.67,kc.y-16.67,kc.x-33.33,kc.y-16.67,kc.x+16.67,kc.y+33.33);
      }
    }
  
        if (puzzle2D.length > 0) {
    for (var i = 0; i < puzzle2D.length; i++) {
     
      var kd=puzzle2D[i];
       var dist2D=dist(kd.x,kd.y,325,252.5)
 

        if(dist2D<10&mouseIsPressed){
        kd.x=325;
        kd.y=252.5
        countB4=0
      }
      noFill();
      stroke(kd.color+38,kd.color+62,kd.color);
      beginShape();
      vertex(270,235);
      vertex(345,235);
      vertex(380,270);
      vertex(305,270);
      endShape(CLOSE)
      stroke(69,93,31);
      fill(33,64,22);
      beginShape();
      vertex(kd.x-55,kd.y-17.5);
      vertex(kd.x+20,kd.y-17.5);
      vertex(kd.x+55,kd.y+17.5);
      vertex(kd.x-20,kd.y+17.5);
      endShape(CLOSE)
      }
    }

       
      if (puzzle2E.length > 0) {
    for (var i = 0; i < puzzle2E.length; i++) {
     
      var ke=puzzle2E[i];
       var dist2E=dist(ke.x,ke.y,370,235)
 

        if(dist2E<10&mouseIsPressed){
        ke.x=370;
        ke.y=235
        countB5=0
      }
      noFill();
      stroke(ke.color+38,ke.color+62,ke.color);
     beginShape();
      vertex(345,235);
      vertex(370,210);
      vertex(395,235);
      vertex(370,260);
      endShape(CLOSE)
      stroke(69,93,31);
      fill(33,64,22);
      beginShape();
      vertex(ke.x-25,ke.y);
      vertex(ke.x,ke.y-25);
      vertex(ke.x+25,ke.y);
      vertex(ke.x,ke.y+25);
      endShape(CLOSE)
      }
    }

      //triangle(305,270,280,295,330,295) 305 286.67;
       if (puzzle2F.length > 0) {
    for (var i = 0; i < puzzle2F.length; i++) {
     
      var kf=puzzle2F[i];
       var dist2F=dist(kf.x,kf.y,305,286.67)
 

        if(dist2F<10&mouseIsPressed){
        kf.x=305;
        kf.y=286.67
        countB6=0
      }
      noFill();
      stroke(kf.color+38,kf.color+62,kf.color);
      triangle(305,270,280,295,330,295);
      stroke(69,93,31);
      fill(33,64,22);
      triangle(kf.x,kf.y-16.67,kf.x-25,kf.y+8.33,kf.x+25,kf.y+8.33);
      }
    }
      //triangle(380,270,355,295,405,295);
 if (puzzle2G.length > 0) {
    for (var i = 0; i < puzzle2G.length; i++) {
     
      var kg=puzzle2G[i];
       var dist2G=dist(kg.x,kg.y,380,286.67)
 

        if(dist2G<10&mouseIsPressed){
        kg.x=380;
        kg.y=286.67
        countB7=0
      }
      noFill();
      stroke(kg.color+38,kg.color+62,kg.color);
      triangle(380,270,355,295,405,295);
      stroke(69,93,31);
      fill(33,64,22);
      triangle(kg.x,kg.y-16.67,kg.x-25,kg.y+8.33,kg.x+25,kg.y+8.33);
      }
    }
    if (countB<1){
hint2();
}
textSize(40);
textStyle(BOLD);
fill(255);
text(countB,400,50);
}

function mousePressed() {
  if (puzzle1A.length > 0) {
    for (var i = 0; i < puzzle1A.length; i++) {
     
      var ta = puzzle1A[i];
      var radius1A=dist(ta.x,ta.y,ta.x-25,ta.y-1.67);
          distance1A = dist(mouseX, mouseY,ta.x,ta.y);
      if (distance1A < radius1A) {
        ta.active = true;
      } else {
       ta.active = false;
      }
    }
  }
   if (puzzle1B.length > 0) {
    for (var i = 0; i < puzzle1B.length; i++) {
     
      var tb = puzzle1B[i];
      var radius1B=dist(tb.x,tb.y,tb.x-10.5,tb.y+10);
          distance1B = dist(mouseX, mouseY,tb.x,tb.y);
      if (distance1B < radius1B) {
        tb.active = true;
      } else {
       tb.active = false;
      }
    }
  }
     if (puzzle1C.length > 0) {
    for (var i = 0; i < puzzle1C.length; i++) {
     
      var tc = puzzle1C[i];
      var radius1C=dist(tc.x,tc.y,tc.x,tc.y+36);
          distance1C = dist(mouseX, mouseY,tc.x,tc.y);
      if (distance1C < radius1C) {
        tc.active = true;
      } else {
       tc.active = false;
      }
    }
  }
if (puzzle1D.length > 0) {
    for (var i = 0; i < puzzle1D.length; i++) {
     
      var td = puzzle1D[i];
      var radius1D=dist(td.x,td.y,td.x,td.y-24.67);
          distance1D = dist(mouseX, mouseY,td.x,td.y);
      if (distance1D < radius1D) {
        td.active = true;
      } else {
       td.active = false;
      }
    }
  }
  if (puzzle1E.length > 0) {
    for (var i = 0; i < puzzle1E.length; i++) {
     
      var te = puzzle1E[i];
      var radius1E=dist(te.x,te.y,te.x-25.75,te.y);
          distance1E = dist(mouseX, mouseY,te.x,te.y);
      if (distance1E < radius1E) {
        te.active = true;
      } else {
       te.active = false;
      }
    }
  }
    if (puzzle1F.length > 0) {
    for (var i = 0; i < puzzle1F.length; i++) {
     
      var tf = puzzle1F[i];
      var radius1F=dist(tf.x,tf.y,tf.x,tf.y-17.17);
          distance1F = dist(mouseX, mouseY,tf.x,tf.y);
      if (distance1F < radius1F) {
        tf.active = true;
      } else {
       tf.active = false;
      }
    }
  }
   if (puzzle1G.length > 0) {
    for (var i = 0; i < puzzle1G.length; i++) {
     
      var tg = puzzle1G[i];
      var radius1G=dist(tg.x,tg.y,tg.x,tg.y-17.17);
          distance1G = dist(mouseX, mouseY,tg.x,tg.y);
      if (distance1G < radius1G) {
        tg.active = true;
      } else {
       tg.active = false;
      }
    }
  }
   if (puzzle2A.length > 0) {
    for (var i = 0; i < puzzle2A.length; i++) {
     
      var ka = puzzle2A[i];
      var radius2A=dist(ka.x,ka.y,ka.x-25,ka.y-1.67);
          distance2A = dist(mouseX, mouseY,ka.x,ka.y);
      if (distance2A < radius2A) {
        ka.active = true;
      } else {
       ka.active = false;
      }
    }
  }

  if (puzzle2B.length > 0) {
    for (var i = 0; i < puzzle2B.length; i++) {
     
      var kb = puzzle2B[i];
      var radius2B=dist(kb.x,kb.y,kb.x-25,kb.y-25);
          distance2B = dist(mouseX, mouseY,kb.x,kb.y);
      if (distance2B < radius2B) {
        kb.active = true;
      } else {
       kb.active = false;
      }
    }
  }
    if (puzzle2C.length > 0) {
    for (var i = 0; i < puzzle2C.length; i++) {
     
      var kc = puzzle2C[i];
      var radius2C=dist(kc.x,kc.y,kc.x-25,kc.y-1.67);
          distance2C = dist(mouseX, mouseY,kc.x,kc.y);
      if (distance2C < radius2C) {
        kc.active = true;
      } else {
       kc.active = false;
      }
    }
  }
   if (puzzle2D.length > 0) {
    for (var i = 0; i < puzzle2D.length; i++) {
     
      var kd = puzzle2D[i];
      var radius2D=dist(kd.x,kd.y,kd.x-55,kd.y-17.5);
          distance2D = dist(mouseX,mouseY,kd.x,kd.y);
      if (distance2D < radius2D) {
        kd.active = true;
      } else {
       kd.active = false;
      }
    }
  }
  if (puzzle2E.length > 0) {
    for (var i = 0; i < puzzle2E.length; i++) {
     
      var ke = puzzle2E[i];
      var radius2E=dist(ke.x,ke.y,ke.x-25,ke.y);
          distance2E = dist(mouseX,mouseY,ke.x,ke.y);
      if (distance2E < radius2E) {
        ke.active = true;
      } else {
       ke.active = false;
      }
    }
  }
   if (puzzle2F.length > 0) {
    for (var i = 0; i < puzzle2F.length; i++) {
     
      var kf = puzzle2F[i];
      var radius2F=dist(kf.x,kf.y,kf.x,kf.y-16.67);
          distance2F = dist(mouseX,mouseY,kf.x,kf.y);
      if (distance2F < radius2F) {
        kf.active = true;
      } else {
       kf.active = false;
      }
    }
  }
  if (puzzle2G.length > 0) {
    for (var i = 0; i < puzzle2G.length; i++) {
     
      var kg = puzzle2G[i];
      var radius2G=dist(kg.x,kg.y,kg.x,kg.y-16.67);
          distance2G = dist(mouseX,mouseY,kg.x,kg.y);
      if (distance2G < radius2G) {
        kg.active = true;
      } else {
       kg.active = false;
      }
    }
  }
  return false;
}
function mouseDragged() {
   if (puzzle1A.length > 0) {
    for (var i = 0; i < puzzle1A.length; i++) {
      var ta = puzzle1A[i];
     
      if (ta.active) {
        ta.x = mouseX;
       ta.y = mouseY;
       ta.color=ta.color+0.2;
        break;
      }
     
      }
    
  }
   if (puzzle1B.length > 0) {
    for (var i = 0; i < puzzle1B.length; i++) {
      var tb = puzzle1B[i];
     
      if (tb.active) {
        tb.x = mouseX;
       tb.y = mouseY;
       tb.color=tb.color+0.2;
        break;
      }
     
      }
    
  }
   if (puzzle1C.length > 0) {
    for (var i = 0; i < puzzle1C.length; i++) {
      var tc = puzzle1C[i];
     
      if (tc.active) {
        tc.x = mouseX;
       tc.y = mouseY;
       tc.color=tc.color+0.2;
        break;
      }
     
      }
    
  }

if (puzzle1D.length > 0) {
    for (var i = 0; i < puzzle1D.length; i++) {
      var td = puzzle1D[i];
     
      if (td.active) {
        td.x = mouseX;
       td.y = mouseY;
       td.color=td.color+0.2;
        break;
      }
     
      }
    
  }

  if (puzzle1E.length > 0) {
    for (var i = 0; i < puzzle1E.length; i++) {
      var te = puzzle1E[i];
     
      if (te.active) {
        te.x = mouseX;
       te.y = mouseY;
       te.color=te.color+0.2;
        break;
      }
     
      }
    
  }
  if (puzzle1F.length > 0) {
    for (var i = 0; i < puzzle1F.length; i++) {
      var tf = puzzle1F[i];
     
      if (tf.active) {
        tf.x = mouseX;
       tf.y = mouseY;
       tf.color=tf.color+0.2;
        break;
      }
     
      }
    
  }
    if (puzzle1G.length > 0) {
    for (var i = 0; i < puzzle1G.length; i++) {
      var tg = puzzle1G[i];
     
      if (tg.active) {
        tg.x = mouseX;
       tg.y = mouseY;
       tg.color=tg.color+0.2;
        break;
      }
     
      }
    
  }
    if (puzzle2A.length > 0) {
    for (var i = 0; i < puzzle2A.length; i++) {
      var ka = puzzle2A[i];
     
      if (ka.active) {
        ka.x = mouseX;
       ka.y = mouseY;
       ka.color=ka.color+0.2;
        break;
      }
      }
  }
     if (puzzle2B.length > 0) {
    for (var i = 0; i < puzzle2B.length; i++) {
      var kb = puzzle2B[i];
     
      if (kb.active) {
        kb.x = mouseX;
       kb.y = mouseY;
       kb.color=kb.color+0.2;
        break;
      }
      }
  }
     if (puzzle2C.length > 0) {
    for (var i = 0; i < puzzle2C.length; i++) {
      var kc = puzzle2C[i];
     
      if (kc.active) {
        kc.x = mouseX;
       kc.y = mouseY;
       kc.color=kc.color+0.2;
        break;
      }
      }
  }
if (puzzle2D.length > 0) {
    for (var i = 0; i < puzzle2D.length; i++) {
      var kd = puzzle2D[i];
     
      if (kd.active) {
        kd.x = mouseX;
       kd.y = mouseY;
       kd.color=kd.color+0.2;
        break;
      }
      }
  }
if (puzzle2E.length > 0) {
    for (var i = 0; i < puzzle2E.length; i++) {
      var ke = puzzle2E[i];
     
      if (ke.active) {
        ke.x = mouseX;
       ke.y = mouseY;
       ke.color=ke.color+0.2;
        break;
      }
      }
  }
if (puzzle2F.length > 0) {
    for (var i = 0; i < puzzle2F.length; i++) {
      var kf = puzzle2F[i];
     
      if (kf.active) {
        kf.x = mouseX;
       kf.y = mouseY;
       kf.color=kf.color+0.2;
        break;
      }
      }
  }
if (puzzle2G.length > 0) {
    for (var i = 0; i < puzzle2G.length; i++) {
      var kg = puzzle2G[i];
     
      if (kg.active) {
        kg.x = mouseX;
       kg.y = mouseY;
       kg.color=kg.color+0.2;
        break;
      }
      }
  }
  // Prevent default functionality.
  return false;
}

function hint1(){
    textSize(40);
    var b=0;
    b=b+30;
textStyle(BOLD);

fill(67+b,99+b,138+b);
text("DODO BIRD",100,400);
textStyle(ITALIC);
text("~1662",150,450);
}

 function hint2(){
    textSize(40);
    var b=0;
    b=b+30;
textStyle(BOLD);

fill(69+b,93+b,31+b);
text("BLUEBUCK",100,400);
textStyle(ITALIC);
text("~1800",150,450);
}

This Project is inspired by Chinese puzzle and is focused on two extincted animals. The player can click left or right side of the canvas to enter either of the two puzzles. Each puzzle is consist of 7 pieces and hints will show up while the players is “stuck”. After the puzzle is completed the name of the extincted specie will reveal.