[OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

Sadie Johnson Final Project

sajohnso@andrew.cmu.edu — Wed, 21 Dec 2016 05:58:29 +0000


var gameScreen;
var one, two, three, four, five, six, seven, eight, nine;
//var px = random(800);
var py = random(500);
var Y_AXIS = 1;


function setup() {
	createCanvas(800, 500);
	one = false;
	two = false;
	three = false;
	four = false;
	five = false;
	six = false;
	seven = false;
	eight = false;
	nine = false;
    noStroke();
    frameRate(3);
  // Create objects

  
 
}

function preLoad(){
	 // set gameStarted equal to false
	gameScreen = 0;
	sound1 = loadSound('Himitsu track.wav');
	sound2 = loadSound('coldFunk.wav');
	sound3 = loadSound('iceBeat.wav');
	sound4 = loadSound('game boy startup.wav');
	sound5 = loadSound('japanese-news.wav');
	sound6 = loadSound('child-laughing.wav');
	sound7 = loadSound('calm rain.wav');
	sound8 = loadSound('dialtone.wav');
	sound9 = loadSound('tamagotchi.wav');

}

function draw() {


	//~~~~~~DRAWING OPENING SCREEN~~~~~~
	if (gameScreen == 0){
		initScreen();
	}
	else{
	  if ((key == '2') & (one == false) && (three == false)) {
    key2animation();
    sound2.play();
    two = true;
  }
    if ((key == '3') & (one == false) && (two == false)) {
    key3animation();
    sound3.play();
    three = true;
  }
	if ((key == '4') & (five == false) && (six == false)) {
    key4animation();
    sound4.play();
    four = true;
  }
  if ((key == '5') & (four == false) && (six == false)) {
    key5animation();
    sound5.play();
    five = true;
  }
 if ((key == '6') &  (five == false) && (four == false)) {
    key6animation();
    sound6.play();
    six = true;
  }
if ((key == '7') & (eight == false) && (nine == false)){
	key7animation();
	sound7.play(0);
	seven = true;
}
if ((key == '8') & (nine == false) && (seven == false)){
	key8animation();
	sound8.play();
	eight = true;
}

if ((key == '9') & (seven == false) && (eight == false)){
	key9animation();
	sound9.play();
	nine = true;
}
}
}

function keyTyped() {
  if ((key == '1') & (two == false) && (three == false)) {
    key1animation();
    sound1.play();
    one = true;
  }
 
}
 
function mousePressed(){
  if(gameScreen == 0) {
    gameScreen =1;
    background('#C2D5FF');
  }
}


  function initScreen() {
  	//	background('#F8E9D6')//off-white
  		background('#FCACDF'); //pink, i think
  		fill('#2B4568'); //dark blue
	textSize(100);
	text("ミュージカルキーボード", 5, height/4);
		fill('#26DFEE');//blue
	text("ミュージカルキーボード", 5-3, (height/4)-3);
		textSize(50);
		fill('#26DFEE');//blue
	text("DIGITAL KEYBOARD",width/8+40-3, height/4+23);
 		fill('#2B4568'); //dark blue
	text("DIGITAL KEYBOARD",width/8+40, height/4+20);
  		// get distance between mouse and circle
  var distance = dist(mouseX, mouseY, width/2-40, height/2-10);
  	 if(distance < 50) {
    isOverCircle = true;

  } 
  else {
    isOverCircle = false;
  }
  
  // draw a circle
  ellipseMode(CENTER);

  if(isOverCircle == true)
  {

    fill(100);
    cursor(HAND);
  } else {
    fill(200); 
    cursor(ARROW); 
  }
    fill('#EDECE7');//white
  ellipse(width/2-40, height/2-10, 170, 160);

  stroke('#C45A02');//dark yellow
  strokeWeight(4);
  fill('#FDA102');//medium yellow
  ellipse(width/2-20, height/2, 80, 80);


    
}




function key1animation(){

	//draw blue circles
	noStroke();
   	fill('#1803FF');
 for (i=0; i<15; i++){
  	ellipse(random(width), random(height), 10,10);
 }

 //draw red squares
 for(s=0; s<15; s++){
 	push();
 	fill('#FF0374');
 	rotate(random(1.5));
 	rect(random(800), random(500), 10,10);
 	pop();
 }

 //draw yellow triangles
 for(s=0; s<15; s++){
 	push();
 	fill('#FFFF00');
 	rotate(random(-1));
 	var x=random(800);
 	var y=random(500);
 	triangle(x-10, y, x, y-15, x+10, y);
 	pop();
 }

}

function key2animation(){
	fill('#D0D9D8');
	triangle(0,-50,0,height,width-50,height);
	stroke(51);

	var unit = width/16;
		for (j=1; j<18; j++){
		line(unit*j, 0, unit*j, height);
		}
		for (s=1; s<18; s++){
		line(0, unit*s, width, unit*s);
	}

		
}

function key3animation(){
    for (j=1; j<3; j++){
    fill('#F8CEDA');//pink
    ellipse(random(width),random(height),40,40);
    fill('#C7FFFE'); //bright blue
    ellipse(random(width),random(height),40,40);
    fill('#FFF421');
    ellipse(random(width),random(height),40,40);
}
}

function key4animation(){

	angleMode(DEGREES);
	var rectLength = width/2;
	var rectHeight = height/10;
	var shade = 5;

	fill('#1803FF');//blue
	rect(width/2,50,rectLength,rectHeight);
	 fill('#FCACDF');//pink
	 rect(width/2-shade,50-shade,rectLength,rectHeight);
	 if(frameCount%2==0){
	 	fill('white');
	 	textSize(50);
	 	text("S-U-M-M-E-R",width/2+shade,87);
	 }

 push();
  	rotate(30);
 	fill('#1803FF');//blue
	rect(50,50,rectLength,rectHeight);
	rect(100,70+rectHeight,rectLength,rectHeight);

	 fill('#FCACDF');//pink
	 rect(50-shade,50-shade,rectLength,rectHeight);
	rect(100-shade,70+rectHeight-shade,rectLength,rectHeight);
	pop();


}
function key5animation(){
	var moonSize=100;
    noStroke();

    //DRAWS THE ECLIPSE EFFECT BEHIND THE MOON
   for (var i=0; i<10; i++){ //the glow is made of 20 overlapping circles
        fill(255,211,67,i);// semi-transparent yellow glow
        ellipse(width/5, height/5-7, moonSize+(10*i), moonSize+(10*i));
    }

    //DRAWS OPAQUE HIGHLIGHT BEHIND MOON
    fill('#EFEEE9'); //opaque, light yellow
    ellipse(width/5, height/5-3, moonSize+2, moonSize+2);

    //DRAWS THE MOON
    fill('#F8CEDA'); //light orange
    ellipse(width/5, height/5, moonSize, moonSize);

  
}
function key6animation(){
	var x = 0;
	var y = 0;
	var unit =20;
	if (frameCount%2==0){
	fill('#1803FF');//blue
	rect(x,y,width*.75,40);
	fill('#FF0374');//red
	rect(x+unit,y+40+unit,width*.75,40);
	fill('#FFFF00');//yellow
	rect(x+unit*2,y+80+unit*2,width*.75,40);
}
	 else{
		fill('#FFFF00');//yellow
	
	rect(x,y,width*.75,40);
	fill('#1803FF');//blue
	
	rect(x+unit,y+40+unit,width*.75,40);
	fill('#FF0374');//red
	rect(x+unit*2,y+80+unit*2,width*.75,40);
	}

}

function key7animation(){
	fill('#FE0097')//pink
	textSize(100);
	push();
	rotate(frameCount / -100.0);
	text("アテネの夕焼け", 0, height/2);
	pop();
}

function key8animation(){
	 if(frameCount%2==0){
	 var c1 = color('#F5D0D7');
  	var c2 = color('#7CF0CD');
  }
  	 if(frameCount%2==1){
  	 	var c2 = color('#F5D0D7');
  	var c1 = color('#7CF0CD');
  }
	setGradient((width/2)-100, (height/2)-100, 200, 200, c1, c2, Y_AXIS);

}
function key9animation(){
	var diskSize=150;
	var roundedness =10; //how rounded corners of rectangles are
	fill('#3D3C41');//grey
rect(width/2, height/2, diskSize+20, diskSize,roundedness);
fill('#C2C1BD');//light grey
rect(width/2+20, height/2, diskSize-30, 40,roundedness);
fill('#424146');//medium grey
rect(width/2+20, height/2, 25, 40);
rect(width/2+100, height/2+5, 15, 30);
fill('#FFFFFF');//white
rect(width/2+20, height/2+70, diskSize-10, diskSize/2,roundedness);
	}



function setGradient(x, y, w, h, c1, c2, axis) {

  noFill();

  if (axis == Y_AXIS) {  // Top to bottom gradient
    for (var i = y; i <= y+h; i++) {
      var inter = map(i, y, y+h, 0, 1);
      var c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x+w, i);
    }
  }  
}

Charlie Mo Final

cdmo@andrew.cmu.edu — Tue, 13 Dec 2016 22:37:37 +0000

link to project: http://charliemo.neocities.org/raining%20night/index.html

Sorry about the late hand-in, this is unacceptable but my goal is to make the best project I possibly can.

I created a world in a bleak distant future where overpopulation and reliance of technology becomes common place. The visuals are inspired by Japanese animator Hayao Miyazaki, who produced the likes of Spirited Away and Howl’s Moving Castle, and I attempted to replicate the style by combining traditional Asian architecture with apartment building commonly found in crowded urban living environments.

*Spacebar to fly!*

sketch

var bird;
var pipes = [];
var build1;
var build2;
var build3;
var build4;
var cloud1;
var cloud2;
var pole;
var drops =[];
//var sound;


function preload(){
  
  build1 = loadImage("assets/building1.png");
  build2 = loadImage("assets/building2.png");
  build3 = loadImage("assets/building3.png");
  build4 = loadImage("assets/building4.png");
  cloud1 = loadImage("assets/cloud.png");
  cloud2 = loadImage("assets/cloud3.png");
  cloud3 = loadImage("assets/cloud4.png");
  pole   = loadImage("assets/pole2.png");
  skyline= loadImage("assets/skyline3.png");
  //rain = loadSound("assets/rain.mp3");
}

function setup() {
  createCanvas(600,800);
    //spawns bird and in setup() so that 
    //the bird can be updated
  bird = new Bird();
    //spawns rainfall
  for (var i = 0; i < 500; i++) {
    drops[i] = new Drop();
  }
  
}

