Romi Jin – Looking Outwards 04

The Infinity Machine consists of about 150 suspended, antique mirrors that has three variables — rotation, lighting, and sound, all constantly changing. Created by Janet Cardiff and George Bures, this installation is their first large scale mobile that essentially acts as a contemplation of “space, time and consciousness”.

Infinity Machine Installation View
“Infinity Machine Installation View”

These rotating (orbital) mirrors are illuminated by lights that consistently change, casting interesting shadows and a beautiful nebula form. The sounds that also accompany it are described as “mysterious” and “mesmerizing”, initially discovered on a CD made for relaxation. The sounds consist of recordings of the solar system and are played throughout the exhibition. Specifically, they reflect each of the planets (i.e. Uranus = bells, Earth = forest at night, etc). This is interesting to me because everything connects so beautifully and works so well in unison. In addition, I have never thought of sound as part of the computational fabrication realm, but this project has inspired me to research more about it.

John Legelis Project-04 String Art

sketch

// John Legelis

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

function draw() {

    // Set size of square 
    var size
    size = 100

    // Itterate rows and columns of squares
    for(s = 0; s < (width/size); s++) {
        for(d = 0; d < (height/size); d++) {
            // Width and height of the square are the same making it an actual square
            square(s*size, d*size, size, size)
        }
    }    
}


// Stop changing colors when mouse is held down
function mousePressed() {
    noLoop()
}

// Resume changing colors when mouse is released
function mouseReleased() {
    loop()
}

// Function that draws line square given top left x,y and width,height
function square(lx, ty, w, h) {
    
    // Insert parameters into variables
    var width
    width = w
    var height
    height = h

    var leftX
    leftX = lx
    var rightX
    rightX = leftX + width
    var topY
    topY = ty
    var bottomY
    bottomY = topY + height

    // Loop through to make lines
    for (i = 0; i <= width; i = i + 5) {

        //Line-1 X,Y coordinates for beginning and end
        var l1xb
        l1xb = leftX
        var l1yb
        l1yb = topY + i  
        var l1xe
        l1xe = leftX + i
        var l1ye
        l1ye = bottomY

        //Line-2 X,Y coordinates for beginning and end
        var l2xb
        l2xb = leftX + i
        var l2yb
        l2yb = bottomY  
        var l2xe
        l2xe = rightX
        var l2ye
        l2ye = bottomY - i

        //Line-3 X,Y coordinates for beginning and end
        var l3xb
        l3xb = rightX
        var l3yb
        l3yb = bottomY - i  
        var l3xe
        l3xe = rightX - i
        var l3ye
        l3ye = topY

        //Line-4 X,Y coordinates for beginning and end
        var l4xb
        l4xb = leftX
        var l4yb
        l4yb = topY + i  
        var l4xe
        l4xe = rightX - i
        var l4ye
        l4ye = topY

        //draw lines with random greyscale color from black to white 
        stroke(random(0,255))
        
        line(l1xb, l1yb, l1xe, l1ye)
        line(l2xb, l2yb, l2xe, l2ye)
        line(l3xb, l3yb, l3xe, l3ye)
        line(l4xb, l4yb, l4xe, l4ye)
    }

}

[Note: original submission was either sketch-347.js or sketch-342.js. I swapped in sketch-364.js with minor edits to work around a pt-embed limitation. -RBD]

I found this project rather intuitive and easy to implement using a for loop which iterated x and y values incrementally for the endpoints of the lines. I liked the textured effect the randomized line shading created. The lines stop changing colors when the mouse is pressed amd resume when released.

Julie Choi – Project 04 – String Art

julie_choi_string_art

/*Julie Choi
15-104 Section E
jjchoi@andrew.cmu.edu
Project-04
*/

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

