September 2018 – Page 56 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Austin Treu – Looking Outwards-02

https://keiwan.itch.io/evolution

I found this evolution simulator by Keiwan on itch.io a while back. I find it fascinating how the algorithms are complicated enough to figure out how they can utilize almost any organization of muscles, bones and joints that they are given to evolve into a ‘creature’ more suitable for the given task. Algorithms such as these, that can take something so abstract and make it functional really highlight the fact that we may even be living in an ever-changing simulation ourselves. There is no way to say that there isn’t something that ‘developed’ our universe and let it run on its own. Many facets of our universe function very similarly to this evolution sim, although the ‘real’ things are much more complex than this. The algorithms involved in the sim are able to pick out the best uses for the creatures’ configurations and infuse those capabilities into the next generation from what I can tell. Over time, the creatures are able to develop more specified functions which continue to improve at the given task as long as the program is running, which sounds relatively similar to how we find ourselves evolving physically, technologically, and otherwise here on Earth.

Moka’s Maps

Moka, an artist based in Los Angeles, uses software to generate art in all different media types: drawing, animation, etc. These drawings are computer generated using meteorologist maps and scientific visualizations of flow.

Unnatural Flux: computer generated drawings based on maps and data visualizations of flow

Moka, having been trained in communication design, rather than computer science or fine arts, has an interesting background that he clearly applies in approaching his work. Specifically, it adds a level of visual clarity that seems to be unique considering the medium of the work.

The aesthetic of these drawings is what initially drew me in because it doesn’t look computer generated, so the character is human like, but the artist was only able to design the back-end. With this kind of work, the design flow, from data to art, creates almost endless possibilities where each piece can become so independent from others and it has the potential to stand alone or with a group of similar pieces.

What I enjoy most about these works is this almost new-frontier of data visualizations. While the information isn’t 100% clear to the eye, if we were to begin to compare these drawings, for example, based on their location, we could begin to uncover more specific information. Being an architecture student, we are often confronted with diagramming site analysis or social demographics and it’s so unique to see software generated data that isn’t a chart or a graph.

For more information on this project click this: https://www.mokafolio.de/works/UnnaturalFlux

Xiaoying Meng-Looking Outward-02

Algorithm Generated Japanese-Inspired Construction Joints

Wood joineries were very difficult to learn in history. The information was only accessible to people who study and master this traditional technique. The ways to explore and use this type of construction were very limited.

Aryan Shahabian, a researcher from the University of Applied Arts in Vienna used algorithms to record and demonstrate wood joineries. It allows more people to learn and use this information. This algorithm can also generate countless combinations of these joineries and create resultant free-form structures. It creates new possibilities in construction methods and expands the future of architecture. It is a step further in the field of parametric design.

I find this project very admiring because it uses modern technology to expand the possibility of traditional crafts. It is perhaps the new way of using ancient methods, so the traditions can live and grow.

Austin Treu – Project-02

atreu-proj02

//Austin Treu
//Section C
//atreu@andrew.cmu.edu
//Project-02

var eyeSize, irisSize, faceW, faceH, 
    backR = 75, backG = 220, backB = 200,
    faceR = 255, faceG = 255, faceB = 255,
    eyeR = 0, eyeG = 255, eyeB = 255,
    mouthW, mouthH, mouthX, mouthY,
    earW, earH, earShape = 0;
 
function setup() {
    createCanvas(480, 640);
    eyeSize = width/10, irisSize = eyeSize - 10;
    faceW = width/2, faceH = height/2;
    mouthX = width/2, mouthY = height/2 + eyeSize;
    mouthW = width/6, mouthH = height/8;
    earW = width/20, earH = height/10;
}
 
