Author: reshin@andrew.cmu.edu

Rachel Shin – Project 07- Curves

reshin-project07

/*Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
Project 07- Composition with Curves
*/

var numPoints = 300;
var angle = 0;


function setup() {
    createCanvas(480, 480)
    r = random(255);
    g = random(255);
    b = random(255);
}    



function draw() {
    background(0);

    push();
    translate(width / 2, height / 2); //center on canvas
    drawHypotrochoid();
    pop();

    push();
    translate(mouseX, mouseY); //center of curve based on mouse position
    rotate(radians(angle)); //rotates on center point
    drawTrifolium();
    pop();

    angle = angle + 4; // speed of rotation
}  
  
function drawHypotrochoid() { //http://mathworld.wolfram.com/Hypotrochoid.html
    var x;
    var y;
    
    //map boundaries
    var h = map(mouseY, 0, height, 0, 200); //size changes based on mouseY
    var a = map(mouseX, 0, width, 0, 200); //size changes based on mouseX
    var b = a / 8;

    //Hypotrochoid curve
    beginShape();
    for (var i = 0; i < numPoints; i ++) {
        stroke(r, g, b);
        strokeWeight(2);
        noFill();
        var t = map(i, 0, 200, 0, TWO_PI)
        x = (a - b) * cos(t) + h * cos(((a - b) / b) * t)
        y = (a - b) * sin(t) - h * sin(((a - b) / b) * t)
        vertex (x, y)
    }
    endShape(CLOSE);
}


function drawTrifolium() { //http://mathworld.wolfram.com/ConicalSpiral.html    
    var x;
    var y;
    var r;

    //constrain    
    var a = constrain(mouseX, width / 5, width / 2);
    
    //outline of light blue spinning trifolium
    noFill();
    stroke(195, 217, 227);
    strokeWeight(0.5);

    //Trifolium curve
    beginShape();
    for (var i = 0; i < numPoints; i++) {
        var t = map(i, 0, numPoints, 0, TWO_PI);
        r = - a * cos(3 * t);
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);
}

This project took me a while because it took me a while to figure out how to compute each curves. Maneuvering it around the canvas was more interesting for me because it allowed me observe how the code I wrote computed it to animate a certain way.

  • Mouse at Top Right of Canvas
  • Mouse at Top Left of Canvas
  • Mouse at Bottom Right of Canvas
  • Mouse at Bottom Left of Canvas
  • Mouse at Center of Canvas

Rachel Shin – Project 06- Abstract Clock (boba version)


Boba Clock

/*Rachel Shin
reshin@andrew.cmu.edu
15-104 Section B
Project 06-- Abstract Clock
*/

function setup() {
    createCanvas(500, 500);
    var topLayer = color(130, 152, 168);
    var bottomLayer = color(109, 83, 117);
    setGradient(topLayer, bottomLayer);

    textSize(30);
    textAlign(CENTER);
    textStyle(ITALIC);
    text("boba all day every day", 0, 80, width);

}    

//--------------------------
function draw() {
  
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();

    var X = 180;
    b = 0;

   
    //boba cup: will not change
    rectMode(CORNER);
    noStroke();
    fill(255);
    rect(175, 200, 150, 250);

    ellipseMode(CENTER);
    noStroke();
    fill(255);
    ellipse(250, 200, 150, 30);

    ellipseMode(CENTER);
    noStroke();
    fill(255);
    ellipse(250, 450, 150, 30);

    //straw: seconds
    noStroke();
    fill(0);
    rectMode(CORNER);
    rect(235, 140, 30, S);
    

    //tea: minutes 
    //tea is draining per minute
    //to make draining effect, I created the complete picture and then used background color to "delete" the drawn

    ellipseMode(CENTER); //bottom part: doesn't change
    noStroke();
    fill(209, 207, 171);
    ellipse(250, 450, 140, 20);

    rectMode(CORNER);
    noStroke();
    fill(209, 207, 171);
    rect(180, 220, 140, 230);

    ellipseMode(CENTER);
    noStroke();
    fill(209, 207, 171);
    ellipse(250, 220, 140, 20);

    rectMode(CORNER);
    noStroke();
    fill(255);
    rect(180, 200, 140, M);

    //boba: hour (12 hours)
    b = H % 12;
    for (i = 1; i <= b; i+=1){
        noStroke();
        fill(0);
        ellipse(X + 10 * i, 440, 10, 10);
    }}