function draw() {
    background(255);
    // declare varables along the edges 
    var x1 = width/4;
    var x2 = width/2;
    var y1 = height/2;
    var y2 = height/3;
    
    // start a for loop for lines
    for (var i = 0; i < 35; i++) {
        strokeWeight(1.5);
        stroke(255, 0, 0);
        line(width - x1, 0, 0, height - y1);
        stroke(0, 0, 255);
        line(width, height - y1, width - x2, height);
        stroke(0, 255, 54);
        line(x1, 0, width, height - y2);
        stroke(255, 0, 234);
        line(0, height - x1, y2, height);
        stroke(90, 0, 255);
        line(x1, 0, 0, y2);
        stroke(174, 255, 0);
        line(0, height - y2, width - y2, width - x1);
        stroke(255, 0, 0);
        line(height - x1, 0, width, y1);
        x1 += 6;
        y1 -= 6;
        y2 -= 6;
        x2 += 6;
    }
    
    // draw eye shape
    stroke(255);
    strokeWeight(1);
    translate(-10, 10);
    beginShape();
    vertex(130, 150);
    bezierVertex(130, 150, 200, 70, 270, 150);
    vertex(130, 150);
    bezierVertex(130, 150, 200, 230, 270, 150);
    endShape(); 
    stroke(0);
    strokeWeight(1.5);
    line(130, 150, 270, 150);

    // draw pupil
    fill(0);
    stroke(255);
    ellipse(width / 2, height / 2, 50, 50);
    ellipse(width / 2, height / 2, 30, 30);
}

I enjoyed creating consecutive lines in different positions through this project. I ended up creating an Illuminati sign as I explored different compositions. I am satisfied with my final result and learned a lot from this exercise.

Romi Jin – Project-04-String-Art-Section B

sketch

 /*
Romi Jin
Section B
rsjin@andrew.cmu.edu
Project-04
*/

// spacing variables
var space1 = 5; 
var space2 = .01;

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

function draw() {

// middle mouse strokes
    stroke(180);
    strokeWeight(0.1);
    line(mouseX, height, 0, mouseY);


// bottom left
    for (var y = 0; y < width; y += space1) {
        stroke(245,195,194);
        strokeWeight(0.1);
        line(y, height, 0, y);
    }

// top right
    for (var z = 0; z < width; z += space1) {
        stroke(253,185,200);
        strokeWeight(0.1);
        line(z, 0, width, z);
    }

// top left
    for (var a = 0; a < 10; a +=space2) {
        stroke(254,127,156);
        strokeWeight(0.1);
        push();
        var x = lerp(width, 0, a);
        var y = 0;
        var x2 = 0;
        var y2 = lerp(0, height, a);
        line(x, y, x2, y2);
        pop();
    }

// bottom right
    for (var b = 0; b < 10; b += space2) {
        stroke(253,171,159);
        strokeWeight(0.1);
        push();
        var x = width;
        var y = lerp(0, height, b);
        var x2 = lerp(width, 0, b);
        var y2 = height;
        line(x, y, x2, y2);
        pop();
    }



}

I wanted to make a several pink curves at each corner and interactive strokes in the middle (if you move your mouse over the image, it will draw gray lines in the center of the four curves).

Jenna Kim (Jeeyoon Kim)- Looking Outwards-4

Final Display of “Sonic Playground”

using the software “Grasshopper”
using the “Grasshopper”
(software)[/caption]

This project is called the “Sonic Playground”, by Yuri Suzuki. It is an installation piece placed outside to transmit sound in unique ways. The colorful, vibrant hue and interesting form of the installation attract people to be part of this unusual experience. The installation is intended to modify the sounds surrounding our everyday lives. I admire this piece because not only this piece used combination of softwares and music, but it was meant to create more playful, fun, comfortable environment for the users; it gives a experience in which people who are passing by can have pleasant feeling in a short amount of time. This is important for me because it is one of the goals of a designer; I need to be a better, more friendly place for the users. The software used for this project was Grasshopper and Rhinoceros, which are 3D geometrical software that can treat “sound” using ray tracing techniques. These techniques allow the audience to send out sound in different locations. The creator’s artistic sensibilities are shown in the final form because Suzuki really put emphasis on the form and the vibrant color of the installation. I personally love how she really play with the form because I can see the interesting twist to it; at the same time, I can easily recognize that the form has to do with music and sound.

Link:http://www.creativeapplications.net/sound/sonic-playground-playful-acoustics-by-yuri-suzuki-design/

Elena Deng-Project 04-String Art

sketch

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-04
}
*/
function setup() {
    createCanvas(400, 300);
    background(70);
}

