Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* 
   Lori Sengbusch - Assignment 1: Interactive Drawing
   Link - BOTW
   Vertical mouse - rises sun/moon
   Horizontal mouse - pan
   Click - "the blood moon rises once again"
*/

void setup(){
  size(400,400); //canvas size
}

void draw(){  
  background(75-(mouseY*0.15),80-(mouseY*0.2),135-(mouseY*0.2));
  frameRate(60); //default, refreshes 60 frames per second
  
  //sky - gets slightly darker with vertical mouse movement
  rectMode(CORNERS);
  noStroke();
  fill(140-(mouseY*0.15),120-(mouseY*0.2),120-(mouseY*0.2));
  rect(0,50,400,400);
  fill(220-(mouseY*0.15),165-(mouseY*0.2),115-(mouseY*0.2));
  rect(0,100,400,400);
  fill(250-(mouseY*0.15),225-(mouseY*0.2),150-(mouseY*0.2));
  rect(0,150,400,400);
  
  //smoke
  fill(200-(mouseY*0.15));
  ellipse((mouseX+160),120,40,15);
  ellipse((mouseX+170),110,60,15);
  ellipse((mouseX+180),100,80,15);
  
  //sun
  fill(250,250,180);
  ellipse((mouseX+50),(mouseY*0.9)+50,75,75);
  
  //moon
  fill(255);
  ellipse((mouseX-200),(mouseY*(-0.9))+450,75,75);
  fill(255,50);
  ellipse((mouseX-200),(mouseY*(-0.9))+450,95,95);
  
  //mountains
  fill(160-(mouseY*0.15),160-(mouseY*0.15),145-(mouseY*0.15));
  rect(0,220,400,400);
  quad(mouseX+40,220,mouseX+120,140,mouseX+160,140,mouseX+220,220);
  
  //clouds
  ellipseMode(CENTER);
  fill(250,245,220);
  ellipse((mouseX-180)*1.5,150,100,20);
  ellipse((mouseX-185)*1.5,155,160,10);
  ellipse((mouseX-280)*1.5,85,100,20);
  ellipse((mouseX-288)*1.5,90,160,10);
  ellipse((mouseX+50)*2,150,100,20);
  ellipse((mouseX+55)*2,155,160,10);
  ellipse((mouseX+80)*3,35,100,20);
  ellipse((mouseX+75)*3,40,160,10);
  fill(250,245,220,70);
  ellipse((mouseX-140)*2,130,100,20);
  ellipse((mouseX+140)*2,130,100,20);
  ellipse((mouseX+150)*2,18,100,10);
  ellipse((mouseX-40)*2,70,100,20);
  ellipse((mouseX+240)*4,70,100,20);
  ellipse((mouseX-300)*2.5,180,100,20);
  
  //castle
  fill(90-(mouseY*0.15),105-(mouseY*0.15),125-(mouseY*0.15));
  rect(0,260,400,400);
  
  rectMode(CENTER);
  rect(mouseX+80,250,20,40);
  triangle(mouseX+70,230,mouseX+80,210,mouseX+90,230);
  rect(mouseX+60,270,20,40);
  triangle(mouseX+50,250,mouseX+60,230,mouseX+70,250);
  rect(mouseX+100,270,20,40);
  triangle(mouseX+90,250,mouseX+100,230,mouseX+110,250);
  rect(mouseX+80,250,60,20);
  rect(mouseX+80,260,100,20);
  
  //bridge
  fill(110-(mouseY*0.15),115-(mouseY*0.15),90-(mouseY*0.15));
  rectMode(CORNERS);
  rect(0,340,400,400);
  fill(110-(mouseY*0.15),115-(mouseY*0.15),90-(mouseY*0.15),100);
  rect(0,300,400,400);
  fill(90-(mouseY*0.15),105-(mouseY*0.15),125-(mouseY*0.15));
  rectMode(CENTER);
  rect(mouseX+80,360,40,20);
  rect(mouseX+140,360,40,20);
  
  //rock
  fill(50,50,55);
  ellipse((mouseX-80),400,600,40);
  fill(60,60,65);
  quad((mouseX-220),390, (mouseX-190),340, (mouseX-20),340, (mouseX),390);
  fill(50,50,55);
  quad((mouseX-180),390, (mouseX-160),320, (mouseX-50),320, (mouseX-30),390);
  
  //link
  //legs
  fill(60,50,45);
  quad((mouseX-115),320, (mouseX-118),295, (mouseX-102),295, (mouseX-105),320);
  quad((mouseX-118),295, (mouseX-115),285, (mouseX-105),285, (mouseX-102),295);
  quad((mouseX-115),285, (mouseX-118),265, (mouseX-102),265, (mouseX-105),285);
  
  quad((mouseX-95),320, (mouseX-98),295, (mouseX-82),295, (mouseX-85),320);
  quad((mouseX-98),295, (mouseX-95),285, (mouseX-85),285, (mouseX-82),295);
  quad((mouseX-95),285, (mouseX-98),265, (mouseX-82),265, (mouseX-85),285);
  
  //shield
  fill(125,125,125);
  ellipse((mouseX-125),240,20,40);
  fill(60,60,65);
  ellipse((mouseX-120),240,20,35);
  
  //tunic
  fill(20,40,55);
  quad((mouseX-120),268, (mouseX-115),235, (mouseX-88),235, (mouseX-82),268);
  quad((mouseX-115),235, (mouseX-120),205, (mouseX-82),205, (mouseX-88),235);
  quad((mouseX-120),205, (mouseX-116),200, (mouseX-85),200, (mouseX-82),205);
  //arms
  rectMode(CENTER);
  rect((mouseX-85),230,10,50);
  quad((mouseX-130),255, (mouseX-116),200, (mouseX-105),200, (mouseX-120),255);
  
  //shieth
  fill(60,50,45);
  quad((mouseX-115),255, (mouseX-100),200, (mouseX-90),200, (mouseX-105),255);
  
  //sword
  fill(255);
  quad((mouseX-55),295, (mouseX-85),250, (mouseX-80),250, (mouseX-52),298);
  //hand
  fill(140,120,120);
   ellipse((mouseX-100),180,20,30);
  //head
  fill(140,120,120);
  rectMode(CENTER);
  rect((mouseX-100),190,10,20);
  ellipse((mouseX-100),180,20,30);
  triangle((mouseX-80),180,(mouseX-100),176,(mouseX-100),184);
  triangle((mouseX-120),180,(mouseX-100),176,(mouseX-100),184);
  fill(220,165,115);
  ellipse((mouseX-100),175,20,25);
  triangle((mouseX-100),170,(mouseX-110),195,(mouseX-100),195);
  
  //sunset sky
  rectMode(CORNERS);
  noStroke();
  fill(20,20,60,(mouseY*0.3));
  rect(0,0,400,400);
}

