Month: September 2020

LO-04 GENERATIVE MUSIC

Music in today’s environment can be digitally manipulated to create certain sounds. Computational systems and digital generation of music has allowed sound to transform into anything the artist intends for it to be and can create new ways of human expression. An artist I admire in this field of music is Billie Eilish and Finneas. These artists are able to interact and communicate with other artists who may be able to mix or distort sounds according to notes.
In Bad Guy by Billie and Finneas O’Connell, the mix session contains 68 tracks, 49 of which are audio tracks. The mix template and stems are loaded into Pro Tools where the mix is produced. The remaining tracks are drums, percussion, bass, and synth tracks. The aux tracks in the background are also run For the vocals in the song, they are grouped together and are then put through Waves PuigChild 670 plug-in which compresses all vocals. The vocals are smoothed out and are dynamicized and then put through another plug-in called Waves De-Esser to add more variety and color to the track. Through these digital means of transforming sound data to a certain style, Billie and Finneas are able to provide new ways of human expression and are testing limits of what music is and can be.

Billie & Finneas O’Connell

FINNEAS Explains How He Builds Songs For Billie Eilish | Critical Breakthroughs
Pitchfork
https://www.youtube.com/watch?v=FsSkRjgjFvU&t=290s

Billie Eilish and Finneas Break Down Her Hit Song ‘Bad Guy’
Rolling Stone
https://www.youtube.com/watch?v=kpx2-EMfdbg

Project-04

sketch
var x1 = 0
var x2 = 0
var y1 = 0
var y2 = 300

var dx3;
var dy3;
var dx4;
var dy4;
numLines = 80;

var dx5;
var dy5;
var dx6;
var dy6;


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

function draw() {
	background(66, 245, 236);

	stroke(255); //white background lines
	for (var p = 0; p <= 400; p += 10) {
		line(p, 0, 1.5*p, 300);
		line(1.5*p, 0, p, 300);
	}
    
    stroke(245, 66, 173); //top left pink lines
    for (x1 = 0; x1 <= 400; x1 +=10) {
    	line(x1, y1, x2, y2);
        y2 -= 10;
    }

    push();
    translate(400, 0); //top right pink lines
    rotate(radians(180));
    for (x1 = 0; x1 <= 400; x1 += 5) {
    	line(x1, y1, x2, y2-200);
    	y2 += 5
    }
    pop();
    
    stroke(0, 150, 0); //green triangle
    line(330, 100, 100, 300);
    line(330, 100, 320, 300);
    dx3 = (100-330)/numLines;
    dy3 = (300-100)/numLines;
    dx4 = (320-330)/numLines;
    dy4 = (300-100)/numLines;

    var x3 = 330;
    var y3 = 100;
    var x4 = 330;
    var y4 = 100;
    for (var i = 0; i <= numLines; i+=1) {
    	line(x3, y3, x4, y4);
    	x3 += dx3;
    	y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }

    stroke (255, 0, 255); //purple triangle
    line(60, 100, 275, 300);
    line(60, 100, 70, 300);
    dx5 = (275-60)/numLines;
    dy5 = (300-100)/numLines;
    dx6 = (70-60)/numLines;
    dy6 = (300-100)/numLines;

    var x5 = 60;
    var y5 = 100;
    var x6 = 60;
    var y6 = 100;
    for (var j = 0; j <= numLines; j+=1) {
    	line(x5, y5, x6, y6);
    	x5 += dx5;
    	y5 += dy5;
    	x6 += dx6;
    	y6 += dy6;
    }

  
    noLoop();
    

}

I had a color scheme in mind when I started, then I tried messing around with different shapes and line spacing, and this is what I came up with.

Project 04

sketch
var ndx1;
var ndy1;
var ndx2;
var ndy2;

var numLines = 100;
var r = 255;
var g = 20;
var b = 150;
var n1xstart = 0;   //shape u, first line, x value of first point, etc
var n1ystart = 0;   //just variables to make values easier to change
var n1xstop = 100;
var n1ystop = 400;

var n2xstart = 300;   //same but second line
var n2ystart = 400;
var n2xstop = 400;
var n2ystop = 0;

var u1xstart = 100;   //same variables but for u shape 
var u1ystart = 0;   
var u1xstop = 0;
var u1ystop = 400;

