Category: SectionD

Sound Art

This “Multiverse” is a real-time A/V installation that was built in 2018 by several teams for fuse, BDC – Bonanni Del Rio Catalog. I admire this project because I was surprised how the team tried to express the evolution of infinite possible universes through the use of generative graphics and sounds that exploit the theorization of the existence of that co-exist parallel space, the multiverse. Fuse explains that this draws inspiration from the “creation of a sequence of digital paintings, generated in real-time, attempts to represent the eternal birth and death of the endless parallel universe.” It is also interesting for me how that majestic low tone sounds create a mysterious and dreamlike environment for the audience.

Project 4 – String Art

click!

mountainsnowstorm
// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
//Project-04

//gradience variables
var yaxis = 1;
var xaxis = 2;
let c1, c2;

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

    //variables for gradient background colors
    c1 = color(240); //whitegray
    c2 = color(113, 178, 200); //light blue
}

function draw() {
  //gradient background 
  setGradient(0, 0, 400, 300, c1, c2, yaxis);
  setGradient(0, 0, 400, 700, c2, c1, xaxis);

  //full moon
  noStroke();
  fill(255,255,255,200);
  ellipse(330,80,85);

  //mountains (line shapes)
  for (var i = 0; i <= 330; i += 3) {
    stroke(255);
    strokeWeight(0.35);
    line(0, i, i, 300); //first left mountain
    line(50, i, i + 50, 330); //second left mountain
    line(100, i + 50, i + 100, 300); //third left mountain
    line(200, i + 80, i + 200, 330); //fourth left mountain
  }

  //random repetition of background snowflakes (ellipses) every time you refresh the page
  for (var e = 0; e <= 50; e += 1) {
    stroke(255);
    fill(255, 255, 255, 100);
    strokeWeight(0.5);
    ellipse(random(50, 400), random(0, 300), 5);
  }

  //front snowflakes (line shapes)
  stroke(255);
  strokeWeight(0.5);

  //random repetition of the front snowflakes every time you refresh the page
  for (xx = 0; xx <= 50; xx += 1) {
    push();
    translate(random(10,400), random(10,400));
    points = 20;
    pAngle = 360 / points;
    radius = width / 75;

    for (angle = 100; angle < 500; angle += pAngle) {
      x = cos(radians(angle)) * radius;
      y = sin(radians(angle)) * radius;
      line(radius, radius, x + radius, y + radius);
    }
    pop();
  }
  noLoop();
}

//gradient background
function setGradient(x, y, w, h, c1, c2, axis) {
  if (axis == yaxis) {
    //gradience from top to bottom
    for (let i = y; i <= y + h; i += 1) {
      let int = map(i, y, y + h, 0, 1);
      let c3 = lerpColor(c1, c2, int);
      stroke(c3);
      line(0, i, 400, i);
      //reference/inspiration for gradient background: https://p5js.org/examples/color-linear-gradient.html
    }
  } 
}

function mousePressed () {
  //snow icicles attack as you click mouse (line shapes)
  stroke(255);
  strokeWeight(0.2);
  for (xx = 0; xx <= 10; xx += 1) {
    push();
    translate(random(10, 400), random(10, 400));
    points = 20;
    pAngle = 360 / points;
    radius = width / 75;

    for (angle = 100; angle < 500; angle += pAngle) {
      x = cos(radians(angle)) * radius;
      y = sin(radians(angle)) * radius;
      line(radius + mouseX, radius, x + radius, y + radius);
    }
    pop();
  }
}

At first, I wanted to create waves, but as I moved forward with the project, I changed to creating an interactive snowstorm in the mountains. I visualized from the hikers’ perspective, so the idea is for the view to get blurrier (whiter) as I keep clicking the mouse.

snapshots of progress

Project-04

For this project, I started with a basic pattern I wanted to achieve, then kept modifying it and exploring what I could do with mouse movements as well. Move your mouse around to reveal the hidden face 😀

zimmy string



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

}