function draw() {
  var x = 0;
  var y = 0;
  var x1 = width/6;
  var x2 = width/2;
  var y1 = height/6;
  var y2 = height/2;


  for (var i=0;i<54;i++){
      strokeWeight(3);
      stroke(90,120,180);
      line(width-x2, height, x2, height - y2);
      line(x2, height-y2, width+x2, height);

      x2+=12;
      y2+=12;
  }

  for (var i = 0; i < 60; i++) {
        strokeWeight(1);
        stroke(255,255,255,10);
        line(width-x1, height, 0, height - y1);
        line(x1, height, width, height - y1);
        line(width-x1, 0, 0, 0+y1);
        line(x1, 0, width, 0+y1);

        x1 += 10;
        y1 += 10;
     }

}

This project was interesting to do! Excited to discover new ways to implement the new skills I learned through this exercise. I hope to be able to create actual shapes in the future.

Jason Zhu-Project-04-String-Art

sketch

/* Jason ZHu
Section E
http://jlzhu.cmu.edu
Project-04-String-Art
*/

function setup() {
    createCanvas(400, 300);
    background(240,30,30);

    //twisted white lines
    for (var a = 0; a <300; a += 10){
        stroke(255);
        var x1 = 0 - a * 10
        var y1 = height - a * 10
        var x2 = a + 300
        var y2 = a + height/2
        line(x1,y1,x2,y2);
    }

    //blue curved lines
    for (var b = 50; b < width; b += 10) {
        strokeWeight(5);
        stroke(65,101,172);
        line(b, 0, 150, b);
    }

    // light orange rectangle
    for (var c = 250; c < 400; c += 5){
        strokeWeight(2);
        stroke(150,150,30);
        line(c,75,c,height);
    }

    //orange rays
    for (var d = 0; d < width; d += 15) {
        strokeWeight(1);
        stroke(241,157,56);
        line(250,75, d, 0);
    }

    // yellow lower left warp
    for (var e = width; e > 0; e -= 15) {
        strokeWeight(1);
        stroke(241,240,56);
        line(e,300, 0, e);
    }

     // yellow lower left warp
    for (var f = width; f > 0; f -= 15) {
        strokeWeight(1);
        stroke(241,240,56);
        line(400,f, f, 0);
    }
}

For this assignment, I wanted to push my boundaries by exploring variations in color and form. As someone who tends to be more conservative and narrowed in my thinking (aesthetically speaking), I wanted to see what I could come up with if those preconditions were tossed aside. I contrasted blues with reds and mixed in some yellows as well. I also wanted the white lines to serve to divide the campus and create a dynamic centerpiece that underlaid the red and yellow portions. In this way, I think I pushed myself further in terms of coding and aesthetics. By going against my norms, I was able to reinforce what I thought looks good while also exploring new means.

Lan Wei-Project-01-Face

sketch

function setup() {
    createCanvas(600, 600);
    background(68, 130, 128);
    strokeWeight(3);
}

function draw() {
    //hat
    fill(196, 42, 42);
    stroke(196, 42, 42);
    ellipse(300, 260, 205, 195);

    //quilt
    ellipse(300, 570, 320, 500);
    stroke(232, 139, 139);
    push();
    strokeWeight(40);
    beginShape();
    curveVertex(240, 350);
    curveVertex(240, 290);
    curveVertex(230, 370);
    curveVertex(350, 440);
    curveVertex(360, 470);
    curveVertex(350, 500);
    curveVertex(330, 600);
    curveVertex(330, 700);
    endShape();
    pop();

    //face
    fill(245, 230, 120);
    stroke(245, 230, 120);
    beginShape();
    curveVertex(220, 100);
    curveVertex(220, 240);
    curveVertex(230, 350);
    curveVertex(300, 400);
    curveVertex(370, 350);
    curveVertex(380, 240);
    curveVertex(380, 100);
    endShape();
    push();
    fill(232, 169, 132);
    stroke(232, 169, 132);
    ellipse(250, 360, 20, 20);
    ellipse(350, 360, 20, 20);
    pop();

    //glasses
    push();
    strokeWeight(1)
    stroke(0);
    noFill()
    ellipse(250, 313, 70, 73);
    ellipse(350, 313, 70, 73);
    line(285, 313, 315, 313);
    pop();

    //eyebrow
    stroke(0);
    push();
    strokeWeight(5)
    line(230, 270, 270, 273);
    line(370, 268, 330, 273);
    pop();

    //eye
    line(220, 320, 270, 330);
    push();
    translate(350, 325);
    fill(255);
    strokeWeight(2);
    rotate(radians(-7));
    ellipse(0, 0, 50, 7);
    strokeWeight(3);
    ellipse(-2, 0, 5, 5);
    pop();

    //mouth
    fill(250, 70, 70);
    stroke(250, 70, 70);
    triangle(300, 355, 293, 375, 307, 375);
    fill(255);
    stroke(255);
    triangle(300, 355, 299, 357, 301, 357);

    //hair
    fill(0);
    stroke(0);
    quad(220, 241, 170, 330, 230, 370, 230, 350);
    quad(380, 241, 370, 241, 370, 370, 450, 330);

    //hat part 2
    fill(207, 71, 71);
    stroke(207, 71, 71);
    ellipse(300, 247, 175, 45);
}

