Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* 
 spell at midnight by jessica peng
 
 a witch floats around in her laboratory. her potions bubble away. 
 eyes follow wherever she goes. 
 use the mouse to move her up, down, back, and forth, and click to cast the spell!
 
 */

void setup() {
  size(600, 400);
  noStroke();
  noCursor();
  smooth();
}

void draw() {
  background(41, 255, 207);
  ellipseMode(CENTER);
  //must set frameRate to 60 to prevent the frameRate(5) from void mousePressed from carrying over
  frameRate(60); 

  //windows - 3 sections, colours change by tying opacity to mouseX
  fill(0, 80, 80);
  triangle(600, 0, 600, 200, 400, 0);
  triangle(0, 0, 0, 200, 300, 0);
  fill(86, 208, 174, mouseX/3);
  triangle(400, 0, 600, 200, 400, 200);
  fill(236, 251, 119, mouseY/3);
  triangle (300, 0, 200, 200, 0, 200);

  //floor
  fill(0, 80, 80, 200);
  rect(0, 200, 600, 300);

  //potion bubbles - use trig functions and frameCount to generate bobbing movement
  fill(11, 175, 200, mouseX/3);
  ellipse(95, 3*cos(frameCount * 0.05) + 100, 10, 10);
  ellipse(98, 5*cos(frameCount * 0.01) + 80, 7, 7);
  ellipse(80, 50*cos(frameCount * 0.01) + 60, 5, 6);
  ellipse(50, 8*sin(frameCount * 0.01) + 100, 20, 20);
  ellipse(50, 3*cos(frameCount * 0.01) + 65, 25, 5);
  ellipse(50, 2*cos(frameCount * 0.01) + 75, 20, 5);
  ellipse(575, 3*cos(frameCount * 0.01)+ 50, 10, 10);


  //potion bottles - reduced opacity to emulate glass
  fill(236, 251, 119, 150);
  rect(85, 55, 20, 70, 100);
  rect(525, 100, 10, 60, 10);

  fill(193, 218, 214, 100);
  rect(75, 15, 10, 110, 100);

  fill(183, 175, 163, 150);
  rect(25, 80, 50, 50, 50);
  rect(45, 28, 10, 30, 50);
  rect(560, 40, 30, 30, 10);

  //blocks - 5th value in rect() to round the corners
  fill(86, 208, 174);
  rect(0, 120, 150, 100, 10);

  fill(52, 221, 221);
  rect(550, 65, 50, 150, 10);

  fill(67, 174, 183);
  rect(500, 155, 40, 60, 10);

  fill(0, 0, 100, 80);
  rect(75, 145, 100, 75, 10);

  fill(150, 194, 97);
  rect(80, 150, 100, 70, 10);

  //more potion bottles - in front of blocks
  ellipse(150, 132, 30, 30);
  rect(145, 95, 10, 20, 10);
  rect(505, 135, 20, 20, 10);
  rect(512, 125, 6, 10, 10);

  //more bubbles
  fill(255, 255, 255, mouseX/3);
  ellipse(150, 20*cos(frameCount * 0.01) + 120, 8, 5);
  ellipse(530, 3*sin(frameCount * 0.02) + 115, 5, 6);
  
  //block shadows - two thin rectangles per block to emulate shadows
  fill(0, 0, 100, 80);
  rect(0, 220, 175, 10, 5);
  rect(0, 230, 165, 10, 5);
  rect(555, 215, 60, 10, 5);
  rect(565, 225, 60, 10, 5);
  rect(505, 215, 40, 10, 5);
  rect(520, 225, 30, 10, 5);

  //background eyes

  //scleras
  fill(240, 240, 240);
  ellipse(120, 175, 25, 25);
  ellipse(70, 200, 28, 28); 
  ellipse(535, 80, 25, 25);

  //irises - tied to mouseX and mouseY in order to follow movement
  fill(245, 225, 0);
  ellipse(mouseX/100 + 120, mouseY/100 + 175, 15, 15);
  ellipse(mouseX/100 + 70, mouseY/100 + 200, 18, 18);
  ellipse(mouseX/100 + 530, mouseY/100 + 80, 13, 13);

  //pupils - same as irises
  fill(0, 0, 0);
  ellipse(mouseX/100 + 121, mouseY/100 + 175, 5, 5);
  ellipse(mouseX/100 + 72, mouseY/100 + 202, 6, 6);
  ellipse(mouseX/100 + 530, mouseY/100 + 82, 5, 5);

  //witch's shadow - shrinks and grows depending on mouse movement, follows mouse
  fill(0, 0, 100, 100);
  ellipse(mouseX + 50, 370, mouseY/2 + 30, 20);

  //witch - moves with the mouse
  fill(0, 0, 60);

  //head
  triangle(mouseX + 40, (mouseY - 210)/1.5, mouseX + 60, (mouseY - 170)/1.5, mouseX + 40, (mouseY - 170)/1.5);
  rect(mouseX, (mouseY - 210)/1.5, 40, 40);

  //dress
  triangle(mouseX, mouseY/1.5, mouseX + 100, (mouseY + 50)/1.5, mouseX, (mouseY - 200)/1.5);

  //hair
  fill(100, 100, 100, 200);
  rect(mouseX, (mouseY - 210)/1.5, 40, 80);
  triangle(mouseX + 40, (mouseY - 210.4)/1.5 + 80, mouseX, (mouseY - 210.4)/1.5 + 80, mouseX + 40, (mouseY - 211)/1.5 + 110);

  //hat
  fill(0, 0, 60);
  triangle(mouseX, (mouseY - 210)/1.5 + 3, mouseX - 40, (mouseY - 210)/1.5 - 80, mouseX + 40, (mouseY - 210)/1.5);
  stroke(0, 0, 60);
  strokeWeight(10);
  line(mouseX - 60, (mouseY - 210)/1.5 + 10, mouseX + 95, (mouseY - 210)/1.5 - 10);

  //foreground potion bubbles
  noStroke();
  fill(255, 255, 255, mouseX/3);
  ellipse(60, 10*cos(frameCount * 0.01) + 327, 20, 20);
  ellipse(145, 5*sin(frameCount * 0.01) + 280, 20, 10);

  //foreground eyes

  //scleras
  fill(240, 240, 240);
  ellipse(210, 350, 40, 40);
  ellipse(170, 280, 30, 30);
  ellipse(570, 390, 50, 50);
  ellipse(595, 345, 40, 40);

  //irises
  fill(245, 225, 0);
  ellipse(mouseX/100 + 212, mouseY/100 + 340, 19, 15);
  ellipse(mouseX/100 + 170, mouseY/100 + 275, 18, 16);
  ellipse(mouseX/100 + 560, mouseY/100 + 380, 20, 20);
  ellipse(mouseX/100 + 585, mouseY/100 + 340, 15, 15);

  //pupils
  fill(0, 0, 0);
  ellipse(mouseX/100 + 212, mouseY/100 + 338, 7, 4);
  ellipse(mouseX/100 + 170, mouseY/100 + 273, 5, 5);
  ellipse(mouseX/100 + 556, mouseY/100 + 378, 8, 8);
  ellipse(mouseX/100 + 582, mouseY/100 + 338, 6, 6);

  //foreground potion bottles
  fill(236, 251, 119, 150);
  ellipse(60, 327, 50, 50);
  rect(53, 260, 15, 40, 20); 
  fill(232, 208, 169, 150);
  rect(120, 270, 50, 30, 10);

  //foreground blocks
  fill(20, 85, 85);
  rect(-10, 350, 125, 50, 10);
  fill(20, 56, 70);
  rect(100, 300, 100, 200, 10);

  //magic lights - 3 ellipses on top of one another, increasing in size, decreasing in transparency
  fill(255, 255, 255, 80);
  ellipse(500, 3*sin(frameCount * 0.05) + 200, 70, 70);

  fill (255, 255, 255, 200);
  ellipse(500, 3* sin(frameCount * 0.05) + 200, 50, 50);

  fill(255, 255, 255);
  ellipse(500, 3* sin(frameCount * 0.05) + 200, 30, 30);

  //magic light's shadow
  fill(0, 0, 100, 80);
  ellipse(500, 370, 3* sin(frameCount * 0.05) + 40, 10);
}