function setGradient(color1, color2) {
    for (var a = 0; a <= height; a++) {
        var amount = map(a, 0, height, 0, 1);
        var back = lerpColor(color1, color2, amount);
        stroke(back);
        line(0, a, width, a);
    }}

When creating this project, I simply looked at the objects on my desk for inspiration and decided to use my cup of Fuku Tea as inspiration. I identified 3 components of the boba cup that I could alter to fit hours, minutes, and seconds. I found it interesting to build my own clock graphically through one of my favorite food items.

Rachel Shin – LO-6

Aaron Tobey generated a project that involved the mechanics of brainstorming and coding architecture. In his Vimeo video showing the code running, we see 36 rectangular frames generating a randomized series of shapes drawn in each frame. I admired that while the overall piece looked organized, it also included a factor in which it created a chaotic yet cohesive mood. The boundaries of each rectangular frame created a clean structure that contained the chaotic randomness of the architecture shapes inside. I suppose that Tobey first drew the rectangular frames in the code and then generated loops that drew random architecture shapes within each frame. This algorithm then creates the piece that we observe in Tobey’s Vimeo.

Aaron Tobey. “Coding Architecture.” 2015.

Rachel Shin – LO 5

The haunting and eerie image, Golden Skull, was created by CG director and environment artist Hirokazu Yokohara within 5 days. The article states that the project was created with Blender add-on Graswald, EEVEE, and Cinema 4D. I admired this particular project because it incorporates a variety of lighting, shading, and layering abilities to create such a realistic image to be 3D printed. Such techniques are crucial when it comes to CG projects in movies. The realistic aspect of such meticulously designed items in movies give the wow factor to audience members. I suppose that the image was created by a variety of layering skills with shading and lighting changes implemented to create the realistic factor. The creator’s artistic sensibilities are manifested in the final form by using all his techniques and abilities to produce a realistic CG. As someone who is interested in film producing, I appreciate all the CG artists out there who take the time to give life to inanimate images.

Rachel Shin – Project 05 – Wallpaper


reshin-project05

/*Rachel Shin
	reshin@andrew.cmu.edu
	15-104 Section B
	Project 05- Wallpaper
*/

var spacing;

function setup(){
    createCanvas(400, 400);
    background(235, 234, 223);
    spacing = 50;
}


function draw(){
    for (var y = 0; y < height - (spacing/2); y += spacing/2) { //dotted background, adjusted to fit entire circle, avoid cut offs
    	for (var x = 0; x < width-(spacing/2); x += spacing/2){
    		noStroke();
    		fill(255);
    		ellipse(x+(spacing/2), y+(spacing/2), spacing/5, spacing/5);
    	}
    }

    for (var y = 0; y < height; y += spacing){ //burgundy rounded rectangles
    	for (var x = 0; x < width; x += spacing) {
    		stroke(112, 107, 105);
    		noFill();
    		square (x + (spacing/5), y + (spacing/5), spacing/3, 2);
    	}
    }

    for (var y = 0; y < height; y += spacing) { //sky blue trapezoids across canvas
        for (var x = 0; x < width; x += 70) {
        	noStroke();
        	fill(167, 200, 212);
            quad(x + (spacing/5), y + (spacing/5), x + spacing, y + spacing, x + spacing, y + (spacing+10), x + (spacing/5), y + spacing);
        }}

        noLoop();
}

Brainstorm/Initial Sketch

While thinking of ways to code and design this project, I decided to layer various geometric shapes to create a cohesive visual of repeated patterns of circles, trapezoids, and rounded rectangles. I found it interesting how I was able to recreate this sketch by figuring out how layers of shapes interacted to create this pattern.

Rachel Shin – Project 04 – String Art

reshin-string art

//Rachel Shin
//reshin
//15-104 Section B
// Project - 04 String Art

