Author: Yon

Project 6 – Clock

This work is inspired by “A Million Times”, though it tells time in a very different way. I created an array of small, one-arm clocks to tell seconds, minutes, and hours, based on their columns and rows. This effectively creates a vector field that tells time with its coefficients. While each time in the day looks distinct and often disjointed, the array becomes spontaneously synchronized every now and again and blurs the viewer’s ability to tell the time. I understand if you don’t want to put this on your wrist but I hope you enjoy it on your computer screen for a little bit 🙂

sketch
var d = 18;

function setup() {
    createCanvas(480, 240);
    background(240);
}

function drawClock(x,y,theta) {
    push();
    translate(x,y);
    stroke(220);
    strokeWeight(1);
    circle(0, 0, 40);
    stroke(0);
    strokeWeight(2);
    line(0, 0, d*cos(radians(theta)), d*sin(radians(theta)));
    pop();
}

function draw() {
    for (var j = 0; j < 6; j++) {
        for (var i = 0; i < 4; i++) {
            sMap = map(second(), 0, 59, 0, 360);
            drawClock(40*i+20, 40*j+20, sMap+10*i-10*j);
        }
        for (var i = 0; i < 4; i++) {
            push();
            translate(160,0);
            mMap = map(minute(), 0, 59, 0, 360);
            drawClock(40*i+20, 40*j+20, mMap+10*i-10*j);
            pop();
        }
        for (var i = 0; i < 4; i++) {
            push();
            translate(320,0);
            hMap = map(hour(), 0, 59, 0, 360);
            drawClock(40*i+20, 40*j+20, hMap+10*i-10*j);
            pop();
        }
    }

}

Project 5 – Wallpaper

This week’s project asked us to make a wallpaper, so I decided to make my work based on african textiles. Attached is a sketch of my initial idea and my final product. Enjoy!

sketch 
var num = 6; //number of itterations of everything

function setup() {
    createCanvas(600, 400);
    background(250, 249, 246);
}

/*let eyeBrown = color(165,42,42);
let bgBrown = color(255, 200, 168);
let branchGreen = color(63, 146, 65);
let turq = color(64,224,208);*/

function drawBackground() {
    //random lines from ex 4 but in for loop
    stroke(255, 200, 168);
    strokeWeight(1);
    for (var y = 0; y < height; y+=20) {
        for (var x = 0; x < width; x+=20) {
            if (random(1) > 0.5) {
              line(x, y, x+20, y+20);
            }
            else {
              line(x, y+20, x+20, y);
            }
        }
    }

    //ornaments
    for (var j = 0; j <= width; j+=width/num) {
        var colors = [color(145,205,211), color(234,204,84)]
        noStroke();
        fill(random(colors));
        circle(random(j, j+(width/num)), random(height/2), random(40,60));
        circle(random(j, j+(width/num)), random(height/2,height), random(40,60));

        push();
        fill(200,74,55);
        translate(random(j,j+(width/num)), random(height));
        for (var r = 10; r < 60; r+=10) {
            for (var i = 0; i < 360; i+=30) {
                push();
                scale(0.3);
                circle(r*cos(radians(i)), r*sin(radians(i)), r/3);
                pop();
            }
        }
        pop();
    }



}

function drawEye(a, b, side) {
    push();
    translate(a, b);

    //alternates side of branch
    if (side == 1) {
        rotate(degrees(-.009));
    } else if (side == -1) {
        rotate(degrees(.009));
    }


//eye arcs
    //blue filling
    push();
        scale(0.7);
        noFill();
        strokeWeight(10);
        stroke(52,173,193);
        arc(0, -45, 100, 100, radians(65), radians(180-65));
        push();
            rotate(radians(180));
            arc(0, -45, 100, 100, radians(65), radians(180-65));
            pop();
    pop();

    //green arcs
    strokeWeight(3);
    noFill();
    stroke(50, 118, 112);
    arc(0, -45, 100, 100, radians(65), radians(180-65));
    push();
        rotate(radians(180));
        arc(0, -45, 100, 100, radians(65), radians(180-65));
    pop();

    //gold arcs
    push();
        scale(0.9);
        noFill();
        strokeWeight(2);
        stroke(234,178,57);
        arc(0, -45, 100, 100, radians(65), radians(180-65));
        push();
            rotate(radians(180));
            arc(0, -45, 100, 100, radians(65), radians(180-65));
            pop();
    pop();

    fill(165,42,42);
    noStroke();
    circle(0, 0, 10); //eyeball

    //lashes
    strokeWeight(1);
    push();
    translate(0, 45);
    rotate(radians(-35));

    stroke(0);
    for (var i = 0; i <= 50; i+=10) {
        rotate(radians(10));
        line(0, -52, 0, -54);
    }

    pop();
    pop();
}

