Author: Austin Treu

Austin Treu – Project 05

atreu-proj-05

//Austin Treu
//atreu@andrew.cmu.edu
//Section B
//Project-05

function setup() {
   	createCanvas(580, 580);
    background(0,0,int(random(255)));

    //set vars for circles
    var tw = 20, th = 20, offset = 20, 
    	circSize = 10, loops = 10, 
		backX = ((loops-1) * tw)/2, backY = ((loops-1) * th)/2,
		backSize = loops*circSize, 
		tileSizeX = (loops) * tw, tileSizeY = (loops) * th,
		//randomize color
		colorRandom = int(random(255));
		backColor = 'rgb(100,0,'+colorRandom+')',
		circColor = 'rgb('+colorRandom+',0,200)',
		lineColor = 'rgb(200, 0,'+colorRandom+')';

	//loop to draw multiple tiles
	stroke(lineColor);
	for(var i = 0; i < (height/tileSizeY); i++){
		for(var j = 0; j < (width/tileSizeX); j++){
			//draw big background circle
			fill(backColor);
			ellipse(backX + j*tileSizeX, backY + i*tileSizeY, backSize, backSize);
			//utilize honeycomb pattern for tile
			fill(circColor);
		    for (var y = 0; y < loops; y++) {
		        for (var x = 0; x < loops; x++) {
		            if(y%2 === 0){
		                var py = ( (y * th)) + i * tileSizeY;
		                var px = ( (x * tw)) + j * tileSizeX;
		                ellipse(px, py, circSize, circSize);
		            }
		            else{      
		                var py = ( (y * th)) + i * tileSizeY;
		                var px = ( (0.5 * offset + x * tw)) + j * tileSizeX;
		                ellipse(px, py, circSize, circSize);          
		            }
		        }
		    }
		    //draw lines around each tile
		    line(j*tileSizeX, i*tileSizeY, (j+1)*tileSizeX, i*tileSizeY);
		    line((j+1)*tileSizeX + 0.5*offset, (i+1)*tileSizeY-th, j*tileSizeX + 0.5*offset, (i+1)*tileSizeY-th);
		    line(j*tileSizeX, i*tileSizeY, j*tileSizeX + 0.5*offset, (i+1)*tileSizeY-th);
		    line((j+1)*tileSizeX + 0.5*offset, (i+1)*tileSizeY-th, (j+1)*tileSizeX, i*tileSizeY);
		}
	}

    noLoop();
}

When I started working on this project, I wanted to use the honeycomb code from Assignment B this week because of how interesting that ended up looking by itself. Ultimately I had to simplify it in order to make the math for the rest of the design work out a bit better, as adjusting everything to deal with the square root of three over two can become a difficult task. The shapes’ randomized fills and stroke correspond with each other and utilize the same random value in different ways.

Austin Treu – Looking Outwards-04

Multiverse by fuse* is a fascinating project including both generative graphics and sound. It utilizes the Multiverse Theories of physicist Lee Smolin that say that universes create new universes as opposed to collapsing into singularity as inspiration in that a new ‘universe’ begins every thirty minutes and inherits certain attributes from its ‘parent universe’ and those before it. The synthesized sound and constantly changing visuals invoke a sense of wonder about the cosmos and what is really out there. The division and consolidation that happen on the display symbolize the constant change that the Multiverse goes through, which is an incredible visual representation of something outside of our human grasp of space-time. One of the most interesting parts of the project that goes on under the hood is a direct interaction between openFrameworks and Ableton Live, which means that the sound and visuals are actually generated in tandem with one another, so, while each ‘universe’ is unique, it has matching visuals and sound that would match again under the exact same conditions. I am not only impressed by the wild physics of the modern day, I am impressed by this fantastic representation of it.

The following video is a three minute demonstration of the project.

Austin Treu – Project 04 – String Art

atreu – project04

//Austin Treu
//atreu
//Project 04
//Section C

