nayeonk1@andrew.cmu.edu – Page 2 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

nayeonk1-LookingOutwards-07

Ingrid Burrington is awesome writer, artist and computational information visualizer. I admire her brilliant works including writings and arts besides that fact that she’s also a computer data researcher. she writes about computers, politics, and art. Some of her works use data to creates images and others are computer generated arts that comes with various forms such as installation art or graphic design.
she creates a cloud as of networked infrastructure with her writings. She thinks about how the internet works and a lot of pieces of material infrastructure that goes into creating our fantasy of the cloud as nowhere and everywhere at the same time.

She has published a book called ‘Networks of New York’ which sketches the physical extrusions of the internet into New york City’s streets and buildings, and makes especial note of how much of that infrastructure has been built as aprt of the post 9/11 surveillance network that NYC has erected over the past 15 years.

You can check more of her works here
Ingrid Burrington Website

Nayeon-Project07-Curves

nayeonk1

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-07 (Composition with Curves)

//draw canvas
function setup() {
    createCanvas(480, 480);
}

//map the r, g, b color
function draw() {
    var r = map(mouseX, 0, width, 100, 255);
    var g = map(mouseY, 0, height, 0, 150);
    var b = map(mouseX, 0, width, 0, 255);
    noFill();
    background(0);

//Hypotrochoid changing color based on mouse cursor
    push();
    stroke(r, g, b, 50);
    strokeWeight(0.5);

    translate(width / 2, height / 2);
    drawHypotrochoid();
    pop();

//hypocycloid changing color based on mouse cursor
    push();
    stroke(b, r, g);
    strokeWeight(0.2);

    translate(width / 2, height / 2);
    drawHypocycloid();
    pop();
}

function drawHypotrochoid() {
//draw hypotrochoid
//http://mathworld.wolfram.com/Hypotrochoid.html
    var x;
    var y;
    var h = 400;
    var a = map(mouseX, 0, width, 0, 5);
    var b = map(mouseY, 0, height, 0, 1);
//x = (a - b) * cos t + h cos(((a - b) / b) * t)
//y = (a - b) * sin t - h sin(((a - b) / b) * t)
    beginShape();
      for(var i = 0; i < 500; i ++) {
        var angle = map(i, 0, 200, 0, 360);
        x = (a - b) * cos(angle) + h * cos(((a - b)) * angle);
        y = (a - b) * sin(angle) - h * sin(((a - b)) * angle);
        vertex(x, y);
      }
    endShape();
}

function drawHypocycloid() {
//draw hypocycloid
//http://mathworld.wolfram.com/Hypocycloid.html
    var x;
    var y;
    var a = map(mouseX / 2, 0, width, 0, 200);
    var b = map(mouseY / 2, 0, height, 0, 200);
//x = ((a - 1) * cos t) + ((a - 1) * cos t)
//y = ((a - 1) * sin t) - ((a - 1) * sin t)
    beginShape();
    for (var i = 0; i < 300; i ++) {
      var angle = map(i, 0, 100, 0, 6);
      x = ((a - 1) * cos(angle / 2)) + ((a - 1) * cos(angle * b));
      y = ((a - 1) * sin(angle / 2)) - ((a - 1) * sin(angle * b));
      vertex(x, y);
    }
    endShape();
}

For this assignment, I looked through the Mathworld curves site first. And I realized that It’s been a while(I mean.. really….) to study any math so I need to start from very simple math stuff. I also got little help from some friends who are familiar with math to build a equation for this. After long time struggle, I finally managed to build a curves, and then I played it with fun! It was very hard to think about draw something with math, but after knowing the formula it was fun to play with numbers!
Here are some screenshot images from composition curves that I made.

Nayeon-Project06-Abstract Clock

nayeonk1

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-06 (Abstract clock)


var x = [];
var y = [];

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