function drawBranches() {
    stroke(63, 146, 65);
    for (var x = 0; x <= width; x+= width/num) {
        push();
        translate(x, random(-50,50));

        var side = 1;
        for (var y = -100; y < height+100; y += 1) {
            //draw alternating eyes
            if ((y%50) == 0 & side == 1) {
                drawEye(cosy+19,y-10,side);
                side = -1*side;
            } else if ((y%50) == 0 & side == -1){
                drawEye(cosy-19,y-10,side);
                side = -1*side;
            }

            //draw branches (vertical cosine curves)
            var cosy = 40-30 * cos(radians(y));

            stroke(50, 118, 112);
            strokeWeight(5);
            point(cosy, y);
        }
        pop();
    }

}

var count = 0;

function draw() {
    drawBackground();

    drawBranches();

    noLoop();
}

Looking Outwards 5


For this week’s looking outwards blog, I looked at Andy Lomas’ Morphogenetic Creations. Presented at the Watermans Art Centre, is meant to illustrate and explore how “intricate complex structures, such as those found in nature, can be created emergently through computational simulation of growth processes.” The installation includes prints, projections and videos, and stereoscopic work. Lomas uses randomization in his algorithms in order to make his creations more complex than anything he could hard code. This also helps illustrate how small changes in the algorithm can lead to massively different outcomes.

Morphogenetic Creations

LO4

This week I looked into theROOM, a physical and auditory installation by Keikan Uenishi. The installation is meant to simulate the sounds in a neighborhood, and highlight how physical partitions do not really divide up space the way we think they do. The installation is a room with another small room build in one corner of the room, and a pile of gray objects on the other. The small room has several loudspeakers inside of it oriented in different angles, such that you hear different sounds standing in different spots around the room. As you move around the room, you hear snipers of different things: overhear conversations, listen to office noise, etc.

theROOM/SOUNDLEAK

String Art

sketch 

var dx1;
var dy1;
var dx2;
var dy2;

var numLines = 50;

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

function draw() {
    background(200);
    //line(mouseX, mouseX, 150-mouseY, 300+mouseY);
    //line(mouseX, mouseX, 350-mouseY, 100+mouseY);

    var x1 = mouseX;
    var y1 = mouseX;
    var x2 = mouseX;
    var y2 = mouseX;

    dx1 = (mouseX-mouseY)/numLines;
    dy1 = (mouseX-mouseY)/numLines;
    dx2 = (150-mouseY-350-mouseY)/numLines;
    dy2 = (300+mouseY-100+mouseY)/numLines;

    for (var i = 0; i <= numLines; i += 1) {
        stroke(0);
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    var r = 20;

    fill(255,140,140);
    noStroke();
    circle(mouseY, mouseX, 2*r);

    fill(140,140,255);
    circle(width-mouseY, height-mouseX, 40);

    var xc1 = mouseY;
    var yc1 = mouseX+r;
    var xc2 = width-mouseY;
    var yc2 = height-mouseX-r;


    for (var i = 0; i <= 2*PI; i += PI/4) {
        stroke(0);
        line(xc1, yc1, xc2, yc2);
        if (i <= PI/2) {
            xc1 += r*Math.sin(i);
            yc1 -= r-r*Math.cos(i);
            xc2 -= r*Math.sin(i);
            yc2 += r-r*Math.cos(i);
        } else if (i > PI/2 & i <= PI) {
            xc1 -= r*Math.sin(i);
            yc1 -= r-r*Math.cos(i);
            xc2 += r*Math.sin(i);
            yc2 += r-r*Math.cos(i);
        } else if (i > PI & i <= 3*PI/2) {
            xc1 -= r*Math.sin(i);
            yc1 += r-r*Math.cos(i);
            xc2 += r*Math.sin(i);
            yc2 -= r-r*Math.cos(i);
        } else if (i > 3*PI/2 & i <= 2*PI) {
            xc1 += r*Math.sin(i);
            yc1 += r-r*Math.cos(i);
            xc2 -= r*Math.sin(i);
            yc2 -= r-r*Math.cos(i);
        }
    }
}

Project 3 – Dynamic Drawing

Orbits 

//changing RGB colors
var R = 0;
var G = 0;
var B = 0;

//assigned in mousePressed to print and save color to rect
var tempR = 255;
var tempG = 255;
var tempB = 255;

function setup() {
    createCanvas(450, 640);
    background(255);
}

function mousePressed() {
    print('------------------')
    print('R: ' + R.toString())
    print('G: ' + G.toString())
    print('B: ' + B.toString())

    //stores current RGB untill mousePressed again
    tempR = R;
    tempG = G;
    tempB = B;

}
function draw() {

    var lim = 140; //map(mouseX, 0, width, 0, 255);
    var diff = 255-lim;
    var index = 0;

    background(R, G, B);

    //color save
    noStroke();
    fill(tempR, tempG, tempB);
    square(10, 10, 100);

    //color fader
    if (mouseY < height/6) {
        index = map(mouseY, 0, height/6, lim, 255)
        R = 255;
        G = lim;
        B = index;
    } else if ((mouseY >= height/6) & (mouseY < 2*height/6)) {
        index = map(mouseY, height/6, 2*height/6, 0, diff)
        R = 255 - index;
        G = lim;
        B = 255;
    } else if ((mouseY >= 2*height/6) & (mouseY < 3*height/6)) {
        index = map(mouseY, 2*height/6, 3*height/6, lim, 255)
        R = lim;
        G = index;
        B = 255;
    } else if ((mouseY >= 3*height/6) & (mouseY < 4*height/6)) {
        index = map(mouseY, 3*height/6, 4*height/6, 0, diff)
        R = lim;
        G = 255;
        B = 255 - index;
    } else if ((mouseY >= 4*height/6) & (mouseY < 5*height/6)) {
        index = map(mouseY, 4*height/6, 5*height/6, lim, 255)
        R = index;
        G = 255;
        B = lim;
    } else {
        index = map(mouseY, 5*height/6, 6*height/6, 0, diff)
        R = 255;
        G = 255-index;
        B = lim;
    }

    //orbits
    var deg = map(mouseY, 0, width, 0, 360);
    var cirSize = 10;
    var cirX = mouseX/2 //x dist from mouse
    var cirY = mouseY/2 //y dist from mouse

    var sunY = map(mouseY, 0, height, -0.4*height, 1.4*height);
    fill(255, 113, 124);
    ellipse(width/2, sunY, 700);

    fill(255-R, 255-G, 255-B);
    translate(mouseX, mouseY);
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);

    scale(mouseY/height);
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);

    scale(mouseY/height);
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);
    rotate(radians(deg));
    ellipse(cirX, cirY, cirSize);

}

