abradbur@andrew.cmu.edu – Page 2 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

abradbur – Project-07 – Curves

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

function draw() {
    background(56, 136, 249);
    stroke(66, 229, 253);
    strokeWeight(5);
    noFill();

    //shaky box
    rect(width/2 - random(118,120), height/2 - random(118,120),
    random(238,240), random(235,240));

    //draw the hypcocylcoids
    push();
    translate(width/2, height/2);
    drawHypocyclo();
    drawCyclo2();
    pop();

}

function drawHypocyclo(){ //hypocycloid
    var x;
    var y;
    //big radius
    var a = map(mouseX, 0, 480, 50 *.01 * mouseX, 25 * .01 * mouseX);
    //lil radius
    var b = map(mouseY, 0, 480, 1 * .01 * mouseY, 10 * .01 * mouseY);
    var r; //angle

    beginShape();
    stroke(255);
    strokeWeight(1);
    for (var r = 0; r < TWO_PI * 10; r += 0.01){
        x = (a - b) * cos(r) - b * cos(((a-b)/(b))* r);
        y = (a - b) * sin(r) + b * sin(((a-b)/(b))* r);
        vertex(x,y);
    }
    endShape();

}

function drawCyclo2(){
    var a = map(mouseX, 0, 480, 50 *.01 * mouseX, 80 * .01 * mouseX); 
    var b = map(mouseY, 0, 480, 10 * .01 * mouseY, 90 * .01 * mouseY); 
    
    beginShape();
    stroke(66, 229, 253);
    strokeWeight(3);
    for (var r = 0; r < TWO_PI * 50; r += 0.01){
        x = (a - b) * cos(r) - b * cos(((a-b)/(b))* r);
        y = (a - b) * sin(r) + b * sin(((a-b)/(b))* r);
        vertex(x,y);
    }
    endShape();
}

I had a surprising amount of fun with this project once I was able to figure out the math and which variables to apply to which mouse function. It was also a good opportunity for me to finally figure out how the map(); function works, which I really shouldn’t have saved for until now.

While I was playing around on the Mathworld website (wow) I found myself in love with the Hypocycloid and all the different patterns you could get out of it, so I drew two of them. I added the shaky box as a sort of center piece, and I like how it acts as a containment unit for the inner curve.

Here are a couple of states that I really enjoyed from my project.

abradbur – Looking Outwards – 07

A Visualization of the wind currents in the U.S.

This is the Wind Map, created by Fernanda Viégas and Martin Wattenberg in 2012. It takes the current windspeed and direction of the wind currents in the U.S. in real time and presents them as whirling, organic lines. The denser the lines, the greater the windspeed. The data is pulled from the National Digital Forecast Database, and updates every hour. The simplicity of the design and the way it evokes the feeling of wind is incredible, as are the images this piece produces. Here is a screen capture of the map during Hurricane Isaac:

Here is the blog post.

And here is the live map.

abradbur – Project-05 – Wallpaper

rainyday

function setup() {
    createCanvas(480, 480);
    noLoop();
    
}

function draw() {
    background(22, 79, 119);
    noStroke();
    //rain
    for (var y = 0; y < 480; y += 5){
        for (var x = 0; x < 480; x += 5){
            fill(30, 190, 177);
            ellipse(x, y, 1, 1);
        }
    }

    for (var x = 0; x < 480; x += 96){
        for (var y = 0; y< 480; y+= 96){
            push();
            translate(x,y);
            drawTile();
            pop();

        }
    }
}

function drawTile(){


    //umbrella
    fill(60, 56, 68);
    quad(18, 66, 42, 34, 45, 35, 21, 67);
    rect(18, 66, 7, 3, 20);
    fill(151, 17, 55);
    triangle(24, 30, 60, 12, 36, 36);
    fill(151, 59, 86);
    triangle(36, 36, 60, 12, 48, 51);
    fill(151, 17, 55);
    triangle(48, 51, 60, 12, 54, 54);
    fill(243, 207, 118);
    triangle(60, 10, 64, 9, 63, 13);
    triangle(60, 10, 57, 12, 55, 8);
    triangle(58, 10, 55, 16, 63, 13);
    triangle(59, 14, 66, 16, 63, 12);
    fill(108, 13, 40);
    ellipse(60, 12, 3.5);

    
}