function draw() {
    background(20, 40, 60);
    noStroke();

//variables for times
    var H = hour();
    var M = minute();
    var S = second();

    var mappedH = map(H, 0, 23, 120, 300);
    var mappedS = map(S, 0, 59, 0, 30);

//small stars
    fill(250);
    for (var i = 0; i < x.length; i++) {
        var ex = x[i];
        var ey = y[i];
        ellipse(ex, ey, 5, 5);
    }

//wall
    fill(80, 65, 30)
    rect(0, 350, width, 130)

//moon
    fill(250, 255, 90)
    ellipse(120, 80, 100, 100);

//moon eclipse by hours
    fill(10, 30, 50);
    ellipse(mappedH, 80, 100, 100)

//star
    fill(230, 230, 30);
    var a = [250, 260, 280, 270, 270, 250, 230, 230, 217, 240];
    var b = [138, 157, 163, 180, 202, 193, 202, 180, 163, 157];
    var nPoints = a.length;

    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var px = a[i] + random(-1, 1);
        var py = b[i] + random(-1, 1);
        //star goes down by minutes
        vertex(px, py + M);
    }
    endShape(CLOSE);

//window
    push();
    strokeWeight(50);
    stroke(0, 115, 130);
    noFill();
    rect(0, -25, width, 350)
    pop();

//table
    fill(80, 28, 10);
    arc(370, 440, 400, 150, 0, 180, CHORD);
    fill(150, 78, 60);
    ellipse(370, 440, 400, 100);

//ashtray shadow
    push();
    rotate(5);
    translate(300, 420)
    fill(80, 28, 10);
    ellipse(0, 0, 130, 50)
    pop();

//ashtray
    fill(80, 100, 100)
    arc(250, 430, 100, 30, 0, 180, CHORD)
    rect(200, 410, 100, 20)
    fill(100, 120, 120);
    ellipse(250, 410, 100, 20)
    fill(50, 60, 60);
    ellipse(250, 410, 80, 10)

//cigarretts
    push();
    rotate(20);
    translate(310, 300)
    fill(230, 230, 230);
    rect(0, 0, 50, 10);
    fill(200, 200, 50);
    rect(30, 0, 20, 10);

//cigarrett smoked by seconds
    fill(0);
    rect(0, 0, mappedS, 10)
    fill(250, 20, 20);
    rect(mappedS, 0, 2, 10);
    pop();

//smokes come up by seconds
    fill(250, 250 - 7 * S);
    ellipse(170, 370 - S, mappedS + 10, mappedS + 15)
    ellipse(190, 390 - S * 1.5, mappedS + 15, mappedS + 10)
    ellipse(180, 375 - S, mappedS, mappedS)
    ellipse(200, 380 - S * 3, mappedS + 10, mappedS)
    ellipse(200, 385 - S * 2, mappedS + 10, mappedS + 10)
    ellipse(190, 383 - S * 3.5, mappedS + 30, mappedS + 30)

//flower pot
    fill(120, 50, 10)
    quad(50, 250, 150, 250, 130, 300, 70, 300)
    rect(45, 230, 110, 30)

//flower patel shows up every 5 min
    push();
    fill(230, 100, 100)
    translate(100, 180)
    var i = (M - (M % 10))/5;
    for (var f = 0; f < i + 1; f++) {
      ellipse(0, -20, 10, 30);
      rotate(30);
    }
    pop();

//hours text
    fill(240);
    text("hour : " + H, 30, 400);
    text("Minute : " + M, 30, 420);
    text("Second : " + S, 30, 440);
}

//small stars show up when click
function mousePressed() {
  x.push(mouseX);
  y.push(mouseY);
}

My favorite time of the day is smoking at very late night while watching stars and moon. During the day, it’s too busy to feel the time. But night, every smokes from cigarett tells me of every moment of time.

nayeonk1-LookingOutwards-06

For this assignment, i needed to search what computational art means. After research, I tried to figure out randomness of the art. It’s still confusing, but I found some art work related to this week’s assignment.
Miu ling lam used processing language to create beautiful computational art with randomness. She used her own algorithm which is ‘active sensor network diployment for maximal coverage’. I’m not fully understanding what this thesis for, but the thing is she implemented this algorithm to create images with processing language that I’m studying right now. All those lines and colors look random but they have complex mathmatical algorithm inside and it makes me excited about this processing language. I will try more to understand how she were able to create the arts with computer language.

