Project 03 Dynamic Drawing

sketch

/* Jaclyn Saik 
Section E
jsaik@andrew.cmu.edu
Assignment-00-A
*/

//general set up 

var circleX = 50  //x position of circles
var circleY = 50 //y positions of circles
var circleOFFSET = 3
var circleSIZE = 50 //diameter of circle, set so later can be manipulated by mouse
var conOFFSET = 100 //offset value used to space out the triangles
var angle = 0
var angle2 = 0
var angleCHANGE = 6


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

function draw() {
    background(25, mouseX/5, 25, mouseY/3); 
    //modifies alpha value so it's relative to y value, determines shape trail
    //X value of mouse controls background color 

    circleSIZE = constrain(mouseX/5, 20, 300); //circle size controlled by mouse X position, but constrained within 2 and 300
    circleSIZE = circleSIZE/2 //reduced size again in half so managebale within canvas


    //changing texts set up

    fill(255);
    if (mouseX > width/2) {
        text('NICE!!!!!!!!!', 100, 300); //all text switches when the mouse's 
        //X position is in second half of canvas
    }  else { text('wow', 100, 310)
    }

    fill(255);
    if (mouseX > width/2) {
        text('cool', 150, 350);
    }  else { text('YIKES!', 150, 340)
    }

    fill(255);
    if (mouseX > width/2) {
        text('rock on!', 500, 50);
    }  else { text('super!!!', 500, 60)
    }

    fill(255);
    if (mouseX > width/2) {
        text('that is crazy dude!', 450, 200);
    }  else { text('NUTS!', 440, 190)
    }
    

    //stroke set up

    if (mouseY < height/2) {
        stroke(237, 107, 170);
        strokeWeight(mouseX/20) //stroke weight is determines by mouse's X position
    } else { noStroke(); //stroke is determined by mouse's Y position 
    }


    //Circle position and rotation set up

    //line 1

    //line 1, circle 3
    push();
    translate(width/2, height/2); //moves origin to the center of canvas
    rotate(radians(angle)); 
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE); //white circle in front 
    angle = (angle + angleCHANGE); //determines angle of rotation 
    pop();


    //line 1, circle 4
    push();
    translate(width/2+conOFFSET, height/2+conOFFSET); //moves new origin, using offset to keep it regular 
    //I use translate throughout to change the rotation center for each ellipse
    rotate(radians(angle));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();
    
    //line 1, circle 2
    push();
    translate(width/2-conOFFSET, height/2-conOFFSET);
    rotate(radians(angle));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();
    
    //line 1, circle 5
    push();
    translate(width/2+conOFFSET*2, height/2+conOFFSET*2);
    rotate(radians(angle));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();

    // line 1, circle 1
    push();
    translate(width/2-conOFFSET*2, height/2-conOFFSET*2);
    rotate(radians(angle));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();


    //line 2

    //line 2, circle 3
    push();
    translate(width/2, height/2);
    rotate(radians(angle2));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE); //white circle in front 
    angle2 = (angle2 - angleCHANGE);
    pop();


    //line 2, circle 4
    push();
    translate(width/2+conOFFSET, height/2+conOFFSET);
    rotate(radians(angle2));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();
    
    //line 2, circle 2
    push();
    translate(width/2-conOFFSET, height/2-conOFFSET);
    rotate(radians(angle2));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();
    
    //line 2, circle 5
    push();
    translate(width/2+conOFFSET*2, height/2+conOFFSET*2);
    rotate(radians(angle2));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();

    // line 2, circle 1
    push();
    translate(width/2-conOFFSET*2, height/2-conOFFSET*2);
    rotate(radians(angle2));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();
   

}

Jaclyn Saik Project 03

This project was definitely the most challenging because it was so open ended. I was originally inspired by another geometric animation I saw on Colossal, where there were a bunch of very small white dots that had slight colored shadows, which made them look extremely mesmerizing and gave them an appearance of movement even in the moments they were static. With my sketch, I wanted to play with the idea of rotating and spinning elements that are changes by the mouse.  While making the circles rotate around an origin, I played with making them all revolve around the mouse, but I ended up making something that was a steadier in composition so that you could more easily interact with it with your mouse. I had the mouse position change the little text that cheers you on, as well as the stroke and color changes. I had a lot of fun making the objects create a trailed background, and I think it made the project look even crazier, which is what I was going for.