var x1, y1, x2, y2;

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

    //for loop to generate points and draw lines
    for(var i = 0; i < 100; i++){
        //new points
        x1 = lerp(width,0, i/100);
        y1 = lerp(0,height, i/100);
        x2 = lerp(0,width, i/50);
        y2 = lerp(height,0, i/50);
        //draw red lines
        stroke(255, 0, 50);
        line(x1, height/i, 0, y1);
        line(width-x1, height/i, width,y1);

        //generate points
        x1 = lerp(width/2,0, i/100);
        y1 = lerp(height/2,0, i/100);
        x2 = lerp(width/2,0, i/50);
        y2 = lerp(height,0, i/50);
        //draw blue lines
        stroke(50, 0, 255);
        line(x1, y1, x2, y2);
        line(x2, y1, x1, y2);
        line(width-x1, y1, width-x2, y2);
        line(width-x2, y1, width-x1, y2)

        //generate new points
        x1 = lerp(width/i,width, i/100);
        y1 = lerp(height/i,height, i/100);
        x2 = lerp(0,width, i/75);
        y2 = lerp(0,height, i/75);
        //draw yellow lines
        stroke(175, 150, 0);
        line(x2, y2, x1, height);
        line(width-x2, y2, width-x1, height);

        //new points
        x1 = lerp(0,width/2, i/100);
        y1 = lerp(0,height/2, i/100);
        x2 = lerp(0,width-width/7.5, i/200);
        y2 = lerp(0,height/2, i/200);
        //draw green lines
        stroke(0, 255, 150);
        line(x2, y2, x1, y1);
        line(width-x2, y2, width-x1, y1);
    }
}

Learning how to properly utilize lerp() was an interesting process to experiment with, as it offered a huge variety of different options once I understood. I spent the time I worked on this completely focused on making it symmetrical, which changed my focus throughout the project.

Austin Treu – Looking Outwards-03

Robots in architecture is a fascinating concept to me. People and robots working together to achieve the same goal portrays the potential for a great future for both humans and machines. The development of robots to improve human capabilities in art and life will continue to grow exponentially in number and quality, which is incredible to think about, considering all of the possibilities that machines present to us. If you take a look from the perspective of sci-fi fiction, there is a possibility for it to all come crashing down on us as AI becomes integrated into most designs, but I believe that that is unlikely because of projects like these where the people and robots function as partners.

Austin Treu – Project-03 – Dynamic Drawing

atreu – project-03

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

var circX = 300, circY = 300, rad = 100, circStroke = 1,
    stripeC = 50, circC = 20, backC = 100, 
    strokeC = 0, sr, sg, sb;

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

function draw() {
    //draw back and stripes
    background(backC);
    noStroke();
    fill(stripeC);
    rectMode(CORNER);
    rect(width/4, 0, width/4, height);
    rect(3*width/4, 0, width/4, height);
    //change to colors on mouse pos
    if(mouseX < width/4 || mouseX > 3*width/4){
        backC = 100;
        stripeC = 50;
        circC = 20;
        strokeC = mouseX/4;
    }
    else{
        backC = 'rgb(50, 100, 255)';
        stripeC = 'rgb(100, 20, 150)';
        circC = 'rgb(0,100,50)';
        //set circle stroke color values
        sr = int(mouseX/4);
        sg = int(mouseY/2);
        sb = int((mouseX+mouseY)/4);
        if(mouseY < 0){
            sg = 0;
            sb = sr;
        }
        strokeC = 'rgb('+sr+','+sg+','+sb+')';
    }
    //set a variable stroke
    circStroke = (mouseX/10);
    strokeWeight(circStroke);
    stroke(strokeC);
    circX = width - mouseX;
    circY = height - mouseY;
    fill(circC);
    //draw circles/squares/triangles
    /*NOTE: circ vars initially intended to deal with
        only circles, later adapted to deal w/all shapes
        so they are circ due to the default shape being a circle*/
    if(mouseX+mouseY < width/3+height/4 
        || mouseX+mouseY > 2*width/3+3*height/4){
        rectMode(CENTER);
        rect(circX, circX, rad*3, rad*3);
        rect(circX, circY, rad*2, rad*2);
        rect(circY, circX, rad, rad);
        rect(circY, circY, rad/2, rad/2);
    }
    else if(mouseX+mouseY < width/3 + 3*height/4){
        triangle(circX, circX-3*rad, 
            circX+3*rad, circX+3*rad, circX-3*rad, circX+3*rad);
        triangle(circX, circY-2*rad, 
            circX+2*rad, circY+2*rad, circX-2*rad, circY+2*rad);
        triangle(circY, circX-rad, 
            circY+rad, circX+rad, circY-rad, circX+rad);
        triangle(circY, circY-rad/2, 
            circY+rad/2, circY+rad/2, circY-rad/2, circY+rad/2);
    }
    else{
        ellipse(circX, circX, rad*3, rad*3);
        ellipse(circX, circY, rad*2, rad*2);
        ellipse(circY, circX, rad, rad);
        ellipse(circY, circY, rad/2, rad/2);
    }
}

