sketch

var posx = 20;
var posy = 20;
var posyb = 20;
var posx1 =20;
var posy1 = 20;
var dirX = 1;
var diam = 30;
var falling = 1.1;
var diam1 =30;

function setup() {
    createCanvas(600, 600);

}

function draw() {
    background (157,156,201);

    for (var x = 5; x < width; x = x+50){
        for (var y = 5; y < height; y = y+50){
            push();
            translate(x, y);
            fill(255,255,102); //yellow            
            ellipse(posx1,posy,diam,diam);
            pop();
        }   
    } 
    //
    if (mouseX > width/2) {
        for (var x = diam; x < width; x = x+50){
            for (var y = diam; y < height; y = y+50){
                push();
                translate(x, y);
                fill(204,255,153);  //green         
                ellipse(-posx1,posy1,diam1,diam1);
                diam1 += .0001;
                pop();
            }   
        } 
    }
    //bluish
    if (mouseX < width/2) {
        for (var x = diam; x < width; x = x+50){
            for (var y = diam; y < height; y = y+50){
                push();
                posyb += falling*0.01;
                posy1+= falling*0.01*-1;
                translate(x, y);
                fill(153,255,255);           
                ellipse(posy1,posy1,diam,diam);
                pop();
            }   
        } 
    }
    // pink
    if (mouseY > height/2) {
        for (var x = diam; x < width; x = x+50){
            for (var y = diam; y < height; y = y+50){
                push();
                posyb += falling*0.01;
                posy1+= falling*0.01*-1;
                translate(x, y);
                fill(255,102,255);           
                ellipse(posx,posyb,diam1,diam1);
                pop();
            }   
        } 
    }
    // orange
    if (mouseY < height/2) {
        for (var x = diam; x < width; x = x+50){
            for (var y = diam; y < height; y = y+50){
                push();
                posyb += falling*0.01*-1;
                posx1 += falling*0.01*1;
                translate(x, y);
                fill(224,96,92);           
                ellipse(posx,posyb,diam,diam);
                pop();
            }   
        } 
    }
}

I wanted to create a curtain of balls that slide through the canvas in an uncomfortable way depending on the direction of the mouse. Are you able to make them dissapear? What if you wait for a little bit?

This week I am going to discuss this innovative breathtaking project done by Gramazio & Kohler, global referents at robotic fabrication.

They have done a lot of research with industrial robots, which is an emergent market and many universities are introducing them into their research areas. Here at CMU, we have 2 ABB robots living in dFAB, SoA.

However, Gramazio and Kohler went a step further in what robotic fabrication means. Using drones, they assembled a whole structural towers with no analog means. Everything, from the first brick to the last one, was laid by drones.

Flight Assembled Architecture is the first architectural installation assembled by flying robots, free from the touch of human hands. The work consists of over 1500 modules which are placed by a multitude of drones, collaborating according to mathematical algorithms that translate digital design data to the behaviour of the flying machines.

This system acts as a living architectural machines, completing the composition from their dynamic formation of movement and building performance.

Link to the project and video below:

Drones can “collaborate to build architectural structures”

The institute of Computational Design (ICD) and the institute of Building Structures and Structural Design (ITKE) make Biomimetic Investigation into Shell Structures every year.

It is a holistic process in which the design is based on nature patterns, and the fabrication is made with Robotics arms.

The pavilion is the first of its kind to employ industrial sewing of wood elements on an architectural scale. It is part of a successful series of research pavilions which showcase the potential of computational design, simulation and fabrication processes in architecture.

Based on both the biological principles as well as the material characteristics, the material system was developed as a double-layered structure similar to the secondary growth in sand dollars. The building elements consist of extremely thin wood strips. Instrumentalising the anisotropy of wood, these strips are custom-laminated so that the grain direction and thickness corresponds with the differentiated stiffness required to form parts with varying radii.

This project explores robotic sewing to not only join the individually bent plywood strips that form a segment, but also to prevent potential delamination. An industrial robot is employed for both assisting during the assembly and bending of the strips that make up one elements, and then locking the pre-assembled segment in shape by sewing them with a stationary industrial sewing machine. During fabrication the robot first moves the segment through the sewing machine so that the strips are connected.

This type of project falls into the pure research and innovative morphogenetic design based architecture in which the generation of the geometry follows an Agent Based System in which some growing rules are applied.

sketch

//Manuel Rodriguez
//Section B, 10:30am
//manuelr@andrew.cmu.edu
//project-02


var fatFace = 1;
var lankyFace = 1;
var reyeLength = 10;
var leyeLength = 20;
var openM = 40;
var narrowM = 3;
var posX = 1;
var posY = 1;
var c1=230;
var c2 = 100;
var c3 = 200;

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