nayeonk1-LookingOutwards-05

Do you think she is just a normal high school girl from japan? Actually, she is not real for real. She is a virtual character created by a graphic design team name ‘Telyuka’. But she looks like real, acts like real, and she is even competing with real girls in real idol audition right now in japan.

When I saw the picture at the first time, I thought ‘well, she’s pretty but little bit feel like a doll. Too much photoshop.’And after I found out she is a just virtual character, I was surprised by the fact that I don’t feel any uncanny valley which is a huge problem for any computer graphic characters in video game and movies.

Team ‘Telyuka’ said they want to create ‘virtual human’ with personality and feelings communicating with people. They also interviewed that it’s still on progress of developing more realistic modeling of her since she looks less human in the moving video than a still picture. I also think that if they can compensate the current problem with moving and voice, some people would be reasoned she’s alive.

Team Telyuka

Nayeon-Project05-WallPaper

nayeonk1

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-05 (WallPaper)

function setup() {
    createCanvas(451, 600);
    background(255);
    noStroke();
}

function draw() {
  //background pattern
    for (var x = 0; x < width + 50; x += 50) {
      for (var y = 0; y < height + 50; y += 50) {
        fill(230, 130, 90, 100);
        ellipse(x, y, 100, 100);
      }
    }
  //white lines
    var x = 0;
    var y = 0;
    var len = height;
    var spacing = 50;

    for (var x = 25; x < width; x += spacing) {
  //white lines_thick line
      strokeWeight(8);
      stroke(255, 200);
      line(x, y, x, y + len);
  //white lines_thin lines
      strokeWeight(2);
      stroke(255, 180);
      line(x + 8, y, x + 8, y + len);
      line(x + 42, y, x + 42, y + len);
    }
  //flowers
    push();
    var px = 0;
    var py = 0;
    for (var px = 0; px < width; px += spacing) {
      for (var py = 0; py < height + 50; py += 50) {
      flower(px, py);
    pop();
    }
  }
    noLoop();
}
  //flower draw function
  function flower(px, py) {
    push();
    translate(px, py);
    noStroke();
    for (var i = 0; i < 6; i ++) {
      fill(250, 80, 60);
      ellipse(0, 0, 6, 15);
      rotate(PI/4)
      fill(255);
      ellipse(0, 0, 3, 3);
    }
  }

I got inspired by this wallpaper. It reminds me of grandparents house.

From this image, I tried to make something similar, but using loop function and shapes. It was fun to manipulate some var and loops to create different images. Changing small position creates whole other images.

Nayeon_Project04_String Art

nayeonk1

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-04_ (String Art)


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

function draw() {
    var x = 0;
    var y = 0;
    var x1 = 300;
    var y1 = 400;
    var xspacing = 7.5;
    var yspacing = 10;
    var i;

    var r = map(mouseX, 0, width, 100, 200);
    var g = map(mouseX, 0, width, 0, 100);
    var b = map(mouseY, 0, height, 200, 250);

    for (i = 0; i < 50; i++) {
      stroke(r, g, b);
      strokeWeight(0.5);
      line(x, y + i * yspacing, x + i * xspacing, y1);
      line(x + i * xspacing, y, x1, y + i * yspacing);

      stroke(b, r, g);
      line(x + i * xspacing, y, x, y1 - i * yspacing);
      line(x + i * xspacing, y1, x1, y1 - i * yspacing);
    }
}

I found that string art is simple yet so aesthetic. Numberless lines drawn by mathematics create beautiful composition which makes you just zone into.
I wish I could figure out more complicated formulas.

nayeonk1-LookingOutwards-04

Ryoji Ikeda is a famous japanese sound and media artist. He crosses the boundary between visual media and audio media and creates mesmerizing performances. He focuses on very detailed sound like super sound and frequency using high digital technology. Developing his unique way, he gained world wide fame. In his work, sound, time and space are composed by mathematical way so that physical features of sound could reach to audience’s perception and feeling. Many of his work are consist of variable materials such as visual media, sound, installation object and new fabrications which lead his work to new area of art. I admire his work as he create new dimension to audience with very detailed sound and installation art. I always have interested in different perception to the world, his work gave me a glimpse of new world!

