Category: SectionC

Looking Outwards: 04

ORGANVM PERCEPTVS

By Happy Valley Band

“Organvm Perceptvs” is an album by Happy Valley Band consisting of covers of pop classics. These songs are written by feeding the original songs into a custom built machine learning software that spits them back out in an altered re-written state. The band then plays the music that the software has regurgitated. I think this is a cool example of a collaboration between the AI and the human musicians. The AI doesn’t directly synthesize the sounds, but rather there is a level of human interpretation by playing the music that the AI writes. I also think that the output is wonderfully uncanny. The artificial intelligence remixes the music in a way that I doubt any person would think of doing, giving a complex and novel result. 

https://happyvalleyband.bandcamp.com/

Project-04: String Art

string art
// for the right up center and left down center string shapes
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
//for the left up corner and right down corner string shapes
var da1;
var da2;
var da3;
var da4;
var ds1;
var ds2;
var ds3;
var ds4;

var numLines=20;
function setup() {
    createCanvas(400,300);
    background(224,255,255);
    dy1 = 150 / numLines;
    dx2 = 200 / numLines;
    dy3 = -150 / numLines;
    dx4 = -200 / numLines;
    da1 = 200 / numLines;
    ds2 = -150 / numLines;
    ds3 = 150 / numLines;
    da4 = -200 /numLines;
}

function draw() {
    var x1 = 200;
    var y1 = 0;
    var x2 = 200;
    var y2 = 150;
    var x3 = 200;
    var y3 = 300;
    var x4 = 200;
    var y4 = 150;

    var a1 = 0;
    var s1 = 0;
    var a2 = 0;
    var s2 = 150;
    var a3 = 400;
    var s3 = 150;
    var a4 = 400;
    var s4 = 300; 

    //right up string section, section 1
    stroke(127,255,0);
    for (var i = 0; i <= numLines; i += 1 ) {
        line(x1,y1,x2,y2);
        y1 += dy1;
        x2 += dx2;
    }
    //left down string section, section 2
    stroke(75,0,130);
    for (var i = 0; i <= numLines; i += 1) {
        line(x3,y3,x4,y4);
        y3 += dy3;
        x4 += dx4;
    }

    //right up corner
    stroke(255,192,203);
    for (var a = 0; a <= numLines; a += 1) {
        line(a1,s1,a2,s2);
        a1 += da1;
        s2 += ds2; 
    }
    //left down corner
    stroke(255,99,71);
    for (var a = 0; a <= numLines; a += 1) {
        line(a3,s3,a4,s4);
        s3 += ds3;
        a4 += da4;
    }
    noLoop();
}

While writing this project, I first only used 2 sets of x and y to draw out 4 string shapes, which the computer did not conduct the action I expected it to do. Then, I added another 2 sets of a and s to draw the left up corner and right down corner string shape. Eventually, my code works.

Project 4: String Art

sketch
//Anthony Pan
//Section C
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4; 
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var dx9;
var dy9;
var dx10;
var dy10;
var dx11;
var dy11;
var dx12;
var dy12;
var dx13;
var dy13;
var dx14;
var dy14; 

var numLines = 30;


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

    //left of circle change in x/y
    dx1 = (280)/numLines;
    dy1 = (70)/numLines;
    dx2 = (120)/numLines;
    dy2 = (150)/numLines;

    //top of circle change in x/y
    dx3 = (150)/numLines;
    dy3 = (320)/numLines;
    dx4 = (90)/numLines;
    dy4 = (90)/numLines;

    //top right of circle change in x/y
    dx5 = (250)/numLines;
    dy5 = (20)/numLines;
    dx6 = (40)/numLines;
    dy6 = (150)/numLines;

    //bottom of circle change in x/y
    dx7 = (70)/numLines;
    dy7 = (120)/numLines;
    dx8 = (20)/numLines;
    dy8 = (300)/numLines;

    //right of circle change in x/y
    dx9 = (220)/numLines;
    dy9 = (120)/numLines;
    dx10 = (80)/numLines;
    dy10 = (150)/numLines;

    //bottom right of circle change in x/y
    dx11 = (240)/numLines;
    dy11 = (10)/numLines;
    dx12 = (105)/numLines;
    dy12 = (60)/numLines;

    //bottom left of circle change in x/y
    dx13 = (80)/numLines;
    dy13 = (140)/numLines;
    dx14 = (20)/numLines;
    dy14 = (300)/numLines;


}

