Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
void setup() {
  
//setup the sketch  
  size(400, 400);
  frameRate(60);
  
//Set to CENTER mode
  ellipseMode(CENTER);
  rectMode(CENTER);
}

void draw() {
  
//Resets frame rate after a mouse click or key press
  frameRate(60);

//Draws the barn wall (background)
  background(80,30,0);
  strokeWeight(1);
  stroke(0);
  fill(60,20,0);
  rect(25, 200, 50, 400);
  fill(80,30,0);
  rect(75, 200, 50, 400);
  fill(60,20,0);
  rect(125, 200, 50, 400);
  fill(80,30,0);
  rect(175, 200, 50, 400);
  fill(60,20,0);
  rect(225, 200, 50, 400);
  fill(80,30,0);
  rect(275, 200, 50, 400);
  fill(60,20,0);
  rect(325, 200, 50, 400);
  fill(80,30,0);
  rect(375, 200, 50, 400);

  line(0, 260, 50, 260);
  line(50, 320, 100, 320);
  line(50, 100, 100, 100);
  line(100, 20, 150, 20);
  line(100, 230, 150, 230);
  line(150, 150, 200, 150);
  line(150, 370, 200, 370);
  
  line(200, 260, 250, 260);
  line(250, 320, 300, 320);
  line(250, 100, 300, 100);
  line(300, 20, 350, 20);
  line(300, 230, 350, 230);
  line(350, 150, 400, 150);
  line(350, 370, 400, 370);

//Draws the spider Web
  noFill();
  strokeWeight(2);
  stroke(255);
  
  ellipse(200, -120, 400, 400);
  ellipse(200, -120, 350, 350);
  ellipse(200, -120, 300, 300);
  ellipse(200, -120, 250, 250);

  line(0, 20, 200, -50);
  line(30, 60, 100, 25);
  line(100, 25, 200, -60);
  line(95, 95, 150, 50);
  line(150, 50, 200, -50);
  line(400, 30, 200, -50);
  line(360, 50, 300, 25);
  line(300, 25, 200, -50);
  line(340, 80, 250, 50);
  line(250, 50, 200, -50);
  line(200, -50, 175, 55);
  line(175, 55, 165, 125);
  line(200, -50, 225, 55);
  line(225, 55, 235, 125);

//Draws the web attached to the spider
  line(200, mouseY, 200, mouseY - 400);

//Draws the spider's shadow
  fill(0,0,0, 40);
  noStroke();
  ellipse(230, mouseY+30, 110, 120);
  ellipse(230, mouseY+110, 60,60);

//leg shadows
  strokeWeight(10);
  stroke(0,0,0, 25);

  line(270, mouseY-10, 310, mouseY-50);
  line(310, mouseY-50, 350, mouseY-20);
  
  line(280, mouseY+10, 330, mouseY);
  line(330, mouseY, 360, mouseY+20);

  line(280, mouseY+40, 350, mouseY+50);
  line(350, mouseY+50, 340, mouseY+100);

  line(270, mouseY+70, 310, mouseY+100);
  line(310, mouseY+100, 280, mouseY+140);

  line(210, mouseY-10, 150, mouseY-50);
  line(150, mouseY-50, 110, mouseY-20);

  line(180, mouseY+10, 130, mouseY);
  line(130, mouseY, 100, mouseY+20);

  line(180, mouseY+40, 110, mouseY+50);
  line(110, mouseY+50, 120, mouseY+100);

  line(190, mouseY+70, 150, mouseY+100);
  line(150, mouseY+100, 180, mouseY+140);

//Web shadow
  strokeWeight(2);
  line(230, mouseY+30, 230, mouseY - 400);

//Draws the abdomen
  fill(0);
  noStroke();
  ellipse(200, mouseY, 110, 120);
  fill(125,0,0);
  triangle(200, mouseY+2, 170, mouseY-30, 230, mouseY-30);
  triangle(200, mouseY-2, 170, mouseY+30, 230, mouseY+30);

//Head and main eyes
  fill(175,0,0);
  ellipse(182, mouseY+105, 8, 8);
  ellipse(218, mouseY+105, 8, 8);
  fill(0);
  ellipse(200, mouseY+80, 60,60);

//Other eyes
  fill(175,0,0);
  ellipse(193, mouseY+103, 5,5);
  ellipse(207, mouseY+103, 5,5);
  ellipse(185, mouseY+90, 5,5);
  ellipse(195, mouseY+95, 5,5);
  ellipse(205, mouseY+95, 5,5);
  ellipse(215, mouseY+90, 5,5);

//Draws the legs
  strokeWeight(10);
  stroke(0);

  line(240, mouseY-40, 280, mouseY-80);
  line(280, mouseY-80, 320, mouseY-50);

  line(250, mouseY-20, 300, mouseY-30);
  line(300, mouseY-30, 330, mouseY-10);

  line(250, mouseY+10, 320, mouseY+20);
  line(320, mouseY+20, 310, mouseY+70);

  line(240, mouseY+40, 280, mouseY+70);
  line(280, mouseY+70, 250, mouseY+110);

  line(180, mouseY-40, 120, mouseY-80);
  line(120, mouseY-80, 80, mouseY-50);

  line(150, mouseY-20, 100, mouseY-30);
  line(100, mouseY-30, 70, mouseY-10);

  line(150, mouseY+10, 80, mouseY+20);
  line(80, mouseY+20, 90, mouseY+70);

  line(160, mouseY+40, 120, mouseY+70);
  line(120, mouseY+70, 150, mouseY+110);

//Draws the lighting
  noStroke();
  fill(0,0,0, 30);
  rect(200,200,400,400); //darker overlay

  fill(255,255,230, 35);
  ellipse(20,-10, 400, 400); //light source

}

void mousePressed() {

//Change the eye colour to yellow  
  fill(250,250,0);
  ellipse(182, mouseY+105, 8, 8);
  ellipse(218, mouseY+105, 8, 8);
  fill(0);
  ellipse(200, mouseY+80, 60,60);

  fill(250,250,0);
  ellipse(193, mouseY+103, 5,5);
  ellipse(207, mouseY+103, 5,5);
  ellipse(185, mouseY+90, 5,5);
  ellipse(195, mouseY+95, 5,5);
  ellipse(205, mouseY+95, 5,5);
  ellipse(215, mouseY+90, 5,5);
  
//Makes colour change last longer
  frameRate(15);
}

void keyPressed() {
  
//Lights out!
  fill(0,0,0);
  rect(200,200,400,400);
  frameRate(1);
  
//Head and main eyes
  fill(175,0,0);
  ellipse(182, mouseY+105, 8, 8);
  ellipse(218, mouseY+105, 8, 8);
  fill(0);
  ellipse(200, mouseY+80, 60,60);

//Other eyes
  fill(175,0,0);
  ellipse(193, mouseY+103, 5,5);
  ellipse(207, mouseY+103, 5,5);
  ellipse(185, mouseY+90, 5,5);
  ellipse(195, mouseY+95, 5,5);
  ellipse(205, mouseY+95, 5,5);
  ellipse(215, mouseY+90, 5,5);
}