Category: SectionA

My Inspiration – Week 3

I really admire the Mamou Mani project because of its soft and modern-looking design. The unique shapes and curves of the different digital structures in his work create a futuristic style while also having enough simplicity to make the structures more realistic. Each one of his projects also has an intention behind it, whether it is to create a building that is more eco-friendly or a building that emphasizes the rich culture of the community that built it. A lot of the shapes in the buildings are looping and repeating throughout the construction, so parts of the algorithm are looping to create that consistent and patterned look. For example, in the ECOPODS project, the entire building is one looped grouping of code. You can tell that if the building were taller, the design would continue climbing upward with the spiraling pattern. The artist also seems to like to use flowy movements with his work, which are most evident in his DNA BlockChain Skyscraper.

Mamou Mani Projects

Mamou Mani’s Ecopod Project
Mamou Mani’s DNA Blockchain Skyscraper

lmattson-project-03

lmattson-03-project
//Luke Mattson
//section A


function setup() {
    createCanvas(600, 450);
    background(120)
}

function draw() {
// draw a face in the background
    background(173,216,230)
    fill(167,199,231);
    strokeWeight(1);
    stroke(140,170,220);
    triangle(0,0,600,600,0,600);
    stroke(0);                  
    fill(223,180,130);      
    ellipse(300,250,230,320);
    fill(250,231,218);          
    ellipse(412,276,30,60);
    ellipse(188,276,30,60);
    fill(250,231,218);          
    ellipse(300,300,230,320);
    fill(245,245,245);         
    stroke(0);
    strokeWeight(2);
    circle(265,245,40,40);
    circle(335,245,40,40);
    fill(0,0,200,30);
    circle(270,250,18,18);
    circle(330,250,18,18);
    line(300,260,310,300);      
    line(310, 300,290, 295);
    fill(255,160,160);          
    ellipse(300,350,25,35);
    line(310,230,350,215);      
    line(290,230,250,215);
    stroke(255,160,160,40);      
    fill(255,160,160,40);
    ellipse(240,325,30,50);
    ellipse(360,325,30,50);
    noFill();                    
    strokeWeight(2);
    stroke(0);
    arc(300,425,70,40, 2*PI+1/8*PI, PI-1/8*PI);
    stroke(255,255,255);        
    line(300,500, 300, 460);
    line(300,500, 310, 510);
    line(300,500,290,510);
    line(300,480,310,470);
    line(300,480,290,470);

// the text "Hi" comes onto the canvas when the mouse is on the right side
     text("Hi", 1175 - mouseX, mouseY)

//use for loops to draw the hexagons
    var hexX = 20
    var hexY = 30
    for (let hexX = 0; hexX <= 600; hexX += 20){									
        for(let hexY = -10; hexY <= 500; hexY+= 20){

            // variables to determine each hexagon's color
            var hexR = (dist(hexX, hexY, mouseX, mouseY)/150)*100
            var hexG = (dist(hexX, hexY, mouseX, mouseY)/150)*20
            var hexB = (dist(hexX, hexY, mouseX, mouseY)/150)*120

            // variable to determine each hexagon's size
            var size = constrain((dist(hexX, hexY, mouseX, mouseY)/150),.3,1.5)

            // drawing a hexagon
            fill(hexR,hexG,hexB)
            beginShape()
            vertex(hexX,hexY)
            vertex(hexX-size*10,hexY-size*5)
            vertex(hexX-size*10,hexY-size*15)
            vertex(hexX,hexY-size*20)
            vertex(hexX+size*10,hexY-size*15)
            vertex(hexX+size*10,hexY-size*5)
            endShape(CLOSE)
        }
    }

// angular movement of the circles
    push()
    translate(300,225);

    // positioning and opacity variables
    var circleX = 100;
    var circleY = 100;
    var circleOpacity = mouseX/2

    fill(0,0,0,circleOpacity)

    // rotating the origin based on mouseX positioning
    var rotationrr = radians(mouseX);
    rotate(rotationrr);

    //drawing each circle
    ellipse(circleX,circleY,20);
    ellipse(circleX+50,circleY+50,20)
    ellipse(circleX+100,circleY+100,20)
    ellipse(circleX+150,circleY+150,20)
    ellipse(circleX-50,circleY-50,20)
    ellipse(circleX-100,circleY-100,20)
    ellipse(circleX-150,circleY-150,20)
    ellipse(circleX-200,circleY-200,20)
    ellipse(circleX-250,circleY-250,20)
    ellipse(circleX-300,circleY-300,20)
    ellipse(circleX-350,circleY-350,20)
    
    // returning the origin to the default
    pop()

    
   
}

