Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
//Joseph Ballantyne
//Introduction to Media Computation
//Sheridan College
//Interactive Drawing Assignment


//Setup interactive drawing area.
void setup() {
  
  //Set Canvas size to 400 x 400 pixels.
  size (400, 400);
  background(255, 255, 255);
}

//Draw Interactive Image
//Start all draws on the topmost & leftmost point (Where applicable)
void draw(){
  
  //Declare Variables 
  //I justify the usage of this particular variable as it is from chapter 3.
  //Crate a float value that will contain the location of the mouse instead of the speed.
  //Ensure it is always positive.
  float mouseLocale = abs((mouseX - mouseY) / 25);
  
  //All Variables after this point are used simply to substitute modifiers.
  //The code is unbelievably ugly otherwise.
  //All the numbers were giving me a hernia.
  int m = abs((mouseX + (mouseY * -2)) / 3);
  int n = ((m * 3) / 11);
  int dr = (mouseY - 200);
  int dl = (mouseX - 200);
  
  //Clear Background before drawing the next frame
  //Create blue sky rectangle the size of background
  fill(165, 236, 255);
  rect(0, 0, 400, 400);
  
  //Draw pyramid background
  //Set stroke to black and weight to 1
  stroke(0);
  strokeWeight(1);
  //Set fill color to brown
  fill(129, 84, 1);
  //Draw dirt
  triangle(0, 0, 400, 400, 0, 400);
  //Set fill color to shaded pyramid orange
  fill(214, 150, 48);
  //Draw sun side of pyramids
  triangle(20, 0, 60, 40, 40, 40);
  triangle(60, 0, 120, 60, 100, 80);
  triangle(120, 0, 220, 100, 180, 120);
  triangle(240, 0, 360, 120, 320, 160);
  //Set fill color to shaded pyramid orange
  fill(234, 197, 200);
  //Draw shadow side of pyramids
  triangle(20, 0, 0, 20, 40, 40);
  triangle(60, 0, 0, 60, 120, 120);
  triangle(120, 0, 0, 120, 240, 240);
  triangle(240, 0, 0, 240, 480, 480);
  triangle(400, 20, 20, 400, 400, 400);
  //Increase stroke weight
  strokeWeight(3);
  //Draw pyramid defining lines
  line(20, 0, 0, 20);
  line(60, 0, 0, 60);
  line(120, 0, 0, 120);
  line(240, 0, 0, 240);
  line(400, 20, 20, 400);
  
  
  
  
    //Set stroke color to black
    stroke(0, 0, 0);
    //Control stroke weight with mouseSpeed
    strokeWeight(1 + mouseLocale);
  
    //Draw Outer Rectangle
    //Set fill color
    fill(118 + m, 118 + m, 118 + m);
    //Top
    quad(120 - dr, 160 - dl, 200 - dr, 120 - dl, 280 - dr, 160 - dl, 200 - dr, 200 - dl);
    //Left side
    quad(120 - dr, 160 - dl, 200 - dr, 200 - dl, 200 - dr, 300 - dl, 120 - dr, 260 - dl);
    //Right side
    quad(200 - dr, 200 - dl, 280 - dr, 160 - dl, 280 - dr, 260 - dl, 200 - dr, 300 - dl);

    
    //Draw inner exclusion rectangle
    //Set fill color
    fill(160 + n, 160 + n, 160 + n);
    //Bottom
    quad(160 - dr, 230 - dl, 200 - dr, 210 - dl, 240 - dr, 230 - dl, 200 - dr, 250 - dl);
    //Left side
    quad(160 - dr, 180 - dl, 200 - dr, 160 - dl, 200 - dr, 210 - dl, 160 - dr, 230 - dl);
    //Right side
    quad(200 - dr, 160 - dl, 240 - dr, 180 - dl, 240 - dr, 230 - dl, 200 - dr, 210 - dl);
      
    //Draw inner rectangle
    //Set fill color
    fill(55 + m, 55 + m, 55 + m);
    //Top
    quad(180 - dr, 195 - dl, 200 - dr, 185 - dl, 220 - dr, 195 - dl, 200 - dr, 205 - dl);
    //Left side
    quad(180 - dr, 195 - dl, 200 - dr, 205 - dl, 200 - dr, 230 - dl, 180 - dr, 220 - dl);
    //Right side
    quad(200 - dr, 205 - dl, 220 - dr, 195 - dl, 220 - dr, 220 - dl, 200 - dr, 230 - dl);
      
    //**** SHADER RECTANGLES ****//
    //Top layer static rectangles for adding 3Dimensionality.
    //Remove Stroke
    noStroke();
    
    //Set Color to Blue Black
    //Set Opacity to 50%
    fill(16, 23, 93, 191);
    
    //Draw shade rectangles
    //Medium square shade
    //Leftmost top
    quad(160 - dr, 180 - dl, 200 - dr, 160 - dl, 200 - dr, 185 - dl, 160 - dr, 205 - dl);
    //Leftmost bottom
    quad(160 - dr, 205 - dl, 180 - dr, 195 - dl, 180 - dr, 220 - dl, 160 - dr, 230 - dl);
    
    //Small square shade
    //Middle
    quad(200 - dr, 205 - dl, 220 - dr, 195 - dl, 220 - dr, 220 - dl, 200 - dr, 230 - dl);
    
    //Large square shade
    //Right top
    quad(240 - dr, 180 - dl, 280 - dr, 160 - dl, 280 - dr, 210 - dl, 240 - dr, 230 - dl);
    //Right bottom
    quad(200 - dr, 250 - dl, 280 - dr, 210 - dl, 280 - dr, 260 - dl, 200 - dr, 300 - dl);
}