var shift = 10; // changing the lines position from one another (increments)
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;

function setup() {
    createCanvas(400, 300);
    background(0);
   
}

function draw() {


// left middle to right middle: orange curves that cover canvas based on mouseX and e value
for (var e = 0; e < width; e+= shift){
	strokeWeight(0.5);
	stroke(245, 202, 147);
	line(mouseX, 300-e, e-100, e*0.5);
}


//bottom left to top right: pink rays
for (var c = 0; c < width; c += shift){
	strokeWeight(0.5);
	stroke(84, 77, 84);
	line(0, c-10, width, c*0.5);
}

let leftBound = 100;
let rightBound = 300;
let bound1 = constrain(mouseX, leftBound, rightBound);

//top middle to bottom middle: white rays to form off white rectangle with mouseX movement
for (var d = 0; d < height; d += shift){
	strokeWeight(0.5);
	stroke(225);
	line(bound1, mouseY, height/2, d*0.5);
}

//right top of canvas: green curves
 for (var a = 0; a < height; a += shift){
 	strokeWeight(0.5);
 	stroke(168, 201, 157);
 	line(a, 0, width, a*0.5);
 }

//top left of canvas: blue rays
for (var b = 0; b < width; b += shift){
	strokeWeight(0.5);
	stroke(157, 174, 201);
	line(0, 0, height, b*0.5);
	
}}

For this project, I wanted to implement a variety of strings that would, while visually very different, would produce a cohesive visual. I first arranged the code by creating a light green web-like string art at the top right corner and brought the rest of the art counter-clockwise. I then chose to push the off-white string art to the back to bring more attention to the colored lines. I also wanted to employ mouseX and mouseY and constrain to experiment more. I found it very interesting to layer strings on top of each other to create more dimensional art.

Rachel Shin- LO4

Weather Thingy – Real time climate sound controller

In 2018, Adrien Kaeser developed a computation system that linked climate and music to produce a variation of sounds according to the change in climate. Kaeser developed this system with Arduino, Weather Meters, environment sensor, C++ coding, and MIDI, allowing him to configure a connection between climate and sound production.

As someone with a musical background, I admired how Kaeser took the time to configure each component of music and audience experience to a certain climate factor. He altered the panning, delay, and frequency according to the change in wind, UV sensor, and wind speed respectively. I appreciated this project particularly because it allowed Kaeser to encourage listeners to adopt a different musical style in contrary to the conventional pop, lo-fi, and rap styles taken today. I suppose that the algorithms used to generate the work came from creating two platforms of which one was made to visually represent a soundscape while the other produced configured sound variations based off of the visualized soundscape. The two were then linked with coding and sensors to produce this “Weather Thingy.” The creator’s artistic sensibilities manifested in the final form by controlling and modifying music and sound production by a console and interface that translates climate data into a visual representation of sound.

 

 

Rachel Shin- LO3

The building-scale 3D printing employs small robotic agents to build a mini version of construction structures with material that acts as a mold and “thermal insulation layer.” MIT developed this system to provide 3D printing models for building models so that architectures and scientists could better visualize and collaborate to produce and build strong, technologically advanced buildings. The technology that MIT established also allowed building utilities to be incorporated into the model so that it can accurately predict future circumstances and provide solutions to any uprising issues in the model. I found this interesting because it improves the rate of success as well as minimizes any risk of danger or negative influence on civilians’ safety. I suppose the algorithms used to generate work comes from positioning potential structures as well as generating buildings with accurate angles and arrangement of components of the structure. The creator’s artistic sensibilities are manifested in the final form because it is literally an enlarged version of the building-scale 3d printed model while guaranteeing success of any wiring or plumbing or sturdiness involved.

Rachel Shin – Project 03

For this project, I decided to start with the rotating squares that I learned in recitation. From there, I layered shapes with differing positions, sizes, angles, and a change in background color to create a cohesive art piece. I thought it was fun to experiment with stroke, stroke colors, shapes, layering, rotating, and mouseX/mouseY positions to create a moving art piece.

reshin-03-project-dynamic

