Category: SectionA

Looking Outwards 02

Natalie Koch; Section A
Looking Outwards 02

When looking through the different provided examples for this blog, one that really stood out to me was the bird photography done by Erlend Haarberg in https://www.thisiscolossal.com. As someone who has done photography in the past, I know how challenging it can be to capture things in motion, such as birds. There’s a lot of work that needs to go into camera settings to ensure an in focus picture. Setting a camera with the correct settings for pictures like these is an algorithm in itself. When setting a camera, you need to pay attention to things like shutter speed and aperture. The pictures of birds clearly seen flying and the pictures of birds silhouetted against the skyline require different settings, so Haarberg had to have the end result in mind when setting his camera for these shots. All of these pictures are artistic in different ways, so Haarberg had to use his artistic sensibilities to make sure the photos came out the way he wanted them to.

“Rock Ptarmigan Flight”; the award winning picture: https://www.thisiscolossal.com/wp-content/uploads/2022/09/bpoty-1.jpg

“Puffin Love”; a silhouette picture: https://www.thisiscolossal.com/wp-content/uploads/2022/09/bpoty-7.jpg

Project 02

This is my variable face project

this is my project

sketch
// Natalie Koch; Section A

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

function draw() {
    background(132,200,180);
    fill(0)
    ellipse(240,310,420,410) //back of hair
    fill(255,208,172)
    ellipse(90,350,50,70) //left ear
    ellipse(390,350,50,70) //right ear
    rect(175,400,125,200) //neck
    ellipse(width/2,height/2,300,350) //head
    fill(197,220,222) 
    rect(90,250,125,100) //left glasses lens
    rect(265,250,125,100) //right glasses lens
    fill(255,208,172) 
    rect(205,345,70,30) //nose
    fill(0)
    line(215,275,265,275) //glasses bridge
    line(190,420,290,420) //mouth
    rect(90,200,300,50) //bangs
    ellipse(240,175,275,100) //bangs
    fill(255)
    rect(140,260,65,20) //glasses light flare
    rect(315,260,65,20) //glasses light flare
    fill(81,89,66)
    ellipse(240,639,500,150) //shirt

if (mouseIsPressed) {
    background (180,39,8)
    fill(0)
    ellipse(240,310,420,410) //back of hair
    fill(255,208,172)
    ellipse(90,350,50,70) //left ear
    ellipse(390,350,50,70) //right ear
    rect(175,400,125,200) //neck
    ellipse(width/2,height/2,300,350) //head
    fill(33,13,5)
    ellipse(width/2,430,140,50) //mouth
    fill(255)
    rect(190,405,100,20) //teeth
    fill(0)
    rect(90,200,300,50) //bangs
    ellipse(240,175,275,100) //bangs
    fill(81,89,66)
    ellipse(240,639,500,150) //shirt
    fill(255)
    ellipse(155,300,70,60) //eye base
    ellipse(330,300,70,60) //eye base
    fill(0)
    ellipse(160,295,40,40) //pupil
    ellipse(325,295,40,40) //pupil
    fill(197,220,222)
    rect(90,320,125,100) //left glasses lens
    rect(265,320,125,100) //right glasses lens
    line(80,300,90,370) //left earpiece
    line(390,370,400,300) //right earpiece
    fill(255,208,172)
    rect(205,345,70,30) //nose
    fill(255)
    rect(140,330,65,20) //glasses light flare
    rect(315,330,65,20) //glasses light flare
    ellipse(170,290,20,20) //eye light flare
    ellipse(340,290,20,20) //eye light flare
    fill(70,43,15)
    ellipse(150,200,80,40) //eyebrows color
    ellipse(325,200,80,40) //eyebrows color
    fill(0)
    ellipse(150,210,70,30) //eyebrows cover
    ellipse(325,210,70,30) //eyebrows cover (i don't know how to code arcs!)
}
}

Project 01

This is my project

sketch
//Natalie Koch; Section A

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

function draw() {
    background(72,85,101);
    fill(167,153,86)
    ellipse(width/2,170,180,230)
    fill(231,213,165)
    rect(80,150,40,150)
    ellipse(width/2,height/2,125,150);
    triangle(100,150,92,180,108,180)
    fill(174,149,186)
    ellipse(100,299,199,100)
    fill(255)
    ellipse(70,150,28,28)
    ellipse(130,150,28,28)
    fill(122,136,170)
    ellipse(70,150,15,15)
    ellipse(130,150,15,15)
    fill(0)
    ellipse(70,150,8,8)
    ellipse(130,150,8,8)
    fill(255)
    ellipse(72,148,5,5)
    ellipse(132,148,5,5)
    fill(201,147,157)
    ellipse(100,200,40,10)
    fill(0)
    line(55,130,75,127)
    line(125,127,145,130)
    line(80,199,120,199)
}