function draw() {
  
  fill(255);
  background(200)
    //background image
  image(skyline,-500,0)
  
  for (var i = 0; i < drops.length; i++) {
    drops[i].fall();
    drops[i].show();
  }

  for (var b = pipes.length-1; b >= 0; b--){
    pipes[b].show();
    pipes[b].update();

  }
    //determines the rate at which
    //sprites are added to the array
  if (frameCount%300 == 0){
    pipes.push(new Build1())
  }
  if (frameCount%200 == 0){
    pipes.push(new Build2())
  }
  if (frameCount%100 == 0){
    pipes.push(new Build3())
  }
  if (frameCount%350 == 0){
    pipes.push(new Build4())
  }
  if (frameCount%500 == 0){
    pipes.push(new Cloud1())
  }
  if (frameCount%400 == 0){
    pipes.push(new Cloud2())
  }
  if (frameCount%320 == 0){
    pipes.push(new Pole())
  }
  if (frameCount%300 == 0){
    pipes.push(new Pole2())
  }
  if (frameCount%310 == 0){
    pipes.push(new Pole3())
  }
  
  bird.update();
  bird.show();
}

    //press to make character fly
function keyPressed(){

  if (key == ' '){
    bird.up();
    //sound.play();
    //calls from Bird function
  }

}

    //determines speed and positioning of the sprites
