Author: Brody

Looking Outwards – 03

Rock Print is an architectural sculpture by Gramazio Kohler Research, ETH Zurich, and the Self-Assembly Lab, MIT constructed using robots. The sculpture was designed using algorithms that guide a robotic arm to place wire and low-grade granular material precisely so that the structure can be held up by only these two elements. I find it interesting as the structure uses material to form something that would be almost impossible without the help of robots. This material would normally be used as a base layer for other materials (concrete, asphalt, etc) to be put on top. It is interesting to see it being used in other ways that seem to contradict its normal usage. In the world of architecture, reuse is something we need to think about and have not thought about for a while. This project starts to consider reuse as it reuses material that could be considered scrap and it also has a simple deconstruction process that returns the materials to their original state by just unraveling the wire holding the structure together.
https://selfassemblylab.mit.edu/rock-printing
https://gramaziokohler.arch.ethz.ch/web/e/forschung/297.html

Project – 03

right click to refresh

sketch

//grid lines vertical
var x1 = 30
var y1 = 30
var x2 = 30
var y2 = 60

//grid lines horizontal
var Ax1 = 60
var Ay1 = 30
var Ax2 = 90
var Ay2 = 30

//orange square
var Sx1 = 60
var Sy1 = 60
var d = 30

//purple square
var PSx1 = 240
var PSy1 = 300
var Pd = 30

//yellow square
var YSx1 = 420
var YSy1 = 210
var Yd = 30


var gap = 30
var scolor = 0
var slant = 0
function setup() {
    createCanvas(600, 450);
    background(0);
    //text("p5.js vers 0.9.0 test.", 10, 15);
}



function draw() {

//orange square
strokeWeight(0)
fill('orange')
square(Sx1,Sy1,d)

//purple square
strokeWeight(0)
fill('purple')
square(PSx1,PSy1,Pd)

//yellow square
strokeWeight(0)
fill('yellow')
square(YSx1,YSy1,Yd)

// scaling square orange
if(dist(mouseX,mouseY,Sx1+d/2,Sy1+d/2)<d){
    //squaresscale
    d+=10
}if(d==width/2-15 || d==height/2-15){
    strokeWeight(0);
    fill(0)
    square(0,0,1000);
    strokeWeight(0);
    fill(random(200,255));
    square(Sx1,Sy1,d);
    d=60;
}

// scaling square purple
if(dist(mouseX,mouseY,PSx1+d/2,PSy1+Pd/2)<Pd){
    //squaresscale
    Pd+=30
}if(Pd==width/4 || Pd==height/4){
    strokeWeight(0);
    fill(0)
    square(0,0,1000);
    strokeWeight(0);
    fill(random(200,255));
    square(PSx1,PSy1,Pd);
    Pd=60;
}

// scaling square yellow
if(dist(mouseX,mouseY,YSx1+d/2,YSy1+Yd/2)<Yd){
    //squaresscale
    Yd+=1
}if(Yd==width/4 || Yd==height/4){
    strokeWeight(0);
    fill(0)
    square(0,0,1000);
    strokeWeight(0);
    fill(random(200,255));
    square(YSx1,YSy1,Yd);
    Yd=60;
}



//grid lines vertical left to right
//color
if(scolor==0){
stroke('red');
strokeWeight(3);
line(x1,y1,x2,y2);
}if(scolor==1){
stroke('green');
strokeWeight(3);
line(x1,y1,x2,y2);
}if(scolor==2){
stroke('blue');
strokeWeight(3);
line(x1,y1,x2,y2);
}if(scolor>2){
    scolor=0;
} 




//grid creation animation
x1+=gap
x2+=gap

//lines hit edge of canvas
if(x1>=width-60){
    //move down a row
    y1+=gap*2;
    y2+=gap*2;
    //reset x values
    x1=gap;
    x2=gap;
//loop lines across screen
}if(y2>=height){
    x1=30;
    x2=30;
    y1=30;
    y2=60;
    scolor +=1
}

//grid lines horizontal color top down
//color
if(scolor==2){
stroke('red');
strokeWeight(3);
line(Ax1,Ay1,Ax2,Ay2);
}if(scolor==1){
stroke('green');
strokeWeight(3);
line(Ax1,Ay1,Ax2,Ay2);
}if(scolor==0){
stroke('blue');
strokeWeight(3);
line(Ax1,Ay1,Ax2,Ay2);
}if(scolor>2){
    scolor=0;
}

//grid creation animation
Ay1+=gap
Ay2+=gap

//lines hit edge of canvas
if(Ay1>=height){
    //move across a row
    Ax1+=gap*2;
    Ax2+=gap*2;
    //reset y values
    Ay1=gap + slant;
    Ay2=gap;
//loop lines across screen
}if(Ax2>width){
    Ax1=60;
    Ax2=90;
    Ay1=30;
    Ay2=30;
    scolor +=1
}



//refresh page
if(mouseIsPressed){
    if(mouseButton == RIGHT){
    
    fill(0)
    rect(0,0,width,height);
    //orange square
    Sx1 = 60
    Sy1 = 60
    d = 30

    //purple square
    PSx1 = 240
    PSy1 = 300
    Pd = 30

    //yellow square
    YSx1 = 420
    YSy1 = 210
    Yd = 30
}
}

//slant
if(mouseX>width/2){
    //slant for vertical
    x1=x1+gap;

}
if(mouseY>height/2){
    //slant for horizontal
    Ay1=Ay1+gap;

}

}

