Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
// Thunder Storm Interactive Drawing
// Dalton Walker


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


void draw ()
{
  // night sky - deep violet
  background(#030155);
  
  // top level clouds - grey
  fill(87);
  ellipse(30,-10,60,60);
  ellipse(150,-10,60,60);
  ellipse(270,-10,60,60);
  ellipse(390,-10,60,60);
  ellipse(90,-10,100,100);
  ellipse(210,-10,100,100);
  ellipse(330,-20,100,100);
  
  // large thunder cloud - dark grey
  fill(50);
  rect(40,100,160,120);
  ellipse(40,80,80,80);
  ellipse(160,80,80,80);
  ellipse(100,70,100,100);
  
  // earth - green
  fill(#093403);
  rect(0,320,400,400);
  
  // tree trunk - dark brown
  fill(#43080D);
  rect(40,300,80,400);
  
  // tree top - light green
  fill(#31C91E);
  ellipse(60,260,100,100);
  
  // house - beige
  fill(#9A9B35);
  rect(120,240,300,400);
  
  // roof and door - brown
  fill(#363603);
  triangle(120,240,210,160,300,240);
  rect(160,340,200,400);
  
  // window - light grey
  fill(209);
  rect(220,260,280,300);
  line(220,280,280,280);
  line(250,260,250,300);
  
  // doorknob - black
  fill(0);
  ellipse(190,370, 5,5);
  
  // person's head - light beige
  fill(#E3D77C);
  ellipse(mouseX,330,20,20);
  
  // person's body - blue
  fill(#1210C6);
  rect(mouseX-10,340,mouseX+10,400);
  rect(mouseX-20,340,mouseX-10,370);
  rect(mouseX+10,340,mouseX+20,370);
}


// Lightning strike upon mouse click. They lightning strikes the tree and the person.
// Background turns white to simulate light flashing.
void mousePressed()
{
  background(255,255,255,50);
  fill(#EDFF03);
  triangle(80,120,40,190,70,190);
  triangle(60,260,70,180,100,180);
  triangle(140,120,mouseX-90,240,mouseX-50,240);
  triangle(mouseX,330,mouseX-120,230,mouseX-80,230);
}