Wherever the mouse is, the hexagons get smaller, colors change, and circles rotate. put your mouse as far right on the canvas as you can for a surprise!

LO-03

Mediated Matter from MIT

The Mediated Matter group focuses on Nature-inspired design and design-inspired Nature. They create biologically inspired and engineered design fabrication tools and technologies aiming to enhance the relation between natural and man-made environments. I admire this project a lot because I think humans should try to harmonize with nature more. They use algorithms in order to enhance the relation between natural and man-made environments by achieving high degrees of design customization, environmental performance integration, and material efficiency. The work they are doing is very interesting. It is very cool how they are pretty much creating materials that can only be made through a use of an algorithm. An publication by Mediated Matter is titled “Hybrid Living Materials: Digital Design and Fabrication of 3D Multimaterial Structures with Programmable Biohybrid Surfaces.” Even the title alone brings lots of curiosity about what they are creating.

Programmable Water-Based Biocomposites for Digital Design and Fabrication across Scales

LookingOutwards-02

https://www.drwoohoo.com/portfolio/semi-autonomous-brushstrokes

While the concept seems simple enough, the thing I admire most about Dr. Woohoo’s work is the dynamic nature of his generations.
There seems to be a level of randomness to his work, but there is also a sense of intentionality in the strokes, almost as if they did it by hand.
Perhaps the most impressive to me is his choice of colour palette, as they are mostly non-standard yet visually appealing.
They use a combination of vibrant and neutral colors that somehow don’t clash.
While I’m not sure exactly how the brushes work – I imagine they work somewhat similarly to Sketchbook custom brushes – I think there is a component creating an illusion both of direction and depth of movement.
Generative art seems to be the best way for Dr. Woohoo to express their vision – they seem to want to combine the ideas of DNA/RNA with art and vivid colours, and the generative art medium seems perfect.

Project-02-Face-Variables

sketch
//Nami Numoto
//15104 1A
// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 20;
var noseDirection = 0;
var noseHeight = 30;
var mouthPosition = 200;
var mouthHeight = 20;

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

function draw() {
    strokeWeight(2);
    background(180);
    fill(156, 132, 104);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255)
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); // eye 1
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); // eye 2
    fill(0)
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2); // iris 1
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2); // iris 2
    line(width / 2, height / 2, noseWidth + width / 2, noseHeight + height / 2); // directional nose line
    line(width / 2, height / 2 + noseHeight, noseWidth + width / 2, height / 2 + noseHeight); // bottom nose line
    noFill();
    beginShape(); //creative rendition of a mouth, testing out curveVertex()  :)
    curveVertex(width / 2 - faceWidth / 3, mouthPosition + mouthHeight);
    curveVertex(width / 2 - faceWidth / 3, mouthPosition + mouthHeight);
    curveVertex(width / 2, mouthPosition);
    curveVertex(width / 2 + faceWidth / 3, mouthPosition + mouthHeight);
    curveVertex(width / 2 + faceWidth / 3, mouthPosition + mouthHeight);
    endShape(); //sometimes the mouth goes off the face. call it art
}

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(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    noseWidth = random(10, 30);
    noseDirection = random(0, 2);
    if (noseDirection > 1) {
        noseWidth = -1 * noseWidth;
    }
    mouthHeight = random(-10, 10);
}

Face Randomizer

sketch
var eyeSize = 20;
var pupilSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var mouth = 1;

function setup() {
    createCanvas(300, 300);
    faceShape = 1;
}


function mousePressed() {
    faceShape = -faceShape;
    faceWidth = random(75, 200);
    faceHeight = random(100, 200);
    eyeSize = random(10, 50);
    pupilSize = random(1,4)
    mouth = random(1,4);

}