Jason Zhu – Looking Outwards 04

View post on imgur.com

Created by Robert Henke. Titled Fall. Published April 2016 at the L.E.V. Festival.

Fall, by Robert Henke, is a work that details an abstract view of 1950 Bavaria which disappeared underwater following the construction of a newly built Sylvenstein reservoir. The technology employs a randomizing algorithm to generate patterns. I think it’s really cool because it is not only conceptually strong, but also because it incorporate many elements of the senses. From changing colors to prickling sound, the technology is very well integrated.

From what I understand, the algorithm generates randomly from a set amount of patterns. The randomness of the installation has much more to do with how the light refracts than with how the algorithm generates. Creating these complex yet beautiful overlays seems to have been a daunting computing task.

View post on imgur.com

Project-04-String-Art-Veronica

sketch

/*
Veronica Wang
Section B
yiruiw@andrew.cmu.edu
Project-04
*/

var r = 125; //radius of circle
var inc = 100; //increments on the circle
var stepDif = inc;//each step increases one increment
var stepNum = 0;//step number count


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

function draw() {

    var centerX = width / 2; //center x of circle
    var centerY = height / 2; //center y of circle
    var step = 2 * PI / inc; //increment size

    //main ellipse to be divided
    stroke(120);
    strokeWeight(0.5);
    noFill();
    ellipse(centerX, centerY, r * 2, r * 2);
    

    for (i = 0; i < inc / 2; i += 1){
        var currNum = stepNum; //current iteration number
        //x and y coordinates of starting points equally divided increments along ellipse
        var x1 = centerX + r * cos(step * currNum); 
        var y1 = centerY - r * sin(step * currNum);
        //for every increment in starting point,
        //step two increaments for destination point 
        var nextNum = (inc / 2 + 2 * (currNum)) % inc; 
        //x and y coordinates of the destination points on the ellipse
        var x2 = centerX + r * cos(step * nextNum);
        var y2 = centerY - r * sin(step * nextNum);
        //step number increase
        stepNum += 1;
        stroke(220, 20, 60);
        line(x1, y1, x2, y2);
    }

    var offset = 0; //offset to create layers
    var repeats = 7; //how many layers
    var op = 100; //opacity of layer color to create depth

    for (i = 0; i < repeats; i += 1) {
        op -= i * 4; //opacity decrease
        stepNum = 0; //step number
        offset += 8; //offset by 8 increments each time
        
        //same as the for loop above
        for (j = 0; j < inc / 2; j += 1){ 
            var currNum = stepNum + offset;
            var x1 = centerX + r * cos(step * currNum);
            var y1 = centerY - r * sin(step * currNum);
            var nextNum = ((inc / 2 + 2 * (currNum - offset)) + offset) % inc;
            var x2 = centerX + r * cos(step * nextNum);
            var y2 = centerY - r * sin(step * nextNum);
            stepNum += 1;
            stroke(220, 20, 60, op);
            line(x1, y1, x2, y2);
        }
    }

    noLoop();

}

In this project I looked up string art and found inspiration from Demir String art. I decided to make a project similar to this art piece they made:

It took me some time to figure out how to extract points from a circle, as well as stepping in different increments for the two ends of a line. But I am happy with the output and had fun doing this project.