var u2xstart = 400;  
var u2ystart = 400;
var u2xstop = 300;
var u2ystop = 0;

var t1xstart = 100;  
var t1ystart = 0;   
var t1xstop = 150;
var t1ystop = 400;

var t2xstart = 250;  
var t2ystart = 400;
var t2xstop = 300;
var t2ystop = 0;

var s1xstart = 175;  
var s1ystart = 0;   
var s1xstop = 100;
var s1ystop = 400;

var s2xstart = 300;  
var s2ystart = 400;
var s2xstop = 225;
var s2ystop = 0;


function setup() {
    createCanvas(400, 400);
    background(0);
    stroke(r, g, b);
    //line(n1xstart, n1ystart, n1xstop, n1ystop);
    //line(n2xstart, n2ystart, n2xstop, n2ystop);
    
  
    ndx1 = (n1xstop-n1xstart)/numLines;    // n shape distance
    ndy1 = (n1ystop-n1ystart)/numLines;
    ndx2 = (n2xstop-n2xstart)/numLines;
    ndy2 = (n2ystop-n2ystart)/numLines;
    
    udx1 = (u1xstop-u1xstart)/numLines;    // u shape distance
    udy1 = (u1ystop-u1ystart)/numLines;
    udx2 = (u2xstop-u2xstart)/numLines;
    udy2 = (u2ystop-u2ystart)/numLines;

    tdx1 = (t1xstop-t1xstart)/numLines;    // t shape distance
    tdy1 = (t1ystop-t1ystart)/numLines;
    tdx2 = (t2xstop-t2xstart)/numLines;
    tdy2 = (t2ystop-t2ystart)/numLines;

    sdx1 = (s1xstop-s1xstart)/numLines;    // s shape distance
    sdy1 = (s1ystop-s1ystart)/numLines;
    sdx2 = (s2xstop-s2xstart)/numLines;
    sdy2 = (s2ystop-s2ystart)/numLines;
}

function draw() {
        var nx1 = n1xstart;
        var ny1 = n1ystart;
        var nx2 = n2xstart;
        var ny2 = n2ystart;
       
        var ux1 = u1xstart;
        var uy1 = u1ystart;
        var ux2 = u2xstart;
        var uy2 = u2ystart;

        var tx1 = t1xstart;
        var ty1 = t1ystart;
        var tx2 = t2xstart;
        var ty2 = t2ystart;

        var sx1 = s1xstart;
        var sy1 = s1ystart;
        var sx2 = s2xstart;
        var sy2 = s2ystart;
    
    for (var i = 0; i <= numLines; i += 1) {   //shape u
          
          stroke(r, g, b);
          line(ux1, uy1, ux2, uy2);
          ux1 += udx1;
          uy1 += udy1;
          ux2 += udx2;
          uy2 += udy2;
          r -= 2;        //color changes as lines progress
          g += 1;
          b += 3;
    }
    r = 25;
    g = 50;
    b = 220;
    for (var i = 0; i <= numLines; i += 1) {   //shape n
        
        stroke(r, g, b);
        line(nx1, ny1, nx2, ny2);
        nx1 += ndx1;
        ny1 += ndy1;
        nx2 += ndx2;
        ny2 += ndy2;
        r += 4;
        g += 2;
        b -= 3;
    }
    for (var i = 0; i <= numLines; i += 1) {   //shape t
        
        stroke(255);
        line(tx1, ty1, tx2, ty2);
        tx1 += tdx1;
        ty1 += tdy1;
        tx2 += tdx2;
        ty2 += tdy2;
        
    }
    for (var i = 0; i <= numLines; i += 1) {   //shape s
        
        stroke(255);
        line(sx1, sy1, sx2, sy2);
        sx1 += sdx1;
        sy1 += sdy1;
        sx2 += sdx2;
        sy2 += sdy2;
        
    }
    
    noLoop();
}

LO 04 – What do machines sing of?

“What do machines sing of?” is an art piece by Martin Backes, an artist, technologist, and self-described hacker. The piece consists of a microphone placed in front of a standing computer monitor that uses a computer program to reproduce popular ballads from the 1990s. It was created in 2015.