function draw() {
    //ellipse(width/2, height/2, 120, 120) //ellipse for reference

    //left of circle start points
    var x1 = 130;
    var y1 = 5;
    var x2 = 130;
    var y2 = 230;

    //top of circle start points
    var x3 = 0;
    var y3 = 100;
    var x4 = 250;
    var y4 = 85;

    //top right of circle start points
    var x5 = 273;
    var y5 = 5; 
    var x6 = 273;
    var y6 = 230;

    //bottom of circle start points
    var x7 = 125;
    var y7 = 210;
    var x8 = 400;
    var y8 = 210;

    //right of circle start points
    var x9 = 220;
    var y9 = 40;
    var x10 = 280;
    var y10 = 180;

    //bottom right of circle start points
    var x11 = 240;
    var y11 = 10;
    var x12 = 270;
    var y12 = 210;

    //bottom left of circle start points
    var x13 = 160;
    var y13 = 200;
    var x14 = 230;
    var y14 = 220;


    for (var i = 0; i <= numLines; i += 1) { 
        stroke(220, 20, 0);

        //creating red vortex around a circle

        line(x1, y1, x2, y2); //left of circle
        x1 += dx1;
        x2 -= dx2;
        y1 += dy1;
        y2 -= dy2;

        line(x3, y3, x4, y4); //top of cirlce
        x3 -= dx3;
        y3 -= dy3;
        x4 += dx4;
        y4 += dy4;

        line(x5, y5, x6, y6); //top right of circle  
        x5 -= dx5;
        y5 += dy5;
        x6 += dx6;
        y6 -= dy6;

        line(x7, y7, x8, y8); //bottom of circle
        x7 -= dx7;
        y7 -= dy7;
        x8 += dx8;
        y8 += dy8;

        line(x9, y9, x10, y10); //right side
        x9 += dx9;
        y9 -= dy9;
        x10 -= dx10;
        y10 += dy10;

        line(x11, y11, x12, y12); //bottom right
        x11 += dx11;
        y11 -= dy11;
        x12 -= dx12;
        y12 += dy12;

        line(x13, y13, x14, y14); //bottom left
        x13 -= dx13;
        y13 -= dy13;
        x14 += dx14;
        y14 += dy14;

    }

    noLoop();

}

Creating a vortex around an ellipse using string art

Looking Outwards 04: Sound Art

Today I took a look at Unity’s music visualization program done by Peer Play. They created something that I found very intriguing because it was a refreshing take on traditional music visualization, utilizing small dots to create movement according to the beats of the music. The different colors keep the artwork lively and engaging as you follow along with the spinning movement of the small dots. It feels like a miniature light show on a display! I think that one way they were able to sync the movements of the lights with the music was to have certain lights assigned to certain instruments. The change in volume of the instrument would subsequently change the direction and movement of the light. However, there are so many movements that it’s hard to understand what each specific movement is assigned to!

Peer Play Unity Music Visualization

Project 04 String Art

String Art ProjectDownload 

//Alana Wu
//ID: alanawu
//Project 04: String Art



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