function draw() {
    background(180);
    //head shapes
    if (faceShape>0) {
        ellipse(width/2,height/2,faceWidth,faceHeight);

    }
    else if (faceShape<0){
        rect((width - faceWidth)/2,(height - faceHeight)/2,faceWidth,faceHeight);
    }

    //eyes and pupils
    var LeftEye = width / 2 - faceWidth / 4;
    var Righteye = width / 2 + faceWidth / 4;
    ellipse(LeftEye, 5*height / 12, eyeSize);
    ellipse(Righteye, 5*height / 12, eyeSize);
    fill(0);
    ellipse(LeftEye, 5*height / 12, eyeSize/pupilSize);
    ellipse(Righteye, 5*height / 12, eyeSize/pupilSize);
    fill(255);

    //mouths

    if (mouth<2) {
        //smile
    ellipse(width/2,height/2+25,50,25);
    stroke(255);
    rect(width/2-30,height/2+10,60,15);
    stroke(0);
    }
    else if (mouth<3) {
        //sad
    ellipse(width/2,height/2+35,50,25);
    stroke(255);
    rect(width/2-30,height/2+35,60,15);
    stroke(0);
    }
    else if (mouth<4) {
        line((width/2)-faceWidth/4, (height/2)+faceHeight/5, (width/2)+faceWidth/4, (height/2)+faceHeight/5);
    }
    
}

One of the difficulties I had with this project was creating a uniform smile. In order to do so, I used certain blocks to cover the ellipses and removed the stroke color. I had a lot of trouble with the random() function because I had also forgotten that it outputted float point numbers.

LO2: generative arts

Artwork by Nervous System: ZOETROPES

Zotropes is a 3D-printing project that prints a series of kinetic sculptures that illustrate natural growth processes.
Link:https://n-e-r-v-o-u-s.com/projects/sets/zoetropes/
Video:https://vimeo.com/136939640

I really like how this project integrates art with technology(3D printing) and with nature. I feel like this is an interactive exploration between human, nature, and beauty. I don’t have knowledge regarding the 3D printing process, but what I know is that the project repeats again and again, which is representative of the looping feature that a program has. And I believe that it is a program of 3D drawing, and can be displayed on a webpage. With this program, 3D printing enables the real-life version of the program. The team learned well on how the natural growth processes happen. It is a model that corresponds well to what would happen in real-life. The team’s observation on nature, imitation of nature, understanding of nature are manifested in the program.

Project-02:Variable Face

