For my final project I want to create a game where the user is stacking different types of cakes on top of each other. The cakes will be placed in random places on the screen as it is moving up (towards the sky) and the user will drag the cakes towards the center and start stacking them. The user is given a choice to pick what type of cakes to stack to create their own ultimate multi layered customized cake. However, if the dragged piece is offset by more than half of the length of the cake then the whole thing will topple over.

sketch

//Claire Yoon
//claireyo@andrew.cmu.edu
//Section E
//Project—09—Portrait

function preload() {
    var myImageURL = "https://i.imgur.com/Oo4KTUc.jpg";
    baseImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(300, 400);
    background(0);
    baseImage.loadPixels();
    //rate at which the pixels appear
    frameRate(1000);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    // color at the current pixel
    var theColorAtLocationXY = baseImage.get(ix, iy);

    //draw ellipses at random sizes
    noStroke();
    fill(theColorAtLocationXY);
    //ellipses increase in size when mouse is pressed
    if (mouseIsPressed) {
        ellipse(px, py, random(10, 17), random(10, 17));
    //ellipses in more smaller sizes
    } else {
        ellipse(px, py, random(2, 10), random(2, 10));
    }
}

I enjoyed experimenting with the different sizes of the ellipses by randomizing the size and increasing the randomized size when clicking on the mouse.

For this Looking Outwards post, I found Yoshi’s looking outwards-0 5 post really intriguing. This project is called Building hopes by Giorgia Lupi at Accurat for Google and it is an experimental AR app that is powered by Google trends data to explore the user’s hopes. It is interesting how each rock , which is digitally generated, represents a topic and varies in size and color depending on the user’s desired intensity. Then they are stacked to create a physical representation of the user’s hopes. Like Yoshi, I admire how it is inspired by traditional balancing rock art and how she is available to use generative 3d art to humanize data trends rooted in tradition. Additionally I like how this project incorporates a sense of physicality to hopes which are intangible to enhance a more natural interaction. This project reminds us that there are so many more ways to interpret data.

For this project, I played  with how the different curve functions interacted and overlapped with each other. I made the rotation continuous to make it more visually dynamic.

Different forms:

/* Claire Yoon
   claireyo@andrew.cmu.edu
   Section E
   Project 7 */

// global variables
var nPoints = 200;
var angle = 0;
var rotateCount = 0
function setup() {
    createCanvas(480, 480);
    frameRate(20);
}

function draw() {
    background (255, 209, 224);
    // calling functions at middle of the canvas
    push();
    translate(width / 2, height / 2);
    // function continuously rotating 
    rotate(radians(rotateCount));
    rotateCount++;
    drawHypocycloid();
    drawHypotrochoid();
    pop();


}
function drawHypotrochoid() {
    //setting variables for pale pink hypotrichoid
    var a1 = map(mouseX, 0, 450, 50, 240);
    var b1 = 10;
    var h1 = map(mouseX / 10, 0, 200, 0, height);

    //pale pink stroke
    fill(255, 255, 255, 100);
    stroke(255, 209, 224);
    strokeWeight(1.5);
    // for loop to draw hypotrochoid form
    beginShape();
    for(var i = 0; i < nPoints; i++) {
        // angle for hypotrochoid formula
        var angle1 = map(i, 0, 100, 0, TWO_PI);
        x = (a1 - b1) * cos(angle1) + h1 *  cos(((a1 - b1)/ b1) * angle1);
        y = (a1 - b1) * sin(angle1) - h1 * sin(((a1 - b1)/ b1) * angle1);
        vertex(x, y);
    }
        endShape();
}

function drawHypocycloid() {
    // setting variables for white astroid
    a2 = int(map(mouseX, 0, width, 240, 150));
    b2 = int(map(mouseX, 0, width, 8, 15));
    // pale pink with low opacity
    fill(189, 236, 255, 40);
    stroke("white");
    strokeWeight(1);

    beginShape();
    // for loop to draw hypocycloid form
    for (var i = 0; i < 200; i++){
        // angle for hypocycloid formula
        var angle2 = map(i, 0, 100, 0, TWO_PI);
        var x = a2 * ((b2 - 1) * cos(angle2) + cos((b2 - 1) * angle2)) / b2;
        var y = a2 * ((b2 - 1) * sin(angle2) + sin((b2 - 1) * angle2)) / b2;
        vertex(x, y);
    }
    endShape();
}

Flight patterns is a data visualization of airplane traffic that captures the rhythms and spatial patterns across North America over a 24- hour period. This project was created by Aaron Koblin who used data from the Federal Aviation Administration’s (FAA), which tracks 140,000 planes a day. He then used processing to plot where each plane went and used after effects and Maya.

The various colors and patterns are coded to show a wide range fo data such as type of aircraft, alterations to routes, weather systems and no fly zones. Also, the airline hubs appear as bright points of diffusion inside a complex web. I found this project particularly intriguing because this project’s use of aggregated data is visually pleasing as well as represents a relationship between humans and technology.

This was originally part of

Flight paths from FAA data drawn algorithmically and colored based on airplane model

 sketch

/* Claire
   Section E
   claireyo@andrew.cmu.edu
   Project-06-Abstract-Clock*/

