Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
void setup() {
  //set canvas size
  size (400,400);
  
  //prevents stroke lines from extending past the edge of the shape
  strokeJoin(BEVEL);
  
  noStroke();
}

void draw(){
  //redraw background, light or dark depending on Y value of mouse
  background(255-mouseY*255/400);
  
  //draw shapes starting from "farthest" to "nearest", bottom to top, left before right
  
  //antlers - all pmouseX values are negative
  //first prongs
  fill(241,213,26);
  triangle(180,140,180+pmouseX/-20,120,190+pmouseX/-20,100);
  triangle(220,140,240+pmouseX/-20,120,230+pmouseX/-20,100);
  
  //base - must be above prongs due to overlapping
  fill(255,241,83);
  quad(170,150,180,140,190,140,180+pmouseX/-20,120);
  quad(230,150,220,140,210,140,240+pmouseX/-20,120);
  
  fill(230,178,7);
  quad(170,150,180+pmouseX/-20,120,170+pmouseX/-10,100,160+pmouseX/-10,110);
  quad(230,150,240+pmouseX/-20,120,270+pmouseX/-10,100,280+pmouseX/-10,110);
  
  fill(221,151,4);
  triangle(160+pmouseX/-10,110,170+pmouseX/-10,100,150+pmouseX/-8,80);
  triangle(280+pmouseX/-10,110,270+pmouseX/-10,100,300+pmouseX/-8,80);
  
  //prongs - must go below final part of antler for layering reasons
  fill(151,17,26);
  triangle(150+pmouseX/-8,80,160+pmouseX/-8,80,170+3*pmouseX/-20,50);
  triangle(300+pmouseX/-8,80,290+pmouseX/-8,80,280+3*pmouseX/-20,50);
  
  fill(157,18,23);
  triangle(150+pmouseX/-8,80,150+3*pmouseX/-20,50,160+7*pmouseX/-40,20);
  triangle(300+pmouseX/-8,80,310+3*pmouseX/-20,50,310+7*pmouseX/-40,20);
  
  //covers up parts of previous two prongs
  fill(198,85,7);
  triangle(150+pmouseX/-8,80,150+3*pmouseX/-20,50,170+pmouseX/-10,100);
  triangle(300+pmouseX/-8,80,310+3*pmouseX/-20,50,270+pmouseX/-10,100);
  
  
  //ears - all pmouseX values are negative
  //inner ears
  fill(209,216,38);
  triangle(160,180,150+pmouseX/-20,160,140+pmouseX/-10,120);
  triangle(240,180,270+pmouseX/-20,160,300+pmouseX/-10,120);
  
  fill(235,243,75);
  triangle(160,180,170,150,140+pmouseX/-10,120);
  triangle(240,180,230,150,300+pmouseX/-10,120);
  
  fill(255,241,83);
  triangle(170,150,140+pmouseX/-10,120,160+pmouseX/-20,130);
  triangle(230,150,300+pmouseX/-10,120,260+pmouseX/-20,130);
  
  //outer ear
  fill(174,194,45);
  triangle(160,180,170,150,150+pmouseX/-20,160);
  triangle(240,180,230,150,270+pmouseX/-20,160);
  
  fill(209,216,38);
  triangle(160,180,170,150,160+pmouseX/-20,130);
  triangle(240,180,230,150,260+pmouseX/-20,130);
  
  
  //neck, bottom to top
  //static parts
  fill(109,16,120);
  triangle(200,380,150,350,170,350);
  triangle(200,380,230,350,250,350);
  
  fill(78,26,126);
  triangle(150,350,170,350,160,280);
  triangle(230,350,250,350,240,280);
  
  //dynamic parts, middle outwards
  fill(147,192,196);
  triangle(200,380,180+pmouseX/20,220,200+pmouseX/20,220);
  
  fill(103,166,184);
  triangle(200,380,170,350,180+pmouseX/20,220);
  triangle(200,380,230,350,200+pmouseX/20,220);
  
  fill(55,104,145);
  quad(170,350,160,280,170,220,180+pmouseX/20,220);
  quad(230,350,240,280,230,220,200+pmouseX/20,220);
  
  
  //head
  //snout, towards middle
  fill(59,114,111);
  quad(170,220,110+17*pmouseX/40,240,100+9*pmouseX/20,220,160,180);
  quad(230,220,120+17*pmouseX/40,240,120+9*pmouseX/20,220,240,180);
  
  fill(63,143,130);
  triangle(160,180,160+pmouseX/10,180,100+9*pmouseX/20,220);
  triangle(240,180,200+pmouseX/10,180,120+9*pmouseX/20,220);
  
  fill(89,157,100);
  quad(160+pmouseX/10,180,100+9*pmouseX/20,220,120+9*pmouseX/20,220,200+pmouseX/10,180);
  
  
  //nose - top to bottom for some reason?
  fill(43,0,61);
  triangle(100+9*pmouseX/20,220,120+9*pmouseX/20,220,110+9*pmouseX/20,230);
  
  fill(59,114,111);
  triangle(100+9*pmouseX/20,220,110+17*pmouseX/40,240,110+9*pmouseX/20,230);
  triangle(120+9*pmouseX/20,220,120+17*pmouseX/40,240,110+9*pmouseX/20,230);
  
  fill(147,192,195);
  triangle(110+17*pmouseX/40,240,120+17*pmouseX/40,240,110+9*pmouseX/20,230);
  
  
  //forehead, towards middle
  fill(174,194,45);
  triangle(160,180,170,150,160+pmouseX/10,180);
  triangle(240,180,230,150,200+pmouseX/10,180);
  
  fill(209,216,38);
  quad(170,150,160+pmouseX/10,180,180+pmouseX/10,160,180,140);
  quad(230,150,200+pmouseX/10,180,180+pmouseX/10,160,220,140);
  
  fill(174,194,45);
  triangle(160+pmouseX/10,180,200+pmouseX/10,180,180+pmouseX/10,160);
  
  fill(235,243,75);
  triangle(180,140,220,140,180+pmouseX/10,160);
}