Author: dnam@andrew.cmu.edu

dnam-project-07

sketch

/*
Doo Won Nam
Section B
dnam@andrew.cmu.edu
Project - 07
*/

function setup() {
createCanvas(400, 400);
ellipseMode(CENTER); //set center of ellipse to middle
stroke(255); //white lines
}

function draw() {
background(0); //black background, put it in draw so it resets while moving
var angle = 0; //set angle for ellipse and movement distance
var angle2 = 360 / mouseX; //set mouse interaction
for (var i = 0; i < 11 ;i ++) { //start loop, limit to 10 ellipses
angle = frameCount;
d = sin(radians(angle)) * 100;
var x = 200 + d * cos(radians(angle2*i + 200)); //set x to move/same x for both
var y = 200 + d * sin(radians(angle2*i + 10)); //set y to move/same y for both
  noFill(); //transparent ellipses
	ellipse(x, y, 100, 100); //small circle
	ellipse(x, y, 200, 200); //big circle
	}
}

While I had a hard time with the project due to my lack of knowledge in how cos and sin works due to not having taken math classes for a prolonged time, I used cos and sin to make the ellipses move in a cradle like fashion. The mouse interaction blooms the circles that are combined together. The location of the mouse alters the location and spread of the ellipses. This effect also alludes a display similar to those of springs.

dnam-Looking Outwards-07

Ross Spiral Curriculm

Looking at computational information visualisation, I looked at Santiago Ortiz’s work, especially the Ross Spiral Curriculum. The graphics showcase the development of the human consciousness. The different colors represent the different aspects in how our brains developed. For example, orange discuss an important evolution in the human mind’s ability to understand the visual arts, whereas navy blue discuss human’s scientific development. The part of the art that really grabbed my attention was not only the beautiful aesthetics that interact with the user’s mouse, but also the clean UI graphics that allowed me to fully understand how to use the tool in a few seconds. You can check out Santiago Ortiz’s spiral here.

dnam-project-06

sketch

/*
Doo Won Nam
Section B
dnam@andrew.cmu.edu
Project - 06
*/

//variables for spiral
var spiralAngle = 45;
var spiralRadius = 1;
var spiralRate = 0;

function setup() {
    createCanvas(480, 480);
    background(200, 250, 200); //background doesn't reset every frame
}

function draw() {
    noStroke();

    // Fetch the current time
  var H = hour();
  var M = minute();
  var S = second();
  var x = cos(radians(spiralAngle)) * spiralRadius; //wider
  var y = sin(radians(spiralAngle)) * spiralRadius; //taller

  fill(0 + S * 4); //gets lighter per second passed
  ellipseMode(CENTER);
  ellipse(240 + x, 240 - y, 10, 10); //the X and Y shifts along the spiral
  spiralAngle = spiralAngle + 2; //angle shifts to form spiral
  spiralRadius = spiralRadius + 0.1; //spiral radius increases
  spiralRate = spiralRate + 1; 

     if (spiralRate > 2000) { //reset once spiral goes too far
         spiralRate = 0;
         spiralRadius = 1;
         background(150, 200, 150);
}
}

I wanted to show time with just the seconds by using the formation of a spiral and the change of gradience. The code is instructed to create lighter color ellipses until a minute passes and the second resets – the ellipses in the spiral are then reset to black. The spiral also restarts if it fills up too much of the canvas. The idea was based off of Korean anti-mosquito scent candles, which look like these:

I always thought how the candle disappears in a spiral as time goes was almost hypnotising, and I wanted to create a similar effect with this candle.

dnam-Looking Outwards-06

Mark Wilson – ‘e4708’

With computer generated arts becoming more prevalent, artists haave leaned on photo editing and codes to create new artworks. Another new tool is algorithms – where artists borrow the computer’s ability to generate ‘random’ number plugs to create different shapes, forms, colors in different areas of the digital canvas. Mark Wilson is an artist that very much utilizes the random generation from the computer to create similar, yet different artworks everytime. There is an issue of question if these artworks are truly random as Wilson is virtually telling the computer to pick a number out of the options. However, one thing is for sure, Wilson’s artworks are an interesting showcase of modern art technology. More of his works can be found here.