function Cloud2(){
this.x = width*2;
this.velocity = 0;
this.speed = 3;

  this.show = function(){
    image(cloud2,this.x,50)
  }
 
  this.update = function(){
    
    this.x -= this.speed;
    
  this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
  }
}
function Build1(){
 this.x = width*2;
 this.velocity = 0;
 this.speed = 2.5;

  this.show = function(){
    
      image(build1,this.x,250)

  }
  
  
  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Build2(){
 this.x = width*2;
 this.w = random(70,120);
 this.velocity = 0;
 this.speed = 2.5;

  this.show = function(){
    
      image(build2,this.x,400)

  }

  
  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Build3(){
 this.x = width*2;
 this.w = random(70,120);
 this.velocity = 0;
 this.speed = 2.5;

  this.show = function(){
    
      image(build3,this.x,400)

  }

  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Build4(){
 this.x = width*2;
 this.w = random(70,120);
 this.velocity = 0;
 this.speed = 2.5;

  this.show = function(){
    
      image(build4,this.x,100)

  }

  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Cloud1(){
this.x = width/6;
this.w = random(70,120);
this.velocity = 0;
this.speed = 1;

  this.show = function(){
    
      image(cloud1,this.x-500,600)

  }

  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Pole(){
this.x = width*2;
this.w = random(70,120);
this.velocity = 0;
this.speed = 2.5;

  this.show = function(){
    
      image(pole,this.x,230)

  }
  
  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Pole2(){
this.x = width*2;
this.w = random(70,120);
this.velocity = 0;
this.speed = 2.5;

  this.show = function(){
    
      image(pole,this.x,300)

  }

  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}
function Pole3(){
this.x = width*2;
this.w = random(70,120);
this.velocity = 0;
this.speed = 2.5;

  this.show = function(){
    
      image(pole,this.x,350)

  }
  
  this.update = function(){
    
    this.x -= this.speed;
    
    
    this.offscreen = function() {
    if (this.x < -this.w) {
      return true;
    } else {
      return false;
    }
  }
    
  }
}


    //CHARACTER
function Bird() {
  this.y = height / 2;
  this.x = 300;

  this.gravity = 0.2;
  this.lift = -30;
  this.velocity = 0;

  this.show = function() {
    //character creation
    fill(55);
    noStroke();
    rectMode(CENTER);
    rect(this.x,this.y-30,2,80);
    arc(this.x,this.y-40,50,50,-PI,PI);
    fill(0);
    ellipse(this.x, this.y, 32, 32);
    fill(250, 222, 222);
    ellipse(this.x-5,this.y+2,5,5);
    ellipse(this.x+8,this.y+2,5,5);
  }

  this.up = function() {
    //determines the up speed in terms of 
    //the already established this.lift variable
    this.velocity += this.lift;
  }

  this.update = function() {
    //simulate gravity and updates this.y with 
    //new position
    this.velocity += this.gravity;
    this.velocity *= 0.9;
    this.y += this.velocity;
    
    //set boundaries on the canvas
    if (this.y > height) {
      this.y = height;
      this.velocity = 0;
    }

    if (this.y < 0) {
      this.y = 0;
      this.velocity = 0;
    }
  }
}

    //RAIN
function Drop() {
    //random x position
  this.x = random(width);
    //random y position from beyond the canvas
  this.y = random(-500, -50);
  this.len = random(10,20);
  this.yspeed = random(4,10)

  this.fall = function() {
    
      //speed at which the drop will fall
    this.y = this.y + this.yspeed;
      //simulate gravity
    var gravity = 0.4
    this.yspeed = this.yspeed + gravity;

    if (this.y > height) {
        //resets raindrops 
      this.y = random(-200, -100);
      this.yspeed = random(4,10)
    }
  }

  this.show = function() {
    strokeWeight(1);
    stroke(235);
    line(this.x, this.y, this.x, this.y+this.len);
  }
}

AndrewWang-Final-Project-PaintTool

Andrew — Sun, 11 Dec 2016 04:44:03 +0000

*Sorry this was submitted a day late (I still have a grace day if that counts), I was really busy and thought I had submitted it earlier. I actually finished it last week, but wanted to hold off submitting it in case I decided to change anything.

I deployed the project using Zeit onto https://ns-dmpwapvltg.now.sh/

For my project I tried to replicate a paint program that allows the users to draw things using tools. I started with the generic tools such as pencil, rectangle, ellipse, eraser, text, and line, creating an object to add to an array that is drawn over each time draw() is ran.

I then created a way to both undo and redo objects using z and y by popping the last element in the drawn array onto a stack, and moving pieces from the stack back to the array when redoing. The stack is cleared if the user draws again. I also made it possible to save the image by pressing s, redrawing over the text tool bar to allow for a cleaner saved image.

I used prompt in order to get the values that the users would need to input when using these tools, otherwise piping to a default value to avoid nils. If I had more time I would have created form fields that the user would be able to interact with more freely and less intrusively.

files:

104-project

zhuoyinl-final project

Zhuoying Lin — Sat, 10 Dec 2016 06:14:49 +0000

For this project, I made a abstract keyboard that generate animations for each note, using some conmic icon to represent traditional keyboard.

sketch

var osc;
var env;
var dir = 1;
var speed = 10;
var diam = 20;
var col;
var isRed = [] 
var x1 = 50
var x2 = 25;
var y2 =25;
var x3 = 50;
var y3 = 0;
var x4 = 50;
var y4 = 800;
var x5 = 400;
var y5 = 0;
var x6 = 0;
var y6 = 400;
var x7 = 400;
var y7 = 40;
var terrainSpeed1 = 0.0005;
var terrainDetail1 = 0.0001227;


  
function setup() {
  createCanvas(800,800)
  osc = new p5.Oscillator();
  osc.setType('sine');//set sound type

  for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(0,height/4);     
    }//set up background flow   
  frameRate(100);
   
}

function draw() {
  background(254,175,188)

  

  push();
  fill(154,231,217); 
  beginShape(); 
  noStroke();
  for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
      var y = map(noise(t), 0,1, height/4, height*3/4);
      vertex(x, y); 
    
  }
  vertex(width, height);
  vertex(0,height);
  endShape();
  pop();//background moving pattern


  drawKeyBoard();
  if (keyCode==49){   
      drawCircle(); 
  }else if (keyCode==50){
    drawball1();
  }else if (keyCode==51){
    drawLine();
  }else if (keyCode==52){
    drawball2();
  }else if (keyCode==53){
    drawSquare();
  }else if (keyCode==54){
    drawball3();
  }else if (keyCode==55){
    drawRing();
  }else if (keyCode==56){
    drawball4();
  }else if (keyCode==57){
    drawSquare2();
  }else if (keyCode==48){
    drawduck();
  }//assign animation for each sound

  push();
  strokeWeight(0);
  stroke(0);
  textSize(20);
  textStyle(BOLD);
  textFont("Helvetica");
  text("Press number key to start", 280, 760);
  pop();//instruction
 
}


//make each animation
function drawCircle(){
  
  noStroke();
  fill(col);
  ellipse(width/2, height*2/5, diam, diam);

  diam += dir * speed;
  if (diam > 200) {
      dir = -dir;
      diam = 200;
  } else if (diam < 0) {
      dir = -dir;
      diam = 0;
  }
     
}

function drawLine(){
  push();
  translate(width/2,height*2/5);
  for(var j = 0;j<10;j++){
    rotate(radians(36));
    stroke(163,228,37);
    strokeWeight(5);
    line(0,0,x1,0);
    x1+=dir*speed*0.08
    if (x1 > 200) {
      dir = -dir;
      x1 = 200;
    } else if (x1 < 0) {
      dir = -dir;
      x1 = 0;
    }

  }
  pop();
}

function drawRing(){
  stroke(154,231,217);
  strokeWeight(10);
  noFill();
  ellipse(width/2, height*2/5, diam, diam);
  diam += dir * speed;
  if (diam > 200) {
      dir = -dir;
      diam = 200;
  } else if (diam < 0) {
      dir = -dir;
      diam = 0;
  }
}

function drawSquare(){
  push();
  translate(width/2,height*2/5);
  noStroke();
  fill(207,214,251);
  quad(-x2,-y2,x2,-y2,x2,y2,-x2,y2);
  
  x2 += dir * speed;
  y2 +=dir*speed;
  if (x2 > 200) {
      dir = -dir;
      x2 = 200;
  } else if (x2 < 0) {
      dir = -dir;
      x2 = 0;
  }

}

function drawSquare2(){
  push();
  translate(width/2,height*2/5);
  stroke(112,208,236);
  strokeWeight(5);0
  noFill();
  quad(-x2,-y2,x2,-y2,x2,y2,-x2,y2);
  
  x2 += dir * speed*0.9;
  y2 +=dir*speed*0.9;
  if (x2 > 200) {
      dir = -dir;
      x2 = 200;
  } else if (x2 < 0) {
      dir = -dir;
      x2 = 0;
  }

}

function drawball1(){
  noStroke();
  fill(255,240,162);
  ellipse(x3, y3, 50, 50);
  x3 += dir * speed*2;
  y3 +=dir*speed*2;
  if (x3 > 800) {
      dir = -dir;
      x3 = 800;
  } else if (x3 < 0) {
      dir = -dir;
      x3 = 0;
  }

}

function drawball2(){
  noStroke();
  fill(166,159,255);
  ellipse(x4, y4, 50, 50);
  x4 += dir * speed*2;
  y4 +=-1*dir*speed*2;
  if (x4 > 800) {
      dir = -dir;
      x4 = 800;
  } else if (x4 < 0) {
      dir = -dir;
      x4 = 0;
  }

}

function drawball3(){
  noStroke();
  fill(166,108,148);
  ellipse(x5, y5, 50, 50);
  x5 += dir * speed*0.5;
  y5 += dir*speed*2;
  if (y5 > 800) {
      dir = -dir;
      y5 = 800;
  } else if (y5 < 0) {
      dir = -dir;
      y5 = 0;
  }
}

function drawball4(){
  noStroke();
  fill(255,115,118);
  ellipse(x6, y6, 50, 50);
  x6 += dir * speed*2;
  y6 += dir*speed*0.5;
  if (x6 > 800) {
      dir = -dir;
      x6 = 800;
  } else if (x6 < 0) {
      dir = -dir;
      x6 = 0;
  }
}

function drawduck(){
  noStroke();
  fill(255,115,118);
  duck(x7, y7, 50, 50);
  x7 += dir * speed*2;
  y7 += dir*speed;
  if (x7 > 800 ) {
      dir = -dir;
      x7 = 800;
  } else if (x7 < 0) {
      dir = -dir;
      x7 = 0;
  }
}



//monster keyboard
function drawKeyBoard(){
  var index = map(keyCode,48,57,0,9);
  for (var i = 0;i<9;i++){
      monster(i*80+40,height*5/6,-25);
      if (keyIsPressed===true){
        monster((index-1)*80+40,height*5/6,-50*index);
    }else{
      monster(i*80+40,height*5/6,-25);
    }
  }
}

// animation pattern-duck
function duck(dx, dy) {//draw duck
    push();
    translate(dx, dy);
    stroke(255, 183, 0);
    strokeWeight(5);
    line(-15, 60, -15, 85);//foot1
    line(-5, 60, -5, 85);//foot2
    stroke(154, 231, 217);
    strokeWeight(40);
    line(0, 0, 0, 30);//neck
    strokeWeight(40);
    line(-30, 40, 0, 40);//body
    strokeWeight(10);
    line(-55, 40, -30, 40);//tail
    stroke(255, 183, 0);
    strokeWeight(7);
    line(10, 7, 25, 7);//mouse
    line(10, 14, 25, 14);//mouse
    fill(255);
    noStroke();
    ellipse(0, 0, 10, 10);//eye
    fill(0);
    noStroke();
    ellipse(1, 0, 5, 5);



    pop();
}


//keyboard pattern-monster
function monster(mx, my,earl) {//draw monster
    push();
    translate(mx, my);
    stroke(137,78,115);
    strokeWeight(5);
    line(25, earl, 25, 0);//ear1
    line(45, earl, 45, 0);//ear2
    line(30, 30, 85, 40);//tail
    stroke(244,179,220);
    strokeWeight(30);
    line(10, 0, 50, 0);//monster head
    strokeWeight(5);
    line(35, 40, 35, 60);//foot1
    line(45, 40, 45, 60);//foot2
    line(55, 40, 55, 60);//foot3
    line(65, 40, 65, 60);//foot4
    strokeWeight(50);
    line(50, 10, 50, 30);//monster body
    fill(255);
    noStroke();
    ellipse(22, 0, 15, 15);//left eye
    ellipse(42, 0, 15, 15);//right eye
    fill(0);
    noStroke();
    ellipse(20, 0, 5, 5);//eyeball1
    ellipse(40, 0, 5, 5);//eyeball2
    pop();
}

//assign sound to each key
function keyPressed(){

  if (keyCode == 49){
     osc.freq(174);
     osc.amp(0);
     osc.start();
     osc.stop(0.25);
     osc.amp(1, 0.05);
     col = ('yellow');

  }else if (keyCode == 50){
     osc.freq(196);
     osc.amp(0);
     osc.start();
     osc.stop(0.25);
     osc.amp(1, 0.05);
     col = ('blue');
  }else if (keyCode == 51){
     osc.freq(220);
     osc.amp(0);
     osc.start();
     osc.stop(0.25);
     osc.amp(1, 0.05);
     col = ('');
  }else if (keyCode == 52){
     osc.freq(233);
     osc.amp(0);
     osc.start();
     osc.stop(0.25);
     osc.amp(1, 0.05);
     col = ('blue');
  }else if (keyCode == 53){
     osc.freq(261);
     osc.amp(0);
     osc.start();
     osc.stop(0.25);
     osc.amp(1, 0.05);
     col = ('blue');
  }else if (keyCode == 54){
     osc.freq(293);
     osc.amp(0);
     osc.start();
     osc.stop(0.25);
     osc.amp(0.5, 0.05);
     col = ('blue');
  }else if (keyCode == 55){
     osc.freq(329);
     osc.amp(0);
     osc.start();
     osc.stop(0.25);
     osc.amp(0.5, 0.05);
     col = ('blue');
  }else if (keyCode == 56){
     osc.freq(349);
     osc.amp(0);
     osc.start();
     osc.stop(0.25);
     osc.amp(0.5, 0.05);
     col = ('blue');
  }else if (keyCode == 57){
     osc.freq(392);
     osc.amp(0);
     osc.start();
     osc.stop(0.25);
     osc.amp(0.5, 0.05);
     col = ('blue');
  }else if (keyCode == 48){
     osc.freq(440);
     osc.amp(0);
     osc.start();
     osc.stop(0.25);
     osc.amp(0.5, 0.05);
     col = ('blue');
  }

     else {osc.amp(0, 0.5);
     } 
  
}

GarrettRauck-Final Project

grauck@andrew.cmu.edu — Sat, 10 Dec 2016 05:05:00 +0000

sketch

//Garrett Rauck
//Section C
//grauck@andrew.cmu.edu
//Assignment-07a-Bar Chart

// prevent scrolling of page
// from "Single Touch with P5js" on coursescript.com
// http://coursescript.com/notes/interactivecomputing/mobile/touch/
document.ontouchmove = function(event){
  event.preventDefault();
}

/////////////////////////////////
// INIT VARIABLES
/////////////////////////////////
//MODEL
var mode;
var selection;
//temp node
var tempNodeX, tempNodeY;
var tempNodeContent = "";
//data
var nodes = [];
var links = [];
//VIEW
//canvas vars
var canvasWidth, canvasHeight;
//colors
var colorBG, colorNode, colorSelection, colorLink;
//font
var font, fontSize;


/////////////////////////////////
// NODE CLASS
/////////////////////////////////
//CREATE NEW NODE, called when user clicks the canvas
function newNode(xIn, yIn) {
	//update app state
	mode = "GETTING NODE CONTENT";
	//store temporary node location
	tempNodeX = xIn;
	tempNodeY = yIn;
	tempNodeContent = "";
}

function saveNewNode() {
	println("SAVE NEW NODE!");
	//get bounding box for node
	var bounds = fontRegular.textBounds(
		tempNodeContent, tempNodeX, tempNodeY, fontSize);
	var offset = 5;
	//create new node instance using temp data
	var newNode = {x: tempNodeX,
	               y: tempNodeY,
	               content: tempNodeContent,
	               left: bounds.x - offset,
	               right: bounds.x + bounds.w + offset,
	               top: bounds.y - offset,
	               bottom: bounds.y + bounds.h + offset,
	               move: moveNode,
	               draw: drawNode};
	//store the new node
	nodes.push(newNode);
	//update app state
	mode = "MAP";
}

function abortNewNode() {
	println("ABORT NEW NODE!");
	tempNodeContent = "";
	mode = "MAP";
}

//MOVE SPECIFIED NODE
function moveNode(dx,dy) {
	this.x += dx;
	this.y += dy;
	this.left += dx;
	this.top += dy;
	this.right += dx;
	this.bottom += dy;
}

//DRAW SPECIFIED NODE
function drawNode() {
	if (this == selection) {
		//draw node border
		setDrawingSettings("NODE BORDER SELECTION");
		rect(this.left,this.top,this.right,this.bottom);
		//draw node text
		setDrawingSettings("NODE TEXT SELECTION");
		text(this.content,this.x,this.y);
	}
	else {
		//draw node border
		setDrawingSettings("NODE BORDER");
		rect(this.left,this.top,this.right,this.bottom);
		//draw node text
		setDrawingSettings("NODE TEXT");
		text(this.content,this.x,this.y);
	}
}


/////////////////////////////////
// LINK CLASS
/////////////////////////////////
//CREATE LINK BETWEEN TWO NODES
function newLink(fromIn, toIn) {
	var newLink = {from: fromIn,
	               to: toIn,
	               draw: drawLink};
	links.push(newLink);
}

function drawLink() {
	setDrawingSettings("LINK");
	line(this.from.x, this.from.y, this.to.x, this.to.y);
}

/////////////////////////////////
// VIEW
/////////////////////////////////
function setDrawingSettings(setting) {
	if (setting == "NODE TEXT") {
		noStroke();
		fill(colorNode);
		textAlign(CENTER);
	}
	else if (setting == "NODE TEXT SELECTION") {
		noStroke();
		fill(colorSelection);
		textAlign(CENTER);
	}
	else if (setting == "NODE BORDER") {
		stroke(colorNode);
		fill(colorBG);
	}
	else if (setting == "NODE BORDER SELECTION") {
		stroke(colorSelection);
		fill(colorBG);
	}
	else if (setting == "LINK") {
		stroke(colorLink);
		noFill();
	}
}

//DRAW TEMPORARY NODE WHILE EDITING
function drawTempNode() {
	//drawing settings
	setDrawingSettings("NODE TEXT SELECTION");
	//draw text
	text(tempNodeContent, tempNodeX, tempNodeY);
}

//DRAW ALL NODES IN MAP
function drawAllNodes() {
	for (i=0; i 0) & (mouseX < width) &&
		(mouseY > 0) && (mouseY < height)) {
		return true;
    }
    else return false;
}

function mousePressedMap() {
	//if node is already selected...
	if (selection) {
		//if user clicks the blank canvas, deselect
		if (! clickIsNode()) {
			println("DESELECT!");
			selection = null;
		}
		//else if user clicks another node, create link
	    else if (clickIsNode()) {
	    	if (keyCode == 16) { //shift-click another node, create link
	    		println("NEW LINK!");
	    		var secondSelection = clickIsNode();
	    		newLink(selection,secondSelection);
	    		//clear selection
	    		selection = null;
	    	}
	    	else selection = clickIsNode();	
	    }
	}
	//if nothing selected...
	else {
		//if user clicks an existing node, select that node
		if (clickIsNode()) {
			println("NODE SELECTED!");
			selection = clickIsNode(); // <-- figure out a more efficient method...
		}
		else if (! clickIsNode()) {
			//initialize new node
			println("NEW NODE!");
		    newNode(mouseX,mouseY);
		}
	}
}

function mousePressed() {
	if (mode == "MAP") {
		mousePressedMap();
	}
}

function mouseDraggedMap() {
	//if user is dragging a selected node
	if (selection) {
		//get drag data
		var dx = mouseX - pmouseX;
		var dy = mouseY - pmouseY;
		//move selected node
		selection.move(dx,dy);
	}
}

function mouseDragged() {
	if (mode == "MAP") {
		mouseDraggedMap();
	}
}

function keyPressedMap() {
	if (keyCode == 27) selection = null;
}

function keyPressedGettingNodeContent() {
	//"ENTER", save new node
	if (keyCode == 13) saveNewNode();
	//"ESCAPE", abort new node
	else if (keyCode === 27) abortNewNode();
	//"BACKSPACE", delete previous character
	else if (keyCode === 8) {
		tempNodeContent = 
			tempNodeContent.substring(0, tempNodeContent.length-1);
	}
	//Other character...
	else tempNodeContent += key;
}

function keyPressed() {
	println("key = " + key);
	println("keyCode = " + keyCode);

	if (mode == "MAP") {
		keyPressedMap();
	}
	else if (mode == "GETTING NODE CONTENT") {
		keyPressedGettingNodeContent();
	}
}

/////////////////////////////////
// RUN!
/////////////////////////////////
function preload() {
	fontRegular = loadFont('cour.ttf');
	fontBold = loadFont('courbd.ttf');
	fontItalic = loadFont('couri.ttf');
	fontBoldItalic = loadFont('courbi.ttf');
}

function setup() {
	////////// INIT VARS //////////
	// MODEL
	mode = "MAP"; // initial app state
	selection = null;
	//canvas
	canvasWidth = canvasHeight = 400;
	//font
	fontSize = 12;
	//color
	colorBG = color(255,255,255);
	colorNode = color(0,0,0);
	colorSelection = color(255,127,0);
	colorLink = colorNode;

	//DRAWING SETTINGS
	rectMode(CORNERS);
	textFont(fontBold);

	// CANVAS SETUP
    createCanvas(canvasWidth, canvasHeight);
}

function draw() {
	background(colorBG); //update background

	//draw nodes
	drawAllLinks();
	drawAllNodes();

	if (mode == "GETTING NODE CONTENT") {
		drawTempNode();
	}
}

My final project was an attempt to make a digital mind-mapping interface. A mind-map is a tool for thinking through complex problems in which the user draws nodes which represent ideas and then draws connections between those nodes to develop complex relationships. A digital mind-mapping interface would transcend the traditional limits of the paper medium.

Unfortunately, the sketch uploaded to WordPress can’t run because I have been unable to find a way to load a font, which I need in order to use the textBounds() function for click detection.

When it’s working locally on my computer, the user can click or touch the screen to begin creating a node. The user can type in text for the node, then press enter to finalize the node. The user can continue to do this to create multiple nodes. If the user clicks an existing node, that node becomes selected. The user can click and drag a node to move it on the canvas. If the user has one node selected and shift-clicks another node, a link is created between those nodes. As the user moves nodes that are linked, the link is preserved.

To be honest, I haven’t been able to put a lot of time into this project, so this is where it’s at. I also developed a touch-screen drawing interface. I was hoping to integrate the two sketches into a mind-mapping interface involving touch-face drawing. Here is that sketch:

sketch

//Garrett Rauck
//Section C
//grauck@andrew.cmu.edu
//Final Project - Sketch - 2016/11/26

// prevent scrolling of page
// from "Single Touch with P5js" on coursescript.com
// http://coursescript.com/notes/interactivecomputing/mobile/touch/
document.ontouchmove = function(event){
  event.preventDefault();
}

///////////////////////////////////////////////////////////////////////////////
// GLOBAL VARIABLES
///////////////////////////////////////////////////////////////////////////////
//MODEL VARIABLES
var mode; //the current mode. possible values: "MAP", "NODE EDIT"
var currentSelection; //the currently selected object. null if nothing selected
var OX, OY; //x and y location of the map origin, relative to 0,0
var nodes = []; //array to store all node instances
var links = []; //array to store all link instances
var currentScribble;
//EVENT VARIABLES
var timeOfLastClick, //time in milliseconds of the previous mouse click
    doubleClickThreshold; //time in milliseconds allowed for double-click

///////////////////////////////////////////////////////////////////////////////
// TEXT NODE CLASS
///////////////////////////////////////////////////////////////////////////////
function textNodeDraw() {
	return;
}

function textNodeUpdateVPLocation() {
	println("textNodeUpdateVPLocation()")
}
///////////////////////////////////////////////////////////////////////////////
// SCRIBBLE NODE CLASS
///////////////////////////////////////////////////////////////////////////////
function scribbleNodeAddPoint(x,y) {
	println(this.ptsX);
	this.ptsX.push(x);
	this.ptsY.push(y);
}

function scribbleNodeDraw() {
	stroke(255);
	beginShape();
	for (var i=0; i doubleClickThreshold) &
		    (touches.length < 2)) {
			//deselect
			currentSelection = null;
		}
		//else if double-tap, NEW TEXT NODE
		else if ((timeSinceLastTouch <= doubleClickThreshold) &
		         (touches.length < 2)) {
			//create new text node
			newNode("TEXT",touchX,touchY);
		}
	//else if user touches an existing node

	//store time of current click
	timeOfLastClick = timeOfCurrentTouch;
}
//-----------------------------------------------------------------------------
//TOUCH MOVED
//called when user touches and drags their finger
function touchMoved() {
	if      (mode == "MAP")       touchMovedMap();
	// else if (mode == "NODE EDIT") touchMovedNodeEdit();
}
//called when user touches and drags their finger while in MAP mode
function touchMovedMap() {
	//if single finger drag, SCRIBBLE
	if (touches.length == 1) {
		//if not already scribbling, NEW SCRIBBLE NODE 
		if (currentScribble == null) {
			currentScribble = newNode("SCRIBBLE",touchX,touchY);
		}
		//else if already scribbling, ADD POINT to current scribble
	    else currentScribble.addPoint(touchX,touchY);
	}
	//else if two finger drag, PAN
	else if (touches.length == 2) {
		println("Pan!")
		pan(touchX-ptouchX, touchY-ptouchY);
	}
}
//-----------------------------------------------------------------------------
//TOUCH ENDED
//called when user releases his/her finger from the screen
function touchEnded() {
	if      (mode == "MAP")       touchEndedMap();
	// else if (mode == "NODE EDIT") touchEndedNodeEdit();
}
//called when user realeases his/her finger from the screen while in map mode
function touchEndedMap() {
	//if user is drawing scribble, stop scribbling
	if (currentScribble != null) {
		currentScribble = null;
	}
}

///////////////////////////////////////////////////////////////////////////////
// RUN!
///////////////////////////////////////////////////////////////////////////////
//function used to initialize the variables
function initVars() {
	// INIT VARS
	timeOfLastClick = 0;
	doubleClickThreshold = 200;
	currentScribble = null;
	//SET MODEL STATE
	mode = "MAP";
	//Canvas
	canvasWidth = canvasHeight = 400;
}
//function used to initialize the canvas
function initCanvas() {
	//create canvas
    createCanvas(canvasWidth, canvasHeight);
}

function setup() {
	initVars();
	initCanvas();
}

function draw() {
	background(0); //update background
	drawAllNodes();
}

Final Project – Shan Wang – “Slime’s Christmas”

shanw1@andrew.cmu.edu — Sat, 10 Dec 2016 04:59:49 +0000

screenshot from my game

sketch
For the final project, I mainly followed my initial design of the game similar to doodle jump, but with different features and user interface.

var platforms = [];
var allSplashes = [];
var newSplash;
var mode = "START";

var bgColor1;
var bgColor2;

var dropSpeed = 1;
const PF_THINKNESS = 7;
const GRAVITY = 1.5;
const FALLING_INTERV = 50;

var character;
var topPlatform;
var charCurrentPF;

var fallDistance = 0;
var initJump = true;

var aX;
var aY;
var xFactor = 0.3;
var yFactor = 0.15;
var timeFactor = 10;
var distance;
var numberHitted = 0;
var totalScore = 0;

//sound variables
var bgMusic;
var bellSound;

//graphic elements
var snowflakeLinks = [
    "http://imgur.com/2jZMsr7",
    "http://imgur.com/vKvkHSJ",
    "http://imgur.com/X3pNOx0"
]

var frameFilenames = [];

var snowflakes = [];
var snowflake0;
var snowflake1;
var snowGraphs = [];
var allSnowflakesObjects = [];

var wRuffles = [];

var scaleX;
var scaleY;
var snowPosX;
var snowPosY;



function preload() {
    //load sounds
    bgMusic = loadSound("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/bgMusic.wav");
    bellSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/bellSound.wav");

    //load graphs for snowfaleks
    for (var i = 0; i < snowflakeLinks.length; i++){
        var snowLink = loadImage(snowflakeLinks[i]);
        snowGraphs.push(snowLink);
    }

    var slime = "frames/slime.gif";
    gifSlime = loadGif(slime);


}


function gradient(x,y,wid,hei,c1,c2){
    noFill();
    for (var i = y; i= 0){
        noStroke();
        fill(this.c, this.c, this.c, this.a);
        ellipse(this.x, this.y, this.r, this.r);
    }
}


function makeCharac(cx, cy, color, speedX, speedY){
    var character = {x: cx, y: cy, col: color, vx: speedX, vy: speedY,
                     g: GRAVITY, draw: drawCharac};
    return character;
}

function drawCharac(){
    fill(this.col);
    image(gifSlime, this.x, this.y);
    //ellipse(this.x, this.y, this.r, this.r);
    // idx = frameCount%3;
    // img = frames[idx];
}

function makePlatform(px, py, pw, pc, pt, type) {
    var platform = {x: px, y:py,
                    wid:pw, color:pc,
                    hei: pt, tp: type,
                    draw: drawPlatform};
    return platform;
}

function drawPlatform(){
    fill(this.color);
    noStroke();
    rect(this.x, this.y, this.wid, this.hei);
}

function isTooClose(y){
    for (var i=0; i height){
                allSnowflakesObjects.splice(i,1);
            }
            if (character.y < height/2){
                allSnowflakesObjects[i].y += 1;
            }
        }

        // set limit of speed on y direction for the character
        fallDistance += dropSpeed;
        if (character.vy > 30){
            character.vy = 30;
        } else if (character.vy < -30){
            character.vy = -30;
        }

        // move platforms & remove those that fall out of canvas
        for (var i = 0; i < platforms.length; i++) {
            platforms[i].y += dropSpeed;
            platforms[i].draw();
            if (platforms[i].y > height){
                platforms.splice(i,1);
                }
        }

        // add new platforms when the old ones drop FALLING_INTERV pixels;
        if (fallDistance % FALLING_INTERV == 0){
            addNewPlatforms();
        }
        // add new snowflakes as needed
        if (allSnowflakesObjects.length < 15){
            addNewSnowFlakes();
        }

        // after first jump, control the velocity on both x and y direction with GRAVITY
        // to simulate the jumping and falling condition
        if (initJump == false){
            distance = mouseX - character.x;
            aY = GRAVITY;
            character.vy += aY*yFactor;
            character.x += distance/timeFactor;
            character.y += character.vy;
        }

        // check if the player hit the platform; keeping track of scores
        if (platforms.length != 0){
            for (var i = 0; i < platforms.length; i++){
                if (hitThePlatform(platforms[i])){
                    numberHitted += 1;
                    totalScore += numberHitted*10;
                    bellSound.play(0,1,1);
                    character.vy = -8;
                    // make splashes when the player hits the platform
                    newSplash = makeSplashes(platforms[i].x + platforms[i].wid/2,
                        platforms[i].y + platforms[i].hei, 10, 50, 6, 255, 100);
                    allSplashes.push(newSplash);
                    //remove platforms that have been hit by players
                    platforms.splice(i,1);
                }
            }
        }
        // adjust the positions of the platforms when the player jumps
        // higher than half of the canvas
        for (var i = 0; i < platforms.length; i++){
            if (character.y < height/2){
                platforms[i].y +=1;
            }
        }

        // bounce the player back to the canvas if the player goes off the side
        if (character.x > width & 0 < character.y < height){
            character.x = character.r;
        } else if(character.x < 0 & 0 < character.y < height){
            character.x = width - character.r;
        } else if (character.y > height){
            mode = "GAMEOVER"
            bgMusic.stop();
        }
        character.draw();

    }
    else if (mode == "GAMEOVER"){
        gradient(0,0,width,height,bgColor1,bgColor2);
        fill(255);
        textSize (30);
        textAlign(CENTER);
        textFont("Andale Mono");
        text("GAME OVER!", width/2, height/2);
        textSize (15);
        text("The Steps You Jumped: " + numberHitted, width/2, height*2/3);
        text ("Total Score: " + totalScore, width/2, height*3/4);
        textSize (10);
        text("Press R to restart the game", width/2, height*5/6);
    }
}

