Category: SectionD

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

sketchDownload
// Se A Kim
// seak
// Section D

var numLines = 100;

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

function draw() {
    strokeWeight(.5);
    background(255);

    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 200;

    for (var i = 0; i <= numLines; i += 1) {
        stroke(0, 100, 200);
        line(0, i*3, 400, 0);
        line(100, i*3, 400, 0);   
        line(200, i*3, 400, 0);   
        line(300, i*3, 400, 0); 
        stroke(0, 200, 300); 
        line(i*4, 100, 0, 0);
        line(i*4, 200, 0, 0);
        line(i*4, 300, 0, 0);
        line(i*4, 400, 0, 0);
        stroke(300, 200, 300);
        line(400, 300, i*3, 100);
        line(400, 300, i*3, 200);
        line(400, 300, i*3, 300);
        line(400, 300, i*3, 400);
        stroke(300, 200, 100);
        line(0, 300, i*4, 100);
        line(0, 300, i*4, 200);
        line(0, 300, i*4, 300);
        line(0, 300, i*4, 400);

        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }
}

I decided to create multiple lines coming out of the four corners of the canvas to get a better understanding of drawing string lines.

LO 4 – Sound Art

“Multiverse” by fuse works is a real time audiovisual installation that explores the evolution of universes through generative graphics and sounds. A multiverse is a system of infinite number of universes that exist outside our space-time. I admire the artists visual take on the cosmos and their choice of presenting it in a 7.5 meter high vertical projection that is specifically placed inside a deconsecrated church. Interacting with this piece immediately draws the viewer in and one may feel encapsulated by its hypnotic visuals. They used openFrameworks that generates various scenes which interacts with Ableton Live and Max/MSP for the production of the generative sound system. The gravitational collapse of matter theorized by Lee Smolin describes that matter does not end in a singular black hole but through a, “child – universe”. This idea is captured by the simulation’s generative nature that allows the creation of infinite variation of ephemeral images.

Project 04 – String Art

For this project, I wanted to create something in 3D space. I was mainly inspired by the MS-DOS screensavers and the Tron aesthetic that’s popular with vaporwave artists.
There are some actions the user can perform in this. Use the WASD keys to control the size and x position of the left ring, and use the arrow keys to control the right ring.
Note: The wireframe scrolling background acts a little weird when the rings change size.

sketch

// predefine canvas width and height for use in other functions
var w = 600;
var h = 600;

// define variables
var angleCtr = 0;
var circleRX = 200;
var circleLX = -200;
var radRX = 200;
var radLX = 200;
var degOfSymmetry = 36;
var rainbowCtr = 0;
var freq = 0.1;
var zCtr = 0;

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