I found this project to be incredibly interesting to experiment with, especially when it comes to utilizing the mouse’s position to control everything that happens. Reversing the x and y coordinates and using them in various transformations created ways to line all the shapes up in the middle of their motion.

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.

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!).

Austin Treu-LookingOutwards-01

I am fascinated by Elon Musk’s work with his teams at both SpaceX and Tesla, particularly the work of incorporating Autopilot into Tesla cars. The design of the car has to be perfectly optimized and armed with enough sensors so that the passengers and others around the car are safe. While it is still a work in progress, just the fact that the car has the ability to make such calculated decisions while driving is incredible. The future with this sort of technology is wide open. As it improves, people will gradually be able to take their focus off of the road and use their time during travel to work or relax, really the possibilities are endless! Another interesting design  element of Tesla cars is their battery pack and motors being located underneath the car, meaning that the passengers can have more space inside the car for themselves and their belongings. Every bit of software and hardware involved in these cars is built by Tesla from the ground up, to my knowledge.

Austin Treu-Project-01-Face

atreu-face

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

function setup() {
    createCanvas(600, 600);
    background(0,255,255);

    //head
    fill(255, 208, 169);
    noStroke();
    ellipse(width/2, height/2, width/2+width/10, height/2+height/4);

    //eyes
        //whites l r
        fill(255);
        ellipse(width/2-width/8, height/2-height/10,width/10, height/15);
        ellipse(width/2+width/8, height/2-height/10,width/10, height/15);
        //iris l r
        fill(160, 177, 110);
        ellipse(width/2-width/8, height/2-height/10, width/15, height/15);
        ellipse(width/2+width/8, height/2-height/10,width/15, height/15);
        //pupils lr
        fill(0);
        ellipse(width/2-width/8, height/2-height/10, width/20, height/20);
        ellipse(width/2+width/8, height/2-height/10,width/20, height/20);

    //nose
    stroke(205, 158, 119);
    line(width/2,height/2-height/15, width/2+width/10, height/2+height/10);
    line(width/2,height/2+height/9,width/2+width/10, height/2+height/10);

    //ears lr
    noStroke();
    fill(255, 208, 169);
    ellipse(width/4-width/18, height/2, width/10, height/5);
    ellipse(3*width/4+width/18, height/2, width/10, height/5);

    //mouth
    fill(254);
    arc(width/2, height/2+height/5, width/5, height/7,0, PI, CHORD);

    //eyebrows lr
    fill(255,220,135);
    quad(width/2-width/5.5, height/2-height/6,
        width/2-width/5.5, height/2-height/7, 
        width/2-width/13, height/2-height/6, 
        width/2-width/13, height/2-height/5);
    quad(width/2+width/5.5, height/2-height/6,
        width/2+width/5.5, height/2-height/7, 
        width/2+width/13, height/2-height/6, 
        width/2+width/13, height/2-height/5);


    //hair
    fill(255,75,0);
        //sideburns lr
        triangle(width/4-width/25,height/2, 
            width/4-width/40, height/4, 
            width/4+width/20, height/4);
        triangle(3*width/4+width/25,height/2, 
            3*width/4+width/40, height/4, 
            3*width/4-width/20, height/4);
        //top
        arc(width/2,height/4, width/2+width/20, height/3, PI, 0, PI);
}

This was an interesting project to work on, as it required simplifying real life down to just rudimentary shapes. The coding wasn’t too difficult, although finding the exact points to place each shape required a decent amount of work.