atraylor – Page 2 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

atraylor – Looking Outwards 07 – Section B

When looking for works to write about at the beginning of the semester, I stumbled upon this project, A Selfless Society by the RAT.systems team at Queen Mary University of London, which visualizes data from a naked mole-rat colony. The real time data is taken from the movement of the colony and rendered in an audio-visual animation. The project doesn’t experiment on the naked mole-rats and is purely for observation. The mole-rats have implanted passive integrated transponders that are sensed around the burrow to gather data on their movement and speed which is then used in the animation. The data gathered is being used to understand mole-rat social structure and is being put to other scientific uses. I find this project interesting because it integrates ecology, technology and art. The final result makes you wonder what each key animation means in relation to the actual happenings in the burrow.

atraylor – Project 07 – Section B

sketch

// atraylor@andrew.cmu.edu
//Project 07
// Section B


var a = 0;



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

function draw() {
    background(171, 163, 247);
    scribble();
}

function scribble(i, a, rad2, x, y) { // make the curve
    a = map(mouseX, 0, width, 10, 110); // number of lines in curve by mouse position
    var rad2 = 40; // staring radius

    beginShape();
    fill(203, 90, 243, 10);
    stroke(151, 227, 245);
    translate(width/2, height/2); //center
    for(var i = 0; i < a; i++) {
        var theta = map(i, 0, a/80, 0, TWO_PI); // apply values of i to radians in circle
        var x = rad2 * cos(theta); // x position of vertex
        var y = rad2 * sin(theta); // y position of vertex
        vertex(x, y);
        rad2 *= 1.02; // this makes it a spiral rather than a circle.
    endShape();
    }
}

For this project I used a parametric version of the logarithmic spiral to draw my curves. I played with it so the function would draw various shapes rather than simply growing a spiral when segments were added. There are several areas where you can see the near perfect spiral, and others where it’s simply a mess of lines. Its interesting to see the shapes that are spirals but have clear sides so they form stars, triangles, or pentagons. I added a fill to the curve with an alpha channel to emphasize the growth and change of the shape.

atraylor – Project 06 – Section B

sketch

// atraylor@andrew.cmu.edu
// Section B
// Project 06

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

function draw() {
    background(255, 230, 154);
    var offset = sin(millis()) * 2; // movement of hour circle

    var h = hour();
    var m = minute();
    var s = second();

    var hCol = map(h, 0, 23, 0, 255); //mapping hour to shade

    fill(hCol);
    ellipse(width/2, height/2 + offset, 50, 50); // hour circle

    for (var i = 0; i < s; i++) { //drawing second dots
        c = color(0);

        drawSec(i, c);
    }

    for (var i = 0; i < m; i++){ //drawing minute circles
        c = color(0, 40);
        drawMin(i, c);
    }
}

function drawSec(count, col, offset, offset2) { // fucntion for second dots
    push();
    offset = cos(millis()/ 350) * random(20, 50); // creating random oscillation
    offset2  = sin(millis()/ 350) * random(20, 50);
    translate(200, 200);
    rotate(radians(count * 6));
    fill(col);
    ellipse(150 + offset, 0 + offset2, 8, 8);
    pop();
}

function drawMin(count, col, offset, a){ // function for minute circles
    push();
    a = random(50, 70);
    offset = sin(millis()) * random(1, 2);
    translate(200, 200);
    rotate(radians(count * 6));
    fill(col);
    ellipse(60 + offset, 0, a, a);
    pop();
}

Time keeping is an interesting subject to me, especially when you begin to think about inaccuracy. My design is inspired by time keeping by measuring oscillation and resonance. I remember visiting NIST in elementary school to see their atomic clock which measures the resonance frequency of cesium to determine a second, and is the basis of time keeping in the US. While my design doesn’t illustrate a cesium atom’s resonance or the mechanics of atomic clocks, I was inspired to represent oscillation.

atraylor – Looking Outwards 06

For this blog post, I chose Ben Hemmendinger’s Wayfarer. This project is a randomly generated dungeon crawler game that is reminiscent of old text-based and 2D RPG games made with processing. This game is a blend of 2D and 3D graphics and is largely about exploration. There are items that you can find to defend yourself and attack monsters in the dungeons. I’m interested in this project because it’s simple and yet complex. There’s a certain charm in the 8 bit graphic style, top down projection (somewhat 0rthographic), and simple goals for simple ends. Unfortunately, my computer won’t let me play the game, but it seems from the Q&A page that the game is challenging. I also scanned the project website and I couldn’t find any specifics on the type of randomness used to produce the game, however you could make the assumption that the randomness needs to be limited for the game to be plausibly playable. Wayfarer is still under development, and I hope to see its end result. Even though it seems rudimentary, games like this show how simplicity can still be engaging.

