Month: September 2020

Looking Outwards-04

The SoundShirt

The SoundShirt is a project created by CuteCircuit, a company co-founded by Francesca Rosella and Ryan Genz. This company was founded on the desire to use technology to amplify haptic senses and interactions. In 2002, they made the HugShirt which is a shirt with sensors that recreate the sensation of touch. 14 years later in 2016, they branched off this concept to develop the SoundShirt. The SoundShirt contains even more sensors that connect to different sound frequencies and instruments to deliver a specialized haptic experience designed to allow people who cannot hear to experience music. The shirt is designed to work in different music scenarios including live orchestras, concerts, raves, listening to music on your phone, and even playing video games. The shirt is able to adapt to the different scenarios to provide an experience that allows you to feel the music in the most authentic way possible.

I first learned about this shirt when I saw it in the Access+Ability show at the CMOA in 2019. I instantly fell in love with the project the first time I saw it. I admire the focus on accessibly and utilization of technology and computation to transform sound for a community heavily left behind. Although different than what we might be doing in this class, the similarities are clearly evident. While we might be taking sound and finding a way to convert the experience to something visual, this project takes that same idea and theory of computation to translate sound into something tactile. In both scenarios we are using computation to visualize senses in different ways which I find beautiful. While I believe this project is currently only available for select testing and presentations, I hope it finds a way into the public market because I think it is something really important for people who are deaf to have the chance to experience.

Project 4 – String Art

sketch.sll4Download
// Sarah Luongo
// Section A

function setup() {
    createCanvas(400, 300);
    background(232, 240, 255);
}

function draw() {
    for (var i = 0; i <= 150; i++) {
	stroke(120, 150, 180);
	
	// Blue background horizontal lines
	line(0, height/2- i, width, height/2 - i);
        
	// Blue intersecting lines at the bottom
	line(0, height/2 + (i/2), 3 * i, height); // left
	line(width, height/2 + (i/2), width - (3 * i), height); // right
        stroke(132, 205, 190);
	
	// Green background horizontal lines
	line(0, height/1.5 + i, width, height/1.5 + i);
	
	i += 1;
    }

    for (var i = 0; i <= 75; i++) { 
	stroke(210, 200, 220);
	// Pink intersecting lines at the bottom
	line(0, height/2 + (i/2), 3 * i, height); // left
	line(width, height/2 + (i/2), width - (3 * i), height); // right
	
	// Pink intersecting lines at the top
        line(width-(6*i), 0, 0, height/2 + (2*i)); // left
        line(6*i, 0, width, height/2 + (2*i)); // right
    }
    // Pebbles
    fill(230, 230, 250);
    ellipse(mouseX, mouseY, 100, 50);
}

I want to create something that resembled a bag of pebbles. So, I made a see-through, colorful, bag using string art, and an ellipse that moves around behind the string art to look like a bunch of pebbles. I was also attempting to make the bag look open.

Project-04-String Art

sketchDownload
 /*
Nicholas Wong
Section A
*/


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

    background(0)

}
 
function draw() 
{
    background(0)
    stroke(255)

    //Circle around image (follows mouse slightly)
    for (var i = 0; i <=300; i += 10) 
    {
        stroke(60)
        strokeWeight(0.5)
        line(width - i, 0.1*mouseY, width+(0.1*mouseX), height - i*2);
        line(i, height + (0.1*mouseY), -30+0.1*mouseX, i*2);
        line(width - i, height + (0.1*mouseY), width+(0.1*mouseX), i*2);
        line(i, 0.1*mouseY, -30+0.1*mouseX - 1, height - i*2);
    }

    //Double For-loop for X and Y grid coordinates
    for (let x=0;x<=width;x+=25) {
        //Columns
        push();
        stroke(255)
        strokeWeight(0.1)
        line(x,0,x,height)
        pop();

        for(let y=0;y <=height;y+=25){
            //Center point
            push();
            stroke(255)
            strokeWeight(0.05)
            line(mouseX,mouseY,x,y);

            //Rows
            push();
            stroke(50)
            strokeWeight(0.1)
            line(0,y,width,y)
            pop();

            //Right
            push();
            stroke(70,0,0)
            strokeWeight(0.15)
            line(0,mouseY,width,y)
            pop();

            //Left
            push();
            stroke(0,70,70)
            strokeWeight(0.15)
            line(width, mouseY, 0, y)
            pop();

            //Bottom
            push();
            stroke(50,50,0)
            strokeWeight(0.15)
            line(mouseX, height, x, 0)
            pop();

            //Top
            push();
            stroke(70,0,80)
            strokeWeight(0.15)
            line(mouseX, 0, x, height)
            pop();               
        }
    }


    
}

