Month: September 2022

Laetitia Sonami’s Interactive Sound Performance

A project of sound art that I found very interesting and intriguing was Laetitia Sonami’s Lady Glove.

She built the first glove in 1991 out of rubber kitchen gloves, five hall transducers glued to the fingertips, with a magnet on the right hand. Touching the magnet to the different transducers varied the voltage that were fed to a Forth board and coverted into MIDI signals that controlled synths and samplers. Her latest glove was built in 2001 with the help of the STEIM Institute. The glove became a thin black mesh glove that had various colorful wires coming out of it. It had five microswitches, four hall effect transducers, a pressure pad, restitive strips, two ultrsonic recievers, a mercurty swtich and an accelerometer. All of the signals are now mapped through a software that I am familiar with, MAX MSP.

MAX MSP is a great visual coding software used by many sound designers to create interactive sound installations and art around the world. I have used it several times and have always had fun results. It can also be used in video projects as well.

The thing that I admired the most about this project was the fact that she made it originally as a joke, and it quickly became not only the defining piece of her works, but also a very interesting and fun way to create sound in real time. She has used the piece a lot in physical performances, often accompanying narration. I admire the ingenuity of it because it is so simple, but very effective in being able to control sounds, and it has limitless possibilities.

The artist did not use any algorithims as far as I can tell. She mostly used changes in voltage to change synths and samples at first. She since uses a software that converts voltage in a more nuanced way.

She created the glove to comment on how heavy masculine apparel have been used in virtual reality systems in 1991. In that, her intentions and sensibilities were very much realized. But the way in which her project has evolved and been used since 1991, it has shown how creative her original project was.

“Lady’s Glove” (1991) by Laetitia Sonami

Blog 04 – Computation & Sound Art

An example of where sound and computation cross that I find interesting is Musikalisches Würfelspiel, which evidently translates from German as “musical dice game”. It was popularized in the 1700s throughout Western Europe, and many versions of the game exist as created by different composers. The gist is that someone can randomly generate a completely unique piece of music by rolling dice. The algorithm is quite simple: in each module of a table is a measure of music, and the player rolls their dice twice, first to select the column, then to select the row. The player continues randomly selecting measures this way until the song is long enough to be finished. Even with a smaller table or shorter composition, this could still produce millions of unique songs. Here’s a video of a version of the game in action. (The video is in German, but you can still see the players rolling a die to select different measures, and you get to hear the final composition.)

I find it cool that artists and composers have been embracing the affordances of algorithmically generated music long before computers were in the mix. Programs like Musikalisches Würfenspiel are a good reminder that artistic thought processes can transcend media in unexpected ways, so keep yourself open to unorthodox applications of your creative thinking.

Project 3

this is my project:

sketch
var d = 40;
var d2 = 30;
var rotateV = 1;
var rotateR = 2;
var rotateR2 = -1;
var rotateB = 0;
var rotateL = 1; 
var r = 100;
var g = 100;
var b = 100;
 
 
function setup() {
    createCanvas(600, 450);
    text("Xinran Yu, Seciton A");
}
 
