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.

For my final project I am planning to create a jigsaw-puzzle game in which the players can piece together simple geometries to form shapes of extinct animals. After the puzzle is complete, there would be information about the animal popping up by the side of the completed form, and the silhouette would be replaced with the actual appearance of the animal. The “game” would start with a menu which allows the players to chose from several puzzles for different animals. Each puzzle is for only one pre-assigned animal and the puzzle pieces are also not randomly generated. There would most likely be only one solution for each puzzle. After the puzzle is completed there would be a button that allows the player to exit to the menu. I think this could be realized by creating objects of geometries and incorporating with “mousepressed” functions to move the geometries.

menu

puzzle

finished puzzle

For my final project I’m planning to do a jigsaw-puzzle interactive game for the players to get to know animals that had become extinct. Based on this idea I searched for art projects and artists that are related with deconstructing geometries and had some interesting results.

The first inspiration is this puzzle. The Earth Puzzle by generative design studio Nervous System has no defined borders. You put it together how you want it and you can just see where it takes you. This gave me the inspiration of making the game in the form of “puzzle” in order to provide better experiences for the players.

The second project I found interesting are these paper toys. The Japanese paper engineer Haruki Nakamura (previously) continues to design delightful toys using simple materials. This provided me an inspiration to deconstruct the animal shapes into simple geometries as puzzle pieces.

These two projects are both associated with animals and geometries, but the difference is that the first project is more focused on generating but the second is more focused on deconstructing an existing subject.

In the end, I decided for my final project to be a jigsaw-puzzle encyclopedia.

a world famous vocaloid music

Vocaloid is a singing voice synthesizer software. Its signal processing part was developed through a joint research project led by Kenmochi Hideki at the Pompeu Fabra University in Barcelona, Spain, in 2000, and originally was not intended to be a full commercial project. However now due to the popularity specific anime-character design representing each of the sound libraries, more and more individual music creators, mostly in Japan, and anime lovers start to join the community of Vocaloid producers/lovers in producing music pieces with or even for these libraries. In 10 years a great amount of outstanding music pieces are created and the community has been big enough to become a culture.

sketch

 
/*
week 10-assignment-b
Xindi Lyu
Section A
xindil@andrew.cmu.edu
*/
 var T1
 var T2
 var T3
 var T4
 //make the hexagons
 
function setup(){
createCanvas(600,400);
background(255);
T1=makeTurtle(width/2,height/2);
T1.setColor(color("pink"));
T1.setWeight(5);
T1.penDown();
T2=makeTurtle(width/20,height/4);
T2.setColor("green");
T2.setWeight(5);
T2.penDown();
frameRate(10);
T3=makeTurtle(width*9/10,height/2);
T3.setColor(color("blue"));
T3.setWeight(5);
T3.penDown();

}
//get the hexagons to orient in a golden ratio spiral
function draw(){
  T1.forward(6);
  T1.left(random(0,6));
    T1.turnToward(mouseX,mouseY,10);
    T2.forward(6);
  T2.left(random(0,6));
    T2.turnToward(mouseX,mouseY,10);

 T3.forward(6);
  T3.left(random(1,6));
    T3.turnToward(mouseX,mouseY,10);





}



function turtleLeft(d) {
    this.angle -= d;
}
 
 
function turtleRight(d) {
    this.angle += d;
}
 
 
function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}
 
 
function turtleBack(p) {
    this.forward(-p);
}
 
 
function turtlePenDown() {
    this.penIsDown = true;
}
 
 
function turtlePenUp() {
    this.penIsDown = false;
}
 
 
function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}
 
 
function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}
 
 
function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}
 
 
function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}
 
 
function turtleSetColor(c) {
    this.color = c;
}
 
 
function turtleSetWeight(w) {
    this.weight = w;
}
 
 
function turtleFace(angle) {
    this.angle = angle;
}
 
 
function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

