Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* 
 /////////"Reaching New Heights"
 /////////First interactive drawing for Intro to Computation Class
 /////////by Caitlin Hopwood 
 /////////September 16th, 2016;
 You take control of a mysterious little star as your cursor, intriguing
 the little red character as his eye follows your location.
 Clicking causes the little star to flash!
 */

void setup () {
  //set up the canvas size
  size (400, 400);
  //set the mode to use for rect() and ellipse() functions
  ellipseMode(CORNERS);
  rectMode(CORNERS);
  //Text at the bottom when drawing starts!
  println("What could that be?");
}
void draw () {
  //Set the framerate for its default amount of frames refreshed
  frameRate(60);
  //make the background dark purple when mouse is at top
  //fade to red when mouse is at bottom
  background(mouseY*.2+50, 0, -mouseY*.5+100);
  //â–ˆ Background 'sky'
  noStroke();
  /*layered rectangles on sky to make it 
  appear darker the further up it goes*/
  fill(mouseY*.2+1, 0, -mouseY*.2+20);
  rect(0, 0, 400, 120);
  fill(mouseY*.2+1, 0, -mouseY*.2+20, 180);
  rect(0, 120, 400, 200);
  fill(mouseY*.2+1, 0, -mouseY*.2+20, 100);
  rect(0, 200, 400, 260);

  //layered ellipses behind to make moon "shine"
  //When mouse moves down, turns more red
  fill (252, 255, -mouseY*.2+232, 58);
  ellipse (250, 0, 390, 130);
  ellipse (240, -10, 400, 140);

  //â–ˆ Moon
  //When mouse moves down, turns more red
  fill (240, 238, -mouseY*.2+227);
  ellipse (260, 10, 380, 120);

  //craters
  //When mouse moves down, turns more red
  fill (211, 206, -mouseY*.2+192);
  ellipse (280, 40, 300, 60);
  ellipse (310, 60, 340, 80);
  ellipse (340, 30, 350, 40);
  ellipse (350, 80, 360, 90);

  //â–ˆ Stars
  stroke(255, 255, 255);
  strokeWeight(1);
  point(50, 30);
  point(170, 20);
  point(190, 40);
  point(210, 30);
  point(110, 110);
  point(190, 130);
  point(240, 140);
  point(10, 165);
  point(40, 140);
  point(300, 160);
  point(320, 140);
  point(360, 150);
  point(380, 180);
  noStroke();
  
  //â–ˆ Clouds
  //When mouse moves down, turns more red
  fill(109, 83, -mouseY*.12+139);
  //Mouse movement causes clouds to move slightly
  ellipse(-mouseX*.009+20, -mouseY*.007+60, -mouseX*.009+80, -mouseY*.007+90);
  ellipse(-mouseX*.009+40, -mouseY*.007+50, -mouseX*.009+120, -mouseY*.007+80);
  ellipse(-mouseX*.009+90, -mouseY*.007+65, -mouseX*.009+140, -mouseY*.007+80);

  ellipse(-mouseX*.009+10, -mouseY*.007+270, -mouseX*.009+100, -mouseY*.007+300);
  ellipse(-mouseX*.009+40, -mouseY*.007+240, -mouseX*.009+100, -mouseY*.007+280);
  ellipse(-mouseX*.009+80, -mouseY*.007+270, -mouseX*.009+120, -mouseY*.007+300);

  ellipse(-mouseX*.009+220, -mouseY*.007+95, -mouseX*.009+250, -mouseY*.007+115);
  ellipse(-mouseX*.009+240, -mouseY*.007+90, -mouseX*.009+280, -mouseY*.007+110);

  //â–ˆ Background platforms
  fill(93, 69, -mouseY*.09+88);
  //Mouse movement causes platforms to move slightly
  triangle(-mouseX*.03+50, -mouseY*.009+150, -mouseX*.03+70, -mouseY*.009+150, -mouseX*.03+70, -mouseY*.009+170);
  triangle(-mouseX*.03+70, -mouseY*.009+150, -mouseX*.03+90, -mouseY*.009+150, -mouseX*.03+85, -mouseY*.009+150);
  triangle(-mouseX*.03+50, -mouseY*.009+150, -mouseX*.03+80, -mouseY*.009+145, -mouseX*.03+80, -mouseY*.009+150);
  triangle(-mouseX*.03+80, -mouseY*.009+145, -mouseX*.03+80, -mouseY*.009+160, -mouseX*.03+100, -mouseY*.009+145);
  triangle(-mouseX*.03+70, -mouseY*.009+150, -mouseX*.03+90, -mouseY*.009+150, -mouseX*.03+85, -mouseY*.009+170);
  triangle(-mouseX*.03+90, -mouseY*.009+145, -mouseX*.03+100, -mouseY*.009+145, -mouseX*.03+100, -mouseY*.009+155);

  triangle(-mouseX*.03+280, -mouseY*.009+220, -mouseX*.03+300, -mouseY*.009+240, -mouseX*.03+310, -mouseY*.009+220);
  triangle(-mouseX*.03+280, -mouseY*.009+220, -mouseX*.03+330, -mouseY*.009+200, -mouseX*.03+325, -mouseY*.009+220);
  triangle(-mouseX*.03+320, -mouseY*.009+210, -mouseX*.03+330, -mouseY*.009+210, -mouseX*.03+340, -mouseY*.009+230);
  triangle(-mouseX*.03+310, -mouseY*.009+220, -mouseX*.03+325, -mouseY*.009+220, -mouseX*.03+320, -mouseY*.009+230);
  triangle(-mouseX*.03+330, -mouseY*.009+200, -mouseX*.03+350, -mouseY*.009+210, -mouseX*.03+325, -mouseY*.009+220);


  //â–ˆ Platform under Gregory [this gave me so much trouble]

  triangle(80, 322, 200, 310, 300, 322);
  triangle(80, 322, 100, 380, 110, 370);
  triangle(90, 350, 140, 400, 220, 340);
  triangle(200, 360, 210, 380, 220, 360);
  triangle(80, 322, 300, 322, 100, 360);
  triangle(90, 350, 300, 320, 290, 350);
  triangle(140, 360, 290, 360, 290, 330);
  triangle(220, 360, 290, 380, 290, 350);

  //Shadow under Gregory
  fill(58, 47, -mouseY*.03+59, 100);
  ellipse(130, 335, 260, 355);

  //â–ˆ DRAW GREGORY!!

  //draw gregory's wings
  fill(255, 193, 193);
  ellipse(180, 240, 240, 260);
  ellipse(180, 250, 230, 270);

  //draw gregory's body
  fill(222, 63, 63);
  triangle(170, 220, 170, 340, 260, 340);
  //draw Gregory's belly scales
  fill(255, 193, 193);
  rect(164, 240, 185, 265, 3);
  rect(164, 265, 190, 295, 3);
  rect(164, 295, 200, 340, 3);

  //draw gregory's head
  fill(222, 63, 63);
  ellipse(130, 170, 200, 240);

  //gregory's eye
  fill(255, 255, 255);
  ellipse(145, 190, 180, 225);
  fill(222, 63, 63);

  //iris! Changes from purple to red based on vertical mouse movement
  fill(207, 98, -mouseY+255);

  //iris moves, contained within eye ellipse
  ellipse(150+mouseX*.03, 190+mouseY*.05, 164+mouseX*.03, 205+mouseY*.05);

  //iris white dot [to make him look alive!]
  fill(255, 255, 255);
  ellipse(160+mouseX*.03, 195+mouseY*.05, 165+mouseX*.03, 200+mouseY*.05);

  //hidden eyelid
  fill(222, 63, 63);
  //moves down on gregory's face based on mouse location
  quad(145, mouseY*.03+190, 155, 180, 180, 180, 180, mouseY*.03+185);

  //â–ˆ Star mouse cursor!
  fill(237, 247, 250, 100);
  //shine behind it~ pmouse for the shine to drag behind a bit
  ellipse(pmouseX-7, pmouseY-7, pmouseX+7, pmouseY+14);
  //switch fill back to complete opacity for cursor itself
  fill(237, 247, 250);
  triangle(mouseX, mouseY, mouseX, mouseY-10, mouseX-5, mouseY);
  triangle(mouseX, mouseY, mouseX, mouseY-10, mouseX+5, mouseY);
  triangle(mouseX-5, mouseY, mouseX+5, mouseY, mouseX, mouseY+20);
  triangle(mouseX-10, mouseY, mouseX+10, mouseY, mouseX, mouseY+10);
}
//â–ˆ Next code to make cursor flash on click! 
//Framerate lowered to make flash last longer
void mousePressed() {
  frameRate(5);
  fill(255, 255, 255, 60);

  //Layered ellipses to create "flash" effect at 60/255 opacity
  ellipse(mouseX-200, mouseY-200, mouseX+200, mouseY+200);
  fill(255, 255, 255, 60);
  ellipse(mouseX-150, mouseY-150, mouseX+150, mouseY+150);
  fill(255, 255, 255, 60);
  ellipse(mouseX-100, mouseY-100, mouseX+100, mouseY+100);
  fill(255, 255, 255, 60);
  ellipse(mouseX-50, mouseY-50, mouseX+50, mouseY+50);
  //text that displays when mouse is clicked
  println("SHINE!");
}