Author: sangwon2@andrew.cmu.edu

Aaron Lee-Project-07

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-07-Composistion with Curves
*/
         
function setup() {
  createCanvas(400,400);
  frameRate(10);
}

function draw() {
  background(0);

  for(var i=0; i<100; i++) {   

    stroke(random(255), random(255), random(255));
    noFill();       
    Hypo(i*30, mouseX);   
  }
}
//hypotrochoid
//http://mathworld.wolfram.com/Hypotrochoid.html
function Hypo(a, mouseY) {
  var x;
  var y; 

  var a;                  
  var b=a/40;            
  var h = constrain(mouseY/10, 0, a);   
  var ph = mouseX/50; 
  push();                
  translate(width/2, height/2);
  beginShape();
  for(var i=0; i<100; i++) {
    var t = map(i, 0, 100, 0, TWO_PI);
    x=(a-b)*cos(t) + h*cos(ph+t*(a-b)/b);
    y=(a-b)*sin(t) - h*sin(ph+t*(a-b)/b);
    vertex(x, y); 
  }
  endShape(CLOSE);
  pop();
}

In this project I was working mainly with Hypotrochoids in loop. I wanted to make series of psychedelic experience as the mouse scrolls.

Aaron Lee – Looking Outwards – 07

BikeCycle by Feltron

Nicholas Felton is both a designer and artist who transcribes numbers into something more meaningful whether it is an object or experience. One of the projects that I was interested was his collaboration with MoMa Store and art screen company Framed. They were using a year of data to come up with an app called BikeCycle.

The app visualizes a year of data in New York’s bike sharing program CitiBike focusing mainly into five different aspects. 1) Activity 2) popular routes 3)stations 4)bikes and 5)cyclist demographics.

I was mainly drawn by this project because I was interested in how bike rental apps developed over the course of the year. This project was done and released back in 2015, and obviously there are many more apps like this today. I was surprised to find how this app looks very similar that of today but also perhaps more artistic. It’s hard to know more about the specific algorithm behind the project but I could still read the creator’s artistic sensibilities.

Aaron Lee – Project – 06 – Abstract Clock

 sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-06-Abstract Clock
*/




function setup() {
   createCanvas(400, 400);
   angleMode(DEGREES); 
}

function draw(){

  var H = hour();
  var M = minute();
  var S = second();

   for (H = 0; H < 23; H++) {
    noStroke();
    let z = map(H, 0, 23, 255, 0);// mapping background day and night
    let m = map(H, 0, 23, 0, 240); //mapping moon and sun
    background(0, z, 255); //druing the day it is light blue, during night it is dark blue
    fill (252, m, 3); //during the day it is red(sun) during night it is yellow (moon)
    ellipse(width / 2, height / 2, 200, 200);

    stroke(255);//satellite that represents seconds
    noFill();
    let sec1 = map (S, 0, 60, 360, 0);
    arc (200, 200, 300, 300, sec1, 0);
    stroke(0, z, 255)
    let sec2 = map (S-1, 0, 60, 360, 0);
    arc (200, 200, 300, 300, sec2, 0);

    stroke(255);//satellite that represents minutes 
    noFill();
    let min1 = map (M, 0, 60, 0, 360);
    arc (200, 200, 250, 250, 0, min1);
    stroke(0, z, 255);
    let min2 = map (M-1, 0, 60, 0, 360);
    arc (200, 200, 250, 250, 0, min2);

    stroke(255);//satellite that represents hours
    noFill();
    let hr1 = map (H, 0, 24, 0, 360);
    arc (200, 200, 350, 350, 0, hr1);
    stroke(0, z, 255);
    let hr2 = map (H-1, 0, 24, 0, 360);
    arc (200, 200, 350, 350, 0, hr2);
  }
    
}

sketch

Color of the background and the sphere changes in order to indicate time. The movement of the satellites that orbit around each represent hr, min and sec.

Aaron Lee – Looking Outwards – 06

by courtesy of Spotify

These articles talk about how the shuffle mode in the music streaming app such as Spotify seems to be random when it is not actually so random. Despite the fact that people use shuffle mode to discover new music, they often realize same musicians appearing over and over and abruptly conclude that there is a certain pattern in algorithm. Soon, many complaints were made by Spotify users and various conspiracies arose that the company was advocating certain musicians only. However interestingly, the playlist the Spotify provided were actually random. It was just that the people didn’t find it random enough. The article focuses that there is a clear difference between the true randomness vs randomness that people conceive. This may be similar to other media that deals with randomness. For example, although Jackson Pollock’s painting may seem random at first glance, there still are many biases and certainties actively decided by the vision of the painter. Therefore, the same logic applies to the music streaming apps. The developers carefully articulate the randomness of shuffle mode so that the people can feel the right randomness.