function draw() {
    background(backR,backG,backB);

    //draw face
    fill(faceR, faceG, faceB);
    ellipse(width / 2, height / 2, faceW,  faceH);

    //calculate and draw eyes
    var eyeLX = width/2 - faceW * 0.25;
    var eyeRX = width/2 + faceW * 0.25;
    fill(255);
    ellipse(eyeLX, height/2, eyeSize, eyeSize);
    ellipse(eyeRX, height/2, eyeSize, eyeSize);
    fill(eyeR, eyeG, eyeB);
    ellipse(eyeLX, height/2, irisSize, irisSize);
    ellipse(eyeRX, height/2, irisSize, irisSize);

    //draw mouth
    fill(255);
    arc(mouthX, mouthY, mouthW, mouthH, 0, PI, CHORD);

    //draw ears
    fill(faceR, faceG, faceB);
    if(earShape == 0){
        //circle ears
        ellipse(width/2-faceW/2-faceW/30, height/2, earW, earH);
        ellipse(width/2+faceW/2+faceW/30, height/2, earW, earH);
    }
    else if(earShape == 1){
        //triangle ears
        triangle(width/2-faceW/2, height/2-faceW/10, 
            width/2-faceW/2, height/2+faceW/10, 
            width/2-faceW/2-earW, height/2+earH);
        triangle(width/2+faceW/2, height/2-faceW/10, 
            width/2+faceW/2, height/2+faceW/10, 
            width/2+faceW/2+earW, height/2+earH);
    }
    else if(earShape == 2){
        //line ears
        line(width/2-faceW/2, height/2, 
            width/2-faceW/2-earW, height/2-earH);
        line(width/2+faceW/2, height/2, 
            width/2+faceW/2+earW, height/2-earH);
    }
    else{
        //do nothing - no ears
    }
}
 
function mousePressed() {
    //randomize face size
    faceW = random(width/4, width/2+width/4);
    faceH = random(height/4, height-height/8);

    //randomize eye sizes
    eyeSize = random(10, 30);
    irisSize = eyeSize - 10;

    //randomize background color
    backR = random(0, 255);
    backG = random(0, 255);
    backB = random(0, 255);

    //base face color off swapped back values
    faceR = backG;
    faceG = backB;
    faceB = backR;

    //base eye color off swapped back values
    eyeR = backB;
    eyeG = backR;
    eyeB = backG;

    //randomize mouth size 
    mouthW = faceW - random(20,100);
    mouthH = faceH/2 - random(0,30);

    //randomize ear size and shape
    earShape = int(random(0,4));
    earW = random(width/20, width/10);
    earH = random(height/20, height/5);
}

I decided to take an approach to this project looking at the faces as being more alien or robot than human, as it ultimately allowed me to add more interesting adjustments when it came to color and shapes. It provided me with some good practice in debugging the small things (e.g. semicolon in the wrong place… oops!).

Looking Outwards 02

http://www.ninakatchadourian.com/languagetranslation/talkingpopcorn.php

The generative artist that I am choosing to explore is Nina Katchadourian. She is a photographer, sculptor, and more, but the reason that I thought of her work for this blog post is because one of her pieces, entitled ‘Talking Popcorn’, uses the same logic as computer generated art. The piece is essentially a morse code reader installed inside of a popcorn machine, when batches of popcorn are popped, morse code reader translates strings of letters. In some of the popcorn batches there are actual english words that result in poems, or phrases and more. Nina has then memorialized the real popcorn that when popped, made words. Although this artist did not use code to make this artwork, I feel that she has utilized the concept of the randomness of an act like popping popcorn in a way that is similar to randomly generated code. I really admire how she took such a mundane act like popping popcorn and thought about how it could be made into randomly generated art.

Looking Outward 02

I found Erik Natzke’s NextFest Exhibit A video inspirational. I admire the crossover between digital and physical (paint) methods of creating art. He is inspired by the organic strokes of paint and incorporates that into his digital work and capturing the movement of line and strokes. It is exciting to see how many images he can make with this canvas and the music that goes along with the piece brings out the exciting movement even further. I suppose that the algorithm used in this piece is animation, statements we have started to use in class in the draw function, which also definitely uses color, transparency and shapes. Erik’s artistic sensibilities show through in his algorithms with the way he animates the strokes to first be out of the picture frame and then almost throw into the picture frame. Also the way he makes up the strokes in smaller transparent shapes adds to the organic aspect of the lines.

Jessica Timczyk – Project 02

pigface

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project 02 - Variable Face