void mousePressed(){
  frameRate(1); //shows one frame per one second
  //blood moon
  fill(240,0,0);
  ellipse((mouseX-200),(mouseY*(-0.9))+450,75,75);
  
  //redraw shapes so moon doesn't overlap
  //clouds
  ellipseMode(CENTER);
  fill(250,245,220);
  ellipse((mouseX-180)*1.5,150,100,20);
  ellipse((mouseX-185)*1.5,155,160,10);
  ellipse((mouseX-280)*1.5,85,100,20);
  ellipse((mouseX-288)*1.5,90,160,10);
  ellipse((mouseX+50)*2,150,100,20);
  ellipse((mouseX+55)*2,155,160,10);
  ellipse((mouseX+80)*3,35,100,20);
  ellipse((mouseX+75)*3,40,160,10);
  fill(250,245,220,70);
  ellipse((mouseX-140)*2,130,100,20);
  ellipse((mouseX+140)*2,130,100,20);
  ellipse((mouseX+150)*2,18,100,10);
  ellipse((mouseX-40)*2,70,100,20);
  ellipse((mouseX+240)*4,70,100,20);
  ellipse((mouseX-300)*2.5,180,100,20);
  //mountains
  fill(160-(mouseY*0.15),160-(mouseY*0.15),145-(mouseY*0.15));
  rect(0,220,400,400);
  quad(mouseX+40,220,mouseX+120,140,mouseX+160,140,mouseX+220,220);
  //castle
  fill(90-(mouseY*0.15),105-(mouseY*0.15),125-(mouseY*0.15));
  rect(0,260,400,400);
  rectMode(CENTER);
  rect(mouseX+80,250,20,40);
  triangle(mouseX+70,230,mouseX+80,210,mouseX+90,230);
  rect(mouseX+60,270,20,40);
  triangle(mouseX+50,250,mouseX+60,230,mouseX+70,250);
  rect(mouseX+100,270,20,40);
  triangle(mouseX+90,250,mouseX+100,230,mouseX+110,250);
  rect(mouseX+80,250,60,20);
  rect(mouseX+80,260,100,20);
  //bridge
  fill(110-(mouseY*0.15),115-(mouseY*0.15),90-(mouseY*0.15));
  rectMode(CORNERS);
  rect(0,340,400,400);
  fill(110-(mouseY*0.15),115-(mouseY*0.15),90-(mouseY*0.15),100);
  rect(0,300,400,400);
  fill(90-(mouseY*0.15),105-(mouseY*0.15),125-(mouseY*0.15));
  rectMode(CENTER);
  rect(mouseX+80,360,40,20);
  rect(mouseX+140,360,40,20);
  //rock
  fill(50,50,55);
  ellipse((mouseX-80),400,600,40);
  fill(60,60,65);
  quad((mouseX-220),390, (mouseX-190),340, (mouseX-20),340, (mouseX),390);
  fill(50,50,55);
  quad((mouseX-180),390, (mouseX-160),320, (mouseX-50),320, (mouseX-30),390); 
  //link
  //legs
  fill(60,50,45);
  quad((mouseX-115),320, (mouseX-118),295, (mouseX-102),295, (mouseX-105),320);
  quad((mouseX-118),295, (mouseX-115),285, (mouseX-105),285, (mouseX-102),295);
  quad((mouseX-115),285, (mouseX-118),265, (mouseX-102),265, (mouseX-105),285);
  quad((mouseX-95),320, (mouseX-98),295, (mouseX-82),295, (mouseX-85),320);
  quad((mouseX-98),295, (mouseX-95),285, (mouseX-85),285, (mouseX-82),295);
  quad((mouseX-95),285, (mouseX-98),265, (mouseX-82),265, (mouseX-85),285);
  //shield
  fill(125,125,125);
  ellipse((mouseX-125),240,20,40);
  fill(60,60,65);
  ellipse((mouseX-120),240,20,35);
  //tunic
  fill(20,40,55);
  quad((mouseX-120),268, (mouseX-115),235, (mouseX-88),235, (mouseX-82),268);
  quad((mouseX-115),235, (mouseX-120),205, (mouseX-82),205, (mouseX-88),235);
  quad((mouseX-120),205, (mouseX-116),200, (mouseX-85),200, (mouseX-82),205);
  //arms
  rectMode(CENTER);
  rect((mouseX-85),230,10,50);
  quad((mouseX-130),255, (mouseX-116),200, (mouseX-105),200, (mouseX-120),255);
  //shieth
  fill(60,50,45);
  quad((mouseX-115),255, (mouseX-100),200, (mouseX-90),200, (mouseX-105),255);
  //sword
  fill(255);
  quad((mouseX-55),295, (mouseX-85),250, (mouseX-80),250, (mouseX-52),298);
  //hand
  fill(140,120,120);
   ellipse((mouseX-100),180,20,30);
  //head
  fill(140,120,120);
  rectMode(CENTER);
  rect((mouseX-100),190,10,20);
  ellipse((mouseX-100),180,20,30);
  triangle((mouseX-80),180,(mouseX-100),176,(mouseX-100),184);
  triangle((mouseX-120),180,(mouseX-100),176,(mouseX-100),184);
  fill(220,165,115);
  ellipse((mouseX-100),175,20,25);
  triangle((mouseX-100),170,(mouseX-110),195,(mouseX-100),195);
  
  //red overlay
  rectMode(CORNERS);
  noStroke();
  fill(150,0,0,100);
  rect(0,0,400,400);
}