Month: September 2022

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;
    }

}

Looking Outward-04

Francesco Mauro

Section D

I looked into the music of Robert Henke, and enjoyed it. The music has a wide dramatic sound, and invokes some sort of primal feeling. It feels immersive and vast. One of his songs sounded like you were standing on the edge of that one cavern from planet earth looking down. He is a minimalist from Germany, and it matches well with his computational music making. The absolute minimalism makes me feel like I’m listening for the truth within each sound. The control he obviously has on each sound allows slight movements to feel like massive musical sweeps. He speaks about his creation involving a tweaking and tuning of algorithms looking for patterns that are pleasing. Looking for an unexpected effect within the rigid parameters. A very approachable method.

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();
}

Project 04: Diagonal Sine Curve

sketch

//Name: Hari Vardhan Sampath
//Section: E
// Diagonal Sine Curves

var numLines = 45; //number of strings drawn

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

    // red strings
    line(0, 0, 10, 150);
    line(50, 200, 150, 150);

    dx1 = (10-0)/numLines;
    dy1 = (150-0)/numLines;
    dx2 = (150-50)/numLines;
    dy2 = (150-200)/numLines;

    // yellow strings
    line(250, 100, 150, 150);
    line(400, 300, 390, 150);

    dx3 = (150-250)/numLines;
    dy3 = (150-100)/numLines;
    dx4 = (390-400)/numLines;
    dy4 = (150-300)/numLines;

    // purple strings
    line(150, 250, 150, 150);
    line(400, 300, 250, 290);

    dx5 = (150-150)/numLines;
    dy5 = (150-250)/numLines;
    dx6 = (250-400)/numLines;
    dy6 = (290-300)/numLines;

    // blue strings
    line(100, 10, 0, 0);
    line(150, 150, 150, 50);

    dx7 = (0-100)/numLines;
    dy7 = (0-10)/numLines;
    dx8 = (150-150)/numLines;
    dy8 = (50-150)/numLines;
}

function draw() {
    // red strings
    var x1 = 0;
    var y1 = 0;
    var x2 = 50;
    var y2 = 200;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(192, 57, 43);
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    // yellow strings
    var x3 = 250;
    var y3 = 100;
    var x4 = 400;
    var y4 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(244, 208, 63);
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    // purple strings
    var x5 = 150;
    var y5 = 250;
    var x6 = 400;
    var y6 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        stroke('purple');
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }
    var x7 = 100;
    var y7 = 10;
    var x8 = 150;
    var y8 = 150;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(84, 153, 199);
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 += dx8;
        y8 += dy8;
    }

    noLoop();
}

In this project, I tried to explore the continuity of string art to form a sine curve, starting from the top left corner of the canvas until the diagonal bottom.

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.

LookingOutwards-04 (Section A)

I was interested by the “Mozart style Sonata 3-3” by David Cope. I find it interesting how a computer can create music that actually sounds like music to people– opposed to just having random notes played. Originally, I thought Cope had coded all the of the music just through code and I was really impressed. Cope’s artistic sensibilities are revealed because he would have to understand music theory to be able to produce music. At the same time, he would also have to understand Mozarts style very well to be able to create code that produced music that was similar.

However, I as was looking into how it was made, I read comments that said that it seemed like just a mash up of many of Mozart’s Sonatas. In this case, his code may just be taking parts of Mozart’s Sonatas and having the computer put it togther. If this is the case, this is not quite as advanced as I thought but I still think the music is pretty cool!

I’m not sure which one it is. If Cope was really able to code all of the music to sound like Mozart and the computer generated all of it, that is really impressive but either way, it is interesting how computers can create music which is usually thought to be very human.

Here is the link by David Cope. 2013. “Mozart style Sonata 3-3.”

Project-04: String Art-Pineapple

Although it’s a bit abstract, but it is a pineapple. Everything is made by “string”.

sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
function setup() {
    createCanvas(300, 400);
    background('yellow');
}

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