//Rachel Shin
//reshin@andrew.cmu.edu
//15-104
//Section B
//Project 03- Dynamic Drawing

    var angle = 0;
    var angle2 = 0;

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

function draw() {
    
    //background: color change based on mousex
    background(109, 140, 148);

    if (mouseX > width/2) {
        background(202, 220, 224);
    }

    //circle1: size change, position same
    noFill();
    strokeWeight(10);
    stroke(230, 197, 211);
    ellipse(50, 50, mouseX, mouseX);

    //circle2: size change, position same
    noFill();
    strokeWeight(20);
    stroke(194, 79, 83);
    ellipse(430, 430, -mouseX, -mouseX);

    //circle3: size change, position same
    noFill();
    strokeWeight(30);
    stroke(79, 121, 194);
    ellipse(430, 50, mouseX, mouseX);

    //circle4: size change, position same
    noFill();
    strokeWeight(40);
    stroke(139, 194, 79);
    ellipse(50, 430, -mouseX, -mouseX);

    //rect 1: size change, position same
    noStroke();
    fill(139, 173, 137);
    rect(20, 50, (-mouseX/3), (mouseY/2));

    //rect2: size change, position same
    noStroke();
    fill(246, 250, 190);
    rect(20, 460, mouseX/5, mouseY/8);

    //circle3: size same, position change
    fill(173, 146, 108);
    ellipse(mouseX/2, mouseY/3, 100, 200);



    //spinning squares
    noStroke();
    fill('white');
    push();
    rotate(degrees(angle));
    rect(mouseX, 5, 50, 50);
    pop();
    angle = angle + 2;

    
    push();
    translate(195,195);
    rotate(degrees(angle2));
    rect(mouseX-100, 5, 50, 50);
    pop();
    angle2 = angle2 - 2;

    //baymax
    if (mouseY > height/2) {
        //if vertical position is at 240 or more, draw baymax
        noStroke();
        fill('white');
        ellipse (200, 300, 100, 70);

        noStroke();
        fill('black');
        ellipse (175, 300, 15, 15);

        noStroke();
        fill('black');
        ellipse (225, 300, 15, 15);

        noStroke();
        fill('black');
        rect (175, 300, 50, 5);

        text("HI, I'M BAYMAX, YOUR PERSONAL HEALTH CARE COMPANION", 50, 400, 400, 50);
    }


}

Rachel Shin – Project 02 – Face Variables

I based this project off of my favorite Disney character – Baymax. I thought it’d be both interesting and fun to take on a quirky spin as I code to modify my favorite character.

Rachel Shin – Baymax

// Rachel Shin
// Section B
// Project 2 - Face Variable


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

   
}



var backgroundR = 200;
var backgroundG = 150;
var backgroundB = 100;
var bodyW = 300;
var bodyH = 450;
var faceW = 500;
var faceH = 400;
var eyeS = 25;
var blushR = 209;
var blushG = 117;
var blushB = 135;



function draw() {
	//background
    background(backgroundR, backgroundG, backgroundB);
    text ("Hello, I am Baymax, your personal healthcare companion.", 130, 80, 400, 20);

    //body
    fill("white");
    ellipse(200, 550, bodyW, bodyH);

    //face
    noStroke();
    fill("white");
    ellipse(200, 310, faceW, faceH);

    noStroke();
    fill(blushR, blushG, blushB);
    ellipse(140, 340, 50, 10);

    noStroke();
    fill(blushR, blushG, blushB);
    ellipse (260, 340, 50, 10);



    //eyes
    fill("black");
    rect(150, 310, 100, 5);

    fill("black");
    ellipse (140, 310, eyeS, eyeS);

    fill("black");
    ellipse (260, 310, eyeS, eyeS);
	
	//blush
	noStroke();
	fill(209, 117, 135);

}

function mousePressed () {
	backgroundR = random (0, 200);
	backgroundG = random (0, 200);
	bodyW = random (250, 300);
	bodyH = random (400, 550);
	backgroundB = random (0, 200);
	faceW = random (200, 400);
	faceH = random (200, 300);
	eyeS = random (25, 50);
	blushR = random (0,209);
	blushB = random (0, 117);
	blushB = random (0,135);
}