Justin Yook – Project 03 – Dynamic Drawing

dynamic_drawing

//Justin Yook
//Section C
//jyook@andrew.cmu.edu
//Project 03

var angle = 0; //angle for outer ellipses
var angle2 = 0; // angle for inner ellipses

var elColor = 220; //color value for ellipse
var baColor = 128; //background color value

var osize = 30; //outer ellipse size
var isize = 15; //inner ellipse size

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

function draw() {
    scale(.96);
    background(baColor);

    //draw center outer ellipses in radial pattern
    fill(elColor);
    noStroke();
    push();
    translate(width/2, height/2);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);
    pop();

    //draw center inner ellipses in radial pattern
    push();
    translate(width/2, height/2);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //draw left top corner outer ellipses in radial pattern
    push();
    translate(0, 0);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);
    pop();

    //draw left bottom corner outer ellipses in radial pattern
    push();
    translate(0, 480);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);   
    pop();

    //draw right top corner outer ellipses in radial pattern
    push();
    translate(640, 0);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);  
    pop();

    //draw right bottom corner outer ellipses in raidal pattern
    push();
    translate(640, 480);
    rotate(radians(angle));
    ellipse(150, 0, osize, osize);
    ellipse(-150, 0, osize, osize);
    ellipse(0, 150, osize, osize);
    ellipse(0, -150, osize, osize);
    ellipse(100, 100, osize, osize);
    ellipse(-100, 100, osize, osize);
    ellipse(-100, -100, osize, osize);
    ellipse(100, -100, osize, osize);    
    pop();

    //draw left top corner inner ellipses in radial pattern
    push();
    translate(0, 0);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //draw left bottom corner inner ellipses in radial pattern
    push();
    translate(0, 480);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //draw right top corner inner ellipses in radial pattern
    push();
    translate(640, 0);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //draw right bottom corner inner ellipses in raidal pattern
    push();
    translate(640, 480);
    rotate(radians(angle2));
    ellipse(70, 0, isize, isize);
    ellipse(-70, 0, isize, isize);
    ellipse(0, 70, isize, isize);
    ellipse(0, -70, isize, isize);
    ellipse(45, 45, isize, isize);
    ellipse(-45, 45, isize, isize);
    ellipse(45, -45, isize, isize);
    ellipse(-45, -45, isize, isize);    
    pop();

    //outer and inner ellipses rotate opposite directions, change size, and change to white when mouse is to the right side
    if (mouseX > width/2) {
        angle += 2;
        angle2 -= 6;
        elColor = 255;
        baColor = 0;
        osize += .5;
        isize += .3;
    }

    //limit on max size of outer ellipse when mouse is on right side
    if (osize >= 60) {
        osize = 60;
    }

    //limit on max size of inner ellipse when mouse is on right side
    if (isize >= 35) {
        isize = 35;
    }

    //outer and inner ellipses rotate opposite directions, change size, and change to black when mouse is to the left side 
    if (mouseX < width/2) {
        angle -= 6;
        angle2 += 8;
        elColor = 0;
        baColor = 255;
        osize -= .5;
        isize -= .3;
    }

    //limit on max size of outer ellipse when mouse is on left side
    if (osize <= -60) {
        osize = -60;
    }

    //limit on max size of inner ellipse when mouse is on left side
    if (isize <= -35) {
        isize = -35;
    }
}

The four aspects of this project are: size, angle, velocity, and color. Depending on the location of the mouse (right or left side), four aspects of the ellipses change. I was inspired by Mac laptop screen savers, and thought I would try to make a design that was very dynamic, but made of simple circles.