LookingOutwards-02

Sifting through the reference projects on the assignment sheet, I was very intrigued by the work of Leander Herzog. The projects from Herzog that really stood out to me were Very Large Array and Gerhard. Although Herzog has programmed an algorithm for the pieces and has a vague idea of what the piece will look like, there is an infinite number of possibilities as to what can be produced because the user is the one generating the art. I really enjoyed how involved I felt contributing to the art work. Both pieces had a similar effect where the art work generated based on how you click on the screen; however, the addition of sound in Very Large Array was fascinating as the sounds looked like they were creating the art with me. From what I understand so far, I believe the program has to be using lots of randomization, but this randomization is constricted by a series of rules and code that Herzog has layed out.

https://leanderherzog.ch/

https://leanderherzog.ch/2022/gerhard/

https://leanderherzog.ch/2022/vla/

Project 02

Left Side = :|, Right Side = :), Middle = : , Click the Shirt to Change Colors/Scale, Click and Hold on Face = ???

sketch
//Brody Ploeger
//Section C


var faceWidth = 175;
var faceHeight = 200;
var backcolor1 = 2;
var backcolor2 = 10;
var backcolor3 = 20;
var backrectcolor1 = 215;
var backrectcolor2 = 210;
var backrectcolor3 = 240;
var backrectcolor2 = 200
var circlecolor1 = 110;
var circlecolor2 = 150;
var circlecolor3 = 190;
var shirtcolor1 = 250;
var shirtcolor2 = 200;
var shirtcolor3 = 215;



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

function draw() {
    background(backcolor1, backcolor2, backcolor3)

    strokeWeight()

    //background rect
    fill(backrectcolor1, backrectcolor2, backrectcolor3, 75)
    rect(640/2,0,640/2,480)

    
    //shirt
    fill(shirtcolor1,shirtcolor2,shirtcolor3);
    circle(640/2, 480/2+faceHeight, faceHeight*1.5)
   

    //right side of face
    fill(circlecolor1, circlecolor2, circlecolor3)
    ellipse(640/2, 480/2, faceWidth, faceHeight)
    
    //left side of face
    fill(200, 75)
    beginShape();
    vertex(640/2-faceWidth/2, 480/2-faceHeight/2);
    vertex(640/2,480/2-faceHeight/2);
    vertex(640/2,480/2-faceHeight/10);
    vertex(640/2-faceWidth/10,480/2+faceHeight/6);
    vertex(640/2,480/2+faceHeight/2);
    vertex(640/2-faceWidth/2,480/2+faceHeight/2);
    endShape();

    //right eye
    fill(backcolor1, backcolor2, backcolor3);
    rect(640/2+faceWidth/8,480/2-faceHeight/10, faceWidth/5, faceHeight/5);

    //right pupil
    fill(backrectcolor1, backrectcolor2, backrectcolor3)
    ellipse(640/2+faceWidth/4.5,480/2, faceWidth/10, faceHeight/10)

    //left eye
    fill(backrectcolor1, backrectcolor2, backrectcolor3);
    ellipse(640/2-faceWidth/4,480/2, faceWidth/4, faceHeight/4);

    //left pupil
    stroke(backcolor1, backcolor2, backcolor3) ;  
    strokeWeight(faceWidth/40+faceHeight/40);
    line(640/2-faceWidth/3.25, 480/2, 640/2-faceWidth/5, 480/2);

if (mouseX<640/4){

    //straight mouth
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/5, 480/2+faceHeight/3.5, 640/2+faceWidth/5, 480/2+faceHeight/3.5);  

    //left straight eyebrow 1
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/2.8, 480/2-faceHeight/5, 640/2-faceWidth/7, 480/2-faceHeight/5);

    //right straight eyebrow 2
    stroke(backcolor1, backcolor2, backcolor3);  
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2+faceWidth/2.8, 480/2-faceHeight/5, 640/2+faceWidth/7, 480/2-faceHeight/5);
} else if(mouseX>640*3/4){
    
    //mouth smile
    fill(backrectcolor1, backrectcolor2, backrectcolor3);
    strokeWeight(faceWidth/50+faceHeight/50);
    arc(640/2, 480/2+faceHeight/4, faceWidth/2, faceHeight/4,0,PI,PIE);
    
 // left tilt eyebrow 1
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/2.8, 480/2-faceHeight/5, 640/2-faceWidth/7, 480/2-faceHeight/4);

    //right tilt eyebrow 2
    stroke(backcolor1, backcolor2, backcolor3);  
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2+faceWidth/2.8, 480/2-faceHeight/5, 640/2+faceWidth/7, 480/2-faceHeight/4);
}

    if(mouseIsPressed){
    if (dist(mouseX, mouseY, 640/2,480/2)<faceHeight/3+faceWidth/5){
   
    faceWidth = random(100, 250);
    faceHeight = random(150,400); 
    backcolor = random(0,75);
    backcolor2 = random(0,75);
    backcolor3 = random(0,75);
    backrectcolor1 = random(210,255);
    backrectcolor2 = random(210,255);
    backrectcolor3 = random(210,255);
    circlecolor = random(100,200);
    circlecolor2 = random(100,200);
    circlecolor3 = random(100,200);
    shirtcolor1 = random (200,255);
    shirtcolor2 = random (200,255);
    shirtcolor3 = random (200,255);
    


    strokeWeight(faceWidth/50+faceHeight/50)
    noFill();
    beginShape();
    vertex(640/2-faceWidth/5, 480/2+faceHeight/4);
    vertex(640/2-faceWidth/5.5, 480/2+faceHeight/3.5)
    vertex(640/2-faceWidth/10, 480/2+faceHeight/4)
    vertex(640/2-faceWidth/15, 480/2+faceHeight/3.5)
    vertex(640/2+faceWidth/15, 480/2+faceHeight/4)
    vertex(640/2+faceWidth/10, 480/2+faceHeight/3.5)
    vertex(640/2+faceWidth/5.5, 480/2+faceHeight/4)
    vertex(640/2+faceWidth/5, 480/2+faceHeight/3.5);
    endShape();

    // other left tilt eyebrow 1
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/2.8, 480/2-faceHeight/4, 640/2-faceWidth/7, 480/2-faceHeight/5);

    //other right tilt eyebrow 2
    stroke(backcolor1, backcolor2, backcolor3);  
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2+faceWidth/2.8, 480/2-faceHeight/4, 640/2+faceWidth/7, 480/2-faceHeight/5);

    faceWidth += 10;
    faceHeight += 10;

}
}

