Shirley Chen – Project 03 – Dynamic Drawing

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project-03



var X = 10;
var Y = 10;
var d;
var m;
var radius = 0;
var shade = 0;
var side = 0;

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

}

function draw() {
    background(253, 224, 146);
//Make a Grid
    for (i = 0; i < 24; i++){
        for (j = 0; j < 32; j++){
            X = 20 * j + 10
            Y = 20 * i + 10;
//Divide the Coordinate into Four Quadrants
//The Radius of Circles in the First Quadrant Changes According to the Distance Between Mouse and Center of the Circle
//The Color of the Circle Changes According to the Distance Between Mouse and Center of the Circle
        if (mouseX > 0 & mouseX < 320 && mouseY > 0 && mouseY < 240){
                d = dist(mouseX, mouseY, X, Y)
                m = map(d, 0, 786, 0, 20);
                shade = m * 0.5 + 200;
                radius = 20 - m;
                noStroke();
                fill(shade, 137, shade);
                ellipse(X, Y, radius, radius);
            }
//The Length of Side of the Square in the Second Quadrant Changes According to the Distance Between Mouse and Center of the Sqaures
//The Color of the Sqaures Changes According to the Distance Between Mouse and Center of the Squares
            else if  (mouseX > 320 & mouseX < 640 && mouseY > 0 && mouseY < 240){
                d = dist(mouseX, mouseY, X, Y)
                m = map(d, 0, 786, 0, 20);
                side = m + 10;
                shade = m + 200;
                noStroke();
                fill(223, shade, 138);
                rectMode(CENTER);
                rect(X, Y, side, side);
            }
//The Length of Side of the Rectangles in the Second Quadrant Changes According to the Distance Between Mouse and Center of the Rectangles
//The Color of the Rectangles Changes According to the Distance Between Mouse and Center of the Rectangles
            else if  (mouseX > 0 & mouseX < 320 && mouseY > 240 && mouseY < 480){
                d = dist(mouseX, mouseY, X, Y)
                m = map(d, 0, 786, 0, 20);
                side = m * 0.3 + 18;
                shade = m * 7 + 50;
                noStroke();
                fill(231, 100, shade);
                rectMode(CENTER);
                rect(X, Y, side + 3, side);
            }
//The Size of the Geometry Changes According to the Distance Between Mouse and Center of the Geometry
//The Color of the Geometry Changes According to the Distance Between Mouse and Center of the Geometry
            else if  (mouseX > 320 & mouseX < 640 && mouseY > 240 && mouseY < 480){
                d = dist(mouseX, mouseY, X, Y);
                m = map(d, 0, 786, 0, 20);
                side = m * 0.8 + 2;
                shade = m * 3 + 8;
                noStroke();
                fill(167, 88, shade);
                rectMode(CENTER);
                rect(X, Y, side, side, 1, 8);
            } 
//When the Mouse is not On Canvas, Text Will Show Up
            else {
                fill(89, 134, 189);
                text('PLACE THE MOUSE HERE!', 235, 240);
            }
        }
    }
}

In this assignment, I was inspired by the parametric design that I researched for the Looking Outward Assignment. Controlling by the position of the mouse, some variables like radius, color, size, shape will change accordingly. It creates interesting visual effect that when the mouse gets closer to a geometry, the geometry gets smaller. I practiced the looping command that I learned from other class.