function draw() {
	var xL1 = 0;
	var xL2 = 0;
	var y1 = 0;
	var y2 = 400;
    
    stroke(255, 131, 100);
    var y = 0
    for(var x = 0; x <= 400; x += 10){
        line(x, y, mouseX, mouseY);
    } // orange lines that follow mouse and fill in the background

    noStroke();
    fill(0);
    circle (130, 130, 10);
    circle(150, 130, 10);
    arc(140, 140, 30, 30, 0, PI, CHORD);
    // hidden smiley face :D

    stroke(255, 210, 235);
    for (var y1 = 0; y1 <= 300; y1 +=10) {
    	line(xL1, y1, xL2, y2);
    	xL2 += 40;
    } // pink lines in bottom left corner

    var xR1 = 400;
    var xR2 = 400;
	var y1 = 0;
	var y2 = 400;
    for (var y1 = 0; y1 <= 300; y1 +=10) {
    	line(xR1, y1, xR2, y2);
    	xR2 -= 40;
    } // pink lines in bottom right corner

    stroke(255);
    xL2 = 0;
    for (var y1 = 0; y1 <= 300; y1 +=10) {
    	line(xL1, y1, xL2, y2);
    	xL2 += 30;
    } // white lines in bottom left corner
    
    stroke(200, 0, 200);
    xR2 = 400;
    for (var y1 = 0; y1 <= 300; y1 +=10) {
    	line(xR1, y1, xR2, y2);
    	xR2 -= 30;
    } // purple lines in bottom right corner
    
    stroke(239, 29, 255);
    xR2 = 400;
    y2 = 0;
    for (var y1 = 300; y1 >= 0; y1 -=10) {
    	line(xR1, y1, xR2, y2);
    	xR2 -= 10;
    } // purple lines in top right corner
    
    stroke(255, 131, 199);
    xL2 = 0;
    y2 = 0;
    for (var y1 = 300; y1 >= 0; y1 -=10) {
    	line(xR1, y1, xR2, y2);
    	xR2 -= 10;
    } // pink lines in top right
    

}

LO 04 – Sound Art

Estudio Guto Requena

Noíze Chairs

Noize Chair, Sao Paulo, Brazil 2012

Today, I will be talking about a project called Noíze Chair (São Paulo, Brazil 2012) by Guto Requena. The Noíze Chair was digitally conceived from the merge of sounds captured in the streets of Sao Paulo with a Brazilian design Icon. The Giraffe Chain by Lima Bo Bardo, Marcelo Ferraz, and Marcelo Suzuki was digitally modeled in 3D, a genuine reproduction of its physical model. This digital model was deformed through its fusion with audio files collected at Santa Ifigênia Street – Downtown Sao Paulo. The result is a manifest-chair, that instigates reflection beyond the act of sitting. The digital file with the audio and the chair was then 3D printed. City voices, suburban noises and the resonance of concrete Braizilian design landmarks is placed in a piece that exceeds the normal design process. I admire this project because it merges Product design with culture, and history of the geological location. The end result is not only a visually effective design, but a piece that carries so much meaning and story behind it. The multiple recorded city noises are overlapped and average, then the sound waves are reflected on the chair as a “shockwave.” It is clear to see Guto Requena’s artistic abilities manifest in his piece through his thoughtful process and understanding of culture and providing a new product to experience it in a different way. 

View Portfolio here

Project 4 – String Art

sketch
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 100;
var angle = 0;

function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(0);
    stroke(255);
    strokeWeight(0.25);

    dx1 = (0)/numLines;
    dy1 = (400)/numLines;
    dx2 = (400)/numLines;
    dy2 = (0)/numLines;
    var x1 = 0;
    var y1 = 10;
    var x2 = 0;
    var y2 = 400;

    for (var i = 0; i <= numLines; i += 1) {

        //bottom left
        line(x1, y1, x2, y2);
        //top right
        line(x1 + 400, y1, x2, y2 - 400);
        //bottom left 2
        line(x1 + 400, y1 + 400, x2 - 400, y2 - 400);
        //top right 2
        line(x1, y1 - 400, x2 + 400, y2);
        //mouse movement  
        line(x2, y1, x1, mouseY);
        line(x2, y1, x1 + 400, mouseY);

        //opacity change
        if(mouseX > 0) {
            stroke(max(mouseX, 0));
        }
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;

    }

    
}

I was inspired by geometric lines, and parabolic curves.

LO-04

Title: Sonic Playground
Artist: Yuri Suzuki

Installed in the plaza outside the High Museum of Art in Atlanta, GA, Yuri Suzuki’s “Sonic Playground” is an interactive collection of colorful structures that invites visitors to explore and modify the qualities of sound. These life-size sculptures emit computationally curated sounds depending on where users are standing, sitting, listening, or speaking, encouraging museum-goers to explore the area and test how different interactions affect sound output. The software aspect of the installation was done by Luca Dellatorre, who used Grasshopper and Rhinoceros to manipulate how the acoustics are emitted, reflected, and received. I was intrigued by this art piece because of the way it creates a welcoming, visually friendly environment for visitors while incorporating a level of sonic complexity that is not immediately noticeable but gets uncovered the more time one spends with it.

Children play with and explore the Sonic Playground

Project-04: String Art

sketch
    // Fangzheng Zhu
    // Section D
    // jtimczyk@andrew.cmu.edu
    // Project-04-string art

var y = 100;
var x = 100;
var m = -1;
var n = -1;

function setup() {
  createCanvas(400, 300); 
  stroke(255); 
  strokeWeight(0.5);    
  frameRate(30);
}