function draw() {
    background(0);
    // get rainbow function
    var rr = sin(rainbowCtr) * 127 + 128;
    var rg = sin(rainbowCtr + (2*PI/3)) * 127 + 128;
    var rb = sin(rainbowCtr + (4*PI/3)) * 127 + 128;
    c = color(rr, rg, rb);
    strokeWeight(2);

    // 3d projection effectively doubles canvas size, 0, 0, z is now the center
    // of the canvas

    // make ring 1 in xyz coords
    var centerY = 0; // canvas centers now different
    var centerZ = 1000; // z == 0 is in the camera's "face"
    var distX = circleRX - circleLX;
    let ringOne = [];

    for (i = 0; i < degOfSymmetry; i++) {
        var loopAngle = radians(angleCtr) - (i * 2*PI / degOfSymmetry)
        var tZ = centerZ + radLX * cos(loopAngle);
        var tY = centerY + radLX * sin(loopAngle);
        ringOne.push([circleLX, tY, tZ]);
    }

    // make ring 2 in xyz coords
    let ringTwo = [];

    for (i = 0; i < degOfSymmetry; i++) {
        var loopAngle = radians(-angleCtr) + (i * 2*PI / degOfSymmetry)
        var tZ = centerZ + radRX * cos(loopAngle);
        var tY = centerY + radRX * sin(loopAngle);
        ringTwo.push([circleRX, tY, tZ]);
    }

    // project to xy
    let rOProj = [];
    let rTProj = [];

    for (let i = 0; i < ringOne.length; i++) {
        rOProj.push(projMatrixMult(ringOne[i]));
    }
    for (let i = 0; i < ringTwo.length; i++) {
        rTProj.push(projMatrixMult(ringTwo[i]));
    }

    // this scales the image to be on screen
    for (let i = 0; i < rOProj.length; i++) {
        rOProj[i][0] += 1;
        rOProj[i][1] += 1;

        rOProj[i][0] *= w / 2;
        rOProj[i][1] *= h / 2;
    }
    for (let i = 0; i < rTProj.length; i++) {
        rTProj[i][0] += 1;
        rTProj[i][1] += 1;

        rTProj[i][0] *= w / 2;
        rTProj[i][1] *= h / 2;
    }

    // draw squares for perspective reference
    dLX = radLX * 2;
    dRX = radRX * 2;
    for (let i = 0; i < 50; i++) {
        stroke("purple");
        drawTestCube(circleLX, -radLX, (i * dLX) - zCtr, 0, dLX, dLX);
        drawTestCube(circleRX, -radRX, (i * dRX) - zCtr, 0, dRX, dRX);
        drawTestCube(circleLX, -radLX - dLX, (i * dLX) - zCtr, 0, dLX, dLX);
        drawTestCube(circleRX, -radRX - dRX, (i * dRX) - zCtr, 0, dRX, dRX);
        drawTestCube(circleLX, radLX, (i * dLX) - zCtr, 0, dRX, dLX);
        drawTestCube(circleRX, radRX, (i * dRX) - zCtr, 0, dRX, dRX);
        drawTestCube(circleLX, -radLX - dLX, (i * dLX) - zCtr, distX, 0, dLX);
        drawTestCube(circleLX, radLX + dLX, (i * dRX) - zCtr, distX, 0, dRX);
    }

    // draw line between top-bottom, left-right pairs
    for (let i = 0; i < (rOProj.length + rTProj.length) / 2; i++) {
        fill(c);
        stroke(c);
        circle(rOProj[i][0], rOProj[i][1], 5);
        circle(rTProj[i][0], rTProj[i][1], 5);
        line(rOProj[i][0], rOProj[i][1], rTProj[i][0], rTProj[i][1]);
    } 

    // allow user to control ring shape and size
    if (keyIsPressed) {
        // left ring
        if (key == "w") {
            radLX++;
        }
        if (key == "s") {
            radLX--;
        }
        if (key == "a") {
            circleLX--;
        }
        if (key == "d") {
            circleLX++;
        }
        
        // right ring
        if (keyCode == UP_ARROW) {
            radRX++;
        }
        if (keyCode == DOWN_ARROW) {
            radRX--;
        }
        if (keyCode == LEFT_ARROW) {
            circleRX--;
        }
        if (keyCode == RIGHT_ARROW) {
            circleRX++;
        }
    }
    
    // increment any counters
    angleCtr = (angleCtr + 1) % 360;
    rainbowCtr = (rainbowCtr + freq) % (2*PI); 
    zCtr = (zCtr + 5) % max(dLX, dRX);
}

// disable normal browser key functions when focused
function keyPressed() {
    return false;
}

// uses projection matrix seen in this video:
// https://www.youtube.com/watch?v=ih20l3pJoeU
// the video is mostly math about projecting 3d coordinates to 2d coordinates
function projMatrixMult(coords) {
    // aspect ratio
    var a = w / h;

    // field of view
    var fov = QUARTER_PI;
    f = 1 / tan(fov / 2);

    // range of view
    var zNear = 0.1;
    var zFar = 1000;

    var q = zFar / (zFar - zNear);

    if (coords.length != 3) {
        print("Improper array size.");
        return coords;
    } else {
        // this calculates the result of multiplying [x, y, z, 1]
        // with a 4x4 projection matrix (not shown for lack of use without
        // the math.js extension)
        let projMat = [a * f * coords[0], f * coords[1], 
                       coords[2] * q - zNear * q, coords[2]];
        
        if (coords[2] != 0) {
            projMat[0] /= projMat[3];
            projMat[1] /= projMat[3];
            projMat[2] /= projMat[3];
            projMat[3] /= projMat[3];
            return projMat;
        } else {
            print("z is equal to 0");
            return coords;
        }
    }
}