Wayfarer wiki

atraylor – Project 05 – Section B

sketch

// atraylor
// Section B
// Project 05


function setup() {
    createCanvas(480, 480);
    background(13, 150, 255);
}

function draw() {

    moreThings(); // yellow spots



    var move = 8; // the amount move in x per line segment
    var lastX = -1; // beginning values
    var lastY = -1;
    var y = 1;
    var borderX = 0; // translates to edge
    var borderY = -1;
    stroke(127, 199, 255);

    for(var moveY = 0; moveY < 1000; moveY += 10){ // lines in the background
        for(var x = borderX; x <= width-borderX; x+= move){
            y = moveY + borderY + random(1, 20);

            line(x, y, lastX, lastY);

            lastX = x; //place the "new" x y values into last
            lastY = y;
        }
    }
    noLoop();
    things();//orange and purple circles
    noLoop();


}

function things(x, y){ //orange and purple circles
    for(var y = 0; y < width; y+= 100){
        for(var x = 0; x < height; x+= 100){
            var n = random(1, 5);
            var m = random(-5, 5);
            stroke(255, 183, 87);
            fill(255, 146, 0);
            ellipse(40 + x + n, 40 + y + n, 40, 40);
            stroke(108, 108, 244);
            noFill();
            strokeWeight(5);
            ellipse(41 + x + m, 48 + y + m, 40 + m, 40 + m);
        }
    }
}

function moreThings(x, y){ // yellow spots
    for(var y = 0; y < height; y += 100){
        for(var x = 0; x < width; x += 100){
            var n = random(1, 5);
            noStroke();
            fill(255, 230, 154);
            ellipse(x + n, y + n, 10, 10);
        }
    }
}

For this project, I wanted to practice making noisy lines. I used a for loop that drew sections of the line, using previous coordinates as starting points. Then I added another loop that translates the y coordinates of the line through each iteration. An improvement that I would make would be to remove the connecting lines between the rows. The result of the loop looked like primitive waves or mountains to me. I decided to pursue this concept by using bright and sunny colors. I don’t think I would wear this pattern, but it gave me a chance to try something new.

atraylor – Looking Outwards 05 – Section B

3d art is something that I’m passionate about and for this post I wanted to talk about art that inspires my own personal pieces. But, I wouldn’t learn much if I were to discuss something wholly familiar. However I don’t have much knowledge of generative 3d art. I chose Tom Beddard‘s fractal art because it looks very algorithm heavy. Motivated by visual complexity achieved through simple mathematical processes, Beddard writes his own software and tools to produce these complex fractal images. I admire these pieces of art because they create an environment of their own. The manifold details and configurations of the objects fascinates me, and makes me realize how time/computing intensive it would be to attempt to model and render this through software like Maya.

atraylor – Project 04 – Section B

sketch

// atraylor
// project 04, Section B

var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var num = 0.01;

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

}

function draw() {

    for (var i = 0; i < 10; i++) { //Drawing the lines from the edges
        stroke(0, 178, 135);
        lineLeft(i, y1);
        lineRight(i, y1);
    }

    for (var i = 0; i < 180; i++){ // drawing the line spiral
        c = color(25, 255, 200);
        num += 1;
        if (i > 60) {
            c = color(255, 62, 0);
        }
        if (i > 120){
            c = color(25, 255, 200);
        }
        if (i > 180){
            c = color(255, 62, 0);
        }
        stringLine(num, c, i);
    }
    noLoop(); // stoping the for loop so it doesn't keep drawing
}

function stringLine(deg, col, i) {
    push();
    translate(200, 150);
    rotate(radians(deg * 6));
    stroke(col);
    line( i * 0.5, 0, 200, 0); // changing the x position so the radius increases
    pop();
}

function lineLeft(i, y1) { // the two line things on the left side
    y1 = lerp(0, 400, i * .01); // these interpolate between the points, beginning y and end y
    y2 = lerp(300, 0, i * .01);
    line(0, i * 2 + 280, 200, i * y1);
    line(0, i * 2, 200, i * y1);
}

function lineRight(i, y1) { // the only difference is that these start at 400 rather than 0
    y1 = lerp(0, 400, i * .01);
    y2 = lerp(300, 0, i * .01);
    line(400, i * 2 + 280, 200, i * y1);
    line(400, i * 2, 200, i * y1);
}

For this project, I tried to use the lerp() function to define the beginning and end points of my lines. It was a rough task because I knew what lerp was supposed to do, but I wasn’t checking my changes after I made them. I figured it out but it took a lot of guessing and checking.