Ryoji Ikeda Website

Nayeon_Looking Outwards03

Marius Watz is an new media artist using generative software processes. I found his work is very interesting because he is using visual algorithms not only for fabricate installation art, but animation and sound-responsive performances. It is very interesting that those open sauce languages provide new form of arts to new media artist like Marius. I’m not sure how he generate images with algorithm since I have a very little knowledge about programming, I know one thing that he creates all images with numbers with generative code. I’m quite suprised about the fact that this random generative numbers could create such beautiful images.

You can find more amazing works from Marius on this website.

Marius Watz website

nayeonk1-Project03-Dynamic Drawing

nayeon_DynamicDrawing

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-03 (Dynamic Drawing)


var angle = 0;
var dia = 0;


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

function draw() {

//background color changing with mouse
    var bgR = map(mouseY, 0, height, 50, 100);
    var bgG = map(mouseX, 0, height, 150, 250);
    var bgB = map(mouseY, 0, height, 100, 200);

    background(bgR, bgG, bgB);

//size changing rect
    noStroke();
    fill(bgR + 100, bgG + 100, bgB + 100);
    rect(0, 0, (mouseX / 2), (mouseY / 2));
    fill(bgR - 100, bgG - 100, bgB - 100);
    rect(100, 100, (mouseX / 2), (mouseY / 2));
    fill(bgR - 50, bgG, bgB + 100);
    rect(200, 200, (mouseX / 2), (mouseY / 2));
    fill(bgR, bgG + 100, bgB + 200);
    rect(300, 300, (mouseX / 2), (mouseY / 2));


//another bg frame
    var x = 50;
    var y = 100;
    var w = 380;
    var h = 440;

    noStroke();
    if ((mouseX > x) & (mouseX < x+w) && (mouseY > y) && (mouseY < y+h)) {
      fill(0, 250);
    } else {
      fill(255, 0);
    }
    rect(x, y, w, h);

//rotating rect
    if ((mouseX > x) & (mouseX < x+w) && (mouseY > y) && (mouseY < y+h)) {
      fill(bgR, bgG, bgB);
    } else {
      fill(255, 0);
    }
    push();
    translate((width / 2), (height / 2));
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, (mouseX / 2), (mouseY / 2));
    pop();
    angle = angle + 20;

//lines
    var wL = 50;
    var wR = 430;
    var hU = 100;
    var hB = 540;

    var xc = constrain(mouseX, wL, wR);
    var yc = constrain(mouseY, hU, hB);

    if ((mouseX > x) & (mouseX < x+w) && (mouseY> y) && (mouseY < y+h)) {
      stroke(255);
    } else {
      stroke(0);
    }

    strokeWeight(8);
    line((width / 2), (height / 2), xc, yc);
    var max = map(mouseX, 0, xc, yc, 100);
    line((width/ 2), (height / 2), max, yc);
    var max = map((mouseX * 0.5), 0, xc, yc, 200);
    line((width/ 2), (height / 2), max, yc);
    var max = map((mouseX * 2), 0, xc, yc, 50);
    line((width/ 2), (height / 2), max, yc);

// cursur - spinning rect
    push();
    rectMode(CENTER);
    if ((mouseX > x) & (mouseX < x+w) && (mouseY> y) && (mouseY < y+h)) {
      fill(255);
    } else {
      fill(0);
    }
    noStroke();
    translate(mouseX, mouseY);
    rotate(radians(angle * 10));
    rect(0, 0, 30, 30);
    pop();

//increasing circle
    if ((mouseX > x) & (mouseX < x+w) && (mouseY > y) && (mouseY < y+h)) {
    } else {
      dia = 0;
    }
    push();
    noStroke();
    fill(255);
    ellipse((width / 2), (height / 2), dia, dia);
    dia = dia + 1;
    pop();

    fill(0);







}

I tried to implement codes I’ve learned this week. And I wanted to try something new, I started to design abstract image as much as possible only thinking about function. It was fun to do something different with I used to do it. It was fun to play with different codes!