Looking Outwards-01

A creative computing project that I really admire are the Immersive Van Gogh Exhibits that have been in multiple cities. I love these immersive art installations because everyone there gets put into the art, surrounded by it, while also being told a narritive story with the works. These exhibites were designed by Massimiliano Siccardi in France, who has worked towards making projects like these for the past thirty years. To my knowledge, these installations were made by scanning Van Gogh’s paintings and using animation to then project them onto the walls. I think the creators would have been inspired by animatated works, but the invention in and of itself is fairly revolutionary. This opens up opportunities for immersive exhibits to be made for other artists as well, like people have already started doing with Monet’s works now. The purpose of these is to bring art to audiences everywhere in a new and exciting way, and it has been wildly successful.
https://www.immersivevangogh.com

LO: My Inspiration

There is this generative artist and software developer Lulu xXX who created this work of art called “Take me to the moon”. I don’t know how long it took them to make it but they design intimate and feminine artwork focusing on using 3D modeling and CGI. They build their own tools using custom/open-sourced code. They focus on beauty and iconography, which uses these visual images and symbols and helps us study the interpretation of them. Further, they use “optical flow analysis” to capture motion in their art and start generating this pixel aesthetic. I think this type of computational art is super important in understanding how activism and aesthetics and technology work together. Especially in modern times, its further important to look at how we can express women and cultures in a way that’s expressive and beautiful.

https://makersplace.com/luluxxx/feed/

Project 2

project 2

sketch 

var eyeSize = 20;
var faceWidth = 300;
var faceHeight = 250;
var counter = 1;
var hatH = faceHeight/1.5;
var bodyR = 90;
var bodyG = 100;
var bodyB = 90;
var eyeY = 3;
var eyeX = 1;
var faceR = 90;
var faceG = 100;
var faceB = 90;
var hatR = 140;
var normFaceR = 255;
var normFaceG = 220;

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

