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

Looking Outward – 03

A computational project that inspires me is an architectural project done by Thilo Frank called EKKO. This project is located in Denmark and is a continuous walkway that consists of 200 wooden frames that incrementally change dimensions to create a long and contorted structure. The structure was computational in its design as the exterior shape was shaped by keyframes and the computer filling in the frames in between. The design also incorporates microphones within the wood to record and playback the sounds of the people walking through the structure. This type of work is done with parametric modeling in which the set of processes to create design is laid out by the person and the computer interprets it in many different ways. The artists’ sensibilities manifest themselves in the experience that one has inside the structure and the elaborate design the artist laid out in order to give the user a feeling of what the artist senses.

https://www.dezeen.com/2012/10/29/ekko-installation-by-thilo-frank/

Looking Outwards: Computational Fabrication

I found the project of digital fabrication to design a bookshelf very appealing. It was done by using a Lamella system assembly integrated in freeform geometry to create a system of shelves that are interdependent on each other. It uses 5-axis CNC swarf cutting to maintain consistency for the surface at joints and the connecting points. I really like the flowing over all visual that is created by the rigid modular structure of the shelves. The irony within this is something that I really enjoy. It was done by the Ahtehha firm that used these shelves within a library that they were designing. 

http://ahtehha.net/gallery/marshall/

Project 3: Dynamic Drawing

chapmanDynamic

//ELise Chapman
//ejchapma
//Section D

function setup() {
    createCanvas(450,600);
    rectMode(CENTER);
}

var stormSize=1;
var rainPos=200;
var rainV=1;

function draw() { //cloud
    noStroke();
    background(149,209,216);
    //as the mouse moves down, the sky gets darker
    if (mouseY<100) {
        background(149,209,216);
        stormSize=1;
    } else if (mouseY>=100 & mouseY<200) {
        background(121,176,190);
        stormSize=2;
    } else if (mouseY>=200 & mouseY<300) {
        background(85,137,157);
        stormSize=3;
    } else if (mouseY>=300 & mouseY<400) {
        background(62,103,124);
        stormSize=4;
    } else if (mouseY>=400 & mouseY<500) {
        background(52,82,102);
        stormSize=5;
    } else {
        background(43,63,81);
        stormSize=6;
    }

    //as the mouse moves left and right, the wind blows
    push();
    rotate(-radians(mouseX/50));

    //as the mouse moves down, the rain gets heavier
    fill(90,195,255);
    rect(width/2,rainPos,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2+25,rainPos+50,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2+50,rainPos+250,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2+75,rainPos+150,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2+100,rainPos+75,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2-25,rainPos+100,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2-50,rainPos-5,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2-75,rainPos+200,5+mouseY/50,25+mouseY/20,80,80,80,80);
    rect(width/2-100,rainPos+75,5+mouseY/50,25+mouseY/20,80,80,80,80);
    if (stormSize==1) {
        rainPos=rainPos;
        rainV=3;
    } else if (stormSize==2) {
        rainPos=rainPos;
        rainV=5;
    } else if (stormSize==3) {
        rainPos=rainPos;
        rainV=6.5;
    } else if (stormSize==4) {
        rainPos=rainPos;
        rainV=7;
    } else if (stormSize==5) {
        rainPos=rainPos;
        rainV=8.25;
    } else if (stormSize==6) {
        rainPos=rainPos;
        rainV=9.5;
    }
    rainPos += rainV;
    if (rainPos>height+100) {
        rainPos=200;
    }

    //as the mouse moves down, the cloud gets smaller and darker
    pop();
    if (stormSize==1) {
        fill(207,215,218);
    } else if (stormSize==2) {
        fill(170,180,184);
    } else if (stormSize==3) {
        fill(137,154,162);
    } else if (stormSize==4) {
        fill(128,144,151);
    } else if (stormSize==5) {
        fill(104,118,124);
    } else if (stormSize==6) {
        fill(96,105,109);
    }
    ellipse((width/2)+25,(110+mouseY/50),(150-mouseY/10));
    rect(width/2,160,(300-mouseY/10),(100-mouseY/20),80,80,80,80);
    ellipse((width/2)-50,(125+mouseY/50),(100-mouseY/30));
    ellipse((width/2)-20,130,50+mouseY/20);
    ellipse((width/2)+60,140,40+mouseY/20);

    //when the rain is hard and the mouse is clicked, lightening strikes
    if (mouseIsPressed) {
        if (stormSize==5 || stormSize==6) {
        stroke(260);
        strokeWeight(10);
        line(225,200,125,350);
        line(125,350,250,400);
        line(250,400,200,710);
        }
    }
}

When thinking of things to make, I started by thinking about natural processes. I love watching the rain and how varied rain occurs, so I decided to move with that. I knew I wanted the rain to get bigger as the mouse moved down, along with the sky and cloud growing darker to simulate heavier rain. I also knew I wanted to include lighting on a click – just because lighting is fun. I think I went in with a clear idea in mind of what I wanted, so at that point it was just writing the program.

LO: Computational Fabrication

An exhibit of all four of Bernard’s Mounds pieces

Mounds, Colette Bernard, 2021

While scrolling through Instagram a couple months ago, I came across a video of artist Colette Bernard talking about experimenting with her art: 3D-printing ceramic. Bernard’s meta-forms rely upon the usual layer method of CNC 3D printing, but using clay instead of filament. It was a long process of what state to have the clay at (dry vs. wet, how large does the “filament” line have to be, ect.), but eventually she was able to print moldable ceramic. What I find most interesting about the work is the intersection between the human and the algorithmic components. Bernard mentions that she did use 3D modeling software to initially design her sculptures, but doesn’t talk further about her algorithm. Although a couple of her sculptures rely solely upon her algorithm, sometimes Bernard manually turns the printing plate during the printing process. I think this interplay between man and machine is very intriguing and brings up interesting questions about where “Colette’s” art begins and “machine production” ends. It’s almost as if the computer algorithm has taken life of its own and is participating with Bernard in creating her structures.

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.

Project 3: Dynamic Drawing

sketchDownload

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

function draw() {
    background(79, 88, 161); //dark blue
    noStroke();
    fill(252, 243, 199); //light yellow
    ellipse(300, 225, 100, 100); //main center circle

    // restricing the x and y coords of the mouse
    var x = max(min(mouseX, 600), 0);
    var y = max(min(mouseY, 450), 0);
    var d = dist(x, y, 300, 225);
    var size = 60 - 0.16 * d;

    fill(255 - 0.65 * d, 204, 204); //pink   

    ellipse(300, 150 - 0.5 * d, size, size); //circles in clockwise order
    ellipse(350 + 0.5 * d, 170 - 0.5 * d, size, size);
    ellipse(375 + 0.5 * d, 217, size, size);
    ellipse(362 + 0.5 * d, 267 + 0.5 * d, size, size);
    ellipse(320 + 0.1 * d, 297 + 0.5 * d, size, size);
    ellipse(268 - 0.3 * d, 293 + 0.5 * d, size, size);
    ellipse(232 - 0.6 * d, 257 + 0.4 * d, size, size);
    ellipse(228 - 0.5 * d, 205, size, size);
    ellipse(255 - 0.5 * d, 165 - 0.5 * d, size, size);
}


I thought this project was really fun because I got to be super creative with it. The circles move away from the big circle when you move your cursor as well as the size and color.