I wanted to make a cute wallpaper with umbrellas to signify my deep seated hope that maybe Pittsburgh will start cooling down for Fall and stop cooking us alive at 80 – 90 degrees. Let the rain fall.

Coding the loop was pretty simple, coding the shapes is still the most finicky part. However, using graph paper to sketch out things first helps.

abradbur – Looking Outwards-05

The first in Antoine Magnien’s series of melting wax figures for Amnesty International.

When searching the web for 3D art, I came across the online portfolio for Antoine Magnien, and found it filled with beautiful examples of CGI art. His personal projects as well as advertisement work were on display. My favorite series of his that I found would be the series he did for Amnesty International in 2013. It is an untitled series of figures seemingly constructed from melting wax. The images portrayed are haunting and gorgeous, and the use of material like that is awe inspiring. It looks like these could be photographs of real sculptures, but they aren’t.

Are they pulling the noose down, or stringing it up?

Here is the small portfolio.

Here is his website, but it’s all in French.

abradbur-Project-04-String Art

stringart

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

function draw() {
    background(150, 53, 54);
    //black string
    for ( x = 0; x < 400; x += 20){
        stroke(84,1,3);
        line(x, 0, x * 1.5, 120);
        line(1.5 * x, 120, 1.2 * x, 300);
    }
    //light pink string
    for (y = 20; y < 300; y+= 50){
        noFill();
        stroke(254, 170, 171);
        bezier(0, y * 1.5 , 50, y, 20, y * .4, 400, y);
    }
    //strawberry string
    for (a = 0; a < 200; a += 10){
        noFill();
        stroke(210, 107, 108);
        bezier(0, a * 0.5, 30, a * 1.3, 300, a, 400, a *2);
        bezier(1.5 * a, 120, 1.2 * a, 300, 0, a, 40, 20);
        stroke(140, 123, 172);
        bezier(50 * a, 120, 1.2 * a, 300, 0, a, 40, 20);
        bezier(100 * a, 120, 1.2 * a, 300, 0, a, 40, 20);
    }
    //purple string
    for (b = 350; b < 400; b+= 20){
        bezier(300, 60, b, 40, 20, 10 * b, 120, 1.2 * b);
        bezier(30, 20, b, 40, 20, 10 * b, 120, 1.2 * b);
        bezier(60, 20, b, 40, 20, 10 * b, 120, 1.2 * b);
        bezier(100, 20, b, 40, 20, 10 * b, 120, 1.2 * b);
        bezier(170, 22, b, 40, 20, 10 * b, 120, 1.2 * b);
        bezier(250, 40, b, 40, 20, 10 * b, 120, 1.2 * b);
    }
}

With this project I had fun playing with bezier curves and seeing what resulted from different loops in the code. I didn’t exactly have a distinct form in mind, and I didn’t want to make one because I felt it would take away from my exploration of the piece.

abradbur-Looking Outwards-04

This is “Fall” by Robert Henke.

This art piece was named after a village in Bavaria that was submerged under the waters of a reservoir in the 1950’s, which reemerged in 2015 when the reservoir water level fell. It is a series of suspended, extremely thin swatches of fabric, and the laserlights that play on them in different shapes, colors, and patterns. The cloth pattern itself was designed with an algorithm, and the sound aspect pulls from granulated bavarian music, water sounds, church bells, and other distortions. I love how haunting the backstory combined with the execution of this piece is. I always appreciate art that is a well researched tribute. In this piece, Fall is resurrected.

Here is the installation page on Henke’s website.

abradbur-Project-03-Dynamic Drawing

Dynamic Drawing

function setup() {
    createCanvas(640, 480);
    
}