function draw() {

    //face shadow
    fill(c1,c2,c3);
    noStroke();
    //strokeWeight(2);
    beginShape();
    curveVertex(125,125*lankyFace);
    curveVertex(123,123);
    curveVertex(80*fatFace,height/2+10);
    curveVertex(90,height-110);
    curveVertex(150,height-140);
    curveVertex(190*fatFace,height/2+10);
    curveVertex(120,120);
    curveVertex(125,125);
    endShape();

    //shape face
    noFill();
    stroke(0);
    strokeWeight(1);
    beginShape();
    curveVertex(120,120*lankyFace);
    curveVertex(120,120*lankyFace);
    curveVertex(110*fatFace,height/2);
    curveVertex(130,height-100);
    curveVertex(140,height-150);
    curveVertex(155*fatFace,height/2);
    curveVertex(120,120);
    curveVertex(120,120*lankyFace);
    endShape();

    //shape face 2
    noFill();
    stroke(100);
    strokeWeight(1);
    beginShape();
    curveVertex(125,125*lankyFace);
    curveVertex(123,123);
    curveVertex(105*fatFace,height/2+10);
    curveVertex(135,height-110);
    curveVertex(138,height-140);
    curveVertex(155*fatFace,height/2+10);
    curveVertex(125,125*lankyFace);
    curveVertex(125,125);
    endShape

    //stroke3
    noFill();
    stroke(220);
    strokeWeight(3);
    beginShape();
    curveVertex(100,100);
    curveVertex(130,130);
    curveVertex(105,height/2+40);
    curveVertex(165,height-100);
    curveVertex(178,height-120);
    curveVertex(155,height/2+9);
    curveVertex(140,125);
    curveVertex(125,115);
    endShape();


    //eyes
    noFill();
    //lefteye
    stroke(0);
    strokeWeight(1);
    ellipse(120*posX,height/2*posY,5,leyeLength);

    //rightteye
    stroke(0);
    strokeWeight(1);
    ellipse(135*posX,height/2*posY,5,reyeLength);

    //eyebags
    stroke(0);
    strokeWeight(1);
    line(110*posX,((height/2)+20)*posY, 115*posX, ((height/2)+20)*posY);
    line(135*posX,((height/2)+10)*posY, 145*posX, ((height/2)+10)*posY);


    //mouth
    stroke(0);
    strokeWeight(1);
    ellipse(127*posX,height/2*posY+70,narrowM,openM);
}

function mousePressed(){
    fatFace = random(-1.2,1.5);
    lankyFace = random(-1.2,1.8);
    c1=random(100,250);
    reyeLength = random(0,100);
    leyeLength = random(0,60);
    openM = random(0,40);
    narrowM = random(0,20);
    posX = random(1.0,1.01);
    posY = random(1.0,1.01);
    c2 = random(100,200);
    c3 = random(100,200);
    clear();
 

}

I wanted to create a different type of face, some sort of simple – abstract art that reminds of a face but don’t respond to any proportions nor reality. Just departing from “hand-drawing” style, I started drawing different line shapes and then added the colour independent from the outlines. Each outline has its own independency and they do not relate to other face features such as eyes, mouth or eye-bags.

sketch