function draw() {
    strokeWeight(1);
    stroke(0);
    background(20,160,190);
    if(counter >= 1 & counter < 2){
    //body
    fill(bodyR,bodyG,bodyB);
    circle(width/2,height-50,500);
}
    //face
    fill(normFaceR, normFaceG, 177);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.3;
    var eyeRX = width / 2 + faceWidth * 0.3;
    strokeWeight(3);
    fill(250,250,250);
    //eye
    ellipse(eyeLX, height / 2-10, eyeSize*2, eyeSize-5);
    ellipse(eyeRX, height / 2-10, eyeSize*2, eyeSize-5);
    fill(70,30,20);
    circle(eyeLX, height / 2-10, eyeSize/2, eyeSize/3);
    circle(eyeRX, height / 2-10, eyeSize/2, eyeSize/3);

   
//cowboy 
    if (counter >= 1 & counter < 2){
        noStroke();
        fill(hatR,75,0);
        rect(width/2-60,height/2-faceHeight/2-hatH,120,hatH)
        ellipse(width/2,height/2-faceHeight/2,faceWidth-50,40);
       //facial hair
        strokeWeight(5);
        stroke(140,110,100);
        noFill();
        curve( width/2-faceWidth/2 + 30, height/2 -100,
        width/2-faceWidth/2 + 50, height/2 -50,
        width/2-faceWidth/2 + 80, height/2 -50,
        width/2-faceWidth/2 + 110, height/2 -30);
        curve( width/2+faceWidth/2 + 30, height/2 -100,
        width/2+faceWidth/2 - 50, height/2 -50,
        width/2+faceWidth/2 - 80, height/2 -50,
        width/2+faceWidth/2 - 110, height/2 -30);
        stroke(200,20,30);
        fill(200,20,30);
        //mouth
        curve(width/2-faceWidth/2 + 110,height/2-70
        ,width/2-50,height/2+30
        ,width/2+50,height/2+30,
        width/2+faceWidth/2 ,height/2-30);
        //arms
        fill(20);
        stroke(10);
        strokeWeight(5);
        curve(width/2 - 150, height/2+100,
        width/2-200,height/2+150,
        width/2-100,height-20,
        width/2-40, height-50);
        curve(width/2 + 150, height/2+100,
        width/2+200,height/2+150,
        width/2+100,height-20,
        width/2+40, height-50);

    }

//alien
     if (counter >= 2 & counter < 3){
        strokeWeight(8);
        stroke(50,210,150);
        line(width/2,height/2-faceHeight/2, width/2, faceHeight/10+30);
        fill(mouseX,mouseY,mouseX);
        ellipse(width/2, faceHeight/10+30, faceWidth/5, faceHeight/3);
        fill(faceR,faceG,faceB);
        ellipse(width / 2, height / 2, faceWidth,  faceHeight);
        //eye
        fill(0,50,10);
        noStroke();
        ellipse(eyeLX+30, height / 2-10, eyeSize*eyeX, eyeSize*eyeY);
        ellipse(eyeRX-30, height / 2-10, eyeSize*eyeY, eyeSize*eyeX);
        fill(0);
        ellipse(eyeLX+30, height / 2-10, eyeSize*eyeX-5, eyeSize*eyeY-5);
        ellipse(eyeRX-30, height / 2-10, eyeSize*eyeY-10, eyeSize*eyeX-10);
        //body
        stroke(0);
        strokeWeight(1);
        fill(0,faceG-80,faceB+50);
        triangle(150,height/2+150,width-150,height/2+150,width/2,height-20);
        //arms
        fill(0,200,0);
        stroke(0,200,0);
        strokeWeight(1);
        curve(width/2 - 60, height/2+100,
        width/2-200,height/2+150,
        width/2-30,height-80,
        width/2-40, height-50);
        line(width/2-30,height-80,width/2-50,height-60);
        curve(width/2 + 60, height/2+100,
        width/2+200,height/2+150,
        width/2+30,height-80,
        width/2+40, height-50);
        line(width/2+30,height-80,width/2+50,height-60);
        //mouth
        fill(20,200,200);
        strokeWeight(2);
        stroke(30,100,500);
        rect(width/2-faceWidth/6,height/2+faceHeight/6,faceWidth/3,faceHeight/20);

   }

   //crazy

    if(counter < 1){
        background(200,50,50);
        fill(200,50,90);
        ellipse(width / 2, height / 2, faceWidth+random(20,50),  faceHeight+random(20,50));
        fill(255);
        //body
        stroke(0);
        strokeWeight(1);
        fill(0,faceG-80,faceB+50);

        //

        fill(255);

       //eye
        ellipse(width / 2, height / 2, faceWidth,  faceHeight);
        ellipse(eyeLX+30, height / 2-10, random(30,50),random(40,80));
        ellipse(eyeRX-30, height / 2-10, random(30,50),random(20,80));
        fill(random(10,80),random(100,255),random(150,255));
        ellipse(eyeLX+30, height / 2-10, random(30,50)-10,random(40,80)-10);
        fill(random(150,255),random(10,80),random(150,205));
        ellipse(eyeRX-30, height / 2-10, random(30,50)-10,random(20,80)-10);
        fill(random(30));
        ellipse(eyeLX+30, height / 2-10, 10,10);
        ellipse(eyeRX-30, height / 2-10, 10,10);
        //brows
        line(width/2-80,height/2-random(60,100),width/2-random(20,40),height/2-20);
        line(width/2-80,height/2-random(60,100),width/2-random(20,40),height/2-20);
        line(width/2+80,height/2-random(60,100),width/2+random(20,40),height/2-20);
        line(width/2+80,height/2-random(60,90),width/2+random(10,50),height/2-20);
        //nose
        fill(random(100,255),50,50);
        ellipse(width/2-10,height/2+30,10,20);
        ellipse(width/2+10,height/2+30,10,20);
        //mouth
        curve(width/2-faceWidth/2 + random(90,120),height/2+100
        ,width/2-50,height/2+random(60,80)
        ,width/2+50,height/2+random(60,70),
        width/2+faceWidth/2 ,height/2+random(90,120));
        //body
        fill(20,20,20);
        triangle(width/2,height/2+130, random(50,100),random(height-50,height),width-random(50,100),random(height-50,height));
        //arms
        curve(width/2 - 150, height/2-100,
        width/2-random(190,210),height/2-150,
        width/2-100,height-30,
        width/2-40, height-50);
        curve(width/2 + 150, height/2-100,
        width/2+200,height/2-150,
        width/2+random(90,110),height-30,
        width/2+40, height-50);
    }

}
 
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(300, 400);
    faceHeight = random(190,270);
    eyeSize = random(15, 30);
    counter = random(0,3);
    bodyR = random(100,110);
    bodyG = random(100,160);
    bodyB = random(30,150);
    faceR = random(20,80);
    faceG = random(100,250);
    faceB = random(100,110);
    eyeY = random(1,6);
    eyeX = random(0.5,2);
    hatR = random(100,255);
    normFaceR = random(210,255);
    normFaceG = random(190,220);
}