function draw() {
    background(0);
    fill(255, 255, 0)

    //background rotating green circles 
    fill(188, 225, 40, 220);
    push();
    translate(500, 350);
    rotate(radians(rotateB));     //1
    ellipse(60, 60, d2+20, d2+20);
    rotateB += 0.6;
    rotate(radians(rotateB));     //2
    ellipse(60, 60, d2+15, d2+15);
    rotateB += 0.5;
    rotate(radians(rotateB));      //3
    ellipse(60, 60, d2+10, d2+10);
    rotateB += 0.3;
    rotate(radians(rotateB));      //4
    ellipse(60, 60, d2+5, d2+5);
    rotateB += 0.2;
    rotate(radians(rotateB));      //5
    ellipse(60, 60, d2, d2);
    rotateB += 0.1; 
    pop()

    //background lines
    push();
    translate(100, 100);
    stroke(43, 255, 248, 50);
    strokeWeight(1);
    for (var rotateL = 30; rotateL<360; rotateL++) {
        rotate(radians(rotateL));
        line(0, 0, 90, 90); 
    }
    pop();


    //rotating squares
    fill(221, 4, 137, 200);
    noStroke();
    push();
    translate(mouseX, mouseY);
    rotate(radians(rotateR));
    rotateR = rotateR - 3;
    rect(-10, 0, 100, 100);

    rotate(radians(rotateR2));
    rotateR2 = rotateR2 + 2;
    rect(0, 10, 60, 60);
    pop();

    // rotating circles,changing color due to mouseX & mouseY
    fill(126, 198, 231);
    ellipse(mouseX, mouseY, 50, 50);  // center circle
    push();
    translate(mouseX, mouseY);

    if (mouseX <= width/2 & mouseY <= height/2) {
        r = 218; //yellow
        g = 177;
        b = 79;
    } else if (mouseX < width/2 & mouseY > height/2) {
        r = 205; //orange
        g = 110;
        b = 74;
    } else if (mouseX > width/2 & mouseY < height/2) {
        r = 224; //pink
        g = 128;
        b = 231;
    } else if (mouseX > width/2 & mouseY > height/2) {
        r = 135; //red
        g = 30;
        b = 12;
    }
    fill(r, g, b);
    rotate(radians(rotateV));
    rotateV = rotateV + 2;

    //change circle's raduis
    //distance to canvas center increases, rotating radius & d increases
    var x1 = dist(mouseX, mouseY, width/2, height/2);
    d = dist(mouseX, mouseY, width/2, height/2)/3;
    d = constrain(d, 10, 100);
    ellipse(x1, x1, d, d);
    ellipse(-x1, -x1, d, d);
    ellipse(-x1, x1, d, d);
    ellipse(x1, -x1, d, d);
    ellipse(0, x1*1.5, d, d);
    ellipse(0, -x1*1.5, d, d); 
    ellipse(x1*1.5, 0, d, d);
    ellipse(-x1*1.5, 0, d, d);
    pop();   

}

Looking Outwards-03

The project I choose is “Rocailles” by Benjamin Dillenburger. It’s a digital fabrication model made by 3D printing. The general shape is a curvature dynamic surface, and by bending and delicate arrangement, the model presents a circular flower shape. I’m attracted by the flower shape, the curve flows have a sense of fluidity and coherence, and the trend of the shape leads the audience’s eye to the hole, trying to explore more things about the project.
The advanced production methods highly increase the development of these high-resolution forms, specifically in this project, spaces between every curve are filled with some X shape. I think the algorithm and fabrication parameters are more integrated with the initial design stage, and then the database served as an information exchange platform.
The way they use digital fabrication explores a new paradigm in architecture, also in a more open manner, which is a good inspiration for future building development.

and here is a link: https://benjamin-dillenburger.com/rocaille/

dynamic drawing

I wanted to explore the spinning of an object and see if I could control it or alter it in some way by using the location of the mouse.

sketch
function setup() {
    createCanvas(400, 400);
    rectMode(CENTER);
}

var g = 5;
var angle = 0;

function draw() {
    background(0);
    var r = g + mouseX
    fill(r, 255, 0);
    // restrict mouseX to 0-400
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0;
    circle(10 + m * 190.0 / 400.0, 200.0,
         size);
    fill(255, 0, r);
    size = 350 - size;
    circle(200 + m * 190.0 / 400.0, 200.0,
         size);
    //heres some confetti yay
    
    var confettiDimention1 = 100;
    var confettiDimension2 = 150;
    var confettiDimension3 = 120;
    var confettiDimension4 = 142;
    var angleSpangle = map(mouseX,0,width,3,300);
    push();
    fill('magenta');
    translate(m / 2,200 + size);
    rotate(radians(angle));
    square(confettiDimention1,confettiDimention1,50);
    fill('green');
    square(confettiDimention1,confettiDimention1,50);
    fill('cyan');
    square(confettiDimension2,confettiDimention1,10);
    square(confettiDimension3,confettiDimension4,30);
    pop();
    angle += angleSpangle;
    //if not then square probably

}

Dynamic Drawing – Meditating Stick Figure

For my project I drew a stick figure that is mediating. There are shapes that come off from the hand. The color, opacity, number of sides, and size of the shape are all dependent on the position of the mouse. The face of the stick figure is also dependent on the mouse.

sketch
//Nakshatra Menon
//Section C 


function setup() {
    createCanvas(450, 600);
    background("white");

}

var size = 30;
var sides1 = 3;
var leftHandX = 84
var leftHandY = 300 
var rightHandX = 401
var rightHandY = 320
var color1 = 255
var color2 = 255
var color3 = 255
var color4 = 255 
var face = 1



