Vtavarez Project-03: Dynamic Drawing

Working on this project I wanted the ability to display colors opposite of each other on the color wheel at the same time. From that I knew I wanted to add three shape series (one for each RGB value). Figuring out the concept of the piece took a little longer. Believe it or not, this is an abstract attempt to model what its like to adjust your an analogue clock. The circle represents the gears shifting with one another, the center “flashing” circle signifies the frustration of trying to get it to the right time, and the hands are pretty obvious. In working on this piece, I tried to use some of the simple tools we learned in class regarding transformations and variables.

sketch-165.js

//Victor Tavarez
//section D
//vtavarez@andrew.cmu.edu
//Project-03-Dynamic-Drawing 

// varying background RGB values
var bgR = 0;
var bgG = 0;
var bgB = 0;

var Sh1R;
var Sh1G;
var Sh1B;

var CircleSize = 20;

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

}

function draw() {
    background(bgR, bgG, bgB);
    noStroke();

    //modifying the background to "season-changing colors"
    bgR = map(mouseY, 0, height, 0, 255);
    bgG = map(mouseX, 0, width, 0, 255);
    
    // modifying my first set of shapes
    Sh1R = (abs(255-bgR));
    Sh1G = (abs(255-bgG));
    Sh1B = (abs(255-bgB));

    //creating different shapes with the same color changing scheme
    var Sh1aX = width/5;
    var Sh1aY = height/5;
    var Sh1D = 75;
    fill(Sh1R,Sh1G,Sh1B);

    // creating vertical changing in shape 1 category
    Sh1aY = map(mouseY,0,height,height/5, (height-height/5));
    ellipse(Sh1aX, Sh1aY, Sh1D, Sh1D);    
    var Sh1bX = width-Sh1aX;
    var Sh1bY = height-Sh1aY;
    ellipse(Sh1bX, Sh1bY, Sh1D, Sh1D);

    // Creating Horizontal changing for Shape 1 category
    var Sh1cX = Sh1aX;
    var Sh1cY = height - height/5;
    Sh1cX = map(mouseY,0,height,width/5, (width-width/5)); //gets x motion
    ellipse(Sh1cX, Sh1cY, Sh1D, Sh1D);

    // Creating final horizontal trasformation
    var Sh1dX = width - Sh1cX;
    var Sh1dY = height/5;
    ellipse(Sh1dX, Sh1dY, Sh1D, Sh1D);

    // Modifying the second set of Shapes 
    var Sh2R = (abs(255-bgB));
    var Sh2G = (abs(255-bgR));
    var Sh2B = (abs(255-bgG)); 
    fill(Sh2R, Sh2G, Sh2B);
    
    // creating the attibutes of new shapes
    var Sh2aX = width/2;
    var Sh2aY = height/2;
    var Sh2W = 30;
    var Sh2H = 70;
    var Sh2aDeg = 0
    
    push();
    Sh2aDeg = map(mouseX, 0, width, 0, 360);
    translate(Sh2aX,Sh2aY);
    rotate(radians(Sh2aDeg));
    rect(0, 0, Sh2W, 3*Sh2H,50);  
      
    //secondary shape in this series
    var Sh2bX = (width/2);
    var Sh2bY = (height/2);
    var Sh2bDeg = map(mouseX,0,width,0,360);
    rotate(radians(Sh2bDeg));
    rect(0,0, Sh2W,3*Sh2H, 50);
    pop();

    //final shape series 
    
    var Sh3R = (abs(255-bgG));
    var Sh3G = (abs(255-bgB));
    var Sh3B = (abs(255-bgR)); 
    fill(Sh3R,Sh3G,Sh3B);
    
    var SizeModifier = abs(mouseX-mouseY);

    if (CircleSize > 100) {
        SizeModifier *=-1
    }
    CircleSize += SizeModifier
    ellipse(width/2, height/2, CircleSize, CircleSize);
}