Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
void setup()
{
  //set screen size
  size(400, 400);
  //no outlines
  noStroke();
}


//looping function at framerate
void draw()
{
  //blue sky
  background(107, 177, 211);
  //clouds white and semi-transparent
  fill(255, 100);
  //clouds move left to right with time
  rect(0 + frameCount / 5.5, 64, 80, 32, 20);
  fill(255, 60);
  rect(110 + frameCount / 5.5, 15, 48, 32, 18);
  fill(255, 120);
  rect(135 + frameCount / 5.5, 40, 120, 45, 18);
  fill(255, 90);
  rect(-250 + frameCount / 5.5, 90, 180, 75, 23);
  fill(255, 80);
  rect(-550 + frameCount / 5.5, 30, 200, 85, 23);

  //ground
  fill(50, 98, 19);
  rect(0, 300, 400, 200);

  //tree
  fill(116, 64, 21);
  triangle(128, 384, 176, 384, 176, 368);
  triangle(176, 384, 176, 400, 192, 384);
  triangle(208, 384, 224, 384, 216, 400);
  triangle(224, 384, 224, 368, 256, 384);
  triangle(176, 368, 224, 368, 200, 288);
  triangle(200, 320, 176, 240, 224, 240);
  triangle(176, 240, 144, 208, 176, 224);
  triangle(224, 240, 224, 224, 256, 224);
  triangle(240, 224, 256, 224, 272, 240);
  triangle(224, 224, 240, 224, 240, 208);
  triangle(240, 224, 256, 224, 288, 192);
  triangle(288, 192, 288, 208, 256, 224);
  //tree branches move with mouseX for wind
  triangle(176, 224, 176, 192, 192 + mouseX * 0.05, 224);
  triangle(176, 208, 176, 192, 144 + mouseX * 0.03, 176);
  triangle(176, 192, 160, 160, 144 + mouseX * 0.05, 160);
  triangle(192, 224, 224, 224, 224, 192);
  triangle(224, 192, 224, 208, 240, 176);
  triangle(224, 208, 240, 176, 256 + mouseX * 0.05, 160);
  triangle(224, 192, 240, 176, 240 + mouseX * 0.03, 144);
  triangle(240, 160, 256, 144, 288 + mouseX * 0.05, 128);
  triangle(288, 208, 288, 192, 320 + mouseX * 0.03, 160);
  triangle(256, 224, 272, 216, 320 + mouseX * 0.05, 216);
  triangle(288, 192, 288, 200, 336 + mouseX * 0.03, 192);
  triangle(176, 240, 160, 224, 96 + mouseX * 0.05, 224);
  triangle(128, 224, 144, 224, 112 + mouseX * 0.03, 208);
  triangle(144, 208, 144, 192, 80 + mouseX * 0.05, 176);
  triangle(144, 208, 144, 192, 176 + mouseX * 0.05, 240);
  triangle(128, 192, 136, 192, 96 + mouseX * 0.03, 128);
  triangle(160, 192, 176, 192, 144 + mouseX * 0.05, 96);
  triangle(160, 192, 176, 192, 192 + mouseX * 0.03, 112);
  triangle(176, 176, 184, 160, 208 + mouseX * 0.05, 144);
  triangle(240, 160, 240, 144, 288 + mouseX * 0.03, 112);
  triangle(240, 144, 240, 128, 272 + mouseX * 0.05, 64);
  triangle(240, 144, 240, 128, 256 + mouseX * 0.03, 144);
  triangle(240, 144, 240, 128, 224 + mouseX * 0.05, 96);
  triangle(160, 144, 144, 144, 160 + mouseX * 0.05, 96);
  rect(176, 368, 48, 16);
  rect(192, 272, 16, 48);
  rect(176, 224, 48, 16);

  //leaf colour changes from green to fall colours with mouseY
  fill(41 + mouseY / 4., 139, 35);
  //leaves grow with increasing mouseY
  //leaves move right to left with mouseX for wind
  ellipse(96 + mouseX * 0.03, 224, mouseY / 14., mouseY / 45.);
  ellipse(112 + mouseX * 0.02, 208, mouseY / 16., mouseY / 50.);
  fill(41 + mouseY / 3., 139, 35);
  ellipse(80 + mouseX * 0.04, 176, mouseY / 13., mouseY / 42.);
  ellipse(96 + mouseX * 0.02, 128, mouseY / 18., mouseY / 53.);
  fill(41 + mouseY / 4., 139, 35 - mouseY);
  ellipse(144 + mouseX * 0.05, 96, mouseY / 16., mouseY / 50.);
  ellipse(144 + mouseX * 0.02, 144, mouseY / 16., mouseY / 50.);
  ellipse(144 + mouseX * 0.03, 160, mouseY / 19., mouseY / 55.);
  fill(41 + mouseY / 6., 139 - mouseY/13, 35);
  ellipse(144 + mouseX * 0.02, 176, mouseY / 15., mouseY / 41.);
  ellipse(160 + mouseX * 0.04, 96, mouseY / 16., mouseY / 50.);
  ellipse(192 + mouseX * 0.02, 112, mouseY / 16., mouseY / 50.);
  ellipse(208 + mouseX * 0.02, 144, mouseY / 21., mouseY / 57.);
  fill(41 + mouseY / 6., 139 - mouseY/13, 35 - mouseY / 8);
  ellipse(224 + mouseX * 0.03, 96, mouseY / 16., mouseY / 50.);
  ellipse(272 + mouseX * 0.02, 80, mouseY / 16., mouseY / 50.);
  ellipse(288 + mouseX * 0.05, 112, mouseY / 16., mouseY / 50.);
  ellipse(288 + mouseX * 0.02, 128, mouseY / 13., mouseY / 45.);
  fill(41 + mouseY / 4., 139, 35);
  ellipse(256 + mouseX * 0.03, 160, mouseY / 16., mouseY / 50.);
  ellipse(240 + mouseX * 0.02, 208, mouseY / 22., mouseY / 58.);
  ellipse(320 + mouseX * 0.04, 160, mouseY / 16., mouseY / 50.);
  fill(41 + mouseY / 3., 139, 35 - mouseY / 6);
  ellipse(336 + mouseX * 0.02, 192, mouseY / 12., mouseY / 41.);
  ellipse(320 + mouseX * 0.03, 216, mouseY / 16., mouseY / 50.);
  ellipse(272 + mouseX * 0.02, 240, mouseY / 24., mouseY / 58.);
}