atraylor – Looking Outward 04 – Section B

Ales Tsurko’s microscale is a web-based album that takes Wikipedia articles and transforms them into real time generative music. The articles are processed as step sequencers and the individual letters represent a sequencer step. When a letter is read, it plays a sound. Tsurko’s concept is to transform meaning while the text is morphed into sound. He also is playing with the idea of dynamic music, as his project is published on an interactive web-page, rather than something that is composed and recorded once.

When I listened to microscale, I heard the audio form of chainless bicycles, anthrax, and vodka. There are several different track titles that have different atmospheric moods in which the text is interpreted.

I admire this piece because I’m interested in the transformation of words to something less tangible. I like that words can incite emotions and responses that are unique to the individual. This project is a way for words to be transformed beyond their meaning.

atraylor – Project 03 – section B

At first I really wanted to make something symmetrical but that just wasn’t working for me. So I decided to make a scribble star. It was a challenge working with the curves. I find myself constantly comparing the capabilities of p5 with Photoshop, which just makes me miss Photoshop. I did my best to hint at the qualities of stars while constrained to childlike scribbles.

sketch

// atraylor@andrew.cmu.edu
// Project 03 section B 


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

}

function draw() {

    var color1 = color(255, 249, 0); //first color for background
    var color2 = color(101, 25, 204); // second color
    var num = map(mouseX, 0, width, 0, .80); // making a number based on mouse
    var backColor = lerpColor(color1, color2, num); // lerp between color 1 and 2

    background(backColor); // color from above

    // first squiggle star
    var bend = map(mouseX, 0, width, -5, 5); //setting the mouseX output to a new scale from -5 to 5
    curveTightness(bend); // a value from -5 to 5 determines curve for vertex points
    noFill();
    stroke(255, 249, 0);
    beginShape();
    curveVertex(204,89);
    curveVertex(102, 515);
    curveVertex(462, 251);
    curveVertex(102, 515);
    curveVertex(204, 89);
    curveVertex(378, 515);
    curveVertex(18, 251);
    curveVertex(462, 251);
    curveVertex(102, 515);

    endShape();

    //second star
    push();
    var sScale = map(mouseX, 0, width, 0, -60);
    var bend2 = map(mouseX, 0, width, 5, -5); //setting the mouseX output to a new scale from -5 to 5
    curveTightness(bend2); // a value from -5 to 5 determines curve for vertex points
    noFill();
    stroke(255, 249, 0);
    beginShape();
    curveVertex(204,89 - sScale); //transforming points based on sScale variable
    curveVertex(102 - sScale, 515 + sScale);
    curveVertex(462 + sScale, 251);
    curveVertex(102 - sScale, 515 + sScale);
    curveVertex(204, 89 - sScale);
    curveVertex(378 + sScale, 515 + sScale);
    curveVertex(18 - sScale, 251);
    curveVertex(462 + sScale, 251);
    curveVertex(102 - sScale, 515 + sScale);
    endShape();
    pop();

    // first square
    push();
    var rot = map(mouseY, 0, height, 45, 360); // rotation based on mouseY
    var recScale = map(mouseX, 0, width, 1, .75); // scale from 1 to .75 based on mouseX
    stroke(255, 249, 0);
    rectMode(CENTER);
    translate(240, 320);
    scale(recScale);
    rotate(radians(rot));
    rect(0,0,400,400);
    pop();
    //second square
    push();
    var rot2 = map(mouseY, 0, height, -45, -360);
    stroke(255, 249, 0);
    rectMode(CENTER);
    translate(240, 320);
    scale(recScale);
    rotate(radians(rot2));
    rect(0,0,400,400);
    pop();
    // ellipse
    push();
    var cScale = map(mouseX, 0, width, 1, .75);// scale based on mouseX
    stroke(255, 249, 0);
    fill(255, 249, 0, 40);
    translate(240, 320);
    scale(cScale);
    ellipse(0, 0, 410, 410);
    pop();



}

atraylor – Looking Outwards – 03 – Section B

A project that caught my eye was Benjamin Dillenburger and Michael Hansmeyer’s Arabesque Wall which is a 3D printed ten foot tall structure, that exhibits extreme detail and intricacy.

It took four days to sand print the separate parts of the structure, which were later assembled into the final form. The geometric, folding motifs were inspired by arabesques present in Islamic art and generated using iterative algorithms and custom software.

I’m inspired by this work because it incorporates styles that are traditionally achieved by human labor and makes them extraordinarily complicated, so much so, that a piece like this could take decades to finish. In the article, the artists discuss how architecture should “surprise, excite, and irritate.” I believe that they were successful in fulfilling those endeavors in this piece.