Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
//*******INTERACTIVE DRAWING**********
// Josh Schwarm
// When the user moves on Y axis, shadow changes opacity (also follows object)
// When the user moves on X axis, clouds + hills + sun will move 
// the lights illuminates (when beyond 150)
// light has movement on both X and Y axis
// Text appears with mouse click (Hey Listen!)

void setup() {
  //generates size of canvas
  size(400, 400);

  //line of text appears at start/ only runs once in setup
  println("Hey Listen!");
}

void draw() {
  //draws background
  background(50, 150, 145);
  noStroke();

  fill(60,201,191,60);
  rect(60,50,800,175);
  
  //Hills
  fill(80, 115, 45);
  ellipse(110+mouseX/50, 350, 400, 325);
  //closer hill (will be lighter)
  fill(100, 137, 52);
  ellipse(360+mouseX/30, 400, 320, 360);

  //Ground
  fill(100, 150, 70);
  rectMode(CENTER);
  rect(200, 400, 400, 280);

  //Sun
  //Center
  fill(255, 227, 38);
  ellipse(mouseX/60, 70, 80, 80);
  //middle ring
  fill(255, 227, 20, 50);
  ellipse(mouseX/60, 70, 100, 100);
  //inner ring
  fill(255, 227, 20, 20);
  //inner ring
  ellipse(mouseX/60, 70, 150, 150);

  //Clouds
  fill(255, 240, 240, 180);
  rect(400+mouseX/40, 20, 220, 50, 290);
  rect(150+mouseX/40, 40, 220, 80, 220);
  rect(220+mouseX/40, 80, 290, 40, 290);

  //Colour of shadow
  fill(50, 50, 50, mouseY);
  //Shadow
  ellipse(mouseX, 300, 200, 50);

  //FAIRY
  fill(100, 240, 160);
  //inner ring
  ellipse(mouseX, mouseY, 30, 30);
  //middle ring
  fill(120, 240, 160, 100);
  ellipse(mouseX, mouseY, 40, 40);
  //outer ring
  fill(200, 240, 160, 240-mouseX);
  ellipse(mouseX, mouseY, 80, 80);
}