function draw ()
{
    background (0);
    if (mouseIsPressed)
    {
        background(255);
    }
    var x = 100;
    var y = 100;
    var dist = 50;
    var num = 5;

    push();
    translate (100, 75);
//white lines
    for (y = 10; y <= 300; y += 5)
    {
        strokeWeight (4);
        rotate (radians (-num + 180));
        stroke (255);
        if (mouseIsPressed)
        {
            stroke(0);
        }
        line (x + dist, y + dist, min (mouseX, 300), y);
        strokeWeight (.5);
        dist -= 1;
    }

//purple lines
    for (y = 100; y <= 200; y += .5)
    {
        rotate (radians (num));
        stroke (76, 0, 153);
        if (mouseIsPressed)
        {
            stroke (179, 255, 102);
        }
        line (constrain (mouseX, 50, 350), y, x + dist, y + dist);
        dist -= 5;
    }
//light blue lines
    for (y = 200; y <= 400; y += 1)
    {
        rotate (radians (num));
        stroke (0, 255, 255);
        if (mouseIsPressed)
        {
            stroke (255, 0, 0);
        }
        line (min (mouseX, 400), y, x + dist, y + dist);
    }
    pop();

//white string in larger black circle
    push ();
    translate (300, 200);
    fill (0);
    if (mouseIsPressed)
    {
        fill (255);
    }
//big circle
    ellipse (0, 0, 250, 250);
    for (var k = 0; k < 100; k+= 1)
    {
        rotate (radians (num));
        stroke (255, 220, 255);
//when mouseIsPressed, colors invert
//and new strings are drawn
        if (mouseIsPressed)
        {
            stroke (0);
            for (var a = 0; a < 40; a ++)
            {
                rotate (radians (1));
                line (2, 10, 10 + min (mouseX/10, 40), 30);

            }
            push ();
            translate (-100, -50);
            for (var a = 0; a < 40; a ++)
            {
                stroke (100, 255, 100);
                rotate (radians (4));
                line (2, 10, 10 + min (mouseX/10, 40), 30);

            }
            pop();
            noFill();
            ellipse (0, 0, 220, 220);
            ellipse (0, 0, 180, 180);
            ellipse (0, 0, 140, 140);
        }
        line (25, 0, 25 + mouseY/5, 45);
    }
    pop ();

//string in smaller black circle
    push();
    translate (180, 275);
    fill (0);
    if (mouseIsPressed)
    {
        fill (255);
    }
//smaller circle
    ellipse (0, 0, 100, 100);
    for (var i = 0; i < 100; i ++)
    {
        rotate (radians (num));
        stroke (204, 204, 255);
        if (mouseIsPressed)
        {
            stroke (51, 51, 0);
            for (var a = 0; a < 40; a ++)
            {
                rotate (radians (num));
                line (15, 25, 15 + min (mouseX/10, 20), 35);
            }
        }
        line (15, 5, mouseY/8, 30);
        line (10, 5, min (mouseY, 50), min (mouseY, 50));
    }
    pop ();

    if (mouseIsPressed)
    {
        push();
        translate (mouseX, mouseY);
//circle of red string circles
        for (var c = 0; c <= 8; c ++)
        {
            translate (20, 20);
            for (var b = 0; b < 80; b ++)
            {
                stroke (255, 0, 0);
                rotate (radians (num));
                line (8, 8, 20, 20);
                noStroke();
            }
        }
        pop();
    }
}

For this project, it was hard to figure out what I wanted to do, since I didn’t really understand what the possibilities were. I did a first draft of string art to explore the different options, then completely started over in a new file.

LO-Sound Art

The project I choose for this week LO is an exploratory public engagement project called quantum parallelograph by Professor David Deutsch of Oxford University. It basically applies the notion of parallel universe into a public engaging experiment based on the Young’s double slit theory. Since the double slit experiment says that a photon of light appears to pass through the double slits, the scientists suggests that a connection is made across universes when this happen. Therefore, they made the abstract idea of parallel universe into something tangible and visible. Interestingly, this project examines a scientific notion from an aesthetic point of view, it also approaches the scientific fiction by letting people engage in the activity of “communicating” with the alternate kind of self in another parallel world.

The Double Split Machine Used in the Experiment

Looking Outwards 04: Sound Art

Created by Fraction, Louis-Phillippe St. Arnault, Nature Graphique, and Creation Ex Nihilo, Entropia is an immersive performance built of interconnected layers of media; a physical geodesic structure, immersive visuals, and sonic effects are synchronized by real time 3D programming. It’s meant to pay tribute to the architect and theorist of geodesic design, Richard Buckmeister Fuller.

I particularly admire how new artists added on to the project throughout its making, building new layers of media into what the previous artist had done. The fact that the production used real time programming was also very impressive, and therefore must creative a different experience each time Entropia is performed. The idea that an exact performance will never be recreated would probably make people appreciate all the more.

Going back to the idea that coding isn’t widely considered an “art”, having performances like this would help realize how coding can be artistic in itself. Coding could, like writing, be considered a creative way of expression… just in a different language.

Creators: Fraction, Louis Phillippe St-Arnault, Nature Graphique, Creation Ex Nihilo

First performed May 2015.

LO: Computational Fabrication

“In-Formed”, Nadeem Haidary

I found Nadeem Haidary’s work In-Formed especially powerful because it introduces potentially foreign and far-away-seeming data through such a ubiquitous, intimate human ritual such as eating. By visualizing the data in the prongs of a fork, the designer makes the statistic real, tangible, unable to ignore. On his website, he actually asks the question, “what if this information crawled off the page and seeped into the products that surround us?” (Haidary). As one looks at, reflects on, and imagines what it might look like to eat with this fork, it makes the reality of different eating habits and access far more tangible to the viewer than a simple fact they might read or hear. Regarding the algorithm, I assume the craft involved researching the statistics of calorie consumption by country, and then using those number to determine the proportions between each prong for each country it represented. The creator’s artistic sensibilities are manifested in the form in that it shows his ability to communicate something in a very human, tangible, and accessible way, as good designers do.