void mousePressed() {
  frameRate(5);

  //set magic light colour change

  fill(250, 250, 10, 100);
  ellipse(500, 3*sin(frameCount * 0.05) + 200, 70, 70);

  fill(250, 250, 220, 200);
  ellipse(500, 3* sin(frameCount * 0.05) + 200, 50, 50);

  fill(250, 100, 100, 200);
  ellipse(500, 3* sin(frameCount * 0.05) + 200, 30, 30);

  //set eyeball colour change: iris

  ellipse(mouseX/100 + 120, mouseY/100 + 175, 15, 15);
  ellipse(mouseX/100 + 70, mouseY/100 + 200, 18, 18);
  ellipse(mouseX/100 + 530, mouseY/100 + 80, 13, 13);

  ellipse(mouseX/100 + 212, mouseY/100 + 340, 19, 15);
  ellipse(mouseX/100 + 170, mouseY/100 + 275, 18, 16);
  ellipse(mouseX/100 + 560, mouseY/100 + 380, 20, 20);
  ellipse(mouseX/100 + 585, mouseY/100 + 340, 15, 15);


  //set eyeball colour change: pupil

  fill(250, 250, 220, 200);
  ellipse(mouseX/100 + 121, mouseY/100 + 175, 5, 5);
  ellipse(mouseX/100 + 72, mouseY/100 + 202, 6, 6);
  ellipse(mouseX/100 + 530, mouseY/100 + 82, 5, 5);

  ellipse(mouseX/100 + 212, mouseY/100 + 338, 7, 4);
  ellipse(mouseX/100 + 170, mouseY/100 + 273, 5, 5);
  ellipse(mouseX/100 + 556, mouseY/100 + 378, 8, 8);
  ellipse(mouseX/100 + 582, mouseY/100 + 338, 6, 6);
}