https://www.independent.co.uk/life-style/gadgets-and-tech/news/why-random-shuffle-feels-far-from-random-10066621.html

https://www.quora.com/Is-Spotifys-shuffle-feature-truly-random-I-keep-hearing-the-same-songs-in-my-library-too-often-for-it-to-be-a-mere-coincidence-Does-Spotify-use-some-kind-of-special-algorithm-to-determine-what-song-plays-If-so-why/answer/Mattias-Petter-Johansson

Aaron Lee – Project 05 – Wallpaper

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-05-Wallpaper
*/

function setup() {
    createCanvas(600, 600);
    background("grey");
    var d = 30;

    for (var y = 0; y < 660; y = y + 60) {
        for (var x = 0; x < 600; x = x + 60) {
          push();
          fill('#809DFF');
          beginShape();
          vertex(x, y);
          vertex(x + 10, y - 10);
          vertex(x + 20, y);
          vertex(x + 30, y - 10);
          vertex(x + 40, y);
          vertex(x + 20, y + 20);
          endShape(CLOSE); //the shape1
          pop();
          push();
          fill('#5A5B83');
          beginShape();
          vertex(x, y);
          vertex(x + 20, y + 20);
          vertex(x + 20, y + 80);
          vertex(x + 10, y + 60);
          vertex(x + 10, y + 30);
          vertex(x, y + 20);
          endShape(CLOSE); //the shape2
          pop();
          }
        }

    for (var y1 = -30; y1 < 660; y1 = y1 + 60) {
        for (var x1 = 0; x1 < 600; x1 = x1 + 60) {
          push();
          fill('#CCD8FF');
          beginShape();
          vertex(x1 + d, y1);
          vertex(x1 + 10  + d, y1 - 10);
          vertex(x1 + 20  + d, y1);
          vertex(x1 + 30  + d, y1 - 10);
          vertex(x1 + 40 + d, y1);
          vertex(x1 + 20 + d, y1 + 20);
          endShape(CLOSE); //the shape3
          pop();
          push();
          fill("#7274CC");
          beginShape();
          vertex(x1 + d, y1);
          vertex(x1 + 20 + d, y1 + 20);
          vertex(x1 + 20 + d, y1 + 80);
          vertex(x1 + 10 + d, y1 + 60);
          vertex(x1 + 10 + d, y1 + 30);
          vertex(x1 + d, y1 + 20);
          endShape(CLOSE); //the shape4
          pop();
          }
        }
    noLoop();
}

function draw() {
    // draw is not called due to noLoop() in setup()
}

This was a rather simple process. First, setting up a loop function for both x and y. Then I created shapes in rows that create illusion.

Aaron Lee – Looking Outwards – 05

Courtesy of Dom&Nic

Artist: Dom&Nic

Year: 2016

The music video of the song ‘Wide Open’ by The Chemical Brothers is directed by the director group Dom&Nic. In this seemingly one take 4 minutes film, the parts of dancer’s body slowly turn in to  3D printed lattice structure – a subsequent loss of her old self. This work was done by successfully merging the actions of the dancer with a 3D digital model. This genuine process involved with 1) Scanning dancer in full to create an exact digital replica 2) using in-house software to scan the background without the dancer for clean plates 3) camera shooting with meticulous tracking, 3d match-moving and animation.

I like this project because the technology really serves the vision of the artist. The dancer is now literally hollow, matching to the lyrics of the song.

Aaron Lee – Looking Outwards – 04

Mostly active during late 90s and around 2000s, Brian Eno is a pioneer of ambient music with many inspiring pieces those are familiar to only our ears. Windows 95 starup sound is one of them. This instantly recognizable pieces of music was to open up the new era of internet. Because the artist was asked to capture the symbolic image of Windows into roughly 6 seconds or even less, Brain Eno soon became obsessed by this task, making 84 different versions. Ironically Eno uses Mac and says that he never used a PC in this life. I am quite unsure whether Eno introduced certain algorithms to generate his work (probably not?). But this piece was so iconic to me that I wanted to discuss about it.

Aaron Lee – Project 04 – String Art

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-04-String Art
*/

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


function draw() {
 
  background( mouseX, mouseY, 100);//backgrond chages color
  var stepx = 10;
  var stepy = 20; 

      for(var i = 0; i < 100; i = i + 1) {
         line(width - (mouseX * i / 50), 0, width, height - (mouseY * i /50)); //top right curves
         line(0, width - (mouseX * i / 50), height - (mouseY * i /50), width); //bottom left curves
      }

      for(var i = 0; i < 100; i = i + 4) {
         line(mouseX, mouseY, i, i / 50);  //top straight lines
         line(i / 50, i, mouseX, mouseY);  //bottom straight lines
      }
}

This project was more of a try and error process. My initial formula was not intriguing as I had wished. Thus I had to constantly make changes until I got this result.