// self explanatory
function drawTestCube(x, y, z, wid, hei, d) {
    // push 3d coords to an array
    let cubePoints3D = [];
    cubePoints3D.push([x, y + hei, z]); // front bottom left
    cubePoints3D.push([x, y, z]); // front top left
    cubePoints3D.push([x + wid, y + hei, z]); // front bottom right
    cubePoints3D.push([x + wid, y, z]); // front top right
    cubePoints3D.push([x, y + hei, z + d]); // back bottom left
    cubePoints3D.push([x, y, z + d]); // back top left
    cubePoints3D.push([x + wid, y + hei, z + d]); // back bottom right
    cubePoints3D.push([x + wid, y, z + d]); // back top right

    // get projection and add to list of points
    let cubeProj = [];
    for (let i = 0; i < cubePoints3D.length; i++) {
        cubeProj.push(projMatrixMult(cubePoints3D[i]));
    }

    // this scales the image to be on screen
    for (let i = 0; i < cubeProj.length; i++) {
        cubeProj[i][0] += 1;
        cubeProj[i][1] += 1;

        cubeProj[i][0] *= w / 2;
        cubeProj[i][1] *= h / 2;
    }

    // i'm almost certain there's a way this can be done with a for loop
    // but this is fine for a small project
    line(cubeProj[0][0], cubeProj[0][1], cubeProj[1][0], cubeProj[1][1]);
    line(cubeProj[6][0], cubeProj[6][1], cubeProj[7][0], cubeProj[7][1]);
    line(cubeProj[0][0], cubeProj[0][1], cubeProj[2][0], cubeProj[2][1]);
    line(cubeProj[0][0], cubeProj[0][1], cubeProj[4][0], cubeProj[4][1]);
    line(cubeProj[1][0], cubeProj[1][1], cubeProj[5][0], cubeProj[5][1]);
    line(cubeProj[1][0], cubeProj[1][1], cubeProj[3][0], cubeProj[3][1]);
    line(cubeProj[2][0], cubeProj[2][1], cubeProj[3][0], cubeProj[3][1]);
    line(cubeProj[2][0], cubeProj[2][1], cubeProj[6][0], cubeProj[6][1]);
    line(cubeProj[3][0], cubeProj[3][1], cubeProj[7][0], cubeProj[7][1]);
    line(cubeProj[4][0], cubeProj[4][1], cubeProj[5][0], cubeProj[5][1]);
    line(cubeProj[4][0], cubeProj[4][1], cubeProj[6][0], cubeProj[6][1]);
    line(cubeProj[5][0], cubeProj[5][1], cubeProj[7][0], cubeProj[7][1]);
}

Project 04: String Art

sketch
//Jessie Chen
//D
//String Art

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

function draw() {
    background(0);
    var x1 = width/2;
    var y1 = height/2;
    //center white
    stroke(255);
    strokeWeight(0.1);
    radius = mouseX;
    for (angle = 0; angle <360; angle=angle+ 5) {
        x = cos(radians(angle)) * radius + 200; 
        y = sin(radians(angle)) * radius + 150;
        line(x1, y1, x , y);
    }
    //bottom right green
    stroke(24, 200, 90);
    strokeWeight(0.3)
    radius = mouseY;
    for (angle = 0; angle <360; angle=angle+ 3) {
        x = cos(radians(angle)) * radius + 300;
        y = sin(radians(angle)) * radius + 200;
        line(x1, y1, x , y);
    }
    //top left yellow
    stroke(240, 200, 90);
    strokeWeight(0.3)
    radius = mouseY;
    for (angle = 0; angle <360; angle=angle+ 3) {
        x = cos(radians(angle)) * radius + 100;
        y = sin(radians(angle)) * radius + 100;
        line(x1, y1, x , y);
    }
    //top right red
    stroke(200, 40, 90);
    strokeWeight(0.3)
    radius = mouseX;
    for (angle = 0; angle <360; angle=angle+ 5) {
        x = cos(radians(angle)) * radius + 300;
        y = sin(radians(angle)) * radius + 100;
        line(x1, y1, x , y);
    }
    //bottom left blue
    stroke(10, 40, 190);
    strokeWeight(0.3)
    radius = mouseX;
    for (angle = 0; angle <360; angle=angle+ 5) {
        x = cos(radians(angle)) * radius + 100;
        y = sin(radians(angle)) * radius + 200;
        line(x1, y1, x , y);
    }
    //top center pink
    stroke(255, 138, 200);
    strokeWeight(0.3)
    radius = mouseX;
    for (angle = 0; angle <360; angle=angle+ 20) {
        x = cos(radians(angle)) * radius + 200;
        y = sin(radians(angle)) * radius + 100;
        line(x1, y1, x , y);
    }
    //bottom center purple
    stroke(160, 0, 255);
    strokeWeight(0.3)
    radius = mouseY;
    for (angle = 0; angle <360; angle=angle+ 20) {
        x = cos(radians(angle)) * radius + 200;
        y = sin(radians(angle)) * radius + 200;
        line(x1, y1, x , y);
    }
}

This was inspired by lasers and how they look when they are projected.

LO: Sound Art

Meandering River (2018) by onformative

One particular sound art project I find interesting is the Meandering River, created from a collaboration between onformative and Funkhaus Berlin. Meandering River is an audiovisual art installation made from real-time generated visuals and music composed by an A.I. The Meandering River is a captivating and vibrant landscape that imitates the flow of rivers and how they shape the natural landscape. Based on a custom-made code, the music constantly reinterprets river patterns and changes into sound. The installation brings awareness to the beauty of nature and its complexity in how impactful small changes can be over time. The music and visuals are engaging, pulling the audience into an emotional experience.