For this project I created three turtles following the cursor while maintaining their own circulating procedure. It resulted in a very interesting knotting effect.

sketch
For this project I tried to create a sense of distance between the mountains by assigning them gradient colors and giving them different speeds and details. Also I incorporated the hot air balloons I made in this drawings and made them gradually move downwards as well as moving left.

 
/*
Project 10
Xindi Lyu
Section A
xindil@andrew.cmu.edu
*/

var tspeed1=0.0001;
var tdetail1=0.005;
var tspeed2=0.00006;
var tdetail2=0.01;
var tspeed3=0.00004;
var tdetail3=0.05;
var ballons= [];

function setup(){
    createCanvas(500,600);
    frameRate(10);
    for(var i=0; i<10; i++){
        var rx = random(width);
        var ry = random(0,height/2)
        ballons[i]=makeBallons(rx,ry);
    }

    }

function draw(){

    background(250,237,229);
    //gradiant background
  for(var u=0; u<height;u++){
    stroke(250+0.05*u,237+0.05*u,229+0.05*u);
    line(0,u,width,u );

}
//the far away mountains
         push();
 fill(212,179,160);
   beginShape();
   noStroke();
    for(k=0;k<width;k++){
        var t=(tdetail3*k)+(millis()*tspeed3);
        var h=map(noise(t),0,2.5,0,height/0.53);
        vertex(k,h);
    }
    
    vertex(width,height);
    vertex(0,height);
    endShape();
    pop();



//the mountains in the midle
     push();
 fill(197,158,141);
   beginShape();
   noStroke();
    for(a=0;a<width;a++){
        var c=(tdetail2*a)+(millis()*tspeed2);
        var b=map(noise(c),0,1.8,0,height/0.4);
        vertex(a,b);
    }


    vertex(width,height);
    vertex(0,height);
    endShape();
    pop();



 

//the close mountains


   push();
 fill(173,146,135);
   beginShape();
   noStroke();
    for(x=0;x<width;x++){
        var t=(tdetail1*x)+(millis()*tspeed1);
        var y=map(noise(t),0,1,height/2,height);
        vertex(x,y);
    }


    vertex(width,height);
    vertex(0,height);
    endShape();
    pop();
        
updateAndDisplayballons();
removeballons();
addballons();

 


}

function updateAndDisplayballons(){
for(i=0;i<ballons.length;i++){
   ballons[i].move();
   ballons[i].display();

}
}

function removeballons(){
    var ballonsToKeep=[];
for(i=0;i<ballons.length;i++){
    if(ballons[i].x>0){
        ballonsToKeep.push(ballons[i]);

    }
}

}

function addballons(){
    var newBallonLikelihood = 0.025
    if(random(0,1)<newBallonLikelihood){
        ballons.push(makeBallons(width,random(0,height/2)))
    }
}

function ballonsMove(){
    this.x+=this.speed;
    this.y+=this.speed*(-0.6);
}

function ballonsDisplay(){
    translate(this.x,this.y);
//The strings
    strokeWeight(0.7);
    stroke(86,85,93);
    line(5,25,5,30);
    line(10,25,10,30);
    line(15,25,15,30);

//The balloon
    noStroke();
    ellipse(10,10,20,20);
    quad(0,10,20,10, 15, 25,5,25);
    //The basket
    rect(5,30,10,8);
}

function makeBallons(birthLocationX,birthLocationY){
    var ballons={x:birthLocationX, y:birthLocationY,
        speed: random(-0.5,-0.6),
        move:ballonsMove,
        display:ballonsDisplay}

        return ballons;

}

Female Austrian artist Lia’s practice includes multiple medias, including videos, performance, software, sculpture, projections and digital applications. Her works combine traditional painting and drawing methods with the aesthetics of digital images. Since she started to produce her art works from 1995, she has been recognized a pioneer at software and net art. She uses code as her primary material of producing art works, which translates her concepts into a written structure that becomes a machine from which visual messages are generated real-time. This particular process could also be considered as a conversation between her as an artist and the “machine”.