function addNewPlatforms(){
    var newX = random(40, width-40);
    var ranWid = random(40, 65);
    var newPlatForm = makePlatform(newX, 0, ranWid, 255, PF_THINKNESS);
    platforms.push(newPlatForm);
}


function addNewSnowFlakes(){
    var addedSnow = random(snowflakes);
    addedSnow.loadPixels();
    snowPosX = random(10, width - 10);
    scaleX = random(0.1, 0.4);
    scaleY = scaleX;
    var newSnow = makeSnowflakes(addedSnow, snowPosX, 0, scaleX, scaleY);
    allSnowflakesObjects.push(newSnow);
}

function mouseClicked(){
    if (mode == "START"){
        if (collidePointRect(mouseX, mouseY, width/2, height/2-10, 80, 30)){
            mode = "christmasInit";
        }
    }
    else if (mode == "christmasInit"){
        character.vy = -8;
        if (initJump == true){
            initJump = false;
            mode = "GAME";
        }
    }
}

function keyTyped(){
    // reset the game to the initial status
    if (key == "r"|| key == "R"){
        mode = "christmasInit";
        platforms = [];
        allSplashes = [];
        snowflakes = [];
        allSnowflakesObjects = [];
        wRuffles = [];
        numberHitted = 0;
        totalScore = 0;
        setup();
        initJump = true;
    }
}

