Category: SectionD

Project-04: String Art

sketch
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 100;//number of lines

function setup() {
    createCanvas(400, 300);
    background(158,216,238);
}

function draw() {
    stroke("blue");
    line(20, 30, 300, 280);//first line
    line(350, 300, 400, 0);//second line
    dx1 = (300-20)/numLines;//x coordinate on the first line
    dy1 = (280-30)/numLines;//y coordinate on the first line
    dx2 = (400-350)/numLines;//x coordinate on the second line 
    dy2 = (0-300)/numLines;//y coordinate on the second line

    var x1 = 20;
    var y1 = 30;
    var x2 = 350;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);//150 lines between the 2 lines
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }


    line(0, 0, 50, 400);//thrid line
    line(100,250,380, 30);//fourth line
    dx3 = 50/numLines;//x coordinate on the third line
    dy3 = 400/numLines;//y coordinate on the third line
    dx4 = (380-100)/numLines;//x coordinate on the fourth line 
    dy4 = (30-250)/numLines;//y coordinate on the fourth line

    var x3 = 0;
    var y3 = 0;
    var x4 = 100;
    var y4 = 250;
    for (var i = 0; i <= numLines; i += 1) {
        line(x3, y3, x4, y4);//150 lines between the 2 lines
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }


    stroke(29,169,200);
    line(50, 200, 300, 300);//5th line
    line(360, 300, 400, 100);//6th line
    dx5 = (300-50)/numLines;//x coordinate on the 5th line
    dy5 = (300-200)/numLines;//y coordinate on the 5th line
    dx6 = (400-360)/numLines;//x coordinate on the 6th line 
    dy6 = (100-300)/numLines;//y coordinate on the 6th line

    var x5 = 50;
    var y5 = 200;
    var x6 = 360;
    var y6 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x5, y5, x6, y6);//150 lines between the 2 lines
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }

    noLoop();
}

I created an abstract image of waves using the technique of string art. It captures the essence of ocean waves and gives the audience a feeling of fluidity.

lo: sound art

Rather than one specific project, I’d like to talk about a genre that’s very dependent on digital production to experiment and push the boundaries of music. Hyperpop is a fairly new genre in mainstream culture and is defined by its exaggerated and dramatic nature compared to contemporary pop music. Many of my personal favorite songs include larger than life basslines, quirky sound effects, and almost nonsensical lyrics, if any. Much of this experimentation is possible due to digital workstations and tools, making and mixing sounds that would not naturally happen in traditional music. Certain artists, like SOPHIE, also viewed music making as an entirely different process than people of the past would have. She described her process as something similar to building a sculpture – where each sound mimicked a certain material and sensation. While there isn’t one specific way these artists generate music, I think this subculture encapsulates how the advent of technology in the musical space has broadened their possibilities.

24HRS by ITZY – produced by hyperpop artist SOPHIE

project 4: string art

I made my piece about flowers. I used functions to be able to place flowers wherever I want on the canvas, although there are only two right now

flower string art
// isis berymon section D
var dx;
var dy;
var numLines;


function setup() {
    createCanvas(400, 300);
    background(84, 111, 82); //green
}

function draw() {
    //center flower
    stroke(134, 190, 243); //light blue
    petal(150, 100, 250, 100, 200, 150);
    petal(250, 100, 250, 200, 200, 150);
    petal(250, 200, 150, 200, 200, 150);
    petal(150, 100, 150, 200, 200, 150);
    stroke(144, 115, 245); //light purple
    petal(125, 75, 175, 75, 200, 150);
    petal(125, 75, 125, 125, 200, 150);
    petal(225, 75, 275, 75, 200, 150);
    petal(275, 75, 275, 125, 200, 150);
    petal(275, 175, 275, 225, 200, 150);
    petal(275, 225, 225, 225, 200, 150);
    petal(175, 225, 125, 225, 200, 150);
    petal(125, 225, 125, 175, 200, 150);
    flowerCenter(200, 150);
    //right flower
    stroke(134, 190, 243); //light blue
    petal(350, 0, 400, 50, 400, 0);
    stroke(144, 115, 245); //light purple
    petal(300, -25, 350, 25, 400, 0);
    petal(375, 50, 425, 75, 400, 0);
    flowerCenter(400, 0);
    noLoop();
}