Above is one of her projects “floralis digitalis”. The digital “flowers” are generated randomly and always looked different. This art piece not only consists of the dynamic nature of digital art but also has an elegance and truthfulness within. The way the flowers are generated by thin lines creates a sense of transparency and the color choices fit and communicated the theme of the project very well. As we watch LIA’s flowers sprouting and growing, we discover that beyond their beauty, sweetness, an their apparent banality, and their feminine nature.

sketch

 
/*
Project 09
Xindi Lyu
Section A
xindil@andrew.cmu.edu
*/

var x
var y
var me;
var Color=["indigo","cyan","grey","yellow","white","pink","claret","green"]
var numbers=[0,1,2,3,4,5,6,7]
var a

function preload() {
    //load in my self portrait
    var URL = "https://i.imgur.com/pjDKzf3.jpg";
    me = loadImage(URL);
}

function setup() {
    //drawing the image
    createCanvas(300, 480);
   frameRate(150);
    me.loadPixels();
    
}

function draw() {
    //Get the colors of the pixels
    x = random(width);
    y = random(height);
    var mx = constrain(floor(x), 0, width-3);
    var my = constrain(floor(y), 0, height-3);
    var theColorAtLocationXY = me.get(mx, my);

    //Enable mouse interactions to gerate stroke elements
    var mousecolor = me.get(mouseX, mouseY);
    //Using lines as pixels
    stroke(theColorAtLocationXY);
    strokeWeight(1);
    line(x+random(-20,20),y+random(-20,20),x+random(-20,20),y+random(-20,20));
     
noStroke();
fill(theColorAtLocationXY)
    //Use rectangles as pixels along with the lines
    rect(x,y, random(5,10),random(5,10));
    a=random(numbers);
    //Create mosaica effect with mouse
fill(mousecolor);
     strokeWeight(0.7);
        stroke(Color[a]);
        rect(mouseX,mouseY,random(5,10),random(5,10));
    }

I used a photo of myself as the base image of this project and experimented with two different strokes to generate a dynamic effect in the result portrait. Also I incorporated an interactive element into the program for the viewers to create “mosaic” effects on the drawing.

(Original Image)

(Stroke effects)

Mosaic effects

The rendering video by Alex Roman

While scrolling through my peer’s looking outwards blog posts, my attention was drawn by Xiaoying Meng’s post about photo-realistic renderings generated by computational algorithms. I generally agree with Xiaoying that the renderings done by Alex Roman is not only exquisitely detailed and realistic but also beautifully displayed with an artistic effect that is nearly impossible to be produced by pure photography. The algorithm mainly simulated the textures, the volume, as well as the light and atmosphere in this project. What’s critical about this simulation is that this algorithm is also able to simulate the behavior of the materials under certain circumstances of lighting, while also the lights themselves were generated accurately according to climate and time settings in the software, displayed as different intensities and different colors as it is in real life. What also is interesting about this computational rendering is that the “viewer” can be positioned at any any location with out the physical restraints, which is why lot of the best renderings have their incredible angles of viewing.

Brian house is an artist with both computer science and sound studies background, which influence his practices and works. His recent concentrations are AI, technology and urban rats. His works explores a great range of topics including the rhythm of body, technology and environment. His art pieces usually display not only audibly through sound tracks but also visually through installations or digital arts. The combination of the installations and the sound track express his idea as a whole piece. These combinations are mostly achieved by technology and Artificial Intelligence.

In his presentation he presented his works from the most recent to his earliest works, explaining each the back ground stories of each:his motivation, inspirations, how he did his work, where was he coming from and what ideas were he expressing through his arts. That made me easily understood the message he was trying to spread through his works.

I find his works very inspiring for the way he combines a visual installation with sound arts, allowing people to understand him with two different senses at the same time. It showed me how dynamic an art can be displayed with the power of technology.