Category: Final Project

Instruction:
-press blank space for next line
-press “a” when you see the line you like
-press “g” for generating your poem
(your poem will be on top but you can press blank space to keep skimming the rest of the poem)
//running this on website, you probably need to click the canvas first because the blank space key is conflict with the scrolling down on web page.

sketch

//Yingyang Zhou
//yingyanz@andrew.cmu.edu
//Final Project
//section A


var poemRilke = "After_the summer's_yield_Lord_it is_time_to let_your shadow_lengthen_on the sundials_and in the pastures_let_the rough winds_fly_As for_the final fruits_coax them_to roundness_Direct_on them_two days of warmer light_to hale them golden_toward their term_and harry_the last few drops_of sweetness_through the wine.";
var words = poemRilke.split("_");
var num = 0;
var numMy = 0;
var l = 0;
var speed = 1;
var myPoem = [];

var inc = 0.1;
var scl = 10;
var cols, rows;
var zoff = 0;
var particles = [];
var flowfield;


// function preload(){
//      whiteNoise = loadSound("forestsurroundings.wav"); 
// }



function setup() {
    createCanvas(400, 400);
    colorMode(RGB, 255);
    cols = floor(width / scl);
    rows = floor(height / scl);


    flowfield = new Array(cols * rows);

    for (var i = 0; i < 300; i++) {
        particles[i] = new Particle();
  } 
    background(255);

    // var button = createButton("generate my poem");
    // button.mousePressed(generatePoem);
}


function draw() {

  var yoff = 0;
  for (var y = 0; y < rows; y++) {
    var xoff = 0;
    for (var x = 0; x < cols; x++) {
      var index = x + y * cols;
      var angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
      var v = p5.Vector.fromAngle(angle);
      v.setMag(1);
      flowfield[index] = v;
      xoff += inc;
      stroke(0);
    }
    yoff += inc;
    zoff += 0.0003;
  }

  for (var i = 0; i < particles.length; i++) {
    particles[i].follow(flowfield);
    particles[i].update();    
    particles[i].edges();
    particles[i].show();
  }
    for(var i = 0; i < words.length; i++){
        textAlign(CENTER, CENTER); 
        fill(50, 50, 50, random(10));
        textFont("Segoe Script");  
        // stroke(50, 50, 50, random(10));
        strokeWeight(0.5);
        text(words[l-1], width/2, 20*(num+1) - speed);
    }

    if(num > 18){
      num = 0;
      reset();
    }
    if(l > words.length){
      l = 0;
    }

    // whiteNoise.play();
}
function reset(){
  
  flowfield = new Array(cols * rows);

  for (var i = 0; i < 300; i++) {
        particles[i] = new Particle();
  } 
  background(255);
}

function generatePoem(){
  background(220);
  // var randomLine;
  for(var i = 0; i < myPoem.length; i++){
    stroke(0);
    text(myPoem[i], width/2, 20*(i+1));
  }

}


function Particle() {
  this.pos = createVector(random(width), random(height));
  this.vel = createVector(0, 0);
  this.acc = createVector(0, 0);
  this.maxspeed = 4;
  this.h = 0;

  this.prevPos = this.pos.copy();

  this.update = function() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxspeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  this.follow = function(vectors) {
    var x = floor(this.pos.x / scl);
    var y = floor(this.pos.y / scl);
    var index = x + y * cols;
    var force = vectors[index];
    this.applyForce(force);
  }

  this.applyForce = function(force) {
    this.acc.add(force);
  }

  this.show = function() {
    stroke(this.h, 5);
    this.h = this.h + 1;
    if (this.h > 255) {
      this.h = 0;
    }
    strokeWeight(1);
    line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
    this.updatePrev();
  }

  this.updatePrev = function() {
    this.prevPos.x = this.pos.x;
    this.prevPos.y = this.pos.y;
  }

  this.edges = function() {
    if (this.pos.x > width) {
      this.pos.x = 0;
      this.updatePrev();
    }
    if (this.pos.x < 0) {
      this.pos.x = width;
      this.updatePrev();
    }
    if (this.pos.y > height) {
      this.pos.y = 0;
      this.updatePrev();
    }
    if (this.pos.y < 0) {
      this.pos.y = height;
      this.updatePrev();
    }

  }

}

function keyTyped(){ 
  if(key === ' '){
    num ++;
    numMy ++;
    l ++;
}
  if(key === 'a'){
    myPoem.push(words[l-1]);
    for(var i = 0; i < 5; i++){
        print(myPoem[i]);
    }

  }
  if(key ==='g'){
    generatePoem();
  }


}

For the final, I was initially had idea doing something more related to sound but realized that would be hard on WordPress website, so I change the idea a little bit.