function flowerCenter(x, y) {
    stroke(245, 231, 115); //light yellow
    numLines = 50;
    for(var i = 0; i <= numLines; i++){
        push();
        translate(x, y);
        rotate(radians(i*360/numLines)) // draws lines in a circle
        line(0, 0, 0, 25);
        pop();
    }
}

function petal(x1, y1, x2, y2, centerX, centerY) {
    numLines = 10;
    dx = (x2-x1)/numLines;
    dy = (y2-y1)/numLines;
    var drawX1 = x1;
    var drawY1 = y1;
    for(var i = 0; i <= numLines; i++){
        line(drawX1, drawY1, centerX, centerY); //lines all come from center
        drawX1 += dx;
        drawY1 += dy;
    }
}

Project-04

line art frank

var numLines = 30

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


function draw() {

//top rock thing
    eastern(150,0,0,0, 0,0,0,50, 20)        //left top 
    eastern(150,0,300,0, 300,0,300,50, 20)      //left bottom
    eastern(0,50,0,100, 0,100,150,100, 20)      //right top
    eastern(300,50,300,100, 300,100,150,100, 20)        //right bottom
//middle rock thing

    eastern(150,100,-150,150, -150,150,150,200, 20) //left
    eastern(150,100,450,150, 450,150,150,200, 20)

//bottom rock thin
    eastern(0,200,150,200, 0,300,0,200, 20) //top left
    eastern(0,300,0,400, 0,400,150,400, 20) // bottom left
    eastern(150,200,300,200, 300,200,300,300, 20)           // top right
    eastern(150,400,300,400, 300,400,300,300, 20)           // bottom right


//middle traingle thing
eastern(0,300,300,300, 150,0,150,200, 4)
eastern(300,300,0,300, 150,0,150,200, 4)
eastern(300,300,0,300, 150,0,150,0, 3)
eastern(0,400,300,400, 300,0,0,0, 2)

}

function eastern(X1, Y1, X2, Y2, X3, Y3, X4, Y4, numLines) {

line(X1, Y1, X2, Y2) 
line(X3, Y3, X4, Y4)

    var dx1 = (X2 - X1)/numLines
    var dy1 = (Y2 - Y1)/numLines
    var dx2 = (X4 - X3)/numLines
    var dy2 = (Y4 - Y3)/numLines


    for ( var i = 0; i <= numLines; i ++) {
        line(X1, Y1, X3, Y3);
        X1 += dx1
        Y1 += dy1
        X3 += dx2
        Y3 += dy2
    }


}

Project 4: String Art

Just try to imagine waking up to this in the middle of the night. Best 70s themed dreamscape ever. That’s the whole piece. That’s it. A portal to the disco dimension.

sketch
//Ilyas Khan
//Section D
//Entitled "Disco Portal"
//Why, you may ask, did I make it disco? Because I like disco, and I like random color changes.

count = 0;
function setup() {
    createCanvas(400, 300);
    background(0);
}
function draw() {
    background(0); //keeps the loop from getting messy
    frameRate(5); //makes it possible for one to perceive the color changes
    stroke(random(100,255),random(100,255),random(100,255)); //Makes this the portal to the disco dimension
    let count = 0;
    let y1 = 0;
    let y2 = 0;
    let x1 = 0;
    let x2 = 0;
    let x3 = 0;
    var limitX1 = 150;
    var limitX2 = 250;
    var limitY1 = 50;
    var limitY2 = 250;
    strokeWeight(0.5);
    for(y1 = -400; y1 < limitY1; y1 += 4.75){ //top of doorframe
        x3 = limitX2-(1.25*count);
        x1 = limitX1+(1.25*count);
        y2 = limitY1-(0.25*count);
        line(x1,y2,x1+300,y1);
        line(x3,y2,x3-300,y1);
        count += 1;
    }
    for(y1 = limitY1; y1 < limitY2+100; y1 += 7.75){ //left side of doorframe
        x1 = limitX1;
        x2 -= 4.5;
        y2 -= 7.75;
        line(x1,y1,x2,y2+300);
        count += 1;
    }
    for(y1 = limitY1; y1 < limitY2+100; y1 += 7.75){ //right side of doorframe
        x1 = limitX2;
        x2 = limitX2-(4.5*count);
        y2 += 7.75;
        line(x1,y1,1.05*-x2,-y2+50);
        count += 1;
    }
    for(y1 = 800; y1 > limitY2; y1 -= 9){ //floor
        x3 = limitX2;
        x1 = limitX1;
        y2 = limitY2-(0.05*count);
        line(x1,y2,x1+300,y1);
        line(x3,y2,x3-300,y1);
        count += 1;
    }

}