//Manuel Rodriguez Ladron de Guevara
//Section B 10:30am
//manuelr@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(600, 600);
    background(194,217,76);
    angleMode(DEGREES);
    smooth();
    //text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {

    //background
    rectMode(CENTER);
    noStroke();
    fill(169,207,56);
    //fill(255,198,10);
    rect(300,300,300,400,20);

        //ears
    noStroke();
    fill(236,191,153);   
    rectMode(CENTER);
    rect((width/2)+100, (height/2), 30,50, 10);

    rectMode(CENTER);
    rect((width/2)-100, (height/2), 30,50, 10);

     //hair
    if(mouseX<(width/2)|| mouseY<(height/2)){
        fill(50);
    }else {
        noStroke();
        fill(255,216,0);
    }
    
    rect(300,260,220,220,50,50,10,10);
   

    //neck
    strokeWeight(3);
    stroke(216,170,153);
    fill(236,191,153);
    rect(300,450,60,150);



    //face base
    if(mouseX<(width/2) || (mouseY<(height/2))){
        strokeWeight(3);
        stroke(216,170,153);
        fill(236,191,153);
        ellipseMode(CENTER);
        ellipse(width/2, height/2, 200,300);  
    }
        else{
            noStroke();
    rectMode(CORNERS);
    rect((width/2)-80, (height/2)+60,(width/2)+80, (height/2)-80);

    noStroke();
    triangle((width/2)-80, (height/2)+60,300,450,(width/2)+80, (height/2)+60,30);
        }
        
    

    //mouth
    strokeWeight(5);
    stroke(216,170,153);
    line(width/2-10,height/2+100,310,400);

    //beard
    noFill();
    if(mouseX<(width/2)|| mouseY<(height/2)){
        stroke(50);
    }else {
        stroke(255,216,0);
    }
    //noFill();
    rectMode(CENTER);
    //stroke(50);
    //strokeWeight(8);
    rect(300,410,50,45,5);

    //eyes
    noStroke();
    fill(255);
    rect(260,280,35,20,5,5,10,10);
    rect(340,280,35,20,5,5,10,10);

    //shadow eyes
    noStroke();
    fill(230);
    rect(260,288,25,5,5,5,10,10);
    rect(340,288,25,5,5,5,10,10);



    //line below eyes
    strokeWeight(8);
    stroke(193,144,135);
    line(240,300,270,300);
    line(330,300,360,300);


    //eyeballs
    noStroke();
    fill(151,79,0);
    ellipse(260,280,15,15);
    ellipse(340,280,15,15);

    //pupil
    fill(0);
    ellipse(260,280,8,8);
    ellipse(340,280,8,8);

    //hair2
    if (mouseX<(width/2) || mouseY<(height/2)){
        noStroke();
        fill(50);    
    } else {
        noStroke();
        fill(255,216,0);
    }
    /*noStroke();
    fill(50);*/
    ellipse(300,170,100,50);
    arc(250,180,90,70,-60,150,CHORD);
    arc(210,220,80,60,-60,110,CHORD);
    arc(350,180,70,50,-80,150,CHORD);
    arc(390,220,80,60,-60,110,CHORD);
    arc(370,190,80,60,-60,110,CHORD);
    arc(400,260,70,50,-60,110,CHORD);

    //noStroke();
    //fill(0);
    //rect(300,150,220,100,50,50,10,10);

    //eyebrows
    fill(79,28,0);
    rect(260,260,45,10,5,5,10,10);
    rect(340,260,45,10,5,5,10,10);

    //nose
    strokeWeight(1);
    stroke(216,170,153);
    line(width/2-10,height/2+50,295,305);
    //line(310,350,305,305);
    noStroke();
    fill(216,170,153);
    triangle(width/2-10,height/2+50,295,305,310,345);

}

I started creating an ellipse as the base for the face. Then I drew the ears, as I wanted the hair to come in front of them, to cover them a little bit. Eyes were more time consuming as I was filleting the corners of the rectangle and drawing the pupils too. Hair was tricky as well as I used filled arcs and the result was unexpected and interesting at the same time when I did the right side of the forehead. Finally I wanted to add some conditionals and change the hair colour and the face shape depending on the position of the mouse.

What if we could envisage the future data of our city to give citizens safe feelings in the present?

This project speculates about the possibility of gathering actual data to predict a future data, so we would know the consequences of actual decisions.

Link to the video:

https://vimeo.com/205408902

This is a work done by Superflux for the Government of UAE. The target is to develop a mechanism to experience numerous possible futures around energy, but more importantly, to stress test the opportunities and broader systemic consequences of each future with Cabinet Ministers and key decision makers.

Their main focus for the project was the creation of the Future Energy Zone. Extrapolating insights from the Ministry of Energy’s econometric data and projections, they created a model metropolis from the future that made the data experientially evocative and acted out the implications of new energy policies on the urban landscape.

The idea of the “augmented physical model” gives us some perspective about different scales. While people recognize physical models quicker (sense of what it is, scale, material,…), it is not enough for a big data analysis. The augmented digital layer gives us the dynamic state and the main information.

This continuous shift between physical and digital generates a great scope of time. They had to come up with new elements, developing a range of artefacts that had to look outwards towards the past. They generated some “future air” to see what it would be to breathe unpolluted air, in a way to concienciate the citizens to change their lifestyle.

This project is obviously expensive to produce, so they involved some public funding, trying to encourage citizens to contribute financially towards a long term investment.

This futuristic project deals with multiple layers of information and scales. It is an urbanistic data project in which different stratum have their word. Because of its nature of “huge scale experimental process”, it is difficult to analyze every single element that completes the synergy. Early stage of a compelling and fundamental project that can create a new paradigm for how cities will work in a near future.

Link to the project website:

http://superflux.in/index.php/work/futureenergylab/#

manuelrFirstProject

function setup() {
    createCanvas(800, 500);
    background(220,80,100);
    text("p5.js vers 0.5.12 test.", 100, 50);
}

function draw() {
    noStroke();
    ellipse(300,200,400,200);
    fill(150,200,200);
    //fill("green")


}

This is a test!