Category: Project-03-Dynamic-Drawing

sketch

var rectT = 300;
var rectB = 500;
var rectW = 80;
var blackH = 10;
var blackW = 80;
var boxH = 150;
var crayonPos = 10;
var windowW = 20;
var angle = 0;

function setup() {
    createCanvas(600, 500);

}

function draw() {
    var color1 = color(60,200,255);
    var color2 = color(200,212,240);
    var t = map(mouseY,0,width,0,1);
    var bgColor = lerpColor(color1,color2,t);
  // wanted to try the lerpColor function and the hues are controlled
  // by the mouseY function; supposedly represents a sky

    background(bgColor);

  //mock sun
     push();
     fill(255,240,20);
     rotate(radians(mouseX));
     rectMode(CENTER); // center rect around 0,0
     rect(10,10, 200,200);
     pop();
     angle = angle + 5;

  //windows to emulate a classroom
    fill(255);
    rect(0,0,windowW,height);
    rect(0,0,width,windowW);
    rect(height/2,0,windowW,height);
    rect(width-40,0,windowW,height);
    rect(0,height/2,width,windowW);

//these if-statements are to control the height of the specific crayon
//when the cursor is within the range of that specific crayon
//controls red crayon
    if (10<=mouseX & mouseX<=100){
      fill(255,0,0);
      rect(10, mouseY,rectW,height-boxH-mouseY);

    }
//controls orange crayon
    if (110<=mouseX & mouseX<=200){
      fill(255,165,2);
      rect(110, mouseY,rectW,height-boxH-mouseY);

//controls yellow crayon
    }
    if (210<=mouseX & mouseX<=300){
      fill(255,252,17);
      rect(210, mouseY,rectW,height-boxH-mouseY);

//controls green crayon
    }
    if (310<=mouseX & mouseX<=400){
      fill(48,201,63);
      rect(310, mouseY,rectW,height-boxH-mouseY);

//controls blue crayon
    }
    if (410<=mouseX & mouseX<=500){
      fill(45,76,255);
      rect(410, mouseY,rectW,height-boxH-mouseY);
//controls purple crayon
    }
    if (510<=mouseX & mouseX<=600){
      fill(132,21,255);
      rect(510, mouseY,rectW,height-boxH-mouseY);

//draws all the crayons by calling it (mostly for practice calling functions)
    }
    Red();
    Orange();
    Yellow();
    Green();
    Blue();
    Purple();

    //crayon box remains constant
    fill(243,201,48);
    rect(0,height-boxH,width,boxH);

    //symbol
    fill(51,141,62);
    ellipse(width/2,height-75,200,80)

    //green lines on box
    fill(51,141,62);
    rect(0,height-boxH,width,10);
    rect(0,height-boxH+20,width,10);

}

 //crayon functions:
function Red() {
  noStroke();
  fill(255,0,0);
  rect(crayonPos,height-(rectB-rectT),rectW,rectB-rectT)
  fill(0);
  rect(crayonPos,rectT+20,blackW,blackH);
}

function Orange() { //orange crayon
  fill(255,165,2);
  rect(crayonPos + 100,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+100,rectT+20,blackW,blackH);
}

function Yellow() {
  fill(255,252,17);
  rect(crayonPos + 200,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+200,rectT+20,blackW,blackH);
}

function Green() {
  fill(48,201,63);
  rect(crayonPos + 300,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+300,rectT+20,blackW,blackH);
}

function Blue() {
  fill(45,76,255);
  rect(crayonPos + 400,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+400,rectT+20,blackW,blackH);
}

function Purple() {
  fill(132,21,255);
  rect(crayonPos + 500,height-(rectB-rectT),rectW,rectB-rectT);
  fill(0);
  rect(crayonPos+500,rectT+20,blackW,blackH);
}

I got the idea from looking at a crayon box as I was finishing the Autolab assignments and had an idea about “selecting” crayons from a crayon box. It was a little difficult to try and alter the parameter using the mouseX function so that each individual crayon will go up to mouseY height. I had wanted to use an array but decided to work with using just if statements using the “width” of crayons.
I wanted to experiment with other options with color, which using lerpColor() to combine the two rgb hues and controlling that with the mouseY.

This is the rough draft of the process. I illustrated how many crayons and listed the various r,g,b values and how where the mouse would be to trigger an event (that is, the height of the crayon).

Interactive Drawing

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-03

var mouseX
var mouseY
// Allows the location of the mouse to be a variable

var squareSide = 50
// Creates a variable to control the size of the square

function setup() {
    createCanvas(640, 480);
    // Creates a blank canvas

}