function draw() { 
  background(0 , 5);
  stroke(y,100,x);

// 1st string animation

  y = y + (3*m); 
  if (y < 0) { 
    m = m*(-1); 
  } 
  if (y > height) {
    m = m*(-1);
  }

// 1st strings 
  line(0, y, width/2, height/2); 
  line(width, y, width/2, height/2); 

  line(0, y, width/2, height); 
  line(width, y, width/2, height); 

  line(0, y, width/2, 0); 
  line(width, y, width/2, 0); 

// 2st string animation
  x = x + (3*n); 
  if (x < 0) { 
    n = n*(-1);
  } 
  if (x>width) {
    n = n*(-1);
  }

// 2st strings

  line(0, height/2, x, 0);
  line(0, height/2, x, height);

  line(width/2, height/2, x, 0);
  line(width/2, height/2, x, height);

  line(width, height/2, x, 0);
  line(width, height/2, x, height);

  

}

LO4: Sound Art

Crow are Chased and the Chasing Crows are Destined to be Chased as well, Transcending Space

Crows are Chased and the Chasing Crows are Destined to be Chased as well, Transcending Space is a visual and audio interactive installation by teamLab. In this installation, the audience enters a room with projections of crows on all sides of the room. As the crows start flying, the music begins, and when the crows crash into each other’s path, they scatter, turning into flowers. This installation excites me greatly as the surround sound and projections make it seem like the viewer is encompassed by the artwork, slowly becoming one with it. As I watched the video, I could imagine myself losing touch of reality, being immersed in the projected world, fully focused on the crows taking flight and mentally swaying to the energetic, yet soothing music. As the installation is constantly generated, each sequence of music and motion will not be repeated, thus, creating a sense of intriguing uncertainty, which I greatly admire and enjoy. Although it did not specify how the sound and animation is created from coding, I speculate that the installation is done by using loops, random functions, and if statements. The whole installation might be an infinite loop, and embedded in the loop, might be some if statements and random functions to generate variety while maintaining a certain framework. The artist’s sensibility is thus manifest in the generation of numerous sequences of sounds and animations harmoniously coming to life. 

Link: https://www.teamlab.art/w/crows_transcending_space/

Creator: teamLab

Title of Work: Crows are Chased and the Chasing Crows are Destined to be Chased as well, Transcending Space

Year: 2017

LO 4 – Sound Art

Noosphere-Aegis by Salvador Breed (2018)

Salvador Breed is a creator of music, sound design, art and technology. He combines sound and technology for installations, performances, and fashion shows. He collaborates with different fashion designers, artists, musicians, etc. to create a harmony between the music and the shows. The algorithms of the music are based on different meanings the shows carry or the specific moments in shows where emphasis is needed. Breed focuses on the “atmospheres, movements and impacts, blending boundaries between music and sound design” mostly using field recordings and modern technologies. As a choreographer of sound, Breed’s interests and sensibilities are manifested throughout the entirety of his music as all of his works are generally focused on natural ambience, silence, space, breaths, etc. A specific piece of work that gave me inspiration is Noosphere / Aegis, an interactive composition for installation by Salvador Breed and Phillip Beesley’s Living Architecture Systems Group in 2018. Noosphere is composed of spherical structures embedded with artificial intelligence that allows interaction with the audience. Salvador manifests his natural and silent sounds that go along smoothly with the moving installation piece. Their sound and computation collaboration can be found in the link below (or title).

https://salvadorbreed.com/Noosphere-Aegis

The installation immersion, circulation, and background music by Salvador Breed can be found below (starting at 1:20).

Interactive composition for installation view
Interactive composition for installation view

Project-04-String-Art

I used layered color and stroke width within one loop to create overlapping line intersections, so the overlapping create some dimensional ’rounded’ effects. I also didn’t want it to be only static, so I incorporated two mouse-activated line systems to make it more interactive.

lineartok

var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

function setup() {
    createCanvas(400, 300);
    background(100);
    line(0, 0, 200, 400);
    line(400, 0, 200, 400);
    dx1 = (200)/numLines;
    dy1 = (400-0)/numLines;
    dx2 = (400-200)/numLines;
    dy2 = (-400)/numLines;
}

function draw() {
	background(100);
    var x1 = 0;
    var y1 = 0;
    var x2 = 400;
    var y2 = 0;
    for (var i = 0; i <= numLines; i += 1) {
    //base black lines
        strokeWeight(0.5);
        stroke('black');
        line(0,x2,400,x1);
        line(x1, y1, x2, y2);
        line(x2,y1+200,x1-400,y2+200);
    //white lines
        stroke('white');
        line(mouseX,mouseY,y1,y2);  
        line(x2,y1+400,x1,y2+400);
        line(0,400,x1,y2-100);
        line(400,200,x1-600,y2);
    //red lines
        strokeWeight(2);
        stroke('red');
        line(x1,x2,mouseX,mouseY);  
        line(x2-200,y1,x1-600,y2);
        line(100,400,x2,y2+400);
        line(x2,0,y2,400);
    //black lines as highest layer
        stroke('black');
        line(x2,y1+200,x1-400,y2);
        line(x2-200,y1,x1-200,y2);
        line(400,100,y1,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
}