I chose this piece because it deals with voice and language in an interesting way. The piece raises questions about the increasing capability of technology to perform inherently human tasks, but it also says something about our capacity to personify technology. While the program works to imitate a human voice through blatantly digital sounds, our perceptions work to interpret those sounds as such; thus, the program and the viewer work together to create the music. 

String Art

sketchDownload
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
//I think these are the distance variables between where each line is drawn
var numLines = 30

function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    line(10, 10, 50, 290);
    line(140, 10, 100, 290);
    line(260, 10, 300, 290);
    line(390, 10, 350, 290);
    dx1 = (50-10)/numLines;
    dy1 = (290-10)/numLines;
    dx2 = (100-140)/numLines;
    dy2 = (10-290)/numLines;
    dx3 = (10-295)/numLines
    dy3 = (150-260)/numLines
    dx4 = (105-390)/numLines
    dy4 = (260-150)/numLines
}

function draw() {
	var x1 = 10;
	var y1 = 10;
	var x2 = 300;
	var y2 = 290;
	var x3 = 390;
	var y3 = 10;
	var x4 = 100;
	var y4 = 290;
	var x5 = 10;
	var y5 = 40;
	var x6 = 390;
	var y6 = 40;
	var x7 = 10;
	var y7 = 260;
	var x8 = 390;
	var y8 = 260;
	for (var i = 0; i <= numLines; i += 1) {
		line(x1, y1, x2, y2);
		x1 += dx1;
		y1 += dy1;
		x2 += dx2;
		y2 += dy2;
		line(x3, y3, x4, y4);
		x3 -= dx1;
		y3 += dy1;
		x4 -= dx2;
		y4 += dy2;
		line(x5, y5, x6, y6);
		x5 += dx3;
		y5 -= dy3;
		x6 -= dx4;
		y6 -= dy4;
		line(x8, y8, x7, y7);
		x7 += dx3;
		y7 -= dy3;
		x8 -= dx4;
		y8 -= dy4;
	}
	noLoop();
	//to be fully honest, I don't get what's going on here so I can't really comment my code.
}

Singing Monsters

Looking Outwards 4 – Sound Art

I chose a project by WIARNE01 entitled “My Singing Monsters.” It was created by a student of Jared O’Leary, who specializes in combining computer science and music education. I admire this project because it was created by a kid!! And it feels like I can understand the way this project works. Also the monsters they used are really cute. It was created using Scratch, a block-based programming language. When you press any of the arrow keys, it takes you to a visual of a new monster and adds that monster’s music to the cacophany. There are also a couple of on screen keys to stop the music.

https://scratch.mit.edu/projects/86391365/

Project – 04 – string art

project 04
// Rouann Chen
// rouanc
// Section B

var angle;
var pos;
var side;

function setup() {
  side = 60;
  createCanvas(400, 400);
  angle = 0;
  pos = p5.Vector.fromAngle(0);
  setRadius();
}

function setRadius() {
  var m = min(width, height);
  var radius = m/2-side*0.6;
  pos.setMag(radius);
}

function drawRect(pos) {
  push();
  translate(pos.x, pos.y);
  rotate(angle);
  rect(-side/2, -side/2, side, side);
  pop();
}

function draw() {
  translate(width/2, height/2);
  drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));
  drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));
  drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));
  drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));
  drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));

  angle += 0.029;
  pos.rotate(sin(angle)/40);

}

I was inspired by snakes and wanted to draw something that moves infinitely. Instead of using lines, I tried to use endless rectangles connected together to represent a single line.

Project-04-String Art

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

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

    // x1, x2, endx1, endx2
    line(50, 50, 150, 300);
  
    // y1, y2, endy1, endy2
    line(300, 300, 350, 100);
  
    //endx1 - x1/numlines
    dx1 = (150-50)/numLines;
  
    //endx2 - x2/numlines
    dy1 = (300-50)/numLines;
  
    //endy1 - y1/numlines
    dx2 = (350-300)/numLines;
  
    //endy2 - y2/numlines
    dy2 = (100-300)/numLines;
    
}