function draw() {
    background(125);
    // Creates a blue background

    fill(mouseX - mouseY, mouseX, mouseY);
    rectMode(CENTER);
    rect(0, height / 2, 30, height);
    // Creates a vertical rectangle to the far left

    fill(mouseX / 1.25 - mouseY / 0.95, mouseX / 1.25,
        mouseY / 0.95);
    rectMode(CENTER);
    rect(width / 4, height / 2, 30, height);
    // Creates a vertical rectangle a quarter to the left

    fill(mouseX / 2.5 - mouseY / 1.9, mouseX / 2.5, mouseY / 1.9);
    rectMode(CENTER);
    rect(width / 2, height / 2, 30, height);
    // Creates a vertical rectangle that splits the canvas

    fill(mouseX / 1.25 - mouseY / 0.95, mouseX / 1.25,
        mouseY / 0.95);
    rectMode(CENTER);
    rect(3 * width / 4, height / 2, 30, height);
    // Creates a vertical rectangle a quarter to the right

    fill(mouseX - mouseY, mouseX, mouseY);
    rectMode(CENTER);
    rect(width, height / 2, 30, height);
    // Creates a vertical rectangle to the far right

    fill(mouseX - mouseY, mouseY, mouseX);
    rectMode(CENTER);
    rect(width / 2, 0, width, 30);
    // Creates a horizontal rectangle at the top

    fill(mouseX / 2.5 - mouseY / 1.9, mouseY / 1.9, mouseX / 2.5);
    rectMode(CENTER);
    rect(width / 2, height / 2, width, 30);
    // Creates a horizontal rectangle that splits the canvas

    fill(mouseX - mouseY, mouseY, mouseX);
    rectMode(CENTER);
    rect(width / 2, 480, width, 30);
    // Creates a horizontal rectangle at the bottom

    fill(125);
    rectMode(CENTER);
    rect(0, 0, 30, 30);
    // Creates a gray square in the upper left corner

    fill(125);
    rectMode(CENTER);
    rect(width / 4, 0, 30, 30);
    // Creates a gray square in the left quarter  top

    fill(125);
    rectMode(CENTER);
    rect(width / 2, 0, 30, 30);
    // Creates a gray square in the middle top

    fill(125);
    rectMode(CENTER);
    rect(3 * width / 4, 0, 30, 30);
    // Creates a gray square in the quarter right top

    fill(125);
    rectMode(CENTER);
    rect(width, 0, 30, 30);
    // Creates a gray square in the upper right corner

    fill(125);
    rectMode(CENTER);
    rect(0, height / 2, 30, 30);
    // Creates a gray square in the far left middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 4, height / 2, 30, 30);
    // Creates a gray square in the quarter left middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 2, height / 2, 30, 30);
    // Creates a gray square in the middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(3 * width / 4, height / 2, 30, 30);
    // Creates a gray square in the quarter right middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width, height / 2, 30, 30);
    // Creates a gray square in the far right middle

    fill(125);
    rectMode(CENTER);
    rect(0, height, 30, 30);
    // Creates a gray square in the quarter far left bottom of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 4, height, 30, 30);
    // Creates a gray square in the lower left corner

    fill(125);
    rectMode(CENTER);
    rect(width / 2, height, 30, 30);
    // Creates a gray square in the middle bottom of the canvas

    fill(125);
    rectMode(CENTER);

    rect(3 * width / 4, height, 30, 30);
    // Creates a gray square in the quarter right bottom of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width, height, 30, 30);
    // Creates a gray square in the upper right corner

    fill(0, 0, 255);
    ellipse(width / 4, height / 2, mouseX / 5, mouseX / 5);

    fill(255, 0, 0);
    ellipse(3 * width / 4, height / 2, width / 5 - mouseX / 5, width / 5 - mouseX / 5);

    fill(255);
    rectMode(CENTER);
    rect(mouseX, height - mouseY, squareSide * (2 * mouseY / 1000), squareSide * (2 * mouseY / 1000));
    // Creates a white square that follows mouseX and opposes mouseY

    fill(255);
    rectMode(CENTER);
    rect(width - mouseX, mouseY, squareSide * (2 * mouseY / 1000), squareSide * (2 * mouseY / 1000));
    // Creates a white square that follows mouseY and opposes mouseX

    fill(0);
    rectMode(CENTER);
    rect(width - mouseX, height - mouseY, squareSide * (1 - 2 * mouseY / 1000), squareSide * (1 - 2 * mouseY / 1000));
    // Creates a black square that opposes location of mouse

    fill(0);
    rectMode(CENTER);
    rect(mouseX, mouseY, squareSide * (1 - 2 * mouseY / 1000), squareSide * (1 - 2 * mouseY / 1000));
    // Creates a black square that follows the mouse
}

This project was fairly difficult for me. Apart from struggling with how to make it interactive, it was very hard for me to come up with something to create. I ended up making a transforming light show.