Looking Outwards 4: Audio-driven digital art

It is known that simple algorithms can generate complex visual art. Audio-driven digital art, a form of audiovisual art, is similar to generative art in that an algorithm is still responsible for generating the art, however the algorithm only converts audio input into a visual output. Sound visualization techniques are nothing new; they have been used for music videos, desktop backgrounds, and screen savers for quite some time already. Common sound visualization techniques like waveform visualization are used to add visual flare to an app or a music video, or even something as simple as a volume indicator.

Only recently has sound visualization become prevalent in art and design. Audiovisual art allows for the synthesis of both physical sensations to create fully immersive, unique experiences. Nanotak Studio’s Daydream is a mesmerizing example of audiovisual art being utilized to create a unique spatial experience. The installation consists of two series of glass panels that have images projected onto them from behind. The resulting effect creates the illusion of one being in a larger space, with the echoing sounds making the whole experience more immersive. The pushing and pulling of the projected abstract shapes and spaces coincide with the humming and soothing sounds, creating the sensation of being detached from reality. The choreography of sound and light with the use of algorithms is able to create art that provides an experience unlike any other.

LO – 4

With my short-lived experience in physical computing taking an intro Arduino class last semester, I was drawn to the appearance of Ototo by Yuri Suzuki. It resembles a chip but claims to be a musical invention kit. Reading into it, Ototo does exactly as it promises. It allows the user to interact tactically with the product to experiment with possible sounds, manipulate add-ons that increase the range of sounds that can be made, and wire the product to everyday items (i.e. water, a piece of cake, a spoon) so that the musical performance experience expands to include any object you desire.

What I love about the Ototo is the accessibility of the product by the communicative means of sounds and its relationship with touch. From a young age, we are introduced to toys with buttons assigned to certain sound effects. I think this project builds on that simple concept but elevates it to something even more interesting by allowing the user to transform their own personal items into musical instruments. I’m unsure of how the machine detects changes in the connected objects (conductivity?), but I do know that a lot of thought was put into writing code that assigns sounds to different ports on the device that is further changed based on the additional input information from the connected objects. I think Suzuki’s artistry comes into this project in the consideration of human emotion and how we respond to interactivity and sound. His sound projects are highly engaging and portray sound as a viable and fun aspect of art and design.

Any object the Ototo is connected to becomes a musical instrument.

Project 4 – String Art

I began this project by playing around with loops to experiment with different forms. However, I later realized the loops could be used to create interesting environments with “perspective lines.” I decided to run with this and create an empty room with a door at the end. The color changing with the position of the mouse give a sense of dimension and personalization.

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

function draw() {
    spacing = 20;
    red = mouseX;
    blue = mouseY;
   
    for (var a = 0; a <= 600; a += spacing) {
        // sloped plane
        stroke(255);
        strokeWeight(0.5);
        line(0, a, a, 200);

        // vertical grid
        stroke(red, 0, 200);
        line(a, mouseX, a, a);
    }
    for (var a = width/3; a <= width; a += spacing/2) {
        //bg diagonals
      stroke(red, 255, blue);
      line(a, 0, 2*a, 200);
      line(2*a, 200, a, 200); //2 sets of lines converge at horizon
    }
  //door
  stroke(red, 255, blue);
  strokeWeight(1);
  fill(0);
  rect(width/2, height-200, 50, 100);
    //doorknob
    circle(width/2+40, height-150, 5);
}

Project-04-String-Art