Different from the existing game, the platforms in my “Slime’s Christmas” will disappear if hit by the character. And the “jumping” of the slime, which follows the mouse, is simulated with gravity to give a sense of physical reality.

With what we learned in object oriented programming, I also created effect of random water ruffle and splashes that are generated at the position of the hit platform.

https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/bgMusic.wav https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/bellSound.wav

All music downloaded from freesound.org

The slime gif credited to google image.

mreyes – final project

mreyes@andrew.cmu.edu — Sat, 10 Dec 2016 04:33:31 +0000

Please download the files and play the game though local server. I tried uploading the files to both wordpress and the andrew webite that students are given but, neither work.

This project is a continuation of project that I did in a previous class and wanted to expand on. Roger signed off on this agreeing that I would make it clear what was pre-made. ONLY the audio and mic input functions are new. Everthing esle was made preiviously. I have also sectioned off and uncommented the code that is not new and marked it “Pre-made DO NOT GRADE”.

This added in audio function is an exploration on simple machine learning. For a little while I was trying to use recordings and slice those recordings into arrays to make the audio. But this proved too dificult for my skill level and also did not really achive the effect I wanted. So instead how the program works is that there is a very sensative volume monitor analyzing input from the mic and then depending on how loadly you talk (or sing or hum or what ever) the program puts in diffrent sound files.

As I said the monitor is very sensative and the game it ment to be a little dificult. A simple cheet that I’ve found is that singing or humming work better then actually talking.

sketch

//Pre-made DO NOT GRADE
///////////////////////////////////
var background_sound;
var end_sound;
var bgs;
var bgi;
var character;
var feed;
var clean;
var talk;
var ending1 = false;
var ending2 = false;
var hunger = 3;
var MAX_HUNGER = 10; 
var dirty = 3;
var MAX_DIRTY = 10;
var purity = 10
var MAX_PURITY = 20  
var volume = 0;
var mic;
var pixelScale = 4;
var idle_animation;
var play_animation;
var board_animation;
var barf_animation;
var die_animation;   
var dirty_animation;
var clean_animation;
var tooClean_animation;
var feed_icon;
var feed_icon_roll;
var fire_image
var house_image;
////////////////////////////////

//sound variables
var play_sound;
var barf_sound;
var hunger_sound;
var chat_sound;
var tooLoud_sound;
var ah_sound;
var eee1_sound;
var eee2_sound;
var talk_sound;
var haEh_sound;
var nahnah_sound;
var hello_sound;
var no_sound; 
var nonono_sound;
var yes_sound;
var playCleanHouse_sound;
var help_sound;
var look_sound;
var tooMuch_sound;
var stop_sound;
var good_sound;
var pleaseHelp_sound;
var thankYou_sound;
var whatIs_sound;
var stopIt_sound;
var youAre_sound;
var iNeedYou_sound;
var doYou_sound;
var clean2_sound;
var fun_sound;
var thisFeels_sound;
var thisIs_sound;
var who_sound; 
var tooClean_sound;
var Clean_sound;

//variables that will keep track of how sounds files change
var talk = 0
var talkIncrease = .01 
var MAX_TALK = 10
    
function preload() {

//Pre-Made DO NOT GRADE
////////////////////////////////////////////////////////////////////
  background_sound = loadSound("assets/bg.mp3");
  end_sound = loadSound("assets/end.mp3");
  sprite_sheet = loadSpriteSheet('assets/idle.png', 65, 65, 48);
  idle_animation = loadAnimation(sprite_sheet);
  sprite_sheet = loadSpriteSheet('assets/play.png', 65, 65, 60);
  play_animation = loadAnimation(sprite_sheet);
  sprite_sheet = loadSpriteSheet('assets/board.png', 65, 65, 12);
  board_animation = loadAnimation(sprite_sheet);
  sprite_sheet = loadSpriteSheet('assets/lazer.png', 65, 65, 23);
  barf_animation = loadAnimation(sprite_sheet);
  sprite_sheet = loadSpriteSheet('assets/clean.png', 65, 65, 37);
  clean_animation = loadAnimation(sprite_sheet);
  sprite_sheet = loadSpriteSheet('assets/tooClean.png', 65, 65, 44);
  tooClean_animation = loadAnimation(sprite_sheet);
  sprite_sheet = loadSpriteSheet('assets/dirty.png', 65, 65, 21);
  dirty_animation = loadAnimation(sprite_sheet);
  bg_image = loadImage("assets/bg.png");
  end_image = loadImage("assets/end.png");
  fire_image = loadImage("assets/fire.png");
  house_image = loadImage("assets/house.png");
  feed_icon = loadImage("assets/feed_button.png");
  feed_icon_roll = loadImage("assets/feed_button_roll.png");
  clean_icon = loadImage("assets/feed_button.png");
  clean_icon_roll = loadImage("assets/feed_button_roll.png");
  talk_icon = loadImage("assets/feed_button.png");
  talk_icon_roll = loadImage("assets/feed_button_roll.png");
  idle_animation.frameDelay = 8;
  play_animation.frameDelay = 12;
  tooClean_animation.frameDelay = 12;
  clean_animation.frameDelay = 8
/////////////////////////////////////////////////////////////////

//load sound
  eat_sound = loadSound("assets/eat.wav");
  barf_sound = loadSound("assets/barf.wav");
  hunger_sound = loadSound("assets/chirp.wav");
  die_sound = loadSound("assets/die.wav");
  tooLoud_sound = loadSound("assets/tooLoud.wav");
  chat_sound = loadSound("assets/chat.wav");
  ah_sound = loadSound("assets/ah.mp3");
  eee1_sound = loadSound("assets/eee1.wav");
  eee2_sound = loadSound("assets/eee2.mp3");
  talk_sound = loadSound("assets/talk.wav");
  haEh_sound = loadSound('assets/haEh.mp3');
  nahnah_sound = loadSound('assets/nahnah.mp3');
  hello_sound = loadSound('assets/hello.mp3');
  no_sound = loadSound('assets/no.mp3');
  nonono_sound = loadSound('assets/nonono.mp3');
  yes_sound = loadSound('assets/yes.mp3');
  playCleanHouse_sound = loadSound('assets/playCleanHouse.mp3');
  help_sound = loadSound('assets/help.mp3');
  look_sound = loadSound('assets/look.mp3');
  tooMuch_sound = loadSound('assets/tooMuch.mp3');
  stop_sound = loadSound('assets/stop.mp3');
  good_sound = loadSound('assets/good.mp3')
  pleaseHelp_sound = loadSound('assets/pleaseHelp.mp3');
  thankYou_sound = loadSound('assets/thankYou.mp3');
  whatIs_sound = loadSound('assets/whatIs.mp3');
  stopIt_sound = loadSound('assets/stopIt.mp3');
  youAre_sound = loadSound('assets/youAre.mp3');
  iNeedYou_sound = loadSound('assets/iNeedYou.mp3')
  doYou_sound = loadSound('assets/doYou.mp3');
  clean2_sound = loadSound('assets/clean.mp3');
  fun_sound = loadSound('assets/fun.mp3');
  thisFeels_sound = loadSound('assets/thisFeels.mp3');
  thisIsFun_sound = loadSound('assets/thisIsFun.mp3');
  who_sound = loadSound('assets/who.mp3');
  tooClean_sound = loadSound("assets/tooClean.wav")
  clean_sound = loadSound("assets/Clean.wav");
      
}