function draw() {
    background("black");
    stroke("white");
    strokeWeight(1);
    // carpet 
    color4 = (mouseX)/4
    fill(color4);
    ellipse(232, 430, 438, 176); 

    // stick figure drawings
    noFill(); 
    beginShape();       // left arm
        vertex(233, 244);
        vertex(157, 317);
        vertex(105, 303);
    endShape();
    beginShape();      // right arm 
        vertex(233, 244);
        vertex(315, 324);
        vertex(380, 321);
    endShape(); 
    beginShape();     // body and left leg 
        vertex(235, 214);
        vertex(237, 395);
        vertex(130, 315);
        vertex(194, 374);
        vertex(254, 417);
    endShape(); 
    beginShape();      // right leg 
        vertex(237, 395);
        vertex(354, 326);
        vertex(291, 370);
        vertex(240, 402);
    endShape();     
    beginShape();       
        vertex(232, 408);
        vertex(216, 415);
    endShape();
    ellipse(232, 152, 122, 116); // head
    ellipse(leftHandX, leftHandY, 39, 6) // left hand
    ellipse(rightHandX, rightHandY, 39, 6); //right hand 
    ellipse(201, 415, 24, 6) // left foot
    ellipse(269, 417, 24, 6); //right foot 

    // face if mouse is on left 
    if(face == 1){    
        beginShape();      // right eye 
        curveVertex(177, 140);
        curveVertex(177, 140);
        curveVertex(195, 152);
        curveVertex(214, 145);
        curveVertex(214, 145);
    endShape();
    beginShape();      // right eye 
        curveVertex(243, 147);
        curveVertex(243, 147);
        curveVertex(260, 158);
        curveVertex(279, 152);
        curveVertex(279, 152);
    endShape();
    beginShape();      // smile
        curveVertex(226, 185);
        curveVertex(226, 185);
        curveVertex(246, 188);
        curveVertex(255, 180);
        curveVertex(255, 180);
    endShape();} 

    // face if mouse is on right 
    if(face == 2){   
    fill("white");
    stroke("grey");
    strokeWeight(7);
    ellipse(195, 152, 25, 50);
    ellipse(260, 158, 25, 50);
    strokeWeight(1);
    line(216, 200, 243, 200);
    }

    // face changes w/ mouse 
    if(mouseX <= 240){
        face = 1
    }

    if(mouseX >= 240){
        face = 2
    }


    // sides increase as mouse goes right, size 15-25
    if(mouseX >= 120) {
        sides1 = (mouseX/30)/2
        size = constrain((2*(mouseY/mouseX)*30), 5, 25)
    }

    // if the mouseX is on the left then the shapes are a tri
    if(mouseX < 120) {
        sides1 = 3
        size = 5
    }

    // the color changes based on the position of the mouse 
    color1 = mouseX
    color2=  mouseY
    color3 = (mouseX/mouseY)*2


    //draw shape right   
    fill(color1, color2, color3, mouseY-76);
    polygon(rightHandX-29, rightHandY-71, size , sides1);
    fill(color2, color3, color1, mouseY-113);
    polygon(rightHandX+30, rightHandY-67, size, sides1);
    fill(color3, color1, color2, mouseX-126);
    polygon(rightHandX-51, rightHandY-160, size, sides1);
    fill(color1/2, color2/2, color3/2, mouseY-145);
    polygon(rightHandX+20, rightHandY-201, size, sides1);
    fill(color2/2, color3/2, color1/2, mouseY-187);
    polygon(rightHandX-69, rightHandY-243, size, sides1);
    fill(color3/2, color1/2, color2/2, mouseX-126);
    polygon(leftHandX+54, rightHandY-266, size, sides1);
    line(rightHandX, rightHandY, 320, 214 - (mouseY/3))
    line(rightHandX, rightHandY, 354, 99-(mouseY/3))
    line(rightHandX, rightHandY, 396, 28 -(mouseY/3))
    line(rightHandX, rightHandY, 430, 54-(mouseY-3))
    line(rightHandX, rightHandY, 430, 200-(mouseY-3))

    // draw shape left 
    fill(color1/3, color2/3, color3/3, mouseY-166);
    polygon(leftHandX-3, leftHandY-28, size, sides1);
    fill(color1/3, color2/3, color2/3,mouseY-183);
    polygon(leftHandX-89, leftHandY-97, size, sides1);
    fill(color3/3, color2/2, color1/4, mouseY-114);
    polygon(leftHandX-11, leftHandY-108, size, sides1);
    fill(color3, color1, color2, mouseY-123);
    polygon(leftHandX-63, leftHandY-140, size, sides1);
    fill(color3, color2, color1, mouseX-153);
    polygon(leftHandX-71, leftHandY-223, size, sides1);
    fill(color2, color1, color2, mouseY-123);
    polygon(leftHandX-1, leftHandY-254, size, sides1);
    line(leftHandX, leftHandY, 8, 214 - (mouseY/3))
    line(leftHandX, leftHandY, 8, 99-(mouseY/3))
    line(leftHandX, leftHandY, 68, 28 -(mouseY/3))
    line(leftHandX, leftHandY, 177, 54-(mouseY-3))
    line(leftHandX, leftHandY, 169, 200-(mouseY-3))

// opposite direction  
    // sides increase as mouse goes right 
    if(mouseX <= 400) {
        sides1 = ((width-mouseX)/30)/2
        size = constrain((3*(mouseY)/mouseX), 5, 25)
    }

    // if the mouseX is on the left then the shapes are a tri
    if(mouseX > 400) {
        sides1 = 3
        size = 5
    }
    // draw shape right 
    fill(color3, color3, color1, mouseX-50);
    polygon(rightHandX+3, rightHandY-30, size, sides1);
    fill(color3, color2, color2, mouseY-25);
    polygon(rightHandX+8, rightHandY-79, size, sides1);
    fill(color3, color2, color2, mouseY-46);
    polygon(rightHandX+3, rightHandY-128, size, sides1);
    fill(color1, color1, color2, mouseX-16);
    polygon(rightHandX+12, rightHandY-136, size, sides1);
    fill(color2, color3, color2, mouseY-19);
    polygon(rightHandX-21, rightHandY-201, size, sides1);
    fill(color1, color1, color2, mouseY-32);
    polygon(rightHandX-21, rightHandY-274, size, sides1);

    // draw shape left  
    fill(color1, color2, color3/4, mouseX-240);
    polygon(leftHandX+46, leftHandY-56, size, sides1);
    fill(color3, color1/5, color2, mouseY-32);
    polygon(leftHandX+5, leftHandY-63, size, sides1);
    fill(color3, color2, color1, mouseY-45);
    polygon(leftHandX-40, leftHandY-59, size, sides1);
    fill(color3, color2/3, color2/2, mouseX-98);
    polygon(leftHandX+38, leftHandY-173, size, sides1);
    fill(color3/2, color1, color2/2, mouseY-134);
    polygon(leftHandX-8, leftHandY-170, size, sides1);
    fill(color3, color1/3, color1/2, mouseX-77);
    polygon(leftHandX-63, leftHandY-209, size, sides1);    
}