deer
//Jiaqi Wang SectionC
var numLines=90;
//ears variables
var dxEL1;
var dxEL2;
var dxER1;
var dxER2;
var dyEL1;
var dyEL2;
var dyER1;
var dyER2;
//face variables
var dxFL1;
var dxFL2;
var dxFM1;
var dxFM2;
var dxFR1;
var dxFR2;
var dxFM2_2;
var dyFL1;
var dyFL2;
var dyFM1;
var dyFM2;
var dyFR1;
var dyFR2;
var dyFM2_2;
//nose
var dxN1;
var dxN2;
var dyN1;
var dyN2;
//body
var dxBL1;
var dxBL2;
var dxBR1;
var dxBR2;
var dyBL1;
var dyBL2;
var dyBR1;
var dyBR2;
var dxBR2_2;
var dyBR2_2;


function setup() {

    createCanvas(300, 400);
    background(255);
    strokeWeight(0.2);
    stroke(188,88,36);
    //left ear top
    line(30,20,115,140);
    //left ear bottom
    line(50,115,150,120);
    dxEL1=(50-30)/numLines;
    dyEL1=(115-20)/numLines;
    dxEL2=(150-115)/numLines;
    dyEL2=(120-140)/numLines;

    //right ear top
    line(265,20,185,140);
    //right ear bottom
    line(250,115,150,120);
    dxER1=(250-265)/numLines;
    dyER1=(115-20)/numLines;
    dxER2=(185-150)/numLines;
    dyER2=(140-120)/numLines;

    //face left
    line(115,140,140,205);
    //face middle
    line(150,120,150,205);
    
    dxFL1=(150-115)/numLines;
    dyFL1=(120-140)/numLines;
    dxFM2=(150-140)/numLines;
    dyFM2=(205-205)/numLines;
    //face right
    line(185,140,160,205);
    dxFR1=(150-185)/numLines;
    dyFR1=(120-140)/numLines;
    dxFM2_2=(150-160)/numLines;
    dyFM2_2=(205-205)/numLines;

    //nose 1
    line(135,215,160,235);
    //nouse 2
    line(165,215,145,235);
    dxN1=(165-135)/numLines;
    dyN1=(0)/numLines;
    dxN2=(145-160)/numLines;
    dyN2=(0)/numLines;

    //body left
    line(110,185,70,235);
    line(155,255,155,385);
    dxBL1=(155-110)/numLines;
    dyBL1=(250-180)/numLines;
    dxBL2=(155-70)/numLines;
    dyBL2=(380-235)/numLines;

    //body right
    line(200,185,240,235);
    line(155,255,155,385);
    dxBR1=(155-200)/numLines;
    dyBR1=(250-180)/numLines;
    dxBR2_2=(155-240)/numLines;
    dyBR2_2=(380-235)/numLines;


}

function draw() {

//left ear
	var xEL1=30;
    var yEL1=20;
    var xEL2=115;
    var yEL2=140;
	for(var i=0;i<=numLines;i+=1){
		line(xEL1,yEL1,xEL2,yEL2);
		xEL1+=dxEL1;
		yEL1+=dyEL1;
		xEL2+=dxEL2;
		yEL2+=dyEL2;
//print(xEL1,yEL1,xEL2,yEL2);
	}
 //right ear   
    var xER1=265;
    var yER1=20;
    var xER2=185;
    var yER2=140;
	for(var i=0;i<=numLines;i+=1){
		line(xER1,yER1,xER2,yER2);
		xER1+=dxER1;
		yER1+=dyER1;
		xER2-=dxER2;
		yER2-=dyER2;
		print(xER1,yER1,xER2,yER2);
		print(i.toString());
		print(numLines.toString());


    }
//face left
	var xFL1=115;
    var yFL1=140;
    var xFM2=140;
    var yFM2=205;
	for(var i=0;i<=numLines;i+=1){
		line(xFL1,yFL1,xFM2,yFM2);
		xFL1+=dxFL1;
		yFL1+=dyFL1;
		xFM2+=dxFM2;
		yFM2+=dyFM2;

	}
	//face right
    var xFR1=185;
    var yFR1=140;
    var xFM2_2=160;
    var yFM2_2=205;
	for(var i=0;i<=numLines;i+=1){
		line(xFR1,yFR1,xFM2_2,yFM2_2);
		xFR1+=dxFR1;
		yFR1+=dyFR1;
		xFM2_2+=dxFM2_2;
		yFM2_2+=dyFM2_2;

    }

    //nose
    var xN1=135;
    var yN1=215;
    var xN2=160;
    var yN2=235;
	for(var i=0;i<=numLines;i+=1){
		line(xN1,yN1,xN2,yN2);
		xN1+=dxN1;
		yN1+=dyN1;
		xN2+=dxN2;
		yN2+=dyN2;

    }
translate(0,5);
    //body left
    var xBL1=110;
    var yBL1=180;
    var xBL2=70;
    var yBL2=235;
	for(var i=0;i<=numLines;i+=1){
		line(xBL1,yBL1,xBL2,yBL2);
		xBL1+=dxBL1;
		yBL1+=dyBL1;
		xBL2+=dxBL2;
		yBL2+=dyBL2;

	}

    //body right
    var xBR1=200;
    var yBR1=180;
    var xBR2_2=240;
    var yBR2_2=235;
	for(var i=0;i<=numLines;i+=1){
		line(xBR1,yBR1,xBR2_2,yBR2_2);
		xBR1+=dxBR1;
		yBR1+=dyBR1;
		xBR2_2+=dxBR2_2;
		yBR2_2+=dyBR2_2;

	}

noLoop()
}