function draw() {
    background(33, 32, 29);

    //clouds follow or pass by the mouse
    var cloudcover = -mouseX + 640;
    var cloudsize =  mouseY * 0.25;
    fill(140, 138, 146);
    noStroke();
    ellipse(mouseX, 100, cloudsize, cloudsize);
    ellipse(mouseX + 20, 150, cloudsize, cloudsize);
    ellipse(mouseX + 5, 200, cloudsize, cloudsize);
    ellipse(mouseX - 50, 207, cloudsize, cloudsize);
    ellipse(mouseX + 100, 200, cloudsize, cloudsize);
    ellipse(mouseX -15, 200, cloudsize, cloudsize);
    ellipse(cloudcover, 350, cloudsize, cloudsize);
    ellipse(cloudcover + 50, 340, cloudsize, cloudsize);
    ellipse(cloudcover - 8, 330, cloudsize, cloudsize);
    ellipse(cloudcover + 10, 315, cloudsize, cloudsize);
    ellipse(cloudcover - 10, 290, cloudsize, cloudsize);
    ellipse(cloudcover - 45, 350, cloudsize, cloudsize);
    
    //stage
    fill(0);
    rect(0, 420, 640, 60);
    rect(40, 360, 560, 60);

    //lights
    fill(255);
    quad(45, 480, 55, 420, 105, 450, 85, 480);
    quad(555, 480, 525, 450, 575, 420, 595, 480);
    quad(45, 0, 55, 60, 105, 30, 85, 0);
    quad(555, 0, 525, 30, 575, 60, 595, 0);

    //Edward
    fill(0);
    //head
    triangle( 80, 200, 95, 230, 110, 200);
    triangle( 80, 200, 75, 190, 85, 200);
    triangle( 105, 200, 110, 190, 110, 200);
    triangle( 75, 190, 70, 215, 100, 200);
    //shoulders
    triangle( 65, 230, 95, 275, 125, 230);
    //waist
    quad( 85, 260, 90, 280, 100, 280, 105, 260);
    //flair
    quad( 90, 280, 75, 310, 95, 330, 105, 260);
    //legs
    triangle(100, 255, 103, 360, 105, 260);
    triangle(85, 290, 88, 360, 90, 280);
    //arms
    triangle(75, 240, 70, 280, 77, 240);
    triangle(70, 280, 90, 300, 70, 280);
    triangle(120, 230, 135, 200, 125, 230);
    triangle(135, 200, 150, 190, 136, 200);

    // depending on the position of the mouse
    //different lights will turn on
    if ((mouseX < 320) & (mouseY > 240)){
        fill(252, 18, 58, 51);
        quad( 55, 420, 320, 0, 105, 0, 105, 450);
    } if((mouseX > 320) & (mouseY > 240)){
        fill(254,205,68,51);
        quad( 525, 450, 70, 0, 575, 0, 575, 420);
    } if((mouseX <320) & (mouseY < 240)){
        fill(252, 51, 170, 51);
        quad (55, 60, 250, 480, 270, 480, 105, 30);
    } else{
        fill( 52, 253, 47, 51);
        quad (525, 30, 200, 480, 260, 480, 575, 60);
    }

    // if mouse in canvas, reveal text
    textSize(40);
    var W = "Welcome to Wonderland!"
    if((mouseX < 640) & (mouseX > 0) & (mouseY > 0) & (mouseY < 480)){
        fill(162, 16, 110);
        } else {
            fill(33, 32, 29);
        }
    text(W, 100, 35, 500, 200);
    
    //Wheel of Misfortune
    //move origin to the center
    translate(320, 240);
    rotate(radians(2 * frameCount));
    //first wheel slice
    fill(162, 16, 110);
    arc(0, 0, 300, 300, PI + 3 * QUARTER_PI, TWO_PI);
    //second
    fill(243, 226, 53);
    arc(0, 0, 300, 300, PI + 2 * QUARTER_PI, 7 * PI/4);
    //third 
    fill(253, 99, 169);
    arc(0, 0, 300, 300, PI + QUARTER_PI, 3 * PI/2);
    //fourth
    fill(37, 213, 161);
    arc(0, 0, 300, 300, PI, 5 * PI/4);
    //fifth
    fill(37, 213, 161);
    arc(0, 0, 300, 300, 0, PI/4);
    //sixth
    fill(162, 16, 110);
    arc(0, 0, 300, 300, PI/4, PI/2);
    //seventh
    fill(243, 226, 53);
    arc(0, 0, 300, 300, PI/2, 3 * PI/4);
    //eighth 
    fill(253, 99, 169);
    arc(0, 0, 300, 300, 3 * PI/4, PI);

}