Project 03: Dynamic Drawing

sketchDownload

var angle;  
var rStart = 209; 
var rSlope = -186/400; 
var bStart = 237;
var bSlope = -173/400; 
var gStart = 255;
var gSlope = -163/400;
var oSlope = 235/400; 

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

function get_color(mouseY) { //background color 
    if (mouseY <= 400) {
        var r = rStart + (mouseY*rSlope); 
        var g = bStart + (mouseY*bSlope); 
        var b = gStart + (mouseY*gSlope); 
        return [r, g, b];
    }
    else { //if mouse exceeds bounds
        return [23, 64, 92]; //keep color same 
    }
}

function get_opacity(mouseY) { //flower opacity
    if (mouseY <= 400) { 
        var opacity = 255 - (mouseY*oSlope);
        return opacity; 
    }
    else { //if mouse exceeds bounds 
        return 20; //keep opacity same
    }
}

function get_grass(mouseX) { //????
    if (mouseX <= 300) {
        if (mouseX <= 150) {
            var grR = ((65/150)*(mouseX) + 56);
            return [grR, 121, 18];
        }
        else {
            var grG = ((-37/150)*(mouseX-150) + 121);
            return [121, grG, 18];
        }
    }
    else { //if mouse exceeds bounds
        return [121,84,18]; //brown
    }
}


function draw() {
    var rgb = get_color(mouseY);
    var opacity = get_opacity(mouseY);
    var [gr,gg,gb] = get_grass(mouseX);
    background(rgb[0], rgb[1], rgb[2]);


    //flower
        noFill();
            stroke(143, 167, 65, opacity);
            strokeWeight(8)
            bezier(135,225,180,230,190,300,158,380); //leftstem
            bezier(224,168,250,180,220,320,150,370); //rightstem
        noStroke();
            fill(178, 123, 210, opacity); //lightpurple
                ellipse(130,210,30);
                ellipse(150,220,30);
                ellipse(143,243,30);
                ellipse(120,235,30); //end of flower left
                ellipse(220,150,30);
                ellipse(243,160,30);
                ellipse(233,183,30);
                ellipse(210,175,30); //end of flower right
            noStroke();
            fill(223, 186, 244, opacity);
            ellipse(224,168,15) //topflowermiddle
            fill(223, 186, 244, opacity);
            ellipse(135,225,15); //bottomflowermiddle

    //leaves 
        noStroke();
        fill(143,167,65, opacity);
        arc(175,280,190,190, 0, PI/2, OPEN); //rightleafright
        fill(143,167,65, opacity);
        arc(270,375,190,190, PI,-PI/2, OPEN); //rightleafleft
        noStroke();
        fill(143,167,65, opacity);
        arc(79,375,190,190, -PI/2, 0,OPEN); //leftleafright
        fill(143,167,65, opacity);
        arc(174,280,190,190, PI/2, PI, OPEN); //leftleafleft

    //grass
    dy = 0
    if(mouseY > 300){
        dy = -30
    }
    noStroke();
        fill(gr,gg,gb); //greengrasscolor
            triangle(0,dy+400,25,dy+400,0,dy+330); //blades of grass from left to right
            triangle(8,dy+400,35,dy+400,18,dy+290); 
            triangle(15,dy+400,30,dy+400,30,dy+305); 
            triangle(30,dy+400,50,dy+400,45,dy+305);
            triangle(45,dy+400,75,dy+400,68,dy+320);
            triangle(70,dy+400,100,dy+400,80,dy+330);
            triangle(80,dy+400,110,dy+400,95,dy+320);
            triangle(108,dy+400,135,dy+400,118,dy+300); 
            triangle(115,dy+400,130,dy+400,130,dy+315); 
            triangle(130,dy+400,150,dy+400,145,dy+315);
            triangle(130,dy+400,150,dy+400,145,dy+305);
            triangle(145,dy+400,175,dy+400,168,dy+320);
            triangle(170,dy+400,200,dy+400,180,dy+330);
            triangle(180,dy+400,210,dy+400,195,dy+320);
            triangle(200,dy+400,225,dy+400,220,dy+320);
            triangle(180,dy+400,200,dy+400,195,dy+305);
            triangle(215,dy+400,245,dy+400,238,dy+320);
            triangle(240,dy+400,270,dy+400,260,dy+310);
            triangle(250,dy+400,275,dy+400,270,dy+315);
            triangle(270,dy+400,290,dy+400,285,dy+325);
            triangle(285,dy+400,300,dy+400,297,dy+310);
            rect(0,dy+395,300,dy+100);
                

    fill(212, 220, 192);
    noStroke();
    textSize(12);
    textAlign(CENTER);
    text("ISAIAH 40:8",262,393);

    //bible
    rotate(angle - QUARTER_PI);
    noStroke();
    fill(75, 45, 20);
    rect(35,40,150,90);
    noStroke();
    fill(255, 239, 226);
    ellipse(125,49,35);
    ellipse(95,49,35);
    noFill();
    strokeWeight(3);
    stroke(255, 239, 226);
    bezier(45,50,70,60,90,10,110,48); //toplineleft
    bezier(45,120,70,130,90,90,110,120); //bottomlineleft
    line(45,50,45,120);
    line(175,50,175,120);
    bezier(110,120,130,90,150,130,175,120); //bottomlineright
    bezier(110,48,130,10,150,60,175,50); //toplineright
    fill(255, 239, 226); //biblefill
    quad(45,51,45,107,175,107,175,51);
    quad(45,120,45,105,100,105,55,120); //bottomleftcorner
    quad(175,120,175,105,120,105,165,120); //bottomrightcorner
    triangle(61,50,80,40,70,100); //toplefttri
    triangle(155,48,132,38,70,100); //toprighttri
    triangle(110,120,85,90,135,90); //bottomtri
    noStroke();
    fill(224, 211, 184);
    quad(110,40,110,122,120,110,120,32);
    push();

    //biblerotate
    if (mouseX > 115 & mouseX < 205){
        angle = mouseX * (1/200);
    }
}