Blog 02

For this blog, I decided to study the work of Michael Hansmeyer. Specifically, “Subdivided Columns – A New Order (2010)”. For me, the mixture of generative art and architectural forms have always interested me. Generative art and modeling’s ability to create unthinkable forms like the columns he created has been something I’ve explored on my own as an architecture student. I’ve experimented with creating unusual structures and forms that promote different feelings which I can connect with in his project, even if evoking different feelings with the columns was not a primary goal of his. I suppose that to create these bizarre forms, CAD softwares like GrassHopper. While it appears as if a column is put into modeling softwares and randomized, there is actually intentionality behind his results. Based on articles analyzing the project, the purpose of the exploration is to push imagination and create forms that inspires and activates further investigation into specific potentials of the forms with more intentionality, and with that, create these “subclasses” that create more variations of the column with certain constraints and desires.The artist’s artistic choices appears in the project in the forms of very complex geometries and symmetries. 

https://www.michael-hansmeyer.com/subdivided-columns

Looking Outwards – Holger Lippmann

The art series I was most intrigued by was noiseScape IV by Holger Lippmann (2021).

link to website: http://www.lumicon.de/wp/?p=3914

This series of generative art is simple in the way its structured visually, but its still very interesting. The first thing that sticks out to me is the fact that each piece is stratified into horizontal layers. In each layer are squiggly vertical lines. The way the vertical lines are drawn reminds me of a cascading hilly landscape.

In some of the pieces I notice that some areas of the canvas are left blank which create cloud like shapes that float around on the canvas.

I’m not sure how it would have been coded but I’d guess that
the artist maybe defined the boundaries of each layer and the
computer “semi randomly” drew lines between those boundaries. The reason why I say “semi randomly” is because there seems to be a logic behind how each lines are drawn after all each line somewhat follows the path of the adjacent lines. The artist must’ve also defined the colors as the colors of the lines are harmonious.

Project – 02

sketch

sketch

//Leo Deng Section A

var eyeWidth = 20;
var eyeHeight = 20;
var faceWidth = 140;
var faceHeight = 160;
var LeyebrowX = 115;
var LeyebrowY = 125;
var ReyebrowXx = 185;
var ReyebrowYy = 125;
var mouthX = (300 / 2);
var mouthY = (300/2 + 40); 
var mouthW = 30;
var mouthH = 10;
var mouthStart = 90;
var mouthEnd = 195;
var on = -1;
var R = 255;
var G = 215;
var B = 0;

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(233,150,122);
    strokeWeight(3);
    stroke(175,238,238);
    if (on == -1) {         //color flip from yellow to orange
        fill(R, G, B);
    } else if (on == 1) {
        fill(R, G - 100, 0);
    }
    triangle(0, 0, 125, 145, 145, 100);  //pointy design elements
    triangle(150, 0, 100, 145, 200, 145);
    triangle(299, 0, 185, 145, 100, 145);
    triangle(299, 150, 165, 100, 165, 195);
    triangle(0, 150, 135, 100, 135, 195);
    triangle(0, 299, 125, 155, 145, 200);
    triangle(150, 299, 100, 155, 200, 155);
    triangle(299, 299, 185, 155, 100, 155);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;           //local eye variables
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeWidth, eyeHeight);
    ellipse(eyeRX, height / 2, eyeWidth, eyeHeight);
    line(LeyebrowX, LeyebrowY, 135, 125);                //eyebrows
    line(165, 125, ReyebrowXx, ReyebrowYy);
    ellipse(eyeLX, height / 2, eyeWidth * (2 / 3), eyeHeight);  //eyes
    ellipse(eyeRX, height / 2, eyeWidth * (2 / 3), eyeHeight);
    arc(mouthX, mouthY, mouthW, mouthH, mouthStart, mouthEnd, PIE);  //mouth

}
 
