Sadie Johnson Final Project – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

sketch

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);
    }
  }  
}
Leave a Reply Cancel reply