var eyeSize = 40;
var faceWidth = 200;
var faceHeight = 300;
var faceColorR = 241;
var faceColorG = 146;
var faceColorB = 188;
var eyeColorR = 126;
var eyeColorG = 242;
var eyeColorB = 230;
var eyeLX = 640 / 2 - faceWidth * 0.25;
var eyeRX = 640 / 2 + faceWidth * 0.25;
var mouthHeight = 480 / 2 + 40
var noseHeight = 25

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(226, 179, 239);

    // face color
    stroke(0);
    strokeWeight(2);
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //eye variables
    var eyeLX = 640 / 2 - faceWidth * 0.25;
    var eyeRX = 640 / 2 + faceWidth * 0.25;

    // eyeball shapes
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize * 3/4);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize * 3/4);

    // irises shape
    strokeWeight(.75);
    // the iris color will change but the variables are rearranged so that 
    // they are not the same color as the face
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeLX, height / 2, eyeSize * 2/3, eyeSize * 2/3);
    ellipse(eyeRX, height / 2, eyeSize * 2/3, eyeSize * 2/3);

    // Pupil
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize * 1/3, eyeSize * 1/3);
    ellipse(eyeRX, height / 2, eyeSize * 1/3, eyeSize * 1/3);


    //eyebrow variables
    var eyebrowLX = eyeLX - 30;
    var eyebrowRX = eyeRX - 30;

    // left eyebrow shape
    noStroke();
    fill(123, 72, 72);
    beginShape();
    curveVertex(eyebrowLX, height / 2 - 20);
    curveVertex(eyebrowLX, height / 2 - 20);
    curveVertex(eyebrowLX + 30, height / 2 - 40);
    curveVertex(eyebrowLX + 50, height / 2 - 35);
    curveVertex(eyebrowLX + 50, height / 2 - 30);
    curveVertex(eyebrowLX + 30, height / 2 - 33);
    curveVertex(eyebrowLX + 30, height / 2 - 33);
    endShape();

    // right eyebrow shape
    fill(123, 72, 72);
    beginShape();
    curveVertex(eyebrowRX + 60, height / 2 - 20);
    curveVertex(eyebrowRX + 60, height / 2 - 20);
    curveVertex(eyebrowRX + 30, height / 2 - 40);
    curveVertex(eyebrowRX + 10, height / 2 - 35);
    curveVertex(eyebrowRX + 10, height / 2 - 30);
    curveVertex(eyebrowRX + 30, height / 2 - 33);
    curveVertex(eyebrowRX + 30, height / 2 - 33);
    endShape();

    // mouth shape
    fill(0);
    stroke(235, 65, 97);
    strokeWeight(4);
    arc(width / 2, faceHeight, 80, 80, 0, PI, CHORD);

    // restraining mouth height to stay below 2/3 of the way down 
    // the page as to not overlap with the eyes as they move
    if (faceHeight <= height * 2/3) {
        faceHeight = mouthHeight;
    }

    // Pig nose
    stroke(0);
    fill(227, 138, 190);
    ellipse(width / 2, faceHeight - noseHeight, 70, 60);

    // nostrils
    fill(0);
    ellipse(width / 2 - 10, faceHeight - noseHeight, 8, 15);
    ellipse(width / 2 + 10, faceHeight - noseHeight, 8, 15);

    // ears
    strokeWeight(3);
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(eyeLX, faceHeight * 1/3, 90, 85);
    ellipse(eyeRX, faceHeight * 1/3, 90, 85);

    // cheaks
    // use eyeRX as x value so that the cheeks move with the eyes
    arc(eyeRX + 35, faceHeight + 10, 80, 80, PI, PI + HALF_PI, OPEN);
    arc(eyeLX - 35, faceHeight + 10, 80, 80, PI + HALF_PI, TWO_PI, OPEN);


}
 

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(150, 500);
    faceHeight = random(100, 400);
    eyeSize = random(30, 85);
    faceColorR = random(235, 244);
    faceColorG = random(54, 194);
    faceColorB = random(161, 224);
    eyebrowLX = random(eyeLX - 50, eyeLX - 10);
    eyebrowRX = random(eyeRX - 50, eyeLX - 10);
    mouthHeight = random(270, 330);
    noseHeight = random(40, 15);
    eyeColorR = random(126, 242);
    eyeColorG = random(126, 242);
    eyecolorB= random(126, 242);
}

It took me a little while to understand how to use the random command with variables to get the results I wanted. Each time I would add a new feature, I would draw it on the original face, and then add in the random movement and random function at the end. Most of my time was then spent manipulating the bounds so that the different features of my pig faces would not overlap.

cmhoward-project-02

cmhoward-p2

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var earSize = 15;
var headphoneSize = 6;
var colorPicker = 1;
var faceColor = 2;
var mouthWidth = 3;
var mouthHeight = 4;
var eyebrowWidth = 5;
var eyebrowHeight = 6;

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