print(faceHeight)


}


function mousePressed() {

//if circle clicked, shape of head changes
if (dist(mouseX, mouseY, 640/2, 480/2+faceHeight)<faceHeight/2+faceWidth/2){
    faceWidth = random(100, 250);
    faceHeight = random(150,400); 
    backcolor = random(0,75);
    backcolor2 = random(0,75);
    backcolor3 = random(0,75);
    backrectcolor1 = random(210,255);
    backrectcolor2 = random(210,255);
    backrectcolor3 = random(210,255);
    circlecolor = random(100,200);
    circlecolor2 = random(100,200);
    circlecolor3 = random(100,200);
    shirtcolor1 = random (200,255);
    shirtcolor2 = random (200,255);
    shirtcolor3 = random (200,255);

 
}
 
}

Project 01

This is my project

sketch
function setup() {
    createCanvas(200, 200);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    
    background(random(0,75),random(0,75),random(0,75));

    strokeWeight(0);
    fill(random(210,255),random(210,255),random(210,255),75);
    rect(0,0,100,200)

    strokeWeight(0);
    fill(255);
    rect(50,80,100,55); //hair back

    strokeWeight(0);
    fill(255);
    quad(60,160,140,160,75,50,125,50);   //hair back

    strokeWeight(0);
    fill(255);
    quad(55,145,145,145,60,70,140,70);   //hair back

    strokeWeight(0);
    fill(random(50,100),random(50,100),random(50,100));
    triangle(100,165,175,200,25,200);    //shoulders

    strokeWeight(0);
    fill(random(100,200),random(100,200),random(100,200));
    ellipse(100,100,90,125);    //head

    strokeWeight(0);
    strokeWeight(0);
    rect(85,100,30,77); //neck

    strokeWeight(0);
    strokeWeight(0);
    triangle(100,185,115,177,85,177);    //more neck

    fill(random(210,255),random(210,255),random(210,255),75); //face shading
    beginShape();
    vertex(100,100);
    vertex(110,120);
    vertex(100,160);
    vertex(145,160);
    vertex(145,37.5);
    vertex(100,37.5);
    endShape();

    stroke(100,0,50);
    fill(20,0,20);
    triangle(75,80,95,110,60,120);   //right eye

    fill(random(210,255),random(210,255),random(210,255));
    circle(77,100,15);    //right pupil

    circle(120,100,30); //left eye

    stroke(random(0,50),random(0,50),random(0,50));
    strokeWeight(5);
    line(110,100,130,100);  //left pupil

    stroke(255);
    strokeWeight(3);
    fill(0);
    arc(100,140,50,20,15.7,PI+PI,PIE);  //mouth

    strokeWeight(0); 
    fill(255);
    square(55,38,45); //hair front

    strokeWeight(0); 
    fill(255);
    arc(100,38,50,20,10.5,PI,PIE) //hair front

    strokeWeight(0); 
    fill(255);
    beginShape();
    vertex(100,38);
    bezierVertex(100,38,100,100,150,60)
    bezierVertex(100,20,120,70,150,50)
    endShape();     //hair front

     noloop()


}