Project 03: Dynamic Drawing

jen project 03 sketch copy


var minSize = 0.6;
var maxSize = 3;


function setup() {
    createCanvas(450, 600);
    strokeWeight(10);
}

function draw() {
    if (mouseX < width/2 & mouseY < height/2) {
        background(23,48,107);
    } else if (mouseX < width/2 & mouseY > height/2) { 
        background(204,102,0);
    }  else if (mouseX > width/2 & mouseY < height/2) {
        background(153,204,255);
    }  else {
        background (255,204,255);
  }
    //main circle
    fill(255);
       stroke(51,102,0);
       circle(225,300, mouseX, mouseY);
    
    //green line  
       stroke(23,112,44);
       line(225, 300, mouseX, mouseY);
    
    //light green line
       stroke(154,185,158);
       var mx = map(mouseX, 0, width, 60, 180);
       line(225, 300, mx, mouseY); 
    
    //orange circle
     if (mouseX < 225 & mouseY > 300) { 
       fill(255,178,102);
       ellipse(mouseX, mouseY, 50, 50);
        
    //blue circle and rotating blue circles    
     } else if (mouseX > 225 & mouseY < 300) {
       fill(178,202,243);
       ellipse(mouseX, mouseY, 50, 50);
       push();
       translate(337.5,150);
       rotate(radians(mouseY)); 
       ellipse(-50,50,40,40);
       ellipse(-50,-50,40,40);
       ellipse(50,50,40,40); 
       ellipse(50,-50,40,40);
       pop();

    //light purple circle and sheer circles
     } else if (mouseX > 225 & mouseY > 300) {
       fill(146,98,178);
       ellipse(mouseX, mouseY, 50, 50);
       fill(255,150);
       ellipse(mouseX, height/2, mouseY, mouseY);
       fill(255,150);
       ellipse(width - mouseX, height/2, height - mouseY, height - mouseY);
   }
     
    //dark blue circle and scattering white dots 
       else { 
       for (let y = 0; y < 100; y++) {
       randomSize = random(minSize, maxSize);
       randomX = random(width);
       randomY = random(height);
       fill(0,76,153);
       stroke(154,185,158);
       ellipse(mouseX, mouseY, 50, 50);
       noStroke();
       fill(255);
       ellipse(randomX, randomY, randomSize, randomSize);
    }  
  }
}

I wanted to create a sort of clock through the white circle and green clock hands that lengthened or shortened depending on the mouse. The upper left quadrant has a busy background to represent how that time period (9am- 12pm) is when my schedule usually feels the most hectic. Admittedly the other quadrants are a bit more random, but I definitely wanted to try out the push and pop functions we recently learned, so I incorporated these with the rotating light blue circles.