function draw() {
    background(255, mouseX, mouseY);
    var x1 = 50;
    var y1 = 50;
    var x2 = 300;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //noLoop();
  
  stroke(255,0,0);
  var x11 = 50;
    var y11 = 50;
    var x22 = 300;
    var y22 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //noLoop();
  
  stroke(0,255,0);
    var x113 = 50;
    var y113 = 50;
    var x223 = 300;
    var y223 = 300;
    for (var i = 0; i <= 50; i += 1) {
        line(x223, y223, x113, y11);
        x113 += dx1;
        y113 += dy1;
        x223 += dx2;
        y223 += dy2;
    }
    //noLoop();

    for(var y = 0; y<=300; y+=15){
    	stroke(mouseX, mouseY,40);
    	line(y,0,400,y);
    	stroke(mouseY,mouseX,200);
    	line(0,y,y-5,300);

    }
  

}

LO: Algorithmic Music Video

For this weeks LO, I looked into how computational softwares + algorithms could be incorporated into art that combines both visual and sonic elements.

I came across the music video for Howler Monkey by German duo Meier and Erdmann. The video itself was created by Victor Doval, a visual artist, that developed an algorithm that tracks the frequencies in the song to generate an ever-changing landscape.

Image from Victor Doval’s website visualizing his working process for the video.

I felt that this work was especially intriguing because it comments on the human perception of music. Although music and sound can have lasting effects and influences on our lives, the experience of listening is inherently an extremely temporal process.

Doval’s visual interpretation of how we are forever impacted by any sound/song we encounter and engage with while each passing second is temporary through a generative landscape begins to question the purpose of art in our lives. By using algorithm and software to help situate the listener in a virtual (and visual) space, Doval allows us to question why we seek art (in all forms and mediums) when inherently, each fleeting moment with the pieces are so temporal; do we seek immediate pleasure, or hope to grow with each time?

PROJECT-04 (string art)

sketch
// SEAN CHEN
// 15-104 A

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

function draw() {
    var colX = map(mouseX, 0, width, 0, 250);
    var colY = map(mouseY, 0, height, 0, 250);
    // map mouse pos to color range val
    var bgCol = color(colX, colY, 125); // background color
    var cirCol = color(colY, colY, 125); // variable obj color
    background(bgCol);

    push(); // center diamond backround blob
    noStroke();
    fill(cirCol);
    beginShape();
    curveVertex(mouseX/2, mouseY);
    curveVertex(mouseX, mouseY/2);
    curveVertex(mouseX+(width-mouseX)/2, mouseY);
    curveVertex(mouseX, mouseY+(height-mouseY)/2);
    curveVertex(mouseX/2, mouseY);
    curveVertex(mouseX, mouseY/2);
    curveVertex(mouseX+(width-mouseX)/2, mouseY);
    endShape();
    pop();

    for (var i = 0; i < 25; i ++) { // border + diamond line art
        // border
        let x1 = map (i, 0, 25, mouseX, width); // mid to right vals (x)
        let y1 = map (i, 0, 25, 0, mouseY); // top to mid vals (y)
        let x2 = map (i, 0, 25, 0, mouseX); // left to mid vals (x)
        let y2 = map (i, 0, 25, mouseY, height); // mid to bottom vals (y)

        // center diamond
        let x1s = map (i, 0, 25, mouseX/2, mouseX);
        // half from leftside to mouse
        let y1s = map (i, 0, 25, mouseY, mouseY+(height-mouseY)/2);
        // half from bottomside to mouse
        let x2s = map (i, 0, 25, 0, mouseX/2);
        // left to half of mouse
        let y2s = map (i, 0, 25, mouseY/2, mouseY);
        // half from topside to mouse
        let x3s = map (i, 0, 25, mouseX, mouseX+(width-mouseX)/2);
        // half from rightside to mouse
        let y3s = map (i, 0, 25, mouseY+(height-mouseY)/2, mouseY);
        // half from left to mouse
        
        // border
        line (x1, 0, width, y1); // top right
        line (width, y2, width-x2, height); // bottom right
        line (0, y2, x2, height); // bottom left
        line (width-x1, 0, 0, y1); // top left

        // diamond
        line (x1s, mouseY, mouseX, y1s); // top left
        line (mouseX, y2s, mouseX-x2s, mouseY); // top right
        line (mouseX, y2s, x3s, mouseY); // bottom right
        line (mouseX, y3s, x3s, mouseY); // bottom left
        line (mouseX, mouseY, mouseX+(width-mouseX)/2, mouseY)
        // xtra line from cent to right
    }
}