Project 04: String Art

string art
//Amy Hu
//amyhu
//Section D

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

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

    for(var angle = 0; angle <= 360; angle += 45){
        translate(width/2,height/2);
        line(0,-50,0,-150);
        line(150,0,50,0);
        dx1 = (0-0)/numLines;        
        dy1 = (-150+50)/numLines;
        dx2 = (50-150)/numLines;       
        dy2 = (0-0)/numLines;
        rotate(radians(angle));
    }

}

function draw() {

    translate(width/2,height/2);

    for(var angle = 0; angle <= 360; angle += 45){
        var x1 = 0;
        var y1 = -50;
        var x2 = 150;
        var y2 = 0;
        for (var i = 0; i <= numLines; i += 1) {
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
        rotate(radians(angle));
    }
    

    noLoop();
}

LO 04: Sound Art

The project ‘FORMS – String Quartet’ by Playmodes is a live performance of a string quartet and EDM music that projects to the visual sonification of the music. It uses real-time music to transcribe into a series of visual graphic notations in the form of lines, circles, curves, and other shapes. I think visualizing music is intriguing and the patterns of music can generate different forms of lines and representation that is also beautiful. This can really help those who are hard of hearing or may prefer visual experiences more where people may also be able to hear what they see. The visual graphics the music produces also seem to tell a story about what the music is like and it is able to isolate each instrument used in the song. This reminds me of the way EDM concerts have light shows that follow the patterns and beats in the music to create a more immersive experience. The visuals can also be transformed into music. The software that makes the graphics was coded in Processing and the image sonification was done in Max/MSP. The algorithm that makes it is able to isolate each instrument or rhythm and transform it into visuals and the other way around, whatever is on the screen can be translated into music.

Website Link

Project 3: Dynamic Drawing

sketch
//Ilyas Khan
//Section D
//this program focuses on the y axis with minimal to no change in the x

let yChange = 0; //the rate of change for most of the shape dimensions in this program.
function setup() {
    createCanvas(600, 450);
    background(0);
}
function draw() {
    yChange = mouseY/50 //the rate of change for most of the shape dimensions in this program.
    background(0);

    fill(255, 231, 179);
    stroke(240, 203, 158);
    quad(300,175/yChange,220,150,300,130,380,150); //top
    //dome (made of ellipses to appear dome-like from a distance)
    fill(119, 199, 195); 
    stroke(240, 176, 0)
    strokeWeight(0.1);
    ellipse(300,150,100,25);
    ellipse(300,148,100,25);
    ellipse(300,146,100,25);
    ellipse(300,144,96,24);
    ellipse(300,142,96,24);
    ellipse(300,140,92,23);
    ellipse(300,138,92,23);
    ellipse(300,136,84,22);
    ellipse(300,134,84,22);
    ellipse(300,132,74,21);
    ellipse(300,130,74,21);
    ellipse(300,128,62,18);
    ellipse(300,126,62,16);
    ellipse(300,124,46,14);
    ellipse(300,122,36,12);
    ellipse(300,120,26,10);
    ellipse(300,118,16,8);
    fill(255, 231, 179);
    stroke(240, 203, 158);
    quad(220,150,300,175/yChange,300,300/yChange,220,275/yChange); //left side
    quad(300,300/yChange,300,175/yChange,380,150,380,275/yChange); //right side
    
    if (mouseY < 50) { //the top view of the cube
        scaleY = (20-mouseY)/5; //"zoom factor" for zooming in on the cube
        if (scaleY < 1) {
            scaleY = 1;
        }
        background(0);
        translate(300,175); //translation to the center of the cube for "zooming"
        newY = 175;
        scale(scaleY);
        quad(0,0,-80,-25,0,-45,80,-25); //top
        quad(-80,-25,0,0,0,125,-80,100); //left side 
        quad(0,125,0,0,80,-25,80,100); //right side
        //dome (composed of ellipses to appear dome-like from a distance)
        fill(119+(mouseY),199+(mouseY),195+(mouseY)); 
        stroke(240, 176, 0)
        strokeWeight(0.1);
        ellipse(0,150-newY,100,25);
        ellipse(0,148-newY,100,25);
        ellipse(0,146-newY,100,25);
        ellipse(0,144-newY,96,24);
        ellipse(0,142-newY,96,24);
        ellipse(0,140-newY,92,23);
        ellipse(0,138-newY,92,23);
        ellipse(0,136-newY,84,22);
        ellipse(0,134-newY,84,22);
        ellipse(0,132-newY,74,21);
        ellipse(0,130-newY,74,21);
        ellipse(0,128-newY,62,18);
        ellipse(0,126-newY,62,16);
        ellipse(0,124-newY,46,14);
        ellipse(0,122-newY,36,12);
        ellipse(0,120-newY,26,10);
        ellipse(0,118-newY,16,8);
    }
    if(mouseY >= 91){  //the beginning of the interior cube view
        background(mouseY-91*(mouseY/91)+(mouseX/10),mouseY-27*(mouseY/91)+(mouseX/10),mouseY-38*(mouseY/91)+(mouseX/10)); //a background that changes color
        quad(300,175/(91/50),220,150,300,300/(91/50)+(mouseY-91),380,150); //bottom
        quad(220,150-(mouseY-91),300,175/(91/50)-(mouseY-91),300,300/yChange-(yChange*10),220,275/(91/50)); //left side
        quad(300,300/yChange-(yChange*10),300,175/(91/50)-(mouseY-91),380,150-(mouseY-91),380,275/(91/50)); //right side
        //pillar
        fill(mouseY-100);
        stroke(240, 176, 0)
        beginShape();
        vertex(270,140-(yChange*10));
        vertex(285,150-(yChange*10));
        vertex(315,150-(yChange*10));
        vertex(330,140-(yChange*10));
        vertex(315,130-(yChange*10));
        vertex(285,130-(yChange*10));
        endShape(CLOSE);
        quad(270,140,285,150,285,150-(yChange*10),270,140-(yChange*10));
        quad(315,150,330,140,330,140-(yChange*10),315,150-(yChange*10));
        noStroke();
        quad(285,150-(yChange*10),315,150-(yChange*10),315,150,285,150);
        if(mouseY >= 124){ //the filling out of the interior cube view
            background(mouseY-91*(mouseY/91)+(mouseX/10),mouseY-27*(mouseY/91)+(mouseX/10),mouseY-38*(mouseY/91)+(mouseX/10));
            fill(255, 231, 179);
            stroke(240, 203, 158);
            quad(220,150-(mouseY-91),300,175/(91/50)-(mouseY-91),300,300/(91/50),220,275/(91/50)); //left side
            quad(300,300/(91/50),300,175/(91/50)-(mouseY-91),380,150-(mouseY-91),380,275/(91/50)); //right side
            quad(300,175/(91/50),220,150,300,300/(91/50)+(mouseY-91),380,150); //bottom
            //pillar
            fill(mouseY-100);
            stroke(240, 176, 0)
            beginShape();
            vertex(270,140-(mouseY-91));
            vertex(285,150-(mouseY-91));
            vertex(315,150-(mouseY-91));
            vertex(330,140-(mouseY-91));
            vertex(315,130-(mouseY-91));
            vertex(285,130-(mouseY-91));
            endShape(CLOSE);
            quad(270,140,285,150,285,150-(mouseY-91),270,140-(mouseY-91));
            quad(315,150,330,140,330,140-(mouseY-91),315,150-(mouseY-91));
            noStroke();
            quad(285,150-(mouseY-91),315,150-(mouseY-91),315,150,285,150);
            if (mouseY >= 185){ //the zooming part of the inner cube view
                background(mouseY-91*(mouseY/91)+(mouseX/10),mouseY-27*(mouseY/91)+(mouseX/10),mouseY-38*(mouseY/91)+(mouseX/10));
                scaleY = -1*(185-mouseY)/8; //the "zoom" factor for the zoom in on the cube
                if (scaleY < 1) {
                    scaleY = 1;
                }
                fill(255, 231, 179);
                stroke(240, 203, 158);
                translate(300,175/(91/50)); //translates to the center of the cube for "zooming"
                scale(scaleY); 
                quad(-80,150-(185-91)-175/(91/50),0,175/(91/50)-(185-91)-175/(91/50),0,300/(91/50)-175/(91/50),-80,275/(91/50)-175/(91/50)); //left side
                quad(0,300/(91/50)-175/(91/50),0,175/(91/50)-(185-91)-175/(91/50),80,150-(185-91)-175/(91/50),80,275/(91/50)-175/(91/50)); //right side
                quad(0,175/(91/50)-175/(91/50),-80,150-175/(91/50),0,300/(91/50)+(185-91)-175/(91/50),80,150-175/(91/50)); //bottom
                //pillar
                fill(mouseY-100);
                stroke(240, 176, 0)
                beginShape();
                vertex(-30,140-(mouseY-91)-175/(91/50));
                vertex(-15,150-(mouseY-91)-175/(91/50));
                vertex(15,150-(mouseY-91)-175/(91/50));
                vertex(30,140-(mouseY-91)-175/(91/50));
                vertex(15,130-(mouseY-91)-175/(91/50));
                vertex(-15,130-(mouseY-91)-175/(91/50));
                endShape(CLOSE);
                quad(-30,140-175/(91/50),-15,150-175/(91/50),-15,150-(mouseY-91)-175/(91/50),-30,140-(mouseY-91)-175/(91/50));
                quad(15,150-175/(91/50),30,140-175/(91/50),30,140-(mouseY-91)-175/(91/50),15,150-(mouseY-91)-175/(91/50));
                noStroke();
                quad(-15,150-(mouseY-91)-175/(91/50),15,150-(mouseY-91)-175/(91/50),15,150-175/(91/50),-15,150-175/(91/50));
            }
            
        }
    }
    print(mouseY);

}

LO: Sound Art

I wanted to talk about the app Trope by Brian Eno (yes I know he’s like the generative sound guy, but I like his work!) and Peter Chilvers, the interactive generative sound-art experience. As one traces abstract forms onto the screen, the program will vary the tone. There are also additional instruments so that one can vary sounds and create a whole symphony of interesting sounds whose generated existence emerges from the human interaction with the program. I personally admire the interactive nature of it. I love randomness, but when you give people a way to experience that, to watch it unfold under their fingertips, that I find really satisfying. As the tone shifts randomly (in accordance with the laws of generative music, randomness being a key to making it “last forever”) you create songs that are entirely unique to your own experience at that moment, and can’t be perfectly recreated by someone else with ease. Likely tone and pitch are related to things like x and y on the screen, and potentially pressure and tilt, as the program is for smartphones and tablets and the like. This is another of Brian Eno’s apps, of which I think he’s made a few, and seems to be a spiritual successor to his previous work, Bloom.

Blog 5

I love this project because of how absurd the music is. I think people put a lot of stake and emotion in music, but a computer doesn’t. Despite this, I think people will always find patterns or emotion in sounds that are utterly random. A computer can make music that a human would never dream of, because we want things to make sense. Computational music doesn’t make sense (or at least the stuff I have seen so far). 

The project I looked at was Playable Decagons. The creator had a visual of an octagon and corresponded things like its orientation and size to specific musical notes. When the decagon is manipulated it will play a funky song of mashed together notes at different tones and timings. It sounds horrendous from a music theory standpoint, but I couldn’t help dancing along to the weird sounds halfway between spaceship violin and ocean roar.

Evette LaComb