Below is the initial sketch I made in illustrator.

LookingOutwards-04

BIY.HEAR is a numerological processing project that acts like a prophet or a fortune teller. It interprets what the person said and calculates a destiny and a lucky number for this person. I admire how the creator enriches the meaning of technology and computation, which used to be purely pragmatic and mechanical. BIY.HEAR gives the user the illusion that it has some mysterious connection with supernatural power, which is a power conventionally unique to psychics.

BIY.HEAR was trained on Indian numerology and Astrology. The microphone on the board takes in words from a conversation and match the words with its symbolic meaning based on traditional Indian knowledge systems.

The visual design of the chip addresses the culture from which the calculation is based on. The creator made an interesting choice to preserve the general form of a normal chip instead of using a form of a human figure. This design choice renders the user to reflect on what is the difference between humans and machines and the level of sophistication that computational artifacts can reach.

Project-04-String Art: Maryland Flag

sketchDownload
var dx1;
var dy1;
var dx2;
var dy2;
var bx1;
var by1;
var bx2;
var by2;
var cx1;
var cy1;
var cx2;
var cy2;
var ax1;
var ay1;
var ax2;
var ay2;
var numLines = 20;

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

    bx1 = (100-0)/numLines;
    by1 = (50-50)/numLines;
    bx2 = (100-100)/numLines;
    by2 = (100-50)/numLines;

    cx1 = (100-200)/numLines;
    cy1 = (50-50)/numLines;
    cx2 = (100-100)/numLines;
    cy2 = (100-50)/numLines;

    ax1 = (100-200)/numLines;
    ay1 = (50-50)/numLines;
    ax2 = (100-100)/numLines;
    ay2 = (0-50)/numLines;

}

