Category: Uncategorized

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.

sketch

/*Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-03*/

var sunD = 70;
var skyR = 65;
var skyG = 82;
var skyB = 97;
var cloudD = 100;
// heat waves
var diam = 50;
var dir = 1;
var speed = 2;
// ferris wheel
var ferrisDiam = 350;
var ferrisCarDiam = 50;
// ferris wheel base
var baseDiam = 100;

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

function draw() {

// background changing from dark to light - changing color
    background(skyR, skyG, skyB);
    skyR = map(mouseY, 0, height, 187, 65);
    skyG = map(mouseY, 0, height, 222, 82);
    skyB = map(mouseY, 0, height, 255, 97);
// sun & cloud moving with mouse - changing position
    noStroke();
    fill(247, 225, 136);
    var m = constrain(mouseY, 380, 0);
    var q = constrain(mouseY, 150, 0);
    ellipse(m, constrain(mouseY, 100, height), sunD, sunD);
    fill(255, 255, 255);
    ellipse(q, constrain(mouseY, 150, height), cloudD, cloudD);
    ellipse(q + 50, constrain(mouseY, 150, height), cloudD * .85 , cloudD * .85);
    ellipse(q - 60, constrain(mouseY, 150, height), cloudD * .5 , cloudD * .5);
// heat waves from sun - changing size
if (mouseY < 100){
    push();
    stroke(255);
    noFill();
    ellipse(380, 100, diam, diam);
    ellipse(380, 100, diam*1.5, diam*1.5);
    ellipse(380, 100, diam*2, diam*2);
    pop();
    diam += dir * speed;
    if (diam > 300){
      diam = 0;
    }
}
// ground
    noStroke();
    fill(177, 177, 177);
    rect(0, 400, width, height);
// ferris wheel base
    push();
    fill(183, 103, 44);
    ellipse(width / 2, height / 2, baseDiam, baseDiam);
    strokeWeight(20);
    stroke(183, 103, 44);
    line(width / 2, height / 2, 380, 550);
    line(width / 2, height / 2, 100, 550);
    pop();
// ferris wheel
    push();
    stroke(183, 103, 44);
    strokeWeight(10);
    noFill();
    ellipse(width / 2, height / 2, ferrisDiam, ferrisDiam);
    pop();
// ferris wheel spokes
    push();
    translate(width / 2, height / 2);
    stroke(183, 103, 44);
    strokeWeight(3);
    rotate(millis() / mouseX / 6);
    line(ferrisDiam / 2, 0, 0, 0);
    line(-ferrisDiam / 2, 0, 0, 0);
    line(0, ferrisDiam / 2, 0, 0);
    line(0, -ferrisDiam / 2, 0, 0);
    pop();
// ferris wheel cars
    push();
    fill(202, 87, 87);
    translate(width / 2, height / 2);
    rotate(millis() / mouseX / 6); // changing speed depending on mouseX position
    ellipse(ferrisDiam / 2, 0, ferrisCarDiam, ferrisCarDiam);
    fill(93, 87, 202);
    ellipse(-ferrisDiam / 2, 0, ferrisCarDiam, ferrisCarDiam);
    fill(189, 118, 222);
    ellipse(0, ferrisDiam / 2, ferrisCarDiam, ferrisCarDiam);
    fill(87, 202, 101);
    ellipse(0, -ferrisDiam / 2, ferrisCarDiam, ferrisCarDiam);
    pop();


}

This project was really difficult for me, but I had fun experimenting with different variables. I wanted to incorporate movement with a spinning circle so I created a moving ferris wheel. I also chose to show contrast with the day/night theme and the varying speeds of the ferris wheel.