jamieh-Project-03-Dynamic-Drawing

sketch

/*
Jamie Ho
10:30
jamieh@andrew.cmu.edu
Project 03
*/

var rectSize = 10;
var d = 75; //distance from edges and distance between each rectangle's corner

function setup() {
    createCanvas(640, 480);
    rectMode(CORNER);
    angleMode(DEGREES);
}

function draw() {
    background(0);
    fill(256);
    
    //to create array of rectangles
    for(var x = 0+d; x <= width-d; x+=d){
        for(var y = 0+d; y <= height-d; y+=d){
            
            //dis = distance between mouse pointer and rectangle
            var dis = dist(x, y, mouseX, mouseY);
            var inCanvas = d < mouseX & mouseX < width-d && d < mouseY && mouseY < height-d;
                
                
        //CHANGING COLOURS
            //if rectangles are far from mouse: rectangles are white
            //far = more than half the width of canvas
            if(dis > width/2 & inCanvas){            
                fill(256, 256, 256);
            }

                //if rectangles are close from mouse: rectangles flash in colour
                //close = less than half the width of canvas
                else if(dis < width/2 & inCanvas){
                    fill(random(0, 256),random(0, 256),random(0, 256));
                }


        //ROTATING + TRANSLATION
            
            //Top L = "starting point" 
                //no rotation no translation no shear, just size change
            
            //Top R = rotates a bit
            if(mouseX > width/2 & mouseY < height/2 && inCanvas){
                rotate(random(-0.05, 0.05));
            }

            //Bottom R = rotates double of Top R + translates
            if(mouseX > width/2 & mouseY > height/2 && inCanvas){
                rotate(random(-0.1, 0.1));
                translate(x*random(0.005, 0.0075), y*random(0.005, 0.0075));
            }

            //Bottom L = rotates quadruple of Top R/double of Bottom R + translates + shears
            if(mouseX < width/2 & mouseY > height/2 && inCanvas){
                rotate(random(-0.2, 0.2));
                translate(x*random(0.005, 0.0075), y*random(0.005, 0.0075));
                shearX(PI/16);
            }




        //CHANGING SIZE
            //if mouse is within borders of "new" canvas, 
            //then rectangles change size based on distance of pointer to rectangle
            if(inCanvas){
                rect (x, y, dis*0.1, dis*0.1);
            }

                //if mouse is not within canvas, then rectangles are small AND rotates
                else{
                    rect (x, y, rectSize, rectSize)

                }

        }
    }
   
}

For this project, I made use of for loops to create an array of the same shapes, then used conditional statements to make modifications. The dynamic drawing starts off static with the original rectangles, but when the mouse moves, the rectangles change in size based on each of their distances from the mouse. When the mouse moves into a different quadrant, the rectangles react differently through rotation, translation, shear. From the top left quadrant to the bottom left quadrant (clockwise), the movements to the rectangles become more dramatic. The hardest parts of this project were making the for loop work, making sure the conditional statements made sense and adjusting the numbers assigned to variables to an appropriate range so that the shapes appear on canvas.