LO3 – Computational Fabrication

For this week’s looking outwards blog post, I decided to look into a project from MIT CSAIL on Machine-Knit Garments. The project contributes designed a workflow that allows a user to design a template, then turn that template into a time function such that a knitting machine can turn it into a garment. This approach doesn’t require a user to design complex 3D objects, as the algorithm turns 2D templates into machine code. According to the project team, this is meant to allow for interactive editing of the shape of the garment. I was particularly drawn to this project because I had never heard of CNC knitting machines. I’ve worked with routers and 3D printers before, but computer-controlled knitting machines open up a whole other world of computational fabrication. Additionally, the software the users built allows for user interaction with the design, which I think also has the potential of turning into very interesting pieces of art.

Knit Sketching

Project 2 – Variable Faces


var c = 0.1;
var x;
var y;
var r = 100;

function setup() {
    createCanvas(420, 400);
    background(220);
}

function draw() {

  x = width / 2;
  y = height / 2;

  //filled head
  noStroke();
  fill(255,226,226);
  ellipse(x+20,y-20,2*r);

  //hair
  stroke(100);
  strokeWeight(35);
  line(((x-r/3)+5),(y-r-5),((x+2*r/3)+5), (y-r-5));
  stroke(40);
  line((x-r/3),(y-r),(x+2*r/3),(y-r));

  //outline head
  noFill();
  strokeWeight(10);
  stroke(230, 168,168);
  ellipse(x, y, 2*r);

  //earrings
  fill(182);
  noStroke();
  ellipse(x-(r+10),y-40,15);
  ellipse(x-(r+6),y+10,15);

  stroke(230, 168,168);
  strokeWeight(6);
  noFill();
  arc(x-(r/2),y-(r/2), 15,15,0, PI);
  arc(x+(r/3),y-(r/2), 15,15,0, PI);
  arc(x-r/6,y+(r/3), 30,15,PI/6, PI-PI/6);

  noLoop()
}