// needed to draw polygon, got code from https://p5js.org/examples/form-regular-polygon.html
function polygon(x, y, radius, npoints) {
    let angle = TWO_PI / npoints;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius;
    let sy = y + sin(a) * radius;
    vertex(sx, sy);
    }
    endShape(CLOSE);
}

LO week3

http://www.johnedmark.com/

I am so fascinated by John Edmark’s Golden Angle – Bloom (http://www.johnedmark.com/phifib/2016/4/28/blooms-strobe-animated-phi-based-sculptures). The work is by 3d printing, the shape itself is amazing enough, it’s the golden and sweet spot where math and art intersect. The ratio is called phi (ϕ), the same ratio that nature employs to generate the spiral patterns we see in pinecones and sunflowers. 
That reminds me of when I made spirals, the number is so difficult to find, and the most beautiful curve is defined by only a few numbers that I had to test out. Then I got into this rabbit hole: Fermat’s spiral (https://flyingpudding.com/projects/florets/applet/) trying to figure out how the mathematical format is associated with the image. And I feel emotional about how the universe is created in a perfect way and we humans get to study it.

Not only the shape itself of the 3D printing object itself but the way he presents it – a video in which the object spins. I didn’t realize the magic until I looked deep – the object looks smoothly blooming. According to the artist “Rather than using a strobe, the camera was set to a very short shutter speed in order to freeze individual frames of the spinning sculpture. ”By then, the artist adds another dimension to the work – time. And with camera technology, made this magic happen.

project3

sketch
   //Qixin Zhang
   // section E

    var x = 1
    var y = 1
    var angle = 0

function setup() {
    createCanvas(600,600);
        background(0);
  

}


function draw() {
    blendMode(SCREEN);
    translate(width/2,height/2);
  rotate(radians(angle+1))
    //fill(254,32,32);
   // noStroke ();
     // circle (0,0,1);

  
  if (mouseX <width/2 )  {
    
     x = x+0.3;
    y = y+0.3;
    angle = angle +22;
    fill(255,0,0);
    noStroke();
    scale(x/50)
    rotate(radians(angle));
    translate(x,y);
    circle (0,0,20);
    
    
  } else if (mouseX >width/2 ) {
    x = x+0.3;
    y = y+0.3;
    angle = angle -21;
    fill(156,0,0);
    noStroke();
   
    rotate(radians(angle));
    translate(x,y);
    circle (0,0,20);
  }

  
   
  
}

I am fascinated by the spiral, so i used mouseX and mouseY to control the direction of spinning angle

Project 3- Dynamic Drawing

Graham Murtha, Section A

This is a dance routine of some complimentary color orbs.

sketch
// GRAHAM MURTHA
// Section A

let opacity = 100;

var dir = 1
var fill = 50
var angle = 0


function setup() {
    createCanvas(600, 450);
    background(0);
    text("p5.js vers 0.9.0 test.", 10, 15);

}



function draw() {
let x = mouseX;
let y = mouseY;
let ix = width - mouseX;  // Inverted X
let iy = height - mouseY; // Inverted Y
background(0,0,50) // dark blue

//ellipse SET 1
    fill(255,0,255, opacity); //purple
    ellipse(x, height/2, y/2, y/2);

    fill(255,255,0, opacity); //yellow
    ellipse(ix, height/2, iy/2, iy/2);
    
    
    translate(width/2,height/2) //moving origin of rotating orbs to center
    push() ;


//ellipse SET 2
    rotate(radians(angle)+45)
    fill(255,0,255, opacity); //purple
    ellipse(x, height/2, y/2, y/2);
    fill(255,255,0, opacity); //yellow
    ellipse(ix, height/2, iy/2, iy/2);
    pop();
    angle -=.2
    

//ellipse SET 3
    rotate(radians(angle)+90)
    fill(255,0,255, -opacity); //purple
   ellipse(x/2, height/4, y/4, y/4);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/4, iy/4);
    pop();
    angle +=.2


//ellipse SET 4
    rotate(radians(angle)+135)
    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/2, y/2);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/2, iy/2);
    pop();
    angle -=.2

    