dnam-project-05-Wallpaper

sketch

/*
Doo Won Nam
Section B
dnam@andrew.cmu.edu
Project - 05
*/

function setup() {
    createCanvas(600, 600);
    background(142, 4, 2); //red background
}
function draw() {
  var rng = random()
  for (var y = 50; y < height -5; y += 100) { //small rectangles
      for (var x = 50; x < width - 5; x += 100) {
      //x and y increases depending on the line
      noStroke();
      fill(10, 46, 28); //dark green
      rect(x, y, 40, 40);
}
}
for (var y = 40; y < height -5; y += 150) { //big circles
    for (var x = 40; x < width - 5; x += 150) {
    noStroke();
    fill(9, 20, 1); // darker green
    rect(x, y, 70, 70);
}
}
//generate white randomly depending on the refresh
stroke("white");
var lineX = random(20, 400);
for (var lX = 0; lX < width; lX += lineX)
  line(lX, 0, lX, 600);
  noLoop(); // not constantly creating lines
}

Inspired from CMU’s tartan pattern, I wanted to make a background wallpaper that resembles the red, green, and white rectangles and line. I wanted to make the pattern lines refresh and have a new look everytime. The small rectangles change positions each line to make it more visually interesting.

dnam-Looking Outwards-05

“The narrative agents and wildlife of Emissaries (2015-2017)” Creatures from Ian Cheng’s Mind

WHen it comes to computer generated 3D art, Ian Cheng, the recent speaker in Carnegie Mellon University comes up to mind. Ian Cheng focuses on making ‘simulations’, where artificial intelligence and instructions and given to the computer. These instructions and tasks are performed by characters that are given physical body through 3D generative graphic arts. I personally find Ian Cheng’s works with 3D graphics interesting as he creates another reality that we, as humans, can comprehend are made up, yet still eerily realistic. 3D graphic computers allow a whole new world to exist upon the reality we currently live in. You may find more examples of Ian Cheng’s works here.

dnam-project-04

sketch

//Doo Won Nam
//Section B
//dnam@andrew.cmu.edu
//Project-04

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

function draw() {
    var unoY = 200; //y for triangle
    var unoX = 20; // x for triangle
    var yin = 37; //y increase
    var xin = 30; //x increase
//setting variables and x and y to change throughout code
    var x1 = 10;
    var y1 = 400;
    var x2 = 400;
    var y2 = 10;
    background(300, 100, 100); //pink
//start loop
    for (var i=0; i <200; i++) {
    strokeWeight(1);
    stroke(191, 50, 80); //dark pink
    line(i, i*10, i*5, 2); //line that goes across canvas

    stroke(mouseX, mouseY, mouseX); //changes color along mouse movement
    line(x1, i * yin, i * mouseX - 50, y1); //mouseX - 50 for increase of size
  	line(x2, i * yin, i * xin, y2);
  	line(xin * i, y1, x2, height - (i * mouseX) - 50);//size increase,right top
  	line(x1, height - (i * yin), i * x1, y2);

    stroke(100, 100, 180);
    line(unoX + 350, unoY, i/2 + 200, 400); //triangle at bottom
    line(200, unoY, i - 200, 0); //triangle at left top
	}
}

I made some of the lines (including the triangle which is just made out of bunch of lines). I changed some of the y increase to mouse commands to add interactions to the project. With the project, I wanted to create something like a light show that would change colors as well.

dnam-Looking Outwards-04

The Program Detecting Wine on the Table

Artificial intelligence is becoming more and more relevant. ‘The Classyfier” created by Benedict Hubener, Stephanie Lee, and Kelvyn Marte is another display of modern artificial intelligence that makes our lives easier. The program (and the table) detect people’s drinks by sound. For example, dinks of wine glasses tell the program to turn on smooth, sexy music. While the opening of a cool beer would trigger the program to turn on fast-paced rock. Artificial intelligence to have understandings of the environment through sound could help humans have homes that would ‘live and breathe’ along with them, always keeping up with what is happening. More information about the Classyfier can be found here.