function setup() {

//set up mic input  
  mic = new p5.AudioIn();
  mic.start(); 

//Pre-Made DO NOT GRADE
////////////////////////////////////////////////////////////////////
  var canvas = createCanvas(150, 150);
  bgs = background_sound.play(); 
  background_sound.loop();    
  canvas.style("width", width * pixelScale + "px");
  canvas.style("height", height * pixelScale + "px");
  noSmooth();
  bgi = createSprite(width/2,(height/2)-3,150,145);
  character = createSprite(77, 41, 65, 65);
  character.addAnimation('idle', idle_animation);
  character.addAnimation('play', play_animation);
  character.addAnimation('board', board_animation);
  character.addAnimation('barf', barf_animation);
  character.addAnimation('clean', clean_animation);
  character.addAnimation('tooClean', tooClean_animation);
  character.addAnimation('dirty', dirty_animation); 
  character.addAnimation('fire',fire_image);
  character.addAnimation('house',house_image);  
  bgi.addAnimation("bg",bg_image);
  bgi.addAnimation("end",end_image);
  feed = createSprite(4, 32, 4, 4);
  clean = createSprite(18, 32, 4, 4);
  feed.addImage(feed_icon);
  clean.addImage(feed_icon);
////////////////////////////////////////////////////////////////////

//Pre-Made DO NOT GRADE
////////////////////////////////////////////////////////////////////
feed.onMousePressed = function() {

  if (character.getAnimationLabel() == "idle" || character.getAnimationLabel() == "board") {
    if(purity <= 0){
      bgs = end_sound.play();
      bgi.changeAnimation("end");
      character.changeAnimation("fire");
      character.animation.rewind();
      ending1 = true
      feed.remove();
      clean.remove();
  }
        
    if(purity >= MAX_PURITY){
      bgs = end_sound.play();
      bgi.changeAnimation("end");
      character.changeAnimation("fire");
      character.animation.rewind();
      ending2 = true
      feed.remove();
      clean.remove();
    }
  
  hunger -= 4;
  purity += 1

    if (hunger >= 0 ) {
      character.changeAnimation("play");
      character.animation.rewind();
      eat_sound.play();
    } 

    if (hunger <= 0) {
      hunger = 0;
      purity -=5
      character.changeAnimation("barf");
      character.animation.rewind();
      barf_sound.play();
    }
  }
}

feed.onMouseOver = function() {
  feed.addImage(feed_icon_roll);
}

feed.onMouseOut = function() {
  feed.addImage(feed_icon);
}
clean.onMousePressed = function() {

  if (character.getAnimationLabel() == "idle" || character.getAnimationLabel() == "dirty") {
    if(purity <= 0){
      bgs = end_sound.play();
      bgi.changeAnimation("end");
      character.changeAnimation("fire");
      character.animation.rewind();
      ending1 = true
      feed.remove();
      clean.remove();
    }
        
    if(purity >= MAX_PURITY){
      bgs = end_sound.play();
      bgi.changeAnimation("end");
      character.changeAnimation("fire");
      character.animation.rewind();
      ending2 = true
      feed.remove();
      clean.remove();
    }

  dirty-= 1;
  purity += 1

    if (dirty >= 0){
      character.changeAnimation("clean");
      character.animation.rewind();
      clean_sound.play();
    } 

    if (dirty <= 0){
      purity -=5
      dirty = 0;
      character.changeAnimation("tooClean");
      character.animation.rewind();
      tooClean_sound.play();
    }
  }
}

clean.onMouseOver = function() {
  clean.addImage(feed_icon_roll);
}

clean.onMouseOut = function() {
    clean.addImage(feed_icon);
}


}
////////////////////////////////////////////////////////////////////

function draw() {

  var v = mic.getLevel(); //get volume of mic
  volume += (v-volume)/3; //smooth out reading of volume
  var micMap = map(volume, 0, 1, 10, 100); // map volume

  if(ending1 == false || ending2 == false){ //only activate if endings are false 
      
    if(talk <= 0){ // set when to change sound
      //if mic is less than 30 then uncofertable sound plays and purity goes down
      if (micMap >= 30 ){ 
        purity -= .1
        eee1_sound.play();
      }
      //if between 20 and 30 then chat souns play 
      if (micMap > 20 & micMap < 30 ){
        talk_sound.play();
      //talk increase when talk to it softly 
      if(talk <=MAX_TALK){
          talk += talkIncrease
        }
      }
    }

  //repeat similar set up for 9 more levels

    if(talk <= 1 & talk > 0){
  
      if (micMap >= 30 ){
        purity -= .1
        eee1_sound.play();
      }
     
      if (micMap > 20 & micMap < 30 ){
      
        chat_sound.play();

        if(talk <=MAX_TALK){
          talk += talkIncrease
        }
      }
    }

    if(talk <= 2 & talk > 1){
      hunger_sound = ah_sound

      if (micMap >= 30 ){
        purity -= .1
        eee2_sound.play();
      }
     
      if (micMap > 20 & micMap < 30 ){
        ah_sound.play();

        if(talk <= MAX_TALK){
          talk += talkIncrease
        } 
      }
    }

    if(talk <= 3 & talk > 2){
      hunger_sound = nahnah_sound

      if (micMap >= 30 ){
        purity -= .1
        nahnah_sound.play();
      }
     
      if (micMap > 20 & micMap < 30 ){
        haEh_sound.play();

        if(talk <= MAX_TALK){
        talk += talkIncrease
        }
      }
    }

    if(talk <= 4 & talk > 3){
      hunger_sound = no_sound;
      clean_sound = yes_sound;
      eat_sound = yes_sound;
      tooClean_sound =  nonono_sound;

      if (micMap >= 30 ){
        purity -= .1
        nonono_sound.play();
      }
     
      if (micMap > 20 & micMap < 30 ){
        hello_sound.play();

        if(talk <= MAX_TALK){
        talk += talkIncrease
        }
      }
    }

    if(talk <= 5 & talk > 4){
      hunger_sound = stop_sound;
      clean_sound = yes_sound;
      eat_sound = yes_sound;
      tooClean_sound =  nonono_sound;

      if (micMap >= 30 ){
        purity -= .1
        nonono_sound.play();
      }
     
      if (micMap > 20 & micMap < 30 ){
      playCleanHouse_sound.play();
        
        if(talk <= MAX_TALK){
            talk += talkIncrease
        }
      }
    }

    if(talk <= 6 & talk > 5){
      hunger_sound = help_sound;
      clean_sound = good_sound;
      eat_sound = good_sound;
      tooClean_sound = tooMuch_sound;

      if (micMap >= 30 ){
        purity -= .1
        tooMuch_sound.play();
      }
     
      if (micMap > 20 & micMap < 30 ){
          look_sound.play();

        if(talk <= MAX_TALK){
            talk += talkIncrease
        }
      }
    }

    if(talk <= 7 & talk > 6){
      hunger_sound = pleaseHelp_sound;
      clean_sound = thankYou_sound;
      eat_sound = thankYou_sound;
      tooClean_sound = tooMuch_sound;

      if (micMap >= 30 ){
        purity -= .1
        tooMuch_sound.play();
      }
     
      if (micMap > 20 & micMap < 30 ){
        whatIs_sound.play();

        if(talk <= MAX_TALK){
          talk += talkIncrease
        }
      }
    }

    if(talk <= 7 & talk > 6){
      hunger_sound = pleaseHelp_sound;
      clean_sound = clean2_sound;
      eat_sound = fun_sound;
      tooClean_sound = tooMuch_sound;

      if (micMap >= 30 ){
        purity -= .1
        stopIt_sound.play();
      }
     
      if (micMap > 20 & micMap < 30 ){
        whatIs_sound.play();
        
        if(talk <= MAX_TALK){
        talk += talkIncrease
        }
      }
    }


    if(talk <= 8 & talk > 7){
      hunger_sound = iNeedYou_sound;
      clean_sound = thisFeels_sound;
      eat_sound = thisIsFun_sound;
      tooClean_sound = stopIt_sound;

      if (micMap >= 30 ){
        purity -= .1
        youAre_sound.play();
      }
     
    if (micMap > 20 & micMap < 30 ){
      doYou_sound.play();

      if(talk <= MAX_TALK){
        talk += talkIncrease
      }
    }
  }

  if(talk > 8){
    hunger_sound = iNeedYou_sound;
    clean_sound = thisFeels_sound;
    eat_sound = thisIsFun_sound;
    tooClean_sound = stopIt_sound;

    if (micMap >= 30 ){
      purity -= .1
      youAre_sound.play();
    }
     
    if (micMap > 20 & micMap < 30 ){
      who_sound.play();

      if(talk <= MAX_TALK){
        talk += talkIncrease
      }
    }
  }
}

//Pre-Made DO NOT GRADE
////////////////////////////////////////////////////////////////////   
  background(0);
  print(talk)

  if(frameCount % 800 == 0)
  {

    if(hunger8 & ending1 == false) || (dirty>=MAX_DIRTY && ending2 == false)){ 
       character.changeAnimation("board");
        hunger_sound.play();
    }
        
    if((dirty>8 & ending1 == false) || (dirty>=MAX_DIRTY && ending2 == false)){
      character.changeAnimation("dirty");
      hunger_sound.play();
          }
        
    if((hunger>=MAX_HUNGER & ending1 == false)|| (dirty>=MAX_DIRTY && ending2 == false)){
      purity -=5
    }
        
    if((dirty>=MAX_DIRTY && ending1 == false) || (dirty>=MAX_DIRTY && ending2 == false)){
      purity -=5
    }

  }
      

    if (character.getAnimationLabel() == "play" && character.animation.getFrame() == character.animation.getLastFrame()) {
      character.changeAnimation("idle");
    }
      
    if (character.getAnimationLabel() == "barf" & character.animation.getFrame() == character.animation.getLastFrame()) {
      character.changeAnimation("idle");
    }
      
    if (character.getAnimationLabel() == "clean" & character.animation.getFrame() == character.animation.getLastFrame()) {
      character.changeAnimation("idle");
    }

    if (character.getAnimationLabel() == "tooClean" & character.animation.getFrame() == character.animation.getLastFrame()) {
      character.changeAnimation("idle");
    }

    drawSprites();
    
    {
    if(ending1 == false & ending2 == false){
      noStroke()
      textSize(5);
      fill(60);
      var rectangleLength = map(hunger, 0, MAX_HUNGER, 0, 20);
      rect(9,30,3,floor(rectangleLength));
      text('play',2, 25);
      
      var rectangleLength = map(dirty, 0, MAX_DIRTY, 0, 20);
      rect(22,30,3,floor(rectangleLength));
      text('clean',18, 25);
      
      var rectangleLength = map(micMap, 0, 50, 0, 20);
      text('volume', 40, 83);
      rect(40, 85,floor(rectangleLength),3);

      fill(255);
      var rectangleLength = map(purity, 0, MAX_PURITY, 0, 20);
      rect(125,30,5,floor(rectangleLength));
      text('purity', 125,25);
      }
      
      if (ending1 == true){
      character.changeAnimation("fire");
      noStroke();
      fill(255);
      textSize(6);
      textAlign(CENTER);
      text("it's free. it's made it's jugement. everything is gone.",width/2, height*.75);
      }
      
      if (ending2 == true){
      character.changeAnimation("house");
      noStroke();
      fill(255);
      textSize(6);
      textAlign(CENTER);
      text("finaly. its free. the world can now be pure.",width/2, height*.75);
      }
      
      }
      
    }
