Category: Section D

Yoo Jin Shin-Project-04-String-Art

Project-04

// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project-04


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

function draw() {
    background(0);

    // two white-ish rectangles in background
    fill(235);
    noStroke();
    rect(0, 220, width, 80);
    rect(0, 0, width, 80);

    var x1;
    var x2;
    var y1;
    var y2;

    var stepSize1 = 7.5;
    var stepSize2 = 10;
    var stepSize3 = 7;
    var stepSize4 = 3;

    // dark grey lines
    for (x2 = 0; x2 < width; x2 += stepSize2) {
        x1 = 0;
        y1 = 0;
        y2 = height;
        stroke(70);
        strokeWeight(1);
        line(x1, y1, x2, y2);
    }

    // dark blue lines 
    for (x1 = 0; x1 < width; x1 += stepSize1) {
        stroke(0, 0, 255);
        strokeWeight(1.5);
        line(x1, y1 += 2, x2 -= 10, y2 -= 1);
    }

    // dark pink lines 
    for (x1 = 0; x1 < width; x1 += stepSize1) {
        stroke(255, 200, 255);
        strokeWeight(2);
        line(x1, y1 += 4.5, x2 += 14.9, y2 -= 1.2);
    }

    // white lines
    for (x2 = 0; x2 < width; x2 += stepSize3) {
        x1 = width;
        stroke(255);
        strokeWeight(1.5);
        line(x1 -= 10, y1 -= 80, x2, y2 += 10);
    }

    // black circle in center background
    fill(0);
    noStroke();
    ellipse(width / 2, height / 2, 180, 180);

    // purple lines
    for (y2 = 0; y2 < height; y2 += stepSize4) {
        stroke(160, 50, 255);
        strokeWeight(1.5);
        line(x1 += 100, y1 += 30.5, x2 -= 5.6, y2);
    }

    noLoop();
}

It was interesting to experiment with the different types of lines and curves to create this string art. I think the sound-art article that I read recently about the Multiverse and black holes subconsciously influenced my design.

Han Yu Project 04 String Art

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project-04

function setup() {
    createCanvas(400, 300);
    background(24, 146, 245);
}

function draw() {
// the pink background
	for (var i = 0; i <400; i++) { //top
		stroke(245, 41, 143);
		line(100, 100, i, 0);
		i += 10;
	}

	for (var j = 0; j <300; j++) { //left
		stroke(245, 41, 143);
		line(100, 100, 0, j);
		j += 10;
	}

	for (var k = 0; k<300; k++) { //right
		stroke(245, 41, 143);
		line(300, 200, width, k);
		k += 10;
	}

	for (var m = 0; m<400; m++) { //bottom
		stroke(245, 41, 143);
		line(300, 200, m, height);
		m += 10;
	}

// the yellow hourglass
	for (var n = 0; n<400; n++) { //bottom
		stroke(255, 249, 57);
		line(width/2, height/2, n, height);
		n += 10;
	}

	for (var n = 0; n<400; n++) { //top
		stroke(255, 249, 57);
		line(width/2, height/2, n, 0);
		n += 10;
	}

// the concentric circles
	for (var c = 10; c<155; c++) {
		stroke(245, 41, 143);
		noFill();
		ellipse(width/2, height/2, c, c);
		c += 5;
	}

}

I was inspired by the Japanese zen garden and wanted to use a bunch of colors that contrast with each other. Making the background was the hardest part of this project because it’s tricky to make everything align. Overall, this project reinforces my skills of using for loops.

Jessica Timczyk – Project 4 String Art

line drawing

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project-04-string art
function setup() {
    createCanvas(400, 300);   
}

function draw() {
    background(126, 25, 25);
    // variable set up
    var x1 = 0;
    var x2 = 0;
    var x3 = 0;
    var x4 = 0;
    var y1 = 0;
    var y2 = 0;
    var y3 = 0;
    var y4 = 0;

    // create a loop to draw many lines
    for( var i = 0; i <= 150; i ++) {
        // set new values for all the variables
        x1 += i;
        y1 += i;
        x2 += 2 * i;
        y2 += 2;
        x3 += 20;
        y3 -= i * 1/3;
        x4 = 2 * i;
        y4 = 2 * i;
        // orange lines
        stroke(246, 150, 14);
        strokeWeight(3 / 4);
        line(x1, y1, width, 70);
        // white lines
        stroke(255);
        strokeWeight(1/2);
        line(mouseX, y2, x2, height);
        // light brown lines
        stroke(142, 91, 53);
        strokeWeight(2);
        line(-mouseX + x3, y3, 400, 300);
        // dark brown lines
        stroke(49, 25, 7);
        strokeWeight(0.5);
        line(x4, y4, 210 - mouseX, 120);
        // grey lines
        stroke(68, 68, 68);
        strokeWeight(3/4);
        line(0, y2, x2, height);

    }
}