cody.variable.face
function setup() {
    createCanvas(640, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
var faceWidth=400
var faceHeight=470
var noseCenter=300
var mouthAngle=0

function draw() {
    background(176, 196, 222);
    ellipse((width/2),(height/2), 400,470);  
    arc((width/2),(height/2+40),410,550,3.14,0) //hair
    arc((width/2),(height/2+40),400,540,3.14,0)
    arc((width/2),(height/2+40),390,530,3.14,0)
    arc((width/2),(height/2+40),390,520,3.14,0)   
    arc((width/2),(height/2+40),390,510,3.14,0)
    arc((width/2),(height/2+40),390,500,3.14,0)
    arc((width/2),(height/2+40),390,490,3.14,0)
    arc((width/2),(height/2+40),390,480,3.14,0)
    arc((width/2),(height/2+40),390,470,3.14,0)
    arc((width/2),(height/2+40),390,460,3.14,0)
    arc((width/2),(height/2+40),390,450,3.14,0)
    arc((width/2),(height/2+40),390,440,3.14,0) //hair line
    ellipse(225,220,80,45) //orbit left
    fill(0)
    ellipse((faceWidth/2+15),220,37,37) //eyeball left
    fill(255)
    ellipse(375,220,80,45) //orbit right
    fill(0)
    ellipse((faceWidth/2+170),220,37,37) //eyeball right
    fill(255,182,193)
    arc((width/2-10),380, 150, 100, (mouthAngle-0.5), (2.5+mouthAngle)) //mouth
    fill(255,192,203)
    triangle(300, 280, (noseCenter), 350, 320, (noseCenter+60)) //nose
    fill(255)
    stroke(72,209,204)
    strokeWeight(6)
    arc(225, 185, 80, 40, 3.2, -0.04) //eyebrow left
    arc(375,185, 80, 40, 3.2, -0.04) //eyebrow right
    arc(130, 280, 50, 60, 1.5, 4.75) //ear left
    arc(500, 280, 50, 60, 4.75, 1.65) //ear left
    
}

function mousePressed(){
    faceWidth=random(360,440)
    noseCenter=random (250,300)
    mouthAngle = random(0,1)
}
noLoop();

The part I like the most is how the eyeballs change randomly.

Project-02-Variable-Face

sketch

var faceWidth =  150;
var faceHeight = 200;
var eyeWidth = 45;
var eyeHeight = 45;
var noseWidth = 7;
var red = random(1,255);
var green = random(1,255);
var blue = random(1,255);
var eyebrowWidth= 15;
var eyebrowHeight= 15;
var mouthHeight=30;





function setup() {
    createCanvas(640, 480);
    
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
  background(220);
  //face size and skin color
  fill(red, green, blue);
  ellipse(width/2, height/2, faceWidth, faceHeight);
  
  
  //eye size
  
  //outer eye
  fill(255,255,255);
  ellipse(width/2 + eyeWidth, height/2 - eyeHeight, faceWidth/6, faceHeight/8);
  ellipse(width/2 - eyeWidth, height/2 - eyeHeight, faceWidth/6, faceHeight/8);
  //cornea
  fill(0,0,0);
  ellipse(width/2 + eyeWidth, height/2 - eyeHeight, faceWidth/15);
  ellipse(width/2 - eyeWidth, height/2 - eyeHeight, faceWidth/15);
  fill(255,255,255);
  rect(width/2 + eyeWidth, height/2 - eyeHeight,4,4);
  rect(width/2 - eyeWidth, height/2 - eyeHeight,4,4);
  
  //mouth and eyebrow
  line(width/2-mouthHeight, height/2+mouthHeight, width/2+mouthHeight, height/2+mouthHeight);
  line(width/2+eyeWidth+eyebrowWidth,height/2-eyeHeight-eyebrowHeight,width/2-eyeWidth-eyebrowWidth,height/2-eyeHeight-eyebrowHeight);
  
  
  //nose
  fill(red, green, blue);
  ellipse(width/2, height/2,faceWidth/5, faceHeight/7);
  fill(0,0,0);
  ellipse(width/2+noseWidth, height/2, faceWidth/20);
  ellipse(width/2-noseWidth, height/2, faceWidth/20);
  
  
}

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, 250);
    faceHeight = random(150, 250);
    eyeHeight = random (30,40);
    eyeWidth = random(30,40);
    noseWidth= random(6,8);
    red = random(141,241);
    green = random(125,155);
    blue = random (36,125);
    eyebrowWidth= random(10,20);
    eyebrowHeight= random(20,30);
    mouthHeight = random(30,40);
}

Doing this project was a lot of fun, but it was a little tedious trying to figure out all the measurements. Little sad it came out looking like a pig more than a human but it still looks cute to me!

Looking Outwards 02: Generative Art

One Generative art piece that I find inspirational is My Climate 2050 by Mitchell Whitelaw and Geoff Hinchcliffe. Made in December 2018, it was requested by Australian Conversation Foundation to “communicate localized climate change impacts for a range of sites around Australia”. The mission for this generative art piece is what I admire so much about it. Especially when a time where Global Warming is becoming such an issue, using art to make a statement is extremely necessary. It touches on the idea that art can create change within our world. Using art also enables a larger audience to understand and take action against a complicated idea like Global Warming. An algorithm was used with a dataset of 4700 projections to develop an “adaptable visual form that reveals changes including average temperature increase, summer extremes and changes to seasonality”.  Mitchell Whitelaw’s and Geoff Hinchcliffe’s artistic sensibilities manifest in this piece as they are trying to persuade a larger audience on an issue. With this mission, it forces the artists to portray their art a very specific way making them use their artistic sensibilities. In conclusion, I really enjoy looking at this piece and the message that it has to offer.

https://mtchl.net/acf-my-climate/