/////////////////////////////////////////////////////////////////////////////////////////////

Final Project Lydia Jin – Piano Keys for Beginners

jialuj@andrew.cmu.edu — Sat, 10 Dec 2016 04:28:02 +0000

//Lydia Jin
//jialuj@andrew.cmu.edu
//Section D
//Final Project

//define necessary variables
var piano = [];
var alphabet = ['a', 's', 'd', 'f', 'g', 'h', 'j'];
var alphabet2 = ['A', 'S', 'D', 'F', 'G', 'H', 'J'];
var ASSETS_DIR = "assets/";
var POSTFIX = "-piano.wav"
var amp;
var hz;
var rec = [];
var w;
var buffer;
var button1, button2, button3, button4, button5, button6, button7;
var colorNum = 0;
var bgm1, bgm2, bgm3; //BGM stands for background metronome 
var mic, recorder, soundFile;
var state = 0;

var soundLinks = ["https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/0-piano.wav",
                "https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/1-piano.wav",
                "https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/2-piano.wav",
                "https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/3-piano.wav",
                "https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/4-piano.wav",
                "https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/5-piano.wav",
                "https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/6-piano.wav"];



for (var i = 0; i < 7; i++){
    //push keys into the array 
    piano[i] = new KeyStroke(alphabet[i], alphabet2[i]);

}

function setup() {
    createCanvas(600, 200);
    amp = new p5.Amplitude();
    hz = new p5.FFT(0, 256);
    w = width/256;
    colorMode(HSB);
    angleMode(DEGREES);
    
    //create button for BGM 40
    button1 = createButton('40 BPM');
    button1.position(543,40);
    button1.mousePressed(PlayBGM1);

    //create button for BGM 50
    button2 = createButton('50 BPM');
    button2.position(543,64);
    button2.mousePressed(PlayBGM2);

    //create button for BGM 60
    button3 = createButton('60 BPM');
    button3.position(543,88);
    button3.mousePressed(PlayBGM3);

    //create button for no background metronome
    button4 = createButton('No BGM');
    button4.position(541,112);
    button4.mousePressed(ResetBGM);

    //create button for recording
    button5 = createButton('Record');
    button5.position(545,136);
    button5.mousePressed(RecordAudio);

    //create button for playing recording
    button6 = createButton('Play');
    button6.position(562,160);
    button6.mousePressed(PlayAduio);
    button6.hide();

    //create button for saving recording
    button7 = createButton('Save');
    button7.position(557,184);
    button7.mousePressed(SaveRecord);
    button7.hide();

    //create recorded soundfile
    recorder = new p5.SoundRecorder();
    recorder.setInput();
    soundFile = new p5.SoundFile();

    
}

//helper function for playing BGM1
function PlayBGM1(){
    bgm2.stop();
    bgm3.stop();
    bgm1.loop();
}

//helper function for playing BGM2
function PlayBGM2(){
    bgm1.stop();
    bgm3.stop();
    bgm2.loop();
}

//helper function for playing BMG3
function PlayBGM3(){
    bgm1.stop();
    bgm2.stop();
    bgm3.loop();
}

//helper function for no BGM
function ResetBGM(){
    bgm1.stop();
    bgm2.stop();
    bgm3.stop();
}

//helper function to record audio
function RecordAudio(){
    if (state == 0 ){
        recorder.record(soundFile);
        state ++;
    }
    else if (state = 1){
        recorder.stop();
        state++;
    }
  
}

//helper function to play recording
function PlayAduio(){
    soundFile.play();
}

//helper function to download recording
function SaveRecord(){
    saveSound(soundFile, 'mySound.wav');
}
    


function draw() {
    noStroke();
    background('black');

    //draw buttons
    fill('white');
    textSize(13);
    noStroke();
    text('Metronome', 535, 15);
    text('Rhythms', 543, 27);
    
    //hide buttons
    if (state === 0) {
        button6.hide();
        button7.hide();
        //state++;
    }

    else if (state === 1) {
        //display instructing text
        text('Recording! Click Record Again to stop.', 150, 20);
    }

    else if (state === 2) {
        
        if (soundFile.isPlaying() == true){
            button6.hide();
            bgm1.stop();
            bgm2.stop();
            bgm3.stop();
            //display text
            text('Playing...', 250, 20);

        }
        else{
            button5.hide();
            //show buttons after recording is done
            button6.show();
            button7.show(); 
            text('Recording stopped! Chose to play or save. Refresh the page to start a new recording.', 20, 20);
        }
    }


    //draw keyboard letters
    for (var i = 0; i < 7; i++){

        push();
        textSize(25);
        stroke('white');
        fill('white');
        text(alphabet2[i], i* (width - 70)/7 + (width - 70)/14, 195); 
        pop();


    }
    
    //draw displays
    if (state != 0){
        push();
        var level = amp.getLevel();
        rec.push(level);
        stroke('white');
        noFill();
        var cy = map(level, 0 , 1, height, 0);
        translate(0, height/2 - cy);
        beginShape();
        colorNum++;
        if (colorNum > 255){
                colorNum = 0;
            }
        for (var i = 0; i < rec.length; i++){
            var y = map(rec[i], 0 , 1, height, 0);
            stroke(colorNum, 255, 255);
            vertex(i, y);
        }
        endShape();

        if (rec.length > width - 70){
            rec.splice(0, 1);
        }
        pop();

        push();
        stroke('red');
        line(rec.length, 0, rec.length, height);
        pop();
    }
    //display amplitude with rectangles
    var spectrum = hz.analyze();
    noStroke();
    for (var i = 0; i < spectrum.length; i++){
        var amp1 = spectrum[i];
        var y = map(amp1, 0, 256, height, 0);
        fill(i, 255, 255);
        if (soundFile.isPlaying() == true){
            rect(i + (width - 90)/2, y , w - 2, height - y);
        }
        else{
            rect(i + buffer, y , w - 2, height - y);
        }
    }

}


function preload(){
    //preload sound files 
    for (var i = 0; i < piano.length; i++){
        piano[i].sound = loadSound(soundLinks[i]);

    }
    //store sound files to variables 
    bgm1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/40-BPM.wav");
    bgm2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/50-BPM.wav");
    bgm3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/12/60-BPM.wav");
}



function KeyStroke(LKey, CKey){
    var sound;
    //lower case keys
    this.LKey = LKey;
    //upper case keys
    this.CKey = CKey;
}

function keyPressed(){
    
    if (state === 0 & key === 'space') {

        state++;
    }
    for (var i = 0; i < piano.length; i++){
        if ((key === piano[i].LKey) || (key === piano[i].CKey)){
            piano[i].sound.play();
            
            buffer = i*80;
            fill('orange');
            rect(i*width/7, 170, width/7, 30);
        }

    }
}

My program is designed for kids or beginners who don’t have any musical background in the goal of getting them to know the 7 basic keys in piano with the aid of a metronome. This program is simple to use and should build interest in users because they get to record what they played and replay or download the recordings. Users can follow instructions that are displayed in the program to know exactly how to use this program.

Instructions for use:
1. 4 background metronome options: 40 BPM, 50 BPM, 60 BPM or no BPM at all. Press the button to access each. (The buttons are named BGM, which stands for background metronome)
2. Keys A,S,D,F,G,H,J when pressed, will play piano keys A,B,C,D,E,F,G respectively. The code is written in a way that both capital and lower case keyboard keys will work.
3. Record your performance by hitting the record button, once done, hit the record button again to stop recording.
4. After you are finished recording, you have the option to either play your recording or save it. By pressing the save button, your audio recording file will be downloaded to your computer.
5. Refresh the page to start new recording.

Additional features displayed:
1. The line in the middle shows you the amplitude of the sound. The lines changes color for more fun 🙂
2. The rectangles that pop up when sound is played shows you the frequency of the sound.
* These are made possible by using P5js built in sound functions

Notes to be taken into consideration when grading:
1. This is modified from the final proposal. The reason I decided to change this is because I think this program is more practical for users and also has cool features. (Already talked to the professor about the change)
2. The sounds are downloaded from freesound.org
3. The buttons’ scales are off when sketch is embedded on WordPress. The original file did not have overlapping buttons.
4. When running locally, the program only runs when Firefox is used.

Final Project – Vtavarez (“Fireflies”)

vtavarez@andrew.cmu.edu — Sat, 10 Dec 2016 04:24:05 +0000