function mousePressed(){
    c = random(7);
    print(c.toString())

    if (c < 1) {
        background(220);
        //filled head
        noStroke();
        fill(255,226,226);
        ellipse(x+20,y-20,2*r);
        print("face1")

        //hair
        stroke(100);
        strokeWeight(35);
        line(((x-r/3)+5),(y-r-5),((x+2*r/3)+5), (y-r-5));
        stroke(40);
        line((x-r/3),(y-r),(x+2*r/3),(y-r));

        //outline head
        noFill();
        strokeWeight(10);
        stroke(230, 168,168);
        ellipse(x, y, 2*r);

        //earrings
        fill(182);
        noStroke();
        ellipse(x-(r+10),y-40,15);
        ellipse(x-(r+6),y+10,15);

        //face
        stroke(230, 168,168);
        strokeWeight(6);
        noFill();
        ellipse(x-(r/2),y-(r/2), 15, 15);
        ellipse(x+(r/3),y-(r/2), 15, 15);
        ellipse(x-r/6,y+(r/3), 30, 30);
    }
  else if (c > 1 & c < 2) {
      background(220);
      //filled head
      noStroke();
      fill(255,226,226);
      ellipse(x+20,y-20,2*r);

      //hair
      stroke(100);
      strokeWeight(35);
      line(((x-r/3)+5),(y-r-5),((x+2*r/3)+5), (y-r-5));
      stroke(40);
      line((x-r/3),(y-r),(x+2*r/3),(y-r));

      //outline head
      noFill();
      strokeWeight(10);
      stroke(230, 168,168);
      ellipse(x, y, 2*r);

      //earrings
      fill(182);
      noStroke();
      ellipse(x-(r+10),y-40,15);
      ellipse(x-(r+6),y+10,15);

      print("face2")
      stroke(230, 168,168);
      strokeWeight(6);
      noFill();
      ellipse(x-(r/2),y-(r/2), 15, 15);
      ellipse(x+(r/3),y-(r/2), 15, 15);
      arc(x-r/6,y+(r/3), 30,15, PI+PI/6, 0-PI/6);
      stroke(40);
      strokeWeight(12);
      line(x-(r/2),y-(r/2)-15/2-15, x-(r/2)+15/2+10, y-(r/2)-10);
      line(x+(r/3),y-(r/2)-15/2-15, x+(r/3)-15/2-10,y-(r/2)-10);
  }
  else if(c > 2 & c < 3){
      background(220);

      //filled head
      noStroke();
      fill(255,226,226);
      ellipse(x-20,y-20,2*r);

      //hair
      stroke(100);
      strokeWeight(35);
      line(((x-r/3)+5)-80,(y-r-5)+40,((x+2*r/3)+5)-80, (y-r-5)-20);
      stroke(40);
      line((x-r/3)-80,(y-r)+40,(x+2*r/3)-80,(y-r)-20);

      //outline head
      noFill();
      strokeWeight(10);
      stroke(230, 168,168);
      ellipse(x, y, 2*r);

      //earrings
      fill(182);
      noStroke();
      ellipse(x-(r+10),y-40,15);
      ellipse(x-(r+6),y+10,15);

      print("face3")
      stroke(230, 168,168);
      strokeWeight(6);
      noFill();
      arc(x-(r/2),y-(r/2), 15,15,0, PI);
      arc(x+(r/3),y-(r/2), 15,15,0, PI);
      line(x-r/6, y+(r/3), (x-r/6)+20, y+(r/3));
  }
  else if (c > 3 & c < 4) {
      background(220);
      //filled head
      noStroke();
      fill(255,226,226);
      ellipse(x-20,y+20,2*r);

      //hair
      stroke(100);
      strokeWeight(35);
      line(((x-r/3)+5)-80,(y-r-5)+40,((x+2*r/3)+5)-80, (y-r-5)-20);
      stroke(40);
      line((x-r/3)-80,(y-r)+40,(x+2*r/3)-80,(y-r)-20);

      //outline head
      noFill();
      strokeWeight(10);
      stroke(230, 168,168);
      ellipse(x, y, 2*r);

      //earrings
      fill(182);
      noStroke();
      ellipse(x-(r+10),y-40,15);
      ellipse(x-(r+6),y+10,15);

      print("face4")
      stroke(230, 168,168);
      strokeWeight(6);
      noFill();
      ellipse(x-(r/2),y-(r/2), 15, 15);
      ellipse(x+(r/3),y-(r/2), 15, 15);
      arc(x-r/6,y+(r/3), 30,15, PI+PI/6, 0-PI/6);
      stroke(40);
      strokeWeight(12);
  }
  else if(c > 4 & c < 5){
      background(220);

      //filled head
      noStroke();
      fill(255,226,226);
      ellipse(x-20,y-20,2*r);

      //hair
      stroke(100);
      strokeWeight(35);
      line(((x-r/3)+5)-80,(y-r-5)+40,((x+2*r/3)+5)-80, (y-r-5)-20);
      stroke(40);
      line((x-r/3)-80,(y-r)+40,(x+2*r/3)-80,(y-r)-20);

      //outline head
      noFill();
      strokeWeight(10);
      stroke(230, 168,168);
      ellipse(x, y, 2*r);

      //earrings
      fill(182);
      noStroke();
      ellipse(x-(r+10),y-40,15);
      ellipse(x-(r+6),y+10,15);

      print("face5")
      stroke(230, 168,168);
      strokeWeight(6);
      noFill();
      arc(x-(r/2),y-(r/2), 15,15,0, PI);
      arc(x+(r/3),y-(r/2), 15,15,0, PI);
  }
  else if(c > 5 & c < 6){
      background(220);

      //filled head
      noStroke();
      fill(255,226,226);
      ellipse(x+20,y+20,2*r);

      //hair
      stroke(100);
      strokeWeight(35);
      line(((x-r/3)+5),(y-r-5),((x+2*r/3)+5), (y-r-5));
      stroke(40);
      line((x-r/3),(y-r),(x+2*r/3),(y-r));

      //outline head
      noFill();
      strokeWeight(10);
      stroke(230, 168,168);
      ellipse(x, y, 2*r);

      //earrings
      fill(182);
      noStroke();
      ellipse(x-(r+10),y-40,15);
      ellipse(x-(r+6),y+10,15);

      print("face6")
      stroke(230, 168,168);
      strokeWeight(6);
      noFill();
      ellipse(x-(r/2),y-(r/2), 15, 15);
      ellipse(x+(r/3),y-(r/2), 15, 15);
      arc(x+(r/3),y+(r/2), 30,30,0, PI);
      line(x-(r/3),y+(r/2),x+(r/3)+15,y+(r/2));
  }
  else{
      background(220);
      //filled head
      noStroke();
      fill(255,226,226);
      ellipse(x+20,y-20,2*r);

      //hair
      stroke(100);
      strokeWeight(35);
      line(((x-r/3)+5)+20,(y-r-5),((x+2*r/3)+5)+20, (y-r-5)+20);
      stroke(40);
      line((x-r/3)+20,(y-r),(x+2*r/3)+20,(y-r)+20);

      //outline head
      noFill();
      strokeWeight(10);
      stroke(230, 168,168);
      ellipse(x, y, 2*r);

      //earrings
      fill(182);
      noStroke();
      ellipse(x-(r+10),y-40,15);
      ellipse(x-(r+6),y+10,15);

      print("face7")
      stroke(230, 168,168);
      strokeWeight(6);
      noFill();
      arc(x-(r/2),y-(r/2), 15,15,0, PI);
      arc(x+(r/3),y-(r/2), 15,15,0, PI);
      arc(x-r/6,y+(r/3), 30,15,PI/6, PI-PI/6);
  }
}