I really enjoyed this project because it allowed me to experiment with different parameters to see what would happen. As a result, my string art came about almost accidentally as I manipulated the parameters to see what they would do.

Lan Wei-LookingOutwards-01

The structure in operation

The artwork was done by David Bowen in 2010. It really interests me because the artwork integrates physical and visual worlds together and fascintes people while confusing them. Modern technologies always give people the impression of aligning nature, but in this artwork nature and man-made object are connected harmoniously and a new mode of ‘nature’ is created. This is a very small piece of artwork and it can serve as a prototype. I can see the potential that the idea being used in creating spatial experience. For example, building a house using the technology might enable people living inside feel how wind moves around the house, which is amazing.

In fact, David Bowen also did a piece of artwork that utilizes movement of objects to imitate the impact of wind. Again, for me the loop of ‘learn from nature, imitate nature, create a new nature’ is the most interesting part of the artwork.

Source: https://www.youtube.com/watch?v=0p3je4WGcM0

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.

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);
}

Yoo Jin Shin-LookingOutwards-04

Multiverse

The video above captures “Multiverse,” an audio-visual installation by fuse* that attempts to create the “eternal birth and death of infinite parallel universes.” This project is inspired by the multiverse theory by Lee Smolin. “According to this theory, our universe is only one in a much larger cosmos (the Multiverse), a member of a growing community of universes, each one being born from the collapse following the formation of a black hole.”

The various, unique scenes are generated by an application developed in openFrameworks, while the sounds are produced using a generative sound system in Ableton Live and Max/MSP. I think the eerie sounds fading in and out match really well with the visuals and play a significant part in creating this space-like experience.

Overall, I think the the visuals and sounds in this installation are truly mesmerizing. Simply looking at it through the screen has this powerful effect so I wonder how it would feel like if I were that person in the video, being immersed in the Multiverse. I think it’s interesting that the creators used a theory proposed in the science community to physically conceptualize it through this audio-visual installation.

Jessica Timczyk – Looking Outwards 04

The photo above shows screenshots of different students’ work utilizing the Chunity program.

Chunity is a programming environment developed by a PhD student and associate professor at Stanford’s Center for Computer Research in Music and Acoustics, Jack Atherton and Ge Wang in 2018. The program uses the programming language ChucK and the real time graphics engine in Unity. I find this project extremely interesting because the tools are driven by audio as the most important component with visual graphics coming second, following the audio. This is contrary to how I would think most programs and tools run, with visual graphics as the main component and audio being secondary. In the algorithms generated using this program, physical changes in the graphics of the program are accompanied by audio, integrated with real time components. When a final project is created using this programming environment, the coder is able to artistically express their vision through how  the audio is integrated with the visual graphics.

The photo shows a screenshot of an example of how code is written to include both the audio and visual graphics.

Han Yu Looking Outwards 04

MULTIVERSE by fuse*

The record of MULTIVERSE by fuse*, Italy 2018.

MULTIVERSE is an audio-visual installation by the Italian based studio and production company, fuse*. The project draws inspirations from physics theories about multiverse and simulates the everlasting births and deaths of countless parallel universes. Watching the replay of this magnificent display of the multiverse that only exists in my wildest imagination before, I felt the power of infinite possibilities of life showcased in this project, magnified through a gigantic display. The project was delivered by a vertical projection of 7.5 meters high and two echoing mirrors that generates an infinite display.

How developers from fuse* generate the non-repeating simulation using live data.

The algorithms used in the project was in a software by openFrameworks that manages interactions with multiple softwares like AbletonLive and Max/MSP through with various scenes are generated and connected. The project successfully simulated the random changes during the creations of universes as each scene represents an evolutionary path of the multiverse. Each display is a unique variation that never repeats itself.

Snapshot of MULTIVERSE projected for the first time in Borgo delle Colonne, Italy in 2018.

 

JJ Legelis – Looking Outwards 04: Sound Art

Destin Sandlin, well known for his Smarter Everyday youtube series, is also the creator of a video series titled The Sound Traveler. This series combines point of view (POV) video, with binaurally recorded audio to create an immersive experience. The videos produced in this manner stand out from other typical POV videos in one key way, the sound. In most videos the listener can hear the audio coming from the center or to some degree of left/right. But the special way the audio is recorded in Destin’s videos allows the listener to hear sounds as coming from all axis, front, behind, and even above and below. This slight change causes the entire range of hearing ability to be utilized, causing a feeling of sincere immersion.

Binaural Audio Recording Setup

The videos are recorded using an odd microphone setup that causes the sound to interact with an artificial ear before it hits the microphone, allowing the small nuances of the (fake) human ear and ear canal to augment the sound in the same way a real ear would.

Video from The Sound Traveler Exemplifying Binaural Recording