I was really inspired by the description of a dungeon in one of my favorite podcasts, “The Adventure Zone”, and I thought this would be a really fun project to try to realize that scene in simple shapes. I did my best to use a whimsical color scheme and incorporate a lot of motion. I think that out of what we’ve done so far this is the project I’m most proud of, and the one I’ve spent the most time on.

abradbur – Looking Outwards 03 – Section C

“Morandi’s Infinite Shelf” Gallery View, 2016

This is “Still Life (Morandi’s Infinite Shelf)” by Jason Salavon. I was really intrigued by his piece “Generic Mammal Skull” that was shown in the lecture notes given with the instructions for this Looking Outwards, so I went to check out his website and was delighted by what I saw. This Infinite Shelf is somehow able to make itself run forever and slowly produce new, possibly randomized vases as the image crawls along, from what I can see. I love art that seems mundane but actually has a fantastical sense to it. It tickles me. I feel like I could find this shelf in the house of a modern, scatterbrained wizard.

If you feel like watching a slow pan of a shelf for three hours, here’s a video of the work where you can observe Still Life in action.

And here’s his website. And the page where this work can be found.

abradbur-Project-02-Variable Face

facegenerator

//global variables
var eyeSize = 20;
var faceWidth = 200;
var faceHeight = 200;
var pupilSize = 10;
var noseLength = 30;
var noseHeight = 30;
 
function setup() {
    createCanvas(640, 480);
    rectMode(CENTER);
}
 
function draw() {
    noStroke();
    background(108, 207, 246);

    //hair + torso
    fill(112, 102, 119);
    rect(width/2, height/2 + 30, faceWidth + 10, faceHeight - 30);
    ellipse(width/2, height/2 - faceHeight/4, faceWidth + 10, faceHeight - 40);

    //face shape
    fill(204, 183, 174);
    ellipse(width/2, height/2, faceWidth, faceHeight);

    //eyeballs + pupils
    var eyeLX = width/2 - faceWidth * 0.25;
    var eyeRX = width/2 + faceWidth * 0.25;
    var eyeLH = height/2 - faceHeight * 0.25;
    var eyeRH = height/2 - faceHeight * 0.25;
    fill(255);
    ellipse(eyeLX, eyeLH, eyeSize, eyeSize);
    ellipse(eyeRX, eyeRH, eyeSize, eyeSize);
    fill(186, 199, 190);
    ellipse(eyeLX, eyeLH, pupilSize, pupilSize);
    ellipse(eyeRX, eyeRH, pupilSize, pupilSize);

    //mouth
    fill(166, 128, 140);
    arc(width/2, height/2 + faceHeight * 0.25, 100, 50, HALF_PI, PI);

    //nose
    fill(255, 202, 177);
    rect(width/2, height/2, noseLength, noseHeight);
    
    }

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. 
    faceWidth = random(100, 400);
    faceHeight = random(70, 300);
    eyeSize = random(55, 70);
    pupilSize = random(5, 50);
    noseLength = random(20, 70);
    noseHeight = random(20, 70);
}

At first I wanted to make this a lot more complex than the way it turned out, but I definitely didn’t give myself enough time. I was going to make the shape of the nose switch between a circle, square, and triangle, in addition to having randomized proportions. I was also going to go with three different hairstyles and mouth options.

Unfortunately, I ended up only messing around with the proportions of the face, so I’m a little disappointed in the result. I might play with it more on my own.

abradbur-Looking Outwards 02-Section C

Just one of the limitless images that can be created by Tentasho.

This is an image that was created by the program Tentasho, an interactive exhibit displayed at galleries that will draw different images depending on the sliders guests use and how they move their finger on the touchscreen. Tentasho was created by LIA in 2016, and while it can be experienced as an interactive exhibit it is also generative, as it will begin to draw on its own if left to itself for too long. It is described as “impatient” taking control of the art out of the artists hands should they become to hesitant in their strokes. I find this exhibit inspiring because every image crafted by Tentasho is entirely unique, like several thousand art pieces in one. The images it produces are alien, yet the processes Tentasho uses to draw appear meandering and calming. The generative qualities of Tentasho also make the piece feel alive and whimsical. The algorithm used to make Tentasho must have had some aspect of randomization to it, and I think the organic look of the pieces it generates reflects LIA’s artistic sense in that they appreciate art that occurs by chance.

Here is the Tentasho page on LIA’s website.