Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* ASSIGNMENT 1: INTERACTIVE DRAWING
 SHOOTING LASERS AT SOME SHIPS BY IVY ZHAO */

void setup() {
  size(400, 400);
  rectMode(CORNERS);
  ellipseMode(CENTER);
    
}

//////////////////////////
//DRAWING OUT EVERYTHING//
//////////////////////////

void draw() {
  
  frameRate(60);
  background(#2DD5A4);
  noStroke();
 
  //SHADOW/BACK OF TOP SCREEN
  fill(#B83F5F);
  rect(82, 60, 318, 190, 15);
  
  //SHADOW/BACK OF BOTTOM SCREEN
  rect(60, 310, 338, 339, 30);  
  
  //TOP RECTANGULAR SCREEN
  fill(#E85078);
  rect(80, 70, 320, 200, 15);
  
  //TOP BLACK SCREEN
  fill(138 - (mouseY*0.1725), 138 - (mouseY*0.1725), 204 - (mouseY*0.255));
  rect(140, 80, 260, 190);
  
  //SPEAKERS 
  fill(#B83F5F);
  rect(95, 170, 105, 175);
  rect(295, 170, 305, 175);

  //BOTTOM RECTANGULAR SCREEN
  fill(#E85078);
  rect(80, 205, 320, 215, 15);
  quad(80, 208, 60, 318, 339, 318, 320, 213);
  
  //TO BLOCK OUT THE SHARP EDGES OF THE QUAD.
  fill(#B83F5F);
  rect(72, 308, 61, 320);
  rect(327, 308, 338, 320);
  fill(#2DD5A4);
  rect(338, 310, 342, 320);
  
  //TO ROUND THE BOTTOM EDGES OF DEVICE
  fill(#E85078);
  ellipse(72, 308, 20, 20);
  ellipse(327, 308, 20, 20);
  
  //BOTTOM BLACK SCREEN
  fill(138 - (mouseY*0.1725), 138 - (mouseY*0.1725), 204 - (mouseY*0.255));
  quad(138, 215, 124, 305, 276, 305, 262, 215);
 
  //MIDDLE OF DEVICE
  fill(#B83F5F);
  rect(80, 195, 320, 205, 40);
  
  //SHADOW OF SMALLER CIRCLE BUTTONS
  ellipse(110, 303, 10, 10); //left button
  ellipse(290, 303, 10, 10); //bottom right button
  ellipse(288, 290, 10, 10); //top right button
  
  //SHADOW OF BIGGER CIRCLE BUTTONS
  ellipse(293, 233, 15, 15); //top button
  ellipse(298, 258, 15, 15); //bottom button
  ellipse(281, 247, 15, 15); //left button
  ellipse(310, 245, 15, 15); //right button
  
  //SHADOW OF CROSSBAR/KEY
  fill(#B83F5F);
  quad(102 + mouseX/-300, 222 + mouseX/300, 94 + mouseX/-300, 262 + mouseX/-300, 108 + mouseX/200, 262 + mouseX/200, 115 + mouseX/200, 223 + mouseX/200); //vertical bar
  quad(88 + mouseX/-300, 235 + mouseX/-300, 84 + mouseX/-300, 248 + mouseX/-300, 121 + mouseX/200, 250 + mouseX/200, 123 + mouseX/200, 235 + mouseX/200); //horizontal bar
  
  //SMALL CIRCLE BUTTONS
  fill(#FF7284);
  ellipse(110, 300, 10, 10); //left button
  ellipse(290, 300, 10, 10); //bottom right button
  ellipse(288, 287, 10, 10); //top right button
  
  //BIGGER CIRCLE BUTTONS
  ellipse(293, 230, 15, 15); //top button
  ellipse(298, 255, 15, 15); //bottom button
  ellipse(281, 244, 15, 15); //left button
  ellipse(310, 242, 15, 15); //right button
  
  //CROSSBAR/KEYS
  quad(99 + mouseX/200, 221 + mouseX/200, 91 + mouseX/200, 256 + mouseX/200, 105 + mouseX/133, 256 + mouseX/133, 112 + mouseX/133, 221 + mouseX/133); //vertical bar
  quad(86 + mouseX/200, 232 + mouseX/-200, 83 + mouseX/200, 244 + mouseX/-200, 119 + mouseX/133, 244 + mouseX/133, 121 + mouseX/133, 232 + mouseX/133); //horizontal bar

  //PEW PEW LASER GUN
  fill(#1AE3D3);
  ellipse(mouseX/3.3 + 138, 265, 6, 6);
  triangle(mouseX/3.3 + 138, 280, ((mouseX/3.3+138) - 10), 300, (mouseX/3.3+138) + 10, 300);
  fill(#FFFFEC);
  ellipse(mouseX/3.3 + 138, 285, 15, 30);
  rect(mouseX/3.3 + 137, 265, mouseX/3.3 + 139, 288);
    
  fill(#1AE3D3);
  ellipse(mouseX/3.3 + 138, 265, 6, 6);
  rect(mouseX/3.3 + 127, 280, mouseX/3.3 + 149, 282);
  rect(mouseX/3.3 + 127, 284, mouseX/3.3 + 149, 286);
  
  //SHINY CIRCLE THINGS
  fill(255);
  ellipse(150 + mouseX/-40, 280 + mouseY/30, 2, 2); //1
  ellipse(145 + mouseX/20, 180 + mouseY/100, 2, 2); //2
  ellipse(180 + mouseX/20, 135 + mouseY/-50, 2, 2); //3
  ellipse(200 + mouseX/50, 123 + mouseY/-30, 2, 2); //4
  ellipse(230 + mouseX/30, 150 + mouseY/30, 2, 2);
  ellipse(150 + mouseX/-50, 100 + mouseY/-50, 2, 2);
  ellipse(250 + mouseX/-30, 105 + mouseY/30, 2, 2); //5
  ellipse(200 + mouseX/20, 170 + mouseY/50, 2, 2); //6
  ellipse(200 + mouseX/-20, 230 + mouseY/-40, 2, 2);
  ellipse(248 + mouseX/100, 223 + mouseY/100, 2, 2); //7
  ellipse(243 + mouseX/50, 264 + mouseY/50, 2, 2);
  
  fill(255, 100);
  ellipse(150 + mouseX/-40, 280 + mouseY/30, 6, 6); //1
  ellipse(145 + mouseX/20, 180 + mouseY/100, 4, 4); //2
  ellipse(180 + mouseX/20, 135 + mouseY/-50, 6, 6); //3
  ellipse(200 + mouseX/50, 123 + mouseY/-30, 4, 4); //4
  ellipse(250 + mouseX/-30, 105 + mouseY/30, 5, 5); //5
  ellipse(200 + mouseX/20, 170 + mouseY/50, 6, 6); //6
  ellipse(248 + mouseX/100, 223 + mouseY/100, 5, 5); //7
  
  //SPACESHIPS
  fill(#FFFFEC);
  ellipse(160 + mouseX/100, 130 + mouseY/-100, 20, 20);
  ellipse(240 + mouseX/-70, 150 + mouseY/70, 20, 20);
  
  fill(#1AE3D3);
  rect(145 + mouseX/100, 130 + mouseY/-100, 175 + mouseX/100, 140 + mouseY/-100, 10);
  ellipse(160 + mouseX/100, 127 + mouseY/-100, 5, 5);
  
  rect(225 + mouseX/-70, 150 + mouseY/70, 255 + mouseX/-70, 160 + mouseY/70, 10);
  ellipse(240 + mouseX/-70, 147 + mouseY/70, 5, 5);
  
}

//////////////////////
//TO PEW PEW A LASER//
//////////////////////

void mousePressed() {
  
  //frame rate lowered so laser stays longer
  frameRate(10);
  fill(#82E3D3);
  rect(136 + (mouseX/3.3), 80, 140 + (mouseX/3.3), 190);
  rect(136 + (mouseX/3.3), 215, 140+ (mouseX/3.3), 265);
  
  //button pushing for pew pew
  fill(#E85078);
  ellipse(298, 255, 15, 15); //bottom button
  fill(#FF7284);
  ellipse(298, 258, 15, 15);
   
}

//////////////////////////
//TO TURN OFF THE SCREEN//
//////////////////////////

void keyPressed() {
  
  frameRate(1);
  
  fill(#303030);
  rect(140, 80, 260, 190);
  quad(138, 215, 124, 305, 276, 305, 262, 215);
  
  //button pressing for black screen
  fill(#E85078);
  ellipse(110, 300, 10, 10); //left button
  fill(#B83F5F);
  ellipse(110, 304, 10, 10);
  fill(#FF7284);
  ellipse(110, 303, 10, 10);
  
  

}