function draw() {
    // percentize width and height
    var w= width/100;
    var h= height/100;

    //body of pinapple
    //diagonals(*w,*h,*w,*h,*w,*h,*w,*h) general formula
    diagonals(0*w,0*h,0*w,100*h,0*w,100*h,100*w,100*h); //left outside
    diagonals(100*w,0*h,100*w,100*h,100*w,100*h,0*w,100*h); //right outside
    diagonals(0*w,100*h,0*w,30*h,0*w,30*h,100*w,30*h); //left inside
    diagonals(100*w,100*h,100*w,30*h,100*w,30*h,0*w,30*h); //right inside
     //smooth the vertexes of pinnaple
    diagonals(10*w,80*h,50*w,95*h,50*w,95*h,90*w,80*h); //bottom
    diagonals(10*w,50*h,50*w,35*h,50*w,35*h,90*w,50*h); //top
    diagonals(40*w,30*h,10*w,60*h,10*w,60*h,40*w,90*h); //left
    diagonals(60*w,30*h,90*w,60*h,90*w,60*h,60*w,90*h); //right
    //Green Hair
    push();
    stroke('green');
    strokeWeight(2);
    diagonals3(15*w,20*h,30*w,45*h,70*w,45*h,80*w,20*h);//sides
    diagonals3(30*w,45*h,50*w,15*h,70*w,45*h,50*w,15*h);//middle
    diagonals3(30*w,45*h,50*w,15*h,50*w,15*h,70*w,45*h);//upper middle 
    pop();
    //background
    diagonals3(0*w,0*h,0*w,30*h,100*w,0*h,100*w,30*h);
    //texture
    diagonals2(25*w,60*h,40*w,58*h,40*w,58*h,50*w,45*h);//left
    diagonals2(25*w,60*h,40*w,58*h,40*w,58*h,50*w,75*h);
    diagonals2(75*w,60*h,60*w,58*h,60*w,58*h,50*w,45*h);//right
    diagonals2(75*w,60*h,60*w,58*h,60*w,58*h,50*w,75*h);
    diagonals2(50*w,75*h,30*w,80*h,30*w,80*h,35*w,85*h);//bottom left
    diagonals2(50*w,75*h,70*w,80*h,70*w,80*h,65*w,85*h);//bottom right
    noLoop();

}


function diagonals(x1,y1,x2,y2,x3,y3,x4,y4){ //diagonal/straight lines between 2 lines
    line(x1,y1,x2,y2);
    line(x3,y3,x4,y4);
    dx1=(x2-x1)/numLines;
    dy1=(y2-y1)/numLines;
    dx3=(x3-x4)/numLines;
    dy3=(y3-y4)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1,y1,x3,y3);
        x1 += dx1;
        y1 += dy1;
        x3 -= dx3;
        y3 -= dy3; 
    }
}

function diagonals2(x1,y1,x2,y2,x3,y3,x4,y4){ //less lines
    line(x1,y1,x2,y2);
    line(x3,y3,x4,y4);
    numLines=20;
    dx1=(x2-x1)/numLines;
    dy1=(y2-y1)/numLines;
    dx3=(x3-x4)/numLines;
    dy3=(y3-y4)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1,y1,x3,y3);
        x1 += dx1;
        y1 += dy1;
        x3 -= dx3;
        y3 -= dy3; 
    }
}

function diagonals3(x1,y1,x2,y2,x3,y3,x4,y4){ //less lines second version
    line(x1,y1,x2,y2);
    line(x3,y3,x4,y4);
    numLines=30;
    dx1=(x2-x1)/numLines;
    dy1=(y2-y1)/numLines;
    dx3=(x3-x4)/numLines;
    dy3=(y3-y4)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1,y1,x3,y3);
        x1 += dx1;
        y1 += dy1;
        x3 -= dx3;
        y3 -= dy3; 
    }
}

Lines: A face

For this project, I tried to make a face out of simple lines. When constructing faces, it is always interesting to see how simplistic or complicated you could make it through the assumptions of what is considered a face.

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

function setup() {
    createCanvas(400, 400);
    background(200);
    line(50, 50, 150, 300);
    line(300, 300, 350, 100);
    line(10,380,180,300);
    line(280,260,370,390);
    dx1 = (150-50)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-300)/numLines;
    dy2 = (100-300)/numLines;
}

function draw() {
    fill(0);
    triangle(200,0,140,100,180,110);
    triangle(180,140,200,120,280,145);
    triangle(190,145,200,160,240,150);
    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;
    } for (var i = -150; i <= numLines * 2; i += 4) {
        line(x1, y1, x2, y2);
        x1 += dx1 / 2;
        y1 += dy1 / 2;
        x2 += dx2 / 2;
        y2 += dy2 / 2;
        //eyelashes i think
    } for (var i = 1; i <= numLines * 2; i += 4) {
        line(x2 * 5, y1 , x1 -50, y2 + 40);
        var x1 = 0;
        var x2 = 200;
        var y1 = 300;
        var y2 = 350;
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        //random lines for texture
    } for (var i = 0; i <= numLines; i += 2) {
        line(x1, y1 - 300, x2, y2 - 300);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        //hair
    } for (var i = 0; i <= numLines; i += 2) {
        x2 = 80;
        y2 = 30;
        line(x1, y1 - 300, x2, y2 - 300);
        x1 -= dx1;
        y1 -= dy1;
        x2 += dx2;
        y2 += dy2; }
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;  }
    x1 = 10;
    y1 = 380;
    x2 = 280;
    y2 = 260;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;  }
    noLoop();
}