function setup() {
    createCanvas(400, 400);
    noStroke();
}
function draw() {
    background(166, 243, 247);
    noStroke();

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

// mapping time variables
    var shadowcolor = map(H, 0, 8, 0, 37, 0, 44)
    var creamfall = map(M, 0, 6, 0, 7);

//shadow gets darker with hours
    var shadow = color(166 - shadowcolor, 243 - shadowcolor, 247 - shadowcolor);
    fill(shadow);
    noStroke();
    quad(145, 272, 229, 77, 501, 328, 339, 473);

//Popsicle part that does not move
    noStroke();
    //popsicle stick
    fill(239, 198, 142);
    rect(190, 247, 22, 108, 30);
    //popsicle
    fill(252, 234, 68);
    rect(144, 115, 111, 171, 20);
    //dent on popsicle
    fill(239, 220, 43);
    rect(168, 120, 22, 134, 10);
    rect(212, 120, 22, 134, 10);
    //cream
    fill(250, 120,119);
    ellipse(199.5, 125, 112, 112);

//cream that is falling with minutes
    rect(144, 121, 28, 90 + creamfall, 14);
    rect(156, 121, 50, 68 + creamfall, 23);
    rect(197, 121, 43, 94 + creamfall, 21.5);
    rect(236, 121, 20, 106 + creamfall, 10);

//drooling drops that falls down every second
    push();
    translate(249, 213);
    fill(250, 120,119);
    s = (millis()) % 800;
    s = map(s, 0, 800, 0, 213);
    ellipse(0, s, 10, 12);
    pop();

//sun
    fill(255, 224, 0);
    ellipse(29, 6, 191, 191);

// Time
    fill(255);
    text(H + ":" + M + ":" + S, 40, 50);

   }

I enjoyed this project and the concept of creating an graphic art piece that evolves around time. I based my clock on how a popsicle drips and melts as time goes by.

This art piece by Vladimir Kanic, a transmedia artist filmmaker, is part of a series of artwork that incorporates chaos theory and randomness to create structured art. Vladimir created a process that alters the film to create itself from spontaneous occurrences in everyday material world. He devised a concept called ‘Magic box ‘ where twelve boxes are given to different art directors and they put in a random number of objects. A group of random people would then procede to put them in a stash and the artist would create a film by observing and measuring randomness from the objects from any one of the boxes. I found this piece particularly interesting as a unique piece of art is created through measuring randomness through a random model system of chaos.

From the start the concept of this art piece by Jan Reeh really intrigued me because of the mix of objects and objects shaped as letters. This image explains the word “creative” in a literal way. Close up there are objects surrounding the each letter and people interacting it and seems to tell a story.

Watching the video of the color helps me further understand the author’s intention of explaining the word in a literal way. As the colors slowly fills the page it mimics the way one would read a word and gives “life” to the word as the objects surrounding it move as well. This work was created was made in 3ds max and rendered in Vray.

It was fun to experiment with different shapes and lines and I got inspiration from the scaling on the turtle’s shell and further gave dimension by adding a gradient.

/* Claire Yoon
   claireyo@andrew.cmu.edu
   Section E
   Wall Paper */
    var pu;
    var pi;

    function setup() {
      createCanvas(640, 600);
      background(140,171,190);
      //gradient for lines
      pu = color(164, 168, 209);
      pi = color(187, 160, 178);
      setGradient(pu, pi);
    }
    function draw() {
      //vertical loop for pattern y
      for(var y = 20; y <= height; y += 50){
        //horizontal loop for pattern x
        for(var x = 20; x <= width; x += 50){
          //call pattern
          pattern (x,y);
        }
      }
      noLoop()
    }
    function pattern(x, y) {
      fill(209,242,255);
      strokeWeight(0);
      rect(x, y, 20, 20);

      noFill();
      stroke(194, 85, 100);
      strokeWeight(1.5);
      line(0, y - 15, width, y - 15);
      line(x - 15, 0, x - 15, height);
    }
    function setGradient(pu,pi) {
      //gradient for the background
      noFill();
      strokeWeight(1.5);
      for (var c = 0; c < height; c++ ) {
      var blend = map(c, 0, height, 0, 1)
      var m = lerpColor(pu, pi, blend);
      stroke(m);
      line(0, c, width, c);
    }
  }




//187,160,178
// stroke(164, 191, 235);
// strokeWeight(1);

sketch

/*Claire Yoon
  Section E
  claireyo@andrew.cmu.edu
  Project4
  */

function setup() {
    createCanvas(400, 300);
    strokeWeight(0.75)
}

function draw() {
    background(158,219,229,);
    for (var i = 0; i < 40; i ++) {
    stroke(255);
    strokeWeight(0.75);
    // white lines moving in a diamond shape
    line(i * 10, mouseY, width / 2, height);
    line(width / 2, 0, i * 10, mouseY);
  }
    //yellow lines
    for (var i = 0; i < 400; i += 10){
    stroke("yellow");
    strokeWeight(0.75);
    // bottom right curve
    line(mouseX, 250 - i, i / 2, height/ 2);
    strokeWeight(0.75);
    // bottom left curve
    line(0, i / 2, 400 - i, mouseY);
    strokeWeight(0.75);

    // horizontal lines
    stroke("white")
    strokeWeight (1.5);
    line(mouseX, 300 - i, 200, height - i);
  }
}

Compared to the other projects, I found that I was a lot more intuitive with this piece and went through a more trial and error process in order to show visual harmony between the lines.