Looking Outwards 2


For this week’s looking outwards assignment, I decided to explore Sougwen Chung’s “Drawing Operations”, a piece of improvised drawing collaboration between Sougwen and a robot. The robot is connected to a neural network, trained on Sougwen’s other drawings using computer vision: gestures from her previous works are saved into the neural net’s memory, and analyzed with comparison to other known styles to ‘translate’ the gestures into executable vectors with color palettes that the robot can then execute. The final product is a drawing duet with Sougwen and the robot.
Sougwen wanted to explore the concepts of “ownership” and “collaboration” through this piece. In the drawing duet, the robot and the artist co-create a piece of art, inspired by the artist’s previous work. I am very attracted to this concept, and a really interested in learning more about Sougwen’s other works and exploration of art and labor as a commodity.

Sougwen Chung, Drawing Operations (2014)

LO-1

A piece of computational art that inspired me to explore the intersection of art and technology is John Maeda’s “Reactive Books.” These ‘books’, which we published over the course of several years in the 90s, are computer software that each react to a different input type. The first one he published, “Reactive Squares”, is several different black squares that react in different ways to live input from the microphone. I really like the idea of playing with the computer’s ‘senses’ to output media that we can perceive with different senses. As far as know, Maeda was the only one working on the original books. Meada developed custom software for each of the books. After studying computer science at MIT, Maeda went to study at Tsukuba University Institute of Art and Design in Japan, where he studied and experimented with traditional bookmaking using his knowledge of software engineering. This marriage of very traditional techniques and styles, and modern, responsive software engineering results in really intriguing and thought-provoking pieces.

John Maeda, Reactive Books, 1994-1999