//ellipse SET 5
    rotate(radians(angle)+180)
    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/4, y/4);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/4, iy/4);
    pop();
    angle +=.2

//ellipse SET 6
    rotate(radians(angle)+225)

    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/2, y/2);

    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/2, iy/2);

    pop();
    angle -=.2


//ellipse SET 6
    rotate(radians(angle)+225)
    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/4, y/4);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/4, iy/4);
    pop();
    angle +=.2


    //ellipse SET 7
    rotate(radians(angle)+360)
    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/2, y/2);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/2, iy/2);
    pop();
    angle -=.2
}



    
//change in the opacity of the circles
function mouseMoved() {
    opacity = map(mouseX, 0, 300, 600, 50, 255, 50) 
    opacity = map(mouseY, 0, 225, 450, 50, 255, 50) 
}

//As the mouse moves further right and further downwards, the opacity of ALL of the spheres will change

Looking Outwards – 03

I’ll be reviewing a series of kaleidoscope, high-speed camera photos by photographer Linden Glenhill. The series of photos capture water droplets reflecting against an LED Ring light, as they react to the vibration of faraday waves. What I know about the project is that the droplets create complicated oscillating patterns at half the frequency of the oscillating faraday wave, and that the higher the frequency, the more complicated the pattern, this makes sense as the droplets can be seen as a visual representation of the frequency. I really enjoys these kinds of projects as they create literal visualizers for audio, a more abstract sense for humans to comprehend opposed to visuals.

https://parametricworld.tumblr.com/post/175502683288/fuckyeahfluiddynamics-vibrate-a-pool-of-water