Jai Sawkar Project 03 – Dynamic Drawing

Portrait_Jai

//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project-03: Generative Drawing 

var whiteFade = 255;


function setup() {
    createCanvas(640, 480);
}

function draw() {

    background(whiteFade);
    noStroke();
  
    //setting variables for the blue rectangle
    var tangleW2 = (width / 2);
    var tangle1H = constrain(mouseY, 20, height - 40);
  
    //rectblue
    fill(141, 194, 255);
    rect(10, 10, tangleW2, tangle1H);

    
    //rectgreen
    fill(255, 185, 141);
    // variable for x origin
    var basept2x = 10;
    var tangle2Y = constrain(mouseY, 40, height - 20)
    var tangle2H = constrain(mouseY, height / 2 - 40, height - 20)
  
    rect(basept2x, tangle2Y, tangleW2, tangle2H);
   


  //yellow rectangle
    fill(255, 242, 141);
  
    //rectangle variables for x & y
    var tangle3X = width / 2 + 20;
    var tangle3Y = constrain(mouseY, 30, 100);
  
    rect(tangle3X, tangle3Y, 480, 100);

    

    //rectangle dark purple
    fill(228, 141, 255);
  
    // variables for X, Y, Height & Width
    var tangle4X = constrain(mouseY, 10, width / 2 + 20)
    var tangle4Y = height / 2 + 10
    var tangle4H = (height / 2 - 20);
    var tangle4W = constrain(mouseY, width / 2, width / 2)
  
    rect(tangle4X, tangle4Y, tangle4W, tangle4H);


    //rectangle light purple
    var tangle5H = constrain(mouseY, 10, height / 2 - 20);
    var tangle5Y = 10;
    var tangle6y = height / 2 - 100;

    fill(171, 141, 255);
    rect(width / 2 + 20, 10, width, tangle5H);

    //green rectangle
    fill(168, 255, 141);
    rect(constrain(mouseX, width / 2, 640) + 20, tangle6y, width, constrain(mouseY, 400, 400));
    fill(whiteFade);
    rect(constrain(mouseX, width / 2, 640) + 20, tangle6y - 10, width, 10)
    rect(constrain(mouseX, width / 2, 640) + 20, tangle6y -10, -10, 480);


    //rectangle white
    fill(whiteFade);
    rect(0, height - 10, 640, 640);

    //rectangle white 2
    rect(630, 0, 10, 480);

    // background fade based on mouse position
    if (mouseX > width / 2 + 20) {
    whiteFade = whiteFade - 5;
    } else {
    whiteFade = whiteFade + 5;
    }
}

For this project, I wanted to make a drawing that is simple in message but more complex as the mouse moves. I created a series of rectangles that either grows from the sides of the canvas or decrease in size as the mouse moves across it. I took inspiration from a Cover of a single I liked last summer by Chance the Rapper and made my dynamic drawing.