function draw() {
    //background
    switch(colorPicker) {
        case 1:
            background(252, 156, 231);
            break;
        case 2:
            background(230, 156, 252);
            break;
        case 3:
            background(156, 193, 252);
            break;
        case 4:
            background(252, 249, 156);
            break;
        default:
            background (161, 252, 156);
    }
    //headphones
    noFill();
    stroke('black');
    strokeWeight(4);
    curve(width / 2 - faceWidth * 1, height * 3.5, width / 2 - faceWidth / 1.75, height / 2, width / 2 + faceWidth / 1.75, height / 2, width / 2 + faceWidth * 1, height * 3.5);
    //ears
    fill('black');
    noStroke();
    ellipse(width / 2 - faceWidth / 2, height / 2, earSize, earSize*1.5);
    ellipse(width / 2 + faceWidth / 2, height / 2, earSize, earSize*1.5);
    //face
    switch(faceColor) {
        case 1:
            fill(252, 156, 176);
            break;
        case 2:
            fill(204, 139, 224);
            break;
        case 3:
            fill(139, 171, 224);
            break;
        case 4:
            fill(242, 239, 145);
            break;
        default:
            fill(143, 224, 139);
    }
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //hearteyes
    fill('pink');
    stroke('black');
    strokeWeight(1);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    //lefteye
    curve(width / 2 + width * .75, height / .75, eyeLX, height / 2.0, eyeLX, height / 1.8, width / 2, height / 1.5);
    curve(width / 2 - width * .75, height / .75, eyeLX, height / 2.0, eyeLX, height / 1.8, width / 2, height / 1.5);
    //righteye
    curve(width / 2 + width * .75, height / .75, eyeRX, height / 2.0, eyeRX, height / 1.8, width / 2, height / 1.5);
    curve(width / 2 - width * .75, height / .75, eyeRX, height / 2.0, eyeRX, height / 1.8, width / 2, height / 1.5);
    //nose
    noFill();
    curve(width / 2 + faceWidth / 2, height / 2 + faceHeight / 2, width / 2 - faceWidth / 16, height / 2 + faceHeight / 6, width / 2 + faceWidth / 16, height / 2 + faceHeight / 6, width / 2 - faceWidth / 2, height / 2 + faceHeight / 2);
    //mouth
    arc(width / 2, height / 1.6, mouthWidth, mouthHeight, TWO_PI, PI, OPEN);
    //eyebrows
    arc(width / 2 - faceWidth / 3.5, height / 2.5 + faceHeight / 12, eyebrowWidth, eyebrowHeight, PI, TWO_PI, OPEN);
    arc(width / 2 + faceWidth / 3.5, height / 2.5 + faceHeight / 12, eyebrowWidth, eyebrowHeight, PI, TWO_PI, OPEN);
}

function mousePressed() {
    faceWidth = random(80, 100);
    faceHeight = random(140, 165);
    eyeSize = random(10, 30);
    earSize = random(25, 40);
    headphoneSize = random(3, 8);
    colorPicker = int(random(1, 6));
    faceColor = int(random(1, 6));
    mouthWidth = faceWidth / random(2, 4);
    mouthHeight = faceHeight / random(2.5, 4.5);
    eyebrowWidth = faceWidth / random(3.5, 4);
    eyebrowHeight = faceHeight / random(8, 10);
}

i really enjoyed this project because i enjoyed designing throughout the code and trying new things as i went along instead of looking for one specific solution which i may have been trying too hard to do last week.

Alice Fang- Project 02 Variable Face

dancing bird

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-02
*/

var R = 255; //RGB color
var G = 255;
var B = 255;

var HeadW = 300; //width of head
var HeadH = 200; //height of head
var HeadX = 320; //x position of head
var HeadY= 200; //y position of head

var beakA = 80; //length of beak

var t = "chirp";
var tX = 600; //text position
var tY = 440;
var ran = 300; //affecting variable

var kneeA = 300; //x position for knee
var kneeB = 390; //y position for knee

var wingW = 30; //wing width
var wingL = 120; //wing length
var degW = 260; //angle of wing

var featherA = 20; //width of first head feather
var featherB = 80; //height of first head feather
var featherC = 10; //width of second head feather
var featherD = 75; //height of second head feather
var deg = 50; //angle of head feather

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