function mousePressed() {
    on = on * -1;
    // when the user clicks, these variables are reassigned to make the face look angry
    faceWidth = (faceWidth + 50);
    eyeWidth = (eyeWidth + 10);
    LeyebrowX = (LeyebrowX - 10);
    LeyebrowY = (LeyebrowY - 10);
    ReyebrowXx = (ReyebrowXx + 10);
    ReyebrowYy = (ReyebrowYy - 10);
    mouthX = (mouthX - 10);
    mouthH = (mouthH + 10);

if(faceWidth > 190) {
    // next 3 clicks changes from mischevious face to unsure face
        faceWidth = (faceWidth - 60);
        eyeWidth = (eyeWidth - 10);
        LeyebrowX = (LeyebrowX + 15);
        LeyebrowY = (LeyebrowY + 15);
        ReyebrowXx = (ReyebrowXx - 15);
        ReyebrowYy = (ReyebrowYy + 15);
        mouthX = (mouthX + 5); 
        mouthW = (mouthW + 10);
        mouthH = (mouthH - 10);
        mouthStart = 0;
        mouthEnd = PI + QUARTER_PI;

    }

if(faceWidth < 160) {
    //return to original face
eyeWidth = 20;
eyeHeight = 20;
faceWidth = 140;
faceHeight = 160;
LeyebrowX = 115;
LeyebrowY = 125;
ReyebrowXx = 185;
ReyebrowYy = 125;
mouthX = (300 / 2);
mouthY = (300/2 + 40);
mouthW = 30;
mouthH = 10;
mouthStart = 90;
mouthEnd = 195;
on = -1;
R = 255;
G = 215;
B = 0;
}
}

project 02 – click it!

sketch
//Jaden Luscher
//jluscher@andrew.cmu.edu
//Section A

var eyeSize = 40;
var r;
var g;
var b;

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

function draw() {
  background(157, 102, 31); //brown "hair" is the background
  noStroke();

  //generates random color values for flashing background)
  r = random(200);
  g = random(100,200);
  b = random(100);

  if (mouseIsPressed){  //surprised face
    background(r,g,b);  //flashing background

    fill(255, 120, 100);  //blushing skin color
    ellipse(random(118,122),random(98,102),120,150); //jittering face

    fill(255);
    ellipse(100,90, eyeSize, eyeSize);  //wide eyes
    fill(120, 50, 50);
    ellipse(random(99,101),random(89,91),eyeSize/4);  //small iris

    fill(255);
    rect(random(120,122),140,6,8);
    rect(random(128,130),140,6,8);
    rect(random(136,138),140,6,8);
    rect(random(144,146),140,6,8);
    rect(random(152,154),140,6,8);  //jittering teeth

    noFill();
    stroke(115, 74, 21);
    strokeWeight(2);
    arc(100,90,eyeSize*1.5,eyeSize*2,4,5,OPEN);   //raised eyebrow
    stroke(0);
    line(120,140,160,140); //flat mouth


  } else {  //resting face
    fill(40, 110, 154);
    quad(120,0,186.666,200,200,200,200,0); //blue: 2nd background color

    fill(236, 196, 163);
    ellipse(120,100,120,150); //still face

    fill(255);
    ellipse(100,90, eyeSize, eyeSize/2);  //resting eyes
    fill(120, 50, 50);
    ellipse(constrain(mouseX,95,105),constrain(mouseY,85,95),eyeSize/2.5);
    //iris follows mouse

    fill(213, 152, 133);
    triangle(160,150,145,145,120,150);  //top lip
    triangle(160,151,145,156,120,151);  //bottom lip

    noFill();
    strokeWeight(5);
    stroke(115, 74, 21);
    ellipse(100, constrain(mouseY,90,100),eyeSize*1.75);  //large glasses lens
    ellipse(175, constrain(mouseY,75,85),eyeSize);  //small glasses lens
    strokeWeight(2);
    arc(100,90,60,40,3.7,5.8,OPEN);   //eyebrow
  }
  //the earring and nose do not change
  noStroke();
  fill(213, 152, 133);
  ellipse(55,177,10);
  ellipse(55,190,10);
  fill(40, 110, 154);
  triangle(50,170,55,120,60,170);   //earring

  strokeWeight(2);
  stroke(0);
  noFill();
  line(120,0,160,120);
  line(160,120,145,125);  //lines for nose
}