Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
//castle floats as mouse moves, x&y axis
//clouds move from left to right 
//diamonds flash white on click also illuminate on mouse move
//moon adjusts from full to cresent with mouse move
//moon also casts light with mouse move
//water constantly rises and falls

void setup() {
  //background size
  size(500, 500);
  smooth();
  frameRate(30);
}

void draw() {
  background(40, 0, 0);
  noStroke();

  //I dont like lines
 
  //light from the moon, dims and brightens with vertical (y) axis
  ellipseMode(CENTER);
  fill(50, 0, 10, mouseY-30);
  ellipse(80, 80,mouseX+500,mouseY+500);

  fill(80, 10, 20, mouseY-30);
  ellipse(80, 80, mouseX+300,mouseY+300);

  fill(110, 20, 30, mouseY-30);
  ellipse(80, 80, mouseX+200,mouseY+200);

  fill(140, 30, 40, mouseY-30);
  ellipse(80, 80, mouseX+100, mouseY+100);

  fill(170, 40, 50, mouseY-30);
  ellipse(80, 80, mouseX, mouseY);
  //layer matching moon covering

  //the moon
  fill(240, 145, 58);
  ellipse(80, 80, 70, 70);

  //ellipse covering the moon
  fill(170, 40, 50, mouseY-30);
  //has to match lighting from the moon
  ellipse(90, 70, 60, 60);
  ellipseMode(CENTER);
  
  //water below the floating castle, rises up and down
  fill(20,0,20,100);
  rect(0,(float)(400+Math.sin(frameCount*.03-.8)*6),500,500);
  
  fill(10,0,10,100);
  rect(0,(float)(410+Math.sin(frameCount*.03-.8)*6),500,500);
  
  fill(0,0,0,100);
  rect(0,(float)(430+Math.sin(frameCount*.03-.8)*6),500,500);

  //clouds all move from left to right using X-axis on X-coordinates
  //cloud in top right

  fill(0, 0, 0, 100);
  triangle(230+mouseX/10, 80, 310+mouseX/30, 50, 380+mouseX/30, 80);
  ellipse(260+mouseX/10, 70, 30+mouseX/30, 20);
  ellipse(280+mouseX/10, 50, 40+mouseX/30, 40);
  ellipse(310+mouseX/10, 60, 30+mouseX/30, 30);
  //clone of top right cloud to make shadows
  fill(0, 0, 0, 200);
  triangle(250+mouseX/10, 80, 310+mouseX/30, 50, 380+mouseX/30, 80);
  ellipse(280+mouseX/10, 70, 30+mouseX/30, 20);
  ellipse(300+mouseX/10, 50, 40+mouseX/30, 40);
  ellipse(330+mouseX/10, 60, 30+mouseX/30, 30);

  //bottom right cloud
  fill(0, 0, 0, 100);
  triangle(210+mouseX/10, 300, 350+mouseX/30, 260, 350+mouseX/30, 300);
  triangle(280+mouseX/10, 320, 350+mouseX/30, 260, 500+mouseX/30, 300);
  ellipse(350+mouseX/10, 260, 70+mouseX/30, 50);
  ellipse(305+mouseX/10, 270, 30+mouseX/30, 30);
  ellipse(400+mouseX/10, 250, 50+mouseX/30, 50);
  ellipse(380+mouseX/10, 270, 60+mouseX/30, 30);

  //clone of bottom right cloud to make shadows
  fill(0, 0, 0, 200);
  triangle(190+mouseX/10, 300, 350+mouseX/30, 260, 350+mouseX/30, 300);
  triangle(260+mouseX/10, 320, 350+mouseX/30, 260, 500+mouseX/30, 300);
  ellipse(330+mouseX/10, 260, 70+mouseX/30, 50);
  ellipse(285+mouseX/10, 270, 30+mouseX/30, 30);
  ellipse(380+mouseX/10, 250, 50+mouseX/30, 50);
  ellipse(360+mouseX/10, 270, 60+mouseX/30, 30);

  //clone of bottom left cloud to make shadows
  fill(0, 0, 0, 100);
  triangle(-40 +mouseX/15, 380, 40+mouseX/15, 340, 210, 380);
  ellipse(20+mouseX/15, 340, 50+mouseX/15, 50);
  ellipse(50+mouseX/15, 360, 150+mouseX/15, 40);
  ellipse(65+mouseX/15, 330, 60+mouseX/15, 70);

  //bottom left cloud
  fill(0, 0, 0, 200);
  triangle(-20 +mouseX/15, 380, 40+mouseX/15, 340, 210, 380);
  ellipse(40+mouseX/15, 340, 50+mouseX/15, 50);
  ellipse(70+mouseX/15, 360, 150+mouseX/15, 40);
  ellipse(85+mouseX/15, 330, 60+mouseX/15, 70);

  //castle gets lines so it is the focus (:
  stroke(10);

  //floating castle base
  //I'm making the castle float damn it the code looks crazy
  fill(46, 17, 45, 220);
  triangle(110+mouseX/150, 180+mouseY/150, 200+mouseX/150, 180+mouseY/150, 200+mouseX/150, 300+mouseY/150);
  triangle(170+mouseX/150, 200+mouseY/150, 210+mouseX/150, 280+mouseY/150, 290+mouseX/150, 200+mouseY/150);
  triangle(230+mouseX/150, 240+mouseY/150, 230+mouseX/150, 270+mouseY/150, 260+mouseX/150, 240+mouseY/150);
  triangle(110+mouseX/150, 180+mouseY/150, 160+mouseX/150, 260+mouseY/150, 200+mouseX/150, 180+mouseY/150);
  triangle(140+mouseX/150, 180+mouseY/150, 280+mouseX/150, 170+mouseY/150, 240+mouseX/150, 220+mouseY/150);
  triangle(110+mouseX/150, 210+mouseY/150, 140+mouseX/150, 190+mouseY/150, 140+mouseX/150, 220+mouseY/150);
  //towers and upper section of castle
  triangle(130+mouseX/150, 140+mouseY/150, 120+mouseX/150, 180+mouseY/150, 150+mouseX/150, 180+mouseY/150);
  rect(140+mouseX/150, 120+mouseY/150, 20+mouseX/150, 60+mouseY/150);
  rect(170+mouseX/150, 90+mouseY/150, 30+mouseX/150, 90+mouseY/150);
  triangle(170+mouseX/150, 140+mouseY/150, 150+mouseX/150, 180+mouseY/150, 170+mouseX/150, 180+mouseY/150);
  rect(210+mouseX/150, 110+mouseY/150, 10+mouseX/150, 40+mouseY/150);
  rect(230+mouseX/150, 100+mouseY/150, 10+mouseX/150, 60+mouseY/150);
  rect(240+mouseX/150, 130+mouseY/150, 10+mouseX/150, 40+mouseY/150);
  triangle(180+mouseX/150, 180+mouseY/150, 220+mouseX/150, 140+mouseY/150, 260+mouseX/150, 180+mouseY/150);
  //tower tops...listed left to right
  triangle(130+mouseX/150, 120+mouseY/150, 150+mouseX/150, 130+mouseY/150, 160+mouseX/150, 120+mouseY/150);
  triangle(130+mouseX/150, 120+mouseY/150, 140+mouseX/150, 90+mouseY/150, 160+mouseX/150, 120+mouseY/150);
  triangle(160+mouseX/150, 80+mouseY/150, 180+mouseX/150, 100+mouseY/150, 210+mouseX/150, 90+mouseY/150);
  triangle(160+mouseX/150, 80+mouseY/150, 180+mouseX/150, 40+mouseY/150, 210+mouseX/150, 90+mouseY/150);
  triangle(220+mouseX/150, 90+mouseY/150, 230+mouseX/150, 100+mouseY/150, 250+mouseX/150, 90+mouseY/150);
  triangle(220+mouseX/150, 90+mouseY/150, 220+mouseX/150, 70+mouseY/150, 250+mouseX/150, 90+mouseY/150);
  //floating diamonds

  //actions for floating diamonds, colour change
  fill(255, 0, 0, mouseX-5);
  quad(120, 240, 125, 235, 130, 240, 125, 245);
  quad(75, 195, 80, 190, 85, 195, 80, 200);
  quad(85, 200, 95, 190, 100, 200, 90, 210);
  quad(110, 140, 115, 135, 120, 140, 115, 145);
  quad(195, 10, 200, 5, 205, 10, 200, 15);
  quad(200, 40, 210, 20, 220, 40, 210, 60);
  quad(220, 60, 230, 50, 240, 60, 230, 70);
  quad(260, 120, 270, 110, 280, 120, 270, 130);
  quad(280, 130, 290, 120, 300, 130, 290, 150);
  quad(280, 100, 285, 95, 290, 100, 285, 105);
  quad(290, 155, 295, 150, 300, 155, 295, 160);
  quad(310, 130, 315, 125, 320, 130, 315, 135);

  //center diamond its special and needs detail
  quad(170, 180, 190, 160, 210, 180, 190, 220);
  noStroke();
  fill(200, 0, 0, mouseX-5);
  triangle(190, 160, 210, 180, 190, 180);
  triangle(190, 180, 170, 180, 190, 220);
}

  void mousePressed() {
    frameRate(20);
    //needs to be slowed down to better see effect, but too slow causes leg ):
    
    fill(200);
    quad(120, 240, 125, 235, 130, 240, 125, 245);
    quad(75, 195, 80, 190, 85, 195, 80, 200);
    quad(85, 200, 95, 190, 100, 200, 90, 210);
    quad(110, 140, 115, 135, 120, 140, 115, 145);
    quad(195, 10, 200, 5, 205, 10, 200, 15);
    quad(200, 40, 210, 20, 220, 40, 210, 60);
    quad(220, 60, 230, 50, 240, 60, 230, 70);
    quad(260, 120, 270, 110, 280, 120, 270, 130);
    quad(280, 130, 290, 120, 300, 130, 290, 150);
    quad(280, 100, 285, 95, 290, 100, 285, 105);
    quad(290, 155, 295, 150, 300, 155, 295, 160);
    quad(310, 130, 315, 125, 320, 130, 315, 135);

    //center diamond its special and needs detail
    quad(170, 180, 190, 160, 210, 180, 190, 220);
    noStroke();
    fill(255);
    triangle(190, 160, 210, 180, 190, 180);
    triangle(190, 180, 170, 180, 190, 220);
    
}