function draw() {
	background(20, 30, 50);

	//bird legs
	stroke(117, 53, 18);
	strokeWeight(6);
	//left leg
	line(HeadX, HeadY, kneeA, kneeB);
	line(kneeA, kneeB, HeadX - 40, 480);
	//rightlig
	line(HeadX, HeadY, kneeA + 100, kneeB);
	line(kneeA + 100, kneeB, HeadX + 40, 480);

	//"chirp" text
	noStroke();
	textSize(20);
	textStyle(BOLD);
	fill(B - 120, G - 80, R - 100);
	text(t, tX, tY);
	fill(R - 20, B - 80, G - 120);
	text(t, mouseX, mouseY);
	fill(G - 100, B - 120, R - 10);
	text( t, tX + ran, tY + ran);

	//bird body
	noStroke();
	fill(R, G, B);
	ellipse(HeadX, HeadY, HeadW, HeadH);

	//left wing
	fill(R, G, B);
	push();
	translate(HeadX - HeadW/2, HeadY);
	rotate(180 + degW);
	ellipseMode(CORNER);
	ellipse(0, 0, wingW, wingL);
	pop();
	//right wing
	push();
	translate(HeadX + HeadW/2, HeadY);
	rotate(180 - degW);
	ellipseMode(CORNER);
	ellipse(-20, 0, wingW, wingL);
	pop();

	//head feathers
	fill(R, G, B);
	push();
	translate(HeadX, HeadY - HeadH/2);
	rotate(180 + deg);
	ellipseMode(CORNER);
	if (HeadY - HeadH/2 <= 80) {
		ellipse(0, 0, featherA, 40);
	} else {
		ellipse(0, 0, featherA, featherB);
	}
	pop();

	push();
	translate(HeadX, HeadY - HeadH/2);
	rotate(180+ deg + 40);
	ellipseMode(CORNER);
	if (HeadY - HeadH/2 <= 80) {
		ellipse(0, 0, featherC, 40);
	} else {
		ellipse(0, 0, featherC, featherD);
	}
	pop();

	//bird beak
	fill(193, 86, 27);
	triangle(HeadX, HeadY - 10, HeadX + beakA, 
		    HeadY, HeadX, HeadY + 5);

	//bird eyes
	fill(0);
	ellipse(HeadX - 32, HeadY - 15, 8, 8);
	ellipse(HeadX + 32, HeadY - 15, 8, 8);

}

function mousePressed() {
	R = random(180, 255);
	G = random(180, 255);
	B = random(180, 255);

	//head
	HeadW = random(120, 200);
	HeadH = random(150, 180);
	HeadX = random(300, 320);
	HeadY = random(150, 200);

	beakA = random(-70, 80);

	//knee joint
	kneeA = random(220, 300);
	kneeB = random(320, 370);

	//text position
	tX = random(110, 550);
	tY = random(20, 440);
	ran = random(-300, 300);

	//wing size and angle
	wingL = random(80, 120);
	wingW = random(10, 30);
	degW = random(200, 260);

	//head feather size and angle
	featherA = random(10, 20);
	featherB = random(50, 80);
	featherC = random(5, 10);
	featherD = random(20, 75);
	deg = random(-50, 50);


}

This dancing bird was inspired by a doodle that I tend to draw in my notes (and in my friends’ notes too…). Working with variables was a bit of a struggle for me, especially if something went wrong in the position or rotation, because then I had to figure out which variable the problem occurred with, as opposed to just toggling numbers, but this was a fun exercise to do!

Kai Zhang-Looking Outwards-02

Abstracted, repeated image of human face.

Diffusion Choir

Client: Sosolimited

Architect: de Architedkten Cie

Year of Built: 2006

The Diffusion Choir consists with four hundred folding elements that celebrates the organic movement of an invisible flock of birds. Each of the element is able to open and close independently. There’s a consitant simulation of birds over the course of each hour. Smaller groups of birds coalesce into a single entity. The birds collaborated to perform a virtual choreographed gesture across the space.

The reason of the selection is because it’s close relationship with the parametric design workflow that I usually do in architectural practices. In the coding process, driving particles (aka the flock of birds in this project) are assigned as driving variables that initiate the change happening in the moving elements. They respond to the movement of the driving particles by calculating the distance and some other features of the “birds” by opening and closing. In such matrix, the large group had formed an elegant dance of waves that attrack the attention of the whole room, also evaporate a sense of pleasing tranquility.

http://sansumbrella.com/works/2016/diffusion-choir/