I was always interested the what random can do for programming, it always turn out surprising. I had idea of gerating a poem of my own, from the pecies of poem/sentence/paragraph, poem is sometime a collection of different fragaments.

This program shows here as from an example, it is a poem I like very much from Rilke, a germany poet.

I use perlin noise keep running as a dynamic background, which I am very pleased I had it working.

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.

Instructions:

You can use keys from A-K to make animations appear. If you match the number of times you press the keys with characters from the same movie the background will show a pic of the movie along with playing a song from the movie.

This project has helped me understand more about the sound and loading images from imgur function as well as looping for animations.It was fun and exciting to see my animations come to life, but I was sadly unable to upload to the site because of my zip file being too big.  The hardest part of this project was figuring out how to make the animations appear and disappear by pressing the same key. To do this I created a function to track if numbers were odd or even and set a value for each time a key is pressed.

How to use:

You have to download all the following files and put it in the same folder. Also,  do not forget to open a local host file. The reason I have to do it this way is because the songs are really big files that are unable to be uploaded all at once. Archive contains the code, index, and animations.

Songs and Background from Studio Ghibli

Totoro

Spirited Away

Kiki’s Delivery Service

Howl’s Moving Castle

songs 2

songss

Archive

 

sketch

//Audrey Zheng
//Section A
//audreyz@andrew.cmu.edu




var cubex = 10;
var cubey = 20;
var cubeWidth = 20;

var cube;
var cube2;


var cx;
var cy;

var systems;


function setup() {
    createCanvas(300, 300);
    background(220);
   


    // osc = new p5.TriOsc();
    // osc.freq(880.0);
    // osc.amp(0.1);
    // osc.start();


    cx = width/2;
    cy = width/2;

    cube1 = new cube(200,30);
    cube2 = new cube(20,20);
    cube3 = new cube(150,150);

    
    systems = [];
    

}

function draw() {
    if (millis() > 2000) {
        //osc.stop();
        //noLoop();
    }

    //rect(cubex, cubey, cubeWidth, cubeWidth);

    cube1.display();
    cube2.display();
    cube3.display();

    for (i = 0; i <systems.length; i ++) {
        systems[i].display();
    }
    
    if (systems.length==0) {
        textAlign(CENTER);
        text("Click to add cubes", width/2, height/2);
    }

}

function cube(x,y) { //the cube
    this.x = x;
    this.y = y;

    this.width = 20;


    this.NW =[this.x, this.y];    
    this.NE = [x+this.width, this.y];

    this.SE = [this.x+this.width, y+this.width];

    this.SW = [this.x, y+this.width];

    this.larger = new square(x,y,this.width, this.width);
    this.smaller = new square(x + (cx -x) * 0.25, y + (cy - y) *0.25, this.width * 0.75, this.width * 0.75);


    this.NWs =[(this.x + (cx - this.x) * 0.20), this.y + (cy - this.y) * 0.20];
     
    this.NEs = [(this.x + (cx - this.x) * 0.20) + (this.width * 0.8), this.y + (cy - this.y) * 0.20];

    this.SEs = [(this.x + (cx - this.x) * 0.20) + (this.width * 0.8), this.y + (cy - this.y) * 0.20 + (this.width * 0.8)];

    this.SWs = [(this.x + (cx - this.x) * 0.20), this.y + (cy - this.y) * 0.20 +(this.width * 0.8)];




   
    this.display = function() {
        rect(this.x, this.y, this.width, this.width);
        rect(this.x + (cx - this.x) * 0.20, this.y + (cy - this.y) * 0.20, this.width * 0.8, this.width * 0.8);
        line(this.NW[0], this.NW[1], this.NWs[0], this.NWs[1]);
        line(this.NE[0], this.NE[1], this.NEs[0], this.NEs[1]);
        line(this.SE[0], this.SE[1], this.SEs[0], this.SEs[1]);

        line(this.SW[0], this.SW[1], this.SWs[0], this.SWs[1]);



    };

}

function square(x,y,w,h) {
    this.x = x;
    this.y = y;
    this.width = w;
    this.height = h;

    this.getCorners = function() {
        var NW =[x-w/2,y-h/2];
        //print(NW);
        var NE = [x+w/2, y-h/2];
        var SE = [x+w/2, y-h/2];
        var SW = [x-w/2, y+h/2];

        return [NW,NE,SE,SW];
    };
}


function mousePressed() {
    this.p = new cube(mouseX,mouseY);
    systems.push(p);
    print(systems);
}




function fillFront() {

}

function fillBottom() {

}

function fillTop() {

}

function fillLeft() {

}

function fillRight() {

}