Aaron Lee-LookingOutwards-03

BUGA Fibre pavilion by  University of Stuttgart’s Institute for Computational Design and Construction (ICD) and the Institute for Building Structures and Structural Design (ITKE)

The BUGA Fibre Pavilion is a combined work of biomimicry research and computational design through the means of digital fabrication. The pavilion’s 60 woven structural are consisted of using synthetic glass and carbon fibers by robot arms. The resulting cylindrical modules got their inspiration from insect wings and exoskeletons. Both the innovative material and the genuine shape create structural rigidity and integrity that is much stronger than traditional means of steel construction while being much lighter for mobility after disassembly I am especially impressed by the appearance of the project which really features sci-fi aesthetic, we always imagine either in movie or show. Also, the fact that it leaves zero carbon foot print is inspirational.

Researchers and robots team up to build innovative pavilion in a German garden

Aaron Lee- Project-03- Dynamic Drawing

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-03-Dynamic Drawing
*/

//variables

   var x = 0;
   var y = 100;

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


function draw() {
 
   background(0);
   stroke(0);
   fill(255, 204, 0);
   
   if (mouseY < (height / 2)) {
         fill(0);  
      }
   rect(10, 10, 30, 30);
   textSize(30);
   text('touch!', 40, 40);//if mouse is located on bottom portion of canvas, the text lights 

    fill(0);
   if (mouseY < (height / 2)) {
         fill(255, 204, 0);
      }
   rect(440, 600, 30, 30);
   textSize(30);
   text('touch!', 350, 630);//if mouse is located on top portion of canvas, the text lights

   push();

   translate(mouseX, mouseY);
   scale(mouseX/100, mouseY/100); 
   noFill();
   stroke(255);
   rotate(radians(x));
   rect(-50, -50, y, y);//scale of the rectangle changes following the movement of mouse

   x = x + mouseX/25;

   pop(); 

   stroke(255);

   //lines from top
   line(0, 0, mouseX, mouseY);
   line(40, 0, mouseX, mouseY);
   line(80, 0, mouseX, mouseY);
   line(120, 0, mouseX, mouseY);
   line(160, 0, mouseX, mouseY);
   line(200, 0, mouseX, mouseY);
   line(240, 0, mouseX, mouseY);
   line(280, 0, mouseX, mouseY);
   line(320, 0, mouseX, mouseY);
   line(360, 0, mouseX, mouseY);
   line(400, 0, mouseX, mouseY);
   line(440, 0, mouseX, mouseY);
   line(480, 0, mouseX, mouseY);
     //lines from right
   line(width, 40, mouseX, mouseY);
   line(width, 80, mouseX, mouseY);
   line(width, 120, mouseX, mouseY);
   line(width, 160, mouseX, mouseY);
   line(width, 200, mouseX, mouseY);
   line(width, 240, mouseX, mouseY);
   line(width, 280, mouseX, mouseY);
   line(width, 320, mouseX, mouseY);
   line(width, 360, mouseX, mouseY);
   line(width, 400, mouseX, mouseY);
   line(width, 440, mouseX, mouseY);
   line(width, 480, mouseX, mouseY);
   line(width, 520, mouseX, mouseY);
   line(width, 560, mouseX, mouseY);
   line(width, 600, mouseX, mouseY);
   line(width, 640, mouseX, mouseY);
        //lines from left
   line(0, 40, mouseX, mouseY);
   line(0, 80, mouseX, mouseY);
   line(0, 120, mouseX, mouseY);
   line(0, 160, mouseX, mouseY);
   line(0, 200, mouseX, mouseY);
   line(0, 240, mouseX, mouseY);
   line(0, 280, mouseX, mouseY);
   line(0, 320, mouseX, mouseY);
   line(0, 360, mouseX, mouseY);
   line(0, 400, mouseX, mouseY);
   line(0, 440, mouseX, mouseY);
   line(0, 480, mouseX, mouseY);
   line(0, 520, mouseX, mouseY);
   line(0, 560, mouseX, mouseY);
   line(0, 600, mouseX, mouseY);
   line(0, 640, mouseX, mouseY);
      //lines from bottom
   line(0, height, mouseX, mouseY);
   line(40, height, mouseX, mouseY);
   line(80, height, mouseX, mouseY);
   line(120, height, mouseX, mouseY);
   line(160, height, mouseX, mouseY);
   line(200, height, mouseX, mouseY);
   line(240, height, mouseX, mouseY);
   line(280, height, mouseX, mouseY);
   line(320, height, mouseX, mouseY);
   line(360, height, mouseX, mouseY);
   line(400, height, mouseX, mouseY);
   line(440, height, mouseX, mouseY);
   line(480, height, mouseX, mouseY);
}

I tried to make more user interactive animation with textual instruction.