function draw() {
	noStroke();
    fill(255,255,0);
    rect(0, 0, 400, 300);

//top left black lines
    stroke(0);
    for (var i = 2; i < width/2; i += 4) { 

      if (i < 80 || i > 130) { 
    
        line(i, i * .7 - 20, i, i - 400);
    }

      noLoop();
   
    }

    for (var i = 0; i < width/2; i += 4) {

    	if (i < 80 || i > 130) { 

          line(i, i + 400, i, i * .7 + 40);
      }
      noLoop();
  
    }

    for (var i = 0; i < width/2; i += 4) {

    	if (i > 80 & i < 130) { 

          line(i, i *.7 -20, i, i * .7 +40);
      }
      
      noLoop();
  
    }

//bottom right black lines
  for (var i = 200; i < width; i += 4) {

    	if (i < 280 || i > 330) { 

          line(i, i *.7 -20, i, i * .7 +40);
      }
      
      noLoop();
  
    }

  for (var i = 200; i < width; i += 4) { 

      if (i > 280 & i < 330) { 
    
        line(i, i * .7 - 20, i, i - 400);
    }

      noLoop();
   
    }

  for (var i = 200; i < width; i += 4) {

    	if (i > 280 & i < 330) { 

          line(i, i + 400, i, i * .7 + 40);
      }
      noLoop();

    }


 



    noStroke();

    fill(255, 0, 0); 
    rect(0, 150, 200, 150); //red rectangle bottom left
    rect(200, 0, 200,150); //red rectangle top right
    fill(255);
    rect(0, 150, 100, 75); //white rectangles bottom left 
    rect(100, 225, 100, 75);
    rect(200, 0, 100, 75);//white rectangles top right
    rect(300, 75, 100, 75);


    
    push();
    noFill();
    stroke(255);
//bottom right ellipses and arcs
    ellipse(107, 175, 15, 15);
    arc(100, 167, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);
    
    ellipse(28, 233, 15, 15);
    arc(20, 225, 15, 15, radians(0), radians(180), CHORD);

    ellipse(92, 275, 15, 15);
    arc(100, 283, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(174, 217, 15, 15);
    arc(182, 225, 15, 15, radians(180), radians(0), CHORD);
    

    stroke(255,0,0);
    ellipse(92, 175, 15, 15);
    arc(100, 167, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(28, 217, 15, 15);
    arc(20, 225, 15, 15, radians(180), radians(0), CHORD);

    ellipse(107, 275, 15, 15);
    arc(100, 283, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);

    ellipse(174, 233, 15, 15);
    arc(182, 225, 15, 15, radians(0), radians(180), CHORD);
  
//top right elliplses and arcs
    push;
    noFill();
    stroke(255);
    translate(200, -150);
    ellipse(107, 175, 15, 15);
    arc(100, 167, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);
    
    ellipse(28, 233, 15, 15);
    arc(20, 225, 15, 15, radians(0), radians(180), CHORD);

    ellipse(92, 275, 15, 15);
    arc(100, 283, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(174, 217, 15, 15);
    arc(182, 225, 15, 15, radians(180), radians(0), CHORD);
    

    stroke(255,0,0);
    ellipse(92, 175, 15, 15);
    arc(100, 167, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(28, 217, 15, 15);
    arc(20, 225, 15, 15, radians(180), radians(0), CHORD);

    ellipse(107, 275, 15, 15);
    arc(100, 283, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);

    ellipse(174, 233, 15, 15);
    arc(182, 225, 15, 15, radians(0), radians(180), CHORD);
    pop();



//bottom left red bend1
    push();
    translate(0, 175);
    stroke(255, 0, 0);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

    pop();


//bottom left white bend1
    push();
    translate(0, 175);
    stroke(255);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += bx1;
        y1 += by1;
        x2 += bx2;
        y2 += by2;
    noLoop();
    }
    pop();


//bottom left red bend2
    push();
    translate(0, 175);
    stroke(255, 0, 0);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += cx1;
        y1 += cy1;
        x2 += cx2;
        y2 += cy2;
    noLoop();
    }

    pop();


//bottom left white bend2
     push();
    translate(0, 175);
    stroke(255);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ax1;
        y1 += ay1;
        x2 += ax2;
        y2 += ay2;
    noLoop();
    }

    pop();

    //next one


//top right red bend1
    push();
    translate(200, 25);
    stroke(255, 0, 0);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

    pop();


//top right white bend1
    push();
    translate(200, 25);
    stroke(255);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += bx1;
        y1 += by1;
        x2 += bx2;
        y2 += by2;
    noLoop();
    }
    pop();


//top right red bend2
    push();
    translate(200, 25);
    stroke(255, 0, 0);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += cx1;
        y1 += cy1;
        x2 += cx2;
        y2 += cy2;
    noLoop();
    }

    pop();


//top right white bend2
    push();
    translate(200, 25);
    stroke(255);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ax1;
        y1 += ay1;
        x2 += ax2;
        y2 += ay2;
    noLoop();
    }

    pop();



    
}

Looking Outward-04

Since David Cope is a composer, he already had an interest and extensive knowledge in different genres of music which probably compelled him to make this and incorporate jazz, classical and chorale music. After doing some searching, I found that he learned LISP in college which is programming language for AI. I would guess that this (among other things probably) is what he used to make EMMY because EMMY makes music from artificial intelligence. I like that it keeps a consistent melody and harmony I was very surprised by that especially since it incorporates a number of different voices singing in different vocal ranges. It is very consistent and there are no jumps at all, so it is actually very calming to listen to. However, it is strange hearing the choir voices sing words that aren’t real. I’d be interested to hear how EMMY interprets jazz since there are so many instruments involved. I would be curious to see if it incorporates more random and unexpected elements of sound and rhythm since jazz doesn’t always follow a specific rhythm.