For my final project, I created a “capture the fly” type game. I thought that this would be a prototype for a phone screen, hence the attempted phone screen sizing. My inspiration for the game comes from the song “Fireflies” by Owl City. The song is about dealing with insomnia and since I also have trouble sleeping, I thought it would be a good fit to create a pretty boring, softly colored game that people can play to fall asleep.

The mechanics are pretty simple. Here you are waving around a circle using the arrow keys, on a phone, it would be your finger. Your objective is to capture the fireflies that are flickering in the night. As you do so, your “jar/eater” becomes heavier and moves around slower, due to a slower speed function and increased computing use. The slowing is meant to make your movements more slowly and careful as you start drifting into sleep. Additionally, for decoration, the more fireflies you gather, the more that the tree will grow. This serves as a visual indicator of where you are in the game.

Here is a picture of the early stages of the game:

Here is a picture of later stages of the game:

sketch-33.js

//Victor Tavarez
//Secion D
//vtavarez@andrew.cmu.edu
//Final Project


var score = 0;//contains the images for the story board, start with blank
var particles =[];
var trueHeight;
var eaterX;
var eaterY;
var eaterSize=20;
var eaterSpeed = 10;

// draws the "jar that captures fireflies"
function drawJar(){
    fill(200,215,255,200);
    ellipse(eaterX,eaterY, eaterSize,eaterSize);
}
// moves the "jar that captues fireflies"
function moveJar(){
    //move jar within grid
    if (keyIsDown(LEFT_ARROW)&(eaterX-eaterSize/2 > 0)){
        eaterX-=eaterSpeed
    }
    if (keyIsDown(RIGHT_ARROW)&&(eaterX+eaterSize/2 < width)){
        eaterX+=eaterSpeed
    }
    if (keyIsDown(UP_ARROW)&&(eaterY-eaterSize/2 > 0)){
        eaterY-=eaterSpeed
    }
    if (keyIsDown(DOWN_ARROW)&&(eaterY+eaterSize/2 < trueHeight)){
        eaterY+=eaterSpeed
    }
}
//moves allows for the capture of firefly, increases score
function jarCapture(b,px,py){
    var limits  = dist(eaterX,eaterY, px, py);
    if(limits < eaterSize/2){
        score+=1;
        eaterSize+=b.size/4;
        b.x=eaterX;
        b.x=eaterY;
        particles.pop(b);
        if ((score%4) ==0){
            makeParticle(random(0,width),random(0,trueHeight),
                                       random(-10,10), random(-10,0),
                                       random(2,10));
        }
    }
}
//gives firelfies free motion within the space
function moveParticle(){
    this.x += this.dx;
    this.y += this.dy;

    if (mouseX == this.x & mouseY ==this.y){
        this.dx = 0;
        this.dy = 0;
    }
    if (this.x > width) { // bounce off right wall
        this.x = width - (this.x - width);
        this.dx = -this.dx 
    } else if (this.x < 0) { // bounce off left wall
        this.x = -this.x;
        this.dx = -this.dx;
    }
    if (this.y > height-50) { // bounce off bottom
        this.y = (height-50);
        this.dy = -this.dy;
    } else if (this.y < 0) { // bounce off top
        this.y = -this.y;
        this.dy = -this.dy;
    }
    //stop bugs from crawling if they reach a dark spot in underlying image;
}
//draws each individual firefly
function drawParticle(){  
    for(var i=this.size; i > 0; i--){
        //looks like they are flickering
        fill(this.cr,this.cg,this.cb,random(0,100));
        ellipse(this.x,this.y,i+10,i+10);
        fill(this.cr,this.cg,this.cb); 
        ellipse(this.x,this.y,i,i);
    }
}
//births new fireflies
function makeParticle(px,py,pdx,pdy,size){ //generate individual bugs
    var xr = 222;
    var xg = 250;
    var xb = 200;
    b = {x:px, y:py, 
         dx:pdx, dy:pdy, 
         age:0, 
         step: moveParticle, 
         draw: drawParticle, 
         cr:xr,
         cg:xg,
         cb:xb,
         size:size,
     }
    return b;
}
//draws the story board where score and directions are kept.
function drawStoryBox(){
    noStroke();
    fill(80,150,100);
    rect(0,height-50,width,70);//border between story box and canvas
    fill(50,55,55);
    textStyle(BOLD);
    text(score,width-20,height-20);//our button for changing to next page
    
    textAlign(LEFT);
    textSize(12);
    text("Use Arrow Keys to capture the Fireflies.", 10,trueHeight+30)
}
//resents the amount of dragon flies while making the game a little more difficult
function reset(){
    setup();
    eaterSize*=.75; // decrease size by 75%
    eaterSpeed-=1;  // decrease seed
    if (eaterSpeed <= 0){ //absolute reset of game
        setup();
        score=0;
        eaterSize=20;
        eaterSpeed=10;
    }
}

function setup(){
    createCanvas(300,500);
    trueHeight = height-50;
    eaterX = width/2;
    eaterY = trueHeight/2;
    frameRate(35);
    for(var i=0; i < 10; i++){
        var newParticle = makeParticle(random(0,width),random(0,trueHeight),
                                       random(-10,10), random(-10,0),
                                       random(2,10));
        particles.push(newParticle);
    }
}
var angle;
function draw(){
    background(50,60,100)    
    for (var i=0; i < particles.length;i++){
        var b = particles[i];
        b.step();
        b.draw();
        jarCapture(b,b.x,b.y,b.size);
    }

    drawStoryBox();// has the directions to the game
    drawJar();
    moveJar();  
    //reset the setup time you run out of fireflies, after 10 times, game resets
    if (particles.length == 0){
        reset();
    }

    //tree for decorations
    angle = 10*(noise(millis()/4000)-0.5);
    push();
    fill(0);
    translate(width/2, trueHeight+5);
    drawBranch(0, 10);
    pop();  
}
function drawBranch(depth,len) {
    strokeWeight(1)
    stroke(0);
    line(0, 0, 0, -len);
    push();
    translate(0, -len);
    drawTree(depth + 1, len);
    pop();
}
function drawTree(depth,len) {
    if (depth <= score/10){ 
        push();
        rotate(radians(20 + angle));
        drawBranch(depth,len);
        pop();
        push();
        rotate(radians(-10+ angle));
        drawBranch(depth,len);
        pop();
    }
}

Hannah K-Final Project

Hannah K — Sat, 10 Dec 2016 04:21:20 +0000

sketch-35.js

var ySpeed = 1;
var countOfEspresso = 0; // Keeps track of how many total espresso shots

// All var for slider
var offset = 0.5;
var barX = offset;
var barY;
var barW;
var barH = 100;
var sliderX = offset;
var sliderY;
var sliderW = 115;
var sliderH = 100;
var modifer = 40;

// Espresso Array
var espresso = [];
var numEspresso = 10; // Initial number of espresso shots

function setup() {
    createCanvas(600, 425);
    for(i = 0; i < numEspresso; i++) {
      var newEspresso = new Espresso();
      espresso.push(newEspresso);
    }
}

function draw() {
    background(175, 238, 238);
    //textAlign("CENTER");
    fill(0);
    textSize(25);
    text("HOW MUCH COFFEE SHOULD YOU DRINK?", 40, 40);

    updateAndDisplayEspresso();
    
    // Area of slider - Same color as background so slider 
    // Is not actually visible
    // Relied on Lab Week 3 to create slider
    noStroke();
    barY=height-98;
    barW=width-2*offset;
    fill(175,238,238);
    rect(barX,barY,barW,barH);

    // Create divider
    stroke(210, 210, 210);
    line(0, barY-1, width, barY-1);
    stroke(0);
    strokeWeight(2);
    textSize(20);
    text("^ Catch before this line! ^", width/2-100, barY+20);

    // Actual slider (Will be the espresso cup in this case)
    noStroke();
    sliderY=barY;
    fill(255);
    rect(sliderX, sliderY, sliderW, sliderH);


    // The following lines of help to create the cup shape
    fill(175,238,238);
    triangle(sliderX, barY, sliderX + 20, barY + 100, sliderX, barY + 100);
    triangle(sliderX + 115, barY, sliderX + 115, barY + 100, 
    sliderX + 95, barY + 100);
    fill(220,220,220);
    rect(sliderX + 18, sliderY + 90, 79, 8);
    fill(100);
    text("Score: " + countOfEspresso, width/2-20, height-20);

    // Terminating the program
    // Once the player has collected 50 espresso "elements", 
    // the game stops
    if(countOfEspresso > 50) {
    background(0);
    fill(255);
    text("You've had too much coffee. No more for you!", 100, height/2);
    }
}

// Week 10 - Generative landscape notes helped!
function updateAndDisplayEspresso() {
    for (var i = 0; i < numEspresso; i++) {
      espresso[i].draw();
      espresso[i].move();

    var d = dist(espresso[i].x, espresso[i].y, 
      sliderX + sliderW/2, sliderY);
      if (d > 0 & d < 5) {
        countOfEspresso += 1;
      }
  }
}

function mouseDragged() {
  var sliderMax = width - offset - sliderW;
  if(mouseY >= barY & mouseY <= barY+barH){
    sliderX = max(min(mouseX,sliderMax),barX);
  } 
}

function Espresso() {
  this.x = random(0, width);
  this.y = random(0, height);


  this.draw = function() {
    fill(255);
    if (this.y <= height + 2) {
      fill(139, 69, 19);
      ellipse(this.x, this.y, 40, 40);  
    }
    else {
      this.y = -2;
    }
  }

  this.move = function() {
    this.y = this.y + ySpeed;
  } 
}

For my final project, I created a game where the player catches espresso shots (expressed as ellipses) falling from the top of the screen in a cup at the bottom of the canvas. The cup is controlled by a scroller, and the user must drag their mouse in order to move the cup.

The user should move the cup in order to catch the falling espresso “elements” in order to get a (more than healthy, probably way too much!) dose of caffeine. Once the user has caught more than 50 espresso “elements” in their cup, there is a surprise.

In creating my project, I went back and referred to some class notes, notably the lab from Week 3 and the Week 10 deliverables. Having to revisit these ideas helped me solidify my understanding more, and I really appreciated having those resources.

One thing to note – When testing my game, I noticed that the score keeping mechanism is sometimes inconsistent. I went through my code several times and tried many different things to try and fix this bug, but in the end, I failed. 🙁 However, I quite enjoyed working on this project overall, and this project really made me appreciate beautifully made games because it is obvious that there is immense amounts of work that go into them.