Meandering River (2018) by onformative: https://onformative.com/work/meandering-river

LO4 – Sound Art

As a musician who plays music for fun, I have an interest in the production of music as well as DAWs and loop creators. When I saw The Prouduct’s project, “Soundmachines, Creative Sound Production Device,” I was immediately fascinated. It’s a live loop creator that uses three turntables to create musical loops. It seems that it operates based on reflective input at the turntable’s “needle.” When a specific light intensity, or possibly color is reflected back into the needle, a program will play an expected sound. For example, the middle turntable manages bass kicks and hi hats, possibly a snare drum as well but the blue strip was never explicitly shown. The right handles an electronic clicking in a certain rhythm, while the left handles a filter effect on some wave function. I think that the final result of a modern-esque turntable was created more for the creator’s aesthetics than the practicality of the piece, as any loop generator can simply use button toggles. However, I appreciate the turntable design, as it gives a visualization to the loop that is being created.

Video of the project in use.

Project 04 – String Art

In making this I was inspired by the motion artist / music producer Dedouze.

sketch
//First line art
var dx1;
var dy1;
var dx2;
var dy2;

//Second line art
var dx3;
var dy3;
var dx4;
var dy4;

//Third line art
var dx5;
var dy5;
var dx6;
var dy6;

//Fourth line art
var dx8;
var dy8;
var dx9;
var dy9;

var numLines = 50;
var numLines2 = 20;
var numLines3 = 60;
var numLines4 = 40;
function setup() {
    createCanvas(400, 300);
    background(100, 105, 200);

    //First line art placement
    line(0, 0, 0, 300);
    line(0, 300, 350, 300);

    //Second line art placement
    line(0, 300, 150 ,300);
    line(400, 300, 400, 240);

    //Third line art placement
    line(0, 300, 400, 300);
    line(400, 300, 400, -100);

    //Fourth line art placement
    line(-50, 0, 0, 400);
    line(450, 40, 400, -400);

    //First line art deltas
    dx1 = (0 - 0)/numLines;
    dy1 = (300 - 0)/numLines;
    dx2 = (350 - 0)/numLines;
    dy2 = (300 - 300)/numLines;

    //Second line art deltas
    dx3 = (150 - 0)/numLines2;
    dy3 = (300 - 300)/numLines2;
    dx4 = (400 - 400)/numLines2;
    dy4 = (240 - 300)/numLines2;

    //Third line art deltas
    dx5 = (400 - 0)/numLines3;
    dy5 = (300 - 300)/numLines3;
    dx6 = (400 - 400)/numLines3;
    dy6 = (-100 - 300)/numLines3;

    //Fourth line art deltas
    dx7 = (0 - -50)/numLines4;
    dy7 = (400 - 0)/numLines4;
    dx8 = (400 - 450)/numLines4;
    dy8 = (-400 - 40)/numLines4;

}

function draw() {
    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 300;

    var x3 = 0;
    var y3 = 300;
    var x4 = 400;
    var y4 = 300;

    var x5 = 0;
    var y5 = 300;
    var x6 = 400;
    var y6 = 300;

    var x7 = -50;
    var y7 = 0;
    var x8 = 450;
    var y8 = 400;


    stroke(245, 255, 184);
    for (var i = 0; i <= numLines4; i += 1) {
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 += dx8;
        y8 += dy8;
    }

    stroke(254, 189, 255);
    for (var i = 0; i <= numLines3; i += 1) {
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }
    stroke(191, 255, 251);
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

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

Project 04 – String Art

string art string art string art string art string art string art s-

stringartstringart
//Iris Yip
//15104 Section D

var numLines = 300;

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

function draw(){
    background(0);
    var x1 = -9;
    var y1 = -9;
    var x2 = width;
    var y2 = height;

    for(var i = 0; i <= numLines; i += 1) {     
        stroke(i,mouseX,300);
        line(mouseX-50, y1*i, x2*i, y2*i);
        line(x1*i,mouseY,x2*i,y2*i);     
        
        stroke(200,i,300);
        line(x2,0,mouseX,mouseY)
        line(0,0,mouseX,mouseY)
        
        stroke(255,mouseX,mouseY) //conglomerate of lines to the left
        line(x1*i,x2/2+100,mouseX,mouseY)
        line(x1*i,x1/2-100,mouseX,mouseY)
        
        stroke(mouseX,100,mouseY) //height/2 thing
        line(i*100,y2/2-300,mouseX,mouseY)
        line(i*3,y2/2,mouseX,mouseY)
    }
}

this was fun