dnam-project-03-dynamic-drawing

dnam-Project-03-Dynamic-Drawing

// Doo Won Nam
// 15-104 :: 1 Section B
// dnam@andrew.cmu.edu
// Project-03-Dynamic-Drawing

//basic start - setting the canvas and setting a frame rate to avoid
//too many flickers
//setting the variables for Height so it can change
var rectHeight = 20;
//setting the variable angle to rotate the rectangle
var angle = 0;

function setup() {
  createCanvas(640, 480);
}
//start with a background that changes color based on the position of the mouse
function draw() {
  background(mouseX - 50, mouseY - 20, mouseX + 100);
//making flowers (left and right) that also change color based on the
//position of the mouse, left changes depending on how the mouse is located
//and right one changes depending on left/right movement of the mouse
//the mouse movement gives the two flowers contrary shades
//I make sure to reset the translate at the end of each 'set'
  push();
  translate(120, 200);
  fill(mouseY, mouseY, mouseY);
  noStroke();
  for (var i = 0; i < 10; i ++) {
    ellipse(0, 30, 40, 100);
    rotate(PI/5);
  }
  pop();
  push();
  translate(500, 200);
  fill(mouseX, mouseX, mouseX);
  noStroke();
  for (var i = 0; i < 10; i ++) {
    ellipse(0, 30, 40, 100);
    rotate(PI/5);
  }
  pop();
//making a rectangle between two flowers that change colors when the
//the mouse is right on top of the rectangle
  if ((mouseX > 210) & (mouseX < 410) &&
        (mouseY > 300) && (mouseY < 300 + rectHeight)) {
        fill(0);
    } else {
        fill(100, 200, 400, 60);
    }

  noStroke();
  rect(210, 300, 200, rectHeight);
//if mouse is on the left, the rectangle increases towards an upward direction
//if mouse is on the right, the rectangle gets bigger in height downwards
//using a boolean and the middle of the canvas (for X), I am able to
//increase the size depending on the position of the mouse
  if (mouseX > 320) {
    rectHeight += 20;  }
  else {
    rectHeight -= 20;
  }
//these two ifs are to ensure the rectangle resets instead of going way below
//or above the canvas size
  if (rectHeight > 480) {
    rectHeight = 0;
  }
  if (rectHeight < -480) {
    rectHeight = 0;
  }
//rectangle that does not fully follow the movement of the mouse, but slowly
//rotate around the mouse. Moving the mouse will affect it's angle, speed, and
//position.
  push();
  translate(mouseX, mouseY);
  rectMode(CENTER);
  rotate(radians(angle));
  rect(mouseX, mouseY, 20, 20);
  pop();
  angle = angle + .1;
//speeds up / changes angle when mouse is over 200 in the x axis.
  if (mouseX > 200) {
    angle = angle + 1;
  }
}

Making an interactive, dynamic drawing was very difficult for me. One of the aspects that I struggled with the most would be making sure the artwork would change as my mouse moves. I was not sure what to draw with the program, so I decided to create something that resembles a face (as we made faces the last two projects, making a face felt natural). By following the guidelines, I used bright colours to decorate the piece.

dnam-Looking Outwards-03

Daniel Omar with a 3D-printed prosthetic arm

Technology has developed greatly in the medical field. Computation fabrication has allowed a new door for prosthetic limbs. Ian Birrell, in the Guardian Article written in February 2017, discusses the story of Ivan Owen, an artist who helped others by creating 3D models of prosthetics. One of the story shared was about Liam, a five-year old with missing fingers. While Owen knew he could make the prosthetics fairly easily, the concern of Liam’s rapid growth bothered him. Therefore, Owen made a 3D prosthetics model that could be resized and reprinted whenever needed. This allows Owen to always change the fit of the prosthetics as needed, as well as be able to produce it in a cheaper method than hand creating the object himself. Computational fabrication has allowed for more people to have access to prosthetics, helping those in need.