Category: SectionA

Danny Cho_Looking Outward 2 – Generative Art

I looked into the Fractal Forums for inspiration for Generative Art. Mathematical patterns always seemed so beautiful to me especially in bigger scales. The way they enable me to imagine myself in the patterns was mesmerizing.

Steel

How such complicated shapes are created from lines of command texts amazes me. If I try imagine a human working on this kind of project, by painting or other kind of laborious means, I wouldn’t admire the work, not the artist’s grit, but the work. I would probably not be able to empathize with the artist, and think, “Wow, that is amazing, but why does that matter or what’s the value of that art that is so static?’ But knowing that this is generated by computer and can be manipulated to different scales and shapes makes it so much more versatile than just a painting to me.

About the way it was created, as it is mentioned in the name of the forum, I believe it used the fractal number pattern to generate the patterns, how from a number, infinite related numbers branch out as long as the pattern continues. What is interesting here is that this art contains more than one repeating pattern. The quicker spiral and slower spiral, and another pattern on the edges of the spirals.

The artist’s username is “Caleidoscope” and the post was created on 2017.

Ilona Altman- project 2- variable faces

sketch


var thetime = 1
var othetime = 1
var clr= 1


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



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

function draw() {
    background(215,126,107);

    //variables

    var x = 1/5*width;
    var y = 1/8*height;

    //moon static 
    fill(130+clr,170+clr,170+clr);
    circle(2.5*x,y,100);

    //moon dynamic
    fill(215,126,107);
    circle(2*x+othetime,y,100);

    //face base
    fill(235,150,140);
    circle(2.5*x, 5*y, 300);
    
    //moon eyes static 1 green
    fill(100+clr,140+clr,100+clr);
    circle(1.75*x, 4.5*y, 50);

    //moon eyes dynamic 1
    fill(235,150,140);
    circle(1.5*x+thetime,4.5*y, 50);

    // moon eyes static 2 green
    fill(100+clr,140+clr,100+clr);
    circle(3.25*x, 4.5*y, 50);

    // moon eyes dynamic 2 
    fill(235,150,140);
    circle(3*x+thetime, 4.5*y, 50);

}

function mousePressed() {
    thetime=random(-20,60);
    clr= random(-50,150);
    othetime=random(-150,150)
}

I had trouble getting the image to load earlier for some reason! Here is my project

Ilona Altman – Looking Outwards – 02

The work, Condensation Cube

I was interested in the definition of a generative piece not necessarily having to be technological. Though technology and coding allows for systems to change depending on their environment, so can some physical structures. This piece is called Condensation Cube, and it was made by Hans Haacke in 1963. It is composed of sheets of plexiglass combined to make a square container, as well as some water and air. This piece is generative as within the system of this box, which can exist in a space with variable temperature, the pattern of the condensation changes. The artwork depends entirely on the place it exists in.

I find this piece interesting and beautiful, as its brings a natural process into focus. It makes me think about how all art in a way changes depending on the context in which it is placed.

https://www.macba.cat/en/condensation-cube-1523

Hyejo Seo-Project-02-Variable-Face


sketch

Are you forgetting something? 

Oh, yes! 

/*
Hyejo Seo
Section A
hyejos@andrew.cmu.edu
Project-02-Variable-Face
*/


var faceW = 300;
var faceH = 250;
var eyeH = 150;
var eyeW = 110;
var ex1 = 190;
var ex2 = 290;
var r = 240; 
var g = 72;
var b = 75; 


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

function draw() {
    background(47, 50, 47);
    //face
    fill(r, g, b);
    noStroke();
    ellipse(240, 530, faceW, faceH);
    // eyes
    fill(255);
    noStroke();
    ellipse(300, 520, eyeW, eyeH);
    ellipse(180, 520, eyeW, eyeH);
    // pupils
    fill(0);
    ellipse (295, 470, eyeW/2 - 20, eyeH/2 - 40);
    ellipse (185, 470, eyeW/2 - 20, eyeH/2 - 40);
    //exclamation mark
    noFill();
    stroke(221, 249, 193);
    strokeWeight(10);
    quad(ex1, 100, ex2, 100, 245, 250, 235, 250);
    circle(240, 320, 50);
}

function mousePressed() {
    faceW = random(150, 400);
    faceH = random(150, 300);
    eyeW = random(90, 130);
    g = random(0, 80);
    b = random(0, 100);
    ex1 = random(100, 190);
    ex2 = random(290,380);
    
}

Min Ji Kim Kim – Project 02 – Variable-Face


sketch

I had so much fun doing the project this week. The hardest part was trying to figure out how to use the if statement to get the single or double eye as well as understanding how to manipulate variables for the mousePressed function.

/*
Min Ji Kim Kim
Section-A
mkimkim@andrew.cmu.edu
Project-02
*/

//variables
var mouthHeight = 330;
var mouthWidth = 80;
var irisSize = 25;
var pupilSize = 12;
var headColor = 231;
var overallsColor = 130;
var eyeNumber = 2;


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

function draw() {
    noStroke();
    //head
    fill(254, headColor, 81);
    rect(210, 150, 220, 300, 100, 100, 0, 0);

    //goggle band
    fill(47, 47, 41);
    rect(210, 235, 220, 20);

    //Number of eyes
    if (eyeNumber >= 2){
        //two eyes
        //goggles
        fill(201, 208, 202);
        circle(280, 245, 90);
        circle(360, 245, 90);
        //eyes
        fill(255);
        circle(280, 245, 70);
        circle(360, 245, 70);
        //iris
        fill(102, 45, 19);
        circle(280, 245, irisSize);
        circle(360, 245, irisSize);
        //pupils
        fill(0);
        circle(280, 245, pupilSize);
        circle(360, 245, pupilSize);

    } else {
        //one eye
        //goggle
        fill(201, 208, 202);
        circle(320, 245, 90);
        //eye
        fill(255);
        circle(320, 245, 70);
        //iris
        fill(102, 45, 19);
        circle(320, 245, irisSize);
        //pupil
        fill(0);
        circle(320, 245, pupilSize);

    }

    //overalls
    strokeWeight(1.5);
    stroke(172, 121, 77);
    fill(53, 96, overallsColor);
    rect(210, 400, 220, 50);

    //mouth
    fill(255);
    strokeWeight(3);
    stroke(200, 117, 0);
    arc(320, mouthHeight, mouthWidth, 80, 0, PI, CHORD);

}

function mousePressed(){
    // when the user clicks, these variables are reassigned
    // to random values within the specifed ranges.
    mouthHeight = random(300, 340);
    mouthWidth = random(30, 100);
    irisSize = random(20, 30);
    pupilSize = random(8, 16);
    headColor = random(180, 240);
    overallsColor = random(100, 250);
    eyeNumber = random(1,3);

}

Min Ji Kim Kim – Looking Outwards – 02


Quantum Fluctuations video visualizing the different events of proton collision. 

Quantum Fluctuations is a generative art piece created by digital artist Markos Kay in 2016. Working together with scientists at the CERN research institute in Geneva, Kay took the hard to understand quantum world, and used art and technology to visually display proton collision. Utilizing particle simulations from the laboratory, Kay was able to virtually paint the different stages involved in this complicated process.

Visual representation of Hadron Decay, the last stage of proton collision.

I was attracted to this art piece because of the chaotic, complex yet beautiful combination of motion, colors and sound. These different components come together to create a synergistic effect, really reflecting and mirroring the intricate process of proton collision. I really admire how Kay was able to use generative art to visualize what otherwise is not detectable to the human eye, and do so in a very aesthetically pleasing way. Looking at this artwork made me feel like I was inside the proton collision itself.

Danny Cho_Project 2_Variable-Face

This is variation of the first portrait project. The cheek of Bao expands, and the blushes move as well. Also, the saturation of the background and the vertical size of the mouth are randomized, too.

variableface

var cheek = 200; //extension of cheek
var blushLoc = 200; //position of blush
var mouth = 210; //vertical size of mouth
var bgTint = 67; //saturation of background
var blushSat = 87.6; //saturation of blush

let value1x = 193;
let value1y = 250;
let value2x = 190;
let value2y = 265;
let value3x = 187;
let value3y = 250;



function setup() {
  createCanvas(400, 400);
  noStroke();
  colorMode(HSL);
  let c = color(355, 67, 67);
  let value = saturation(c);
  fill(c);
  rect(0,0, 400, 400);

}

function draw(){
    colorMode(HSL);
    strokeWeight(0)
    let c = color(355, bgTint, 67);
    let value = saturation(c);
    fill(c);
    rect(0,0, 400, 400);

    fill(212, 57.6, 80.6)
    strokeWeight(0)
    ellipse(200, 410, 460, 300)
    //body
    fill(17, 56.2, 93.7);
    strokeWeight(0);
    beginShape();
    curveVertex(200, 200);  //top
    curveVertex(200, 200);
    curveVertex(175, 230);
    curveVertex(150, 270);  //left handle
    curveVertex(125, 280);
    curveVertex(120, 285);
    curveVertex(135, 300);
    curveVertex(160, 288);
    curveVertex(200, 290);  //lowest point
    curveVertex(240, 288);
    curveVertex(265, 300);
    curveVertex(280, 285);
    curveVertex(275, 280);
    curveVertex(250, 270);  //right handle
    curveVertex(225, 230);
    curveVertex(200, 200);
    curveVertex(200, 200);
    endShape();
    //face
    fill(17, 56.2, 93.7);
    strokeWeight(0);
    beginShape();
    curveVertex(200, 100);
    curveVertex(200, 100);
    curveVertex(180, 135);
    curveVertex(325 - cheek, cheek - 30); //325 - cheek, cheek - 30
    curveVertex(120, cheek); //cheek
    curveVertex(200, 220+(cheek*(1/15))); //low tip
    curveVertex(280, cheek); //cheek
    curveVertex(75 + cheek, cheek - 30); //75 + cheek, cheek - 30
    curveVertex(220, 135);
    curveVertex(200, 100);
    curveVertex(200, 100);
    endShape();
    //left eye
    fill(0,0,15.7);
    circle(170, 175, 20)
    //left eye shine
    fill(47, 89.7, 73.3);
    strokeWeight(0);
    beginShape();
    curveVertex(180,175); //right point
    curveVertex(180,175);
    curveVertex(173,178);
    curveVertex(170,185); // lowest point
    curveVertex(167,178);
    curveVertex(160,175);
    curveVertex(167,172);
    curveVertex(170,165);
    curveVertex(173,172);
    curveVertex(180, 175);
    curveVertex(180, 175); //top point
    endShape();
    //right eye
    fill(0,0,15.7)
    circle(230, 175, 20) //
    //right eye shine
    fill(47, 89.7, 73.3);
    strokeWeight(0);
    beginShape();
    curveVertex(240,175); //right point
    curveVertex(240,175);
    curveVertex(233,178);
    curveVertex(230,185); // lowest point
    curveVertex(227,178);
    curveVertex(220,175);
    curveVertex(227,172);
    curveVertex(230,165);
    curveVertex(233,172);
    curveVertex(240, 175);
    curveVertex(240, 175); //top point
    endShape();
    //mouth
    fill(30)
    strokeWeight(1);
    stroke(30);
    beginShape();
    curveVertex(192.5, 200);
    curveVertex(192.5, 200);
    curveVertex(196.5, mouth);
    curveVertex(200, mouth+4);
    curveVertex(203.5, mouth);
    curveVertex(207.5, 200);
    curveVertex(207.5, 200);
    endShape();


    fill(17, 56.2, 93.7);
    strokeWeight(1);
    stroke(30);
    circle(192.5, 200, 15);
    fill(17, 56.2, 93.7);
    strokeWeight(1);
    stroke(30);
    circle(207.5, 200, 15);
    //coverup
    fill(17, 56.2, 93.7);
    strokeWeight(0);
    rect(170, 190, 60, 10);

    //blush
    fill(355, blushSat, 74.7);
    strokeWeight(0);
    circle(340-blushLoc, blushLoc-10, 24); //340-cheek, cheek-10
    fill(355, blushSat, 74.7);
    strokeWeight(0);
    circle(blushLoc+60, blushLoc-10, 24);//cheek+60, cheek-10

    //left arm
    fill(17, 56.2, 93.7);
    stroke(30)
    strokeWeight(1);
    beginShape();
    curveVertex(value1x, value1y);
    curveVertex(value1x, value1y);
    curveVertex(value2x, value2y);
    curveVertex(value3x, value3y);
    curveVertex(value3x, value3y);
    endShape();
    //right arm 
    fill(17, 56.2, 93.7);
    stroke(30)
    strokeWeight(1);
    beginShape();
    curveVertex(207, 250);
    curveVertex(207, 250);
    curveVertex(210, 265);
    curveVertex(213, 250);
    curveVertex(213, 250);
    endShape();
}

function mousePressed() {
    bgTint = random(0, 100);
    cheek = random(200, 250);
    blushLoc = 200 + (cheek - 200)*(3/5);
    mouth = random(210, 230)
    blushSat ++;
  if (value2y === 265) {
    value2y = 230;
  } else {
    value2y = 265;
  }

}

Bo Yang-Project-02-Variable Face

sketch

/*
    Bo Yang
    Section A
    byang2@andrew.cmu.edu
    Project-02-Variable-Face
*/

    var eyeSize = 25;
    var faceWidth = 120;
    var faceHeight = 180;
    var mouth = 55;
    let color = "#86592d";
    let colors = ["#33cccc", "#ccccff", "#cc6600", "##993333"];


function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    var eyeL = width / 2 - faceWidth * 0.25;
    var eyeR = width / 2 + faceWidth * 0.25;
    background(color);
 

    //face
    noStroke();
    fill("#006622");
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    ellipse(width / 2, height * 0.6, faceWidth * 1.5, faceHeight);

    //black eyes
    fill("black");
    ellipse(eyeL, height / 3, eyeSize / 3, eyeSize / 3);
    ellipse(eyeR,height / 3, eyeSize / 3, eyeSize /3);

    //eyes
    ellipse(eyeL, height / 3, eyeSize, eyeSize);
    ellipse(eyeR, height / 3, eyeSize, eyeSize);

    //pupil
    fill(255);
    ellipse(eyeL, height / 3, eyeSize / 2, eyeSize / 2);
    ellipse(eyeR, height / 3, eyeSize / 2, eyeSize / 2);

    //cheeks
    fill("#ff99bb");
    ellipse(eyeL - 8, (height / 3) + 40, eyeSize * 1.2, eyeSize * 1.2);
    ellipse(eyeR + 8, (height / 3) + 40, eyeSize * 1.2, eyeSize * 1.2);

    //mouth
    fill("#ff4d4d"); 
    arc(width / 2, height * 0.6, mouth, mouth, TWO_PI, PI);

    
}
 
function mousePressed() {
    
    faceWidth = random(30, 120);
    faceHeight = random(100, 200);
    eyeSize = random(15, 35);
    mouth = random(25, 60);
    color = random(colors);
    eyeL = random(width / 2, width / 2 - faceWidth * 0.25);
}

In this program, I draw a frog in the different background color. The frog’s body shape and eyes size will change when you click it. Before I draw it, I just noticed the face shape is more like a frog’s body shape. It use variables on the face, eyes, mouth and background.

Steven Fei – Project – 02


steven fei variable face

function setup() {
    createCanvas(600, 600);
       
}
var shirtColor1 = 255
var faceRound = 300; /*100, 300*/
var hairX = 130; /*120, 135*/
var noseHeight = 295; /*295, 315*/
var noseTip = 20; /*10, 25*/
var mouth1 = 120; /*30, 120*/
var mouth2 = 30; /*1, 30*/
var eyebrow1 = 250; /*220, 255*/
var eyebrow2 = 230; /*200, 240*/
var eyeHeight = 60; /*50 , 80*/
var eyeballX = 230; /*210, 250*/
var eyeballY = 290; /* 290-eyeHeight/2-15, 290 + eyeHeigh/2 + 15*/
function draw() {
    background(227,252,207);
    
    //body
    noStroke();
    fill(shirtColor1,14,14);
    rect(100, 450, 400, 140, 100, 100, 0,0);
    noStroke();
    fill(199,158,95);
    triangle(240, 450, 300, 530, 360, 450);
    
    //ear
    noStroke();
    fill(252,226,177);
    circle(130, 300, 50);
    noStroke();
    fill(252, 226,177);
    circle(470, 300, 50);
    
    
    
//    face
    noStroke();
    fill(240,210,180);
    rect(130,200, 340, 300, 0,0,faceRound, faceRound);
    noStroke();
    fill(252,226,177);
    rect(150,200,300,290,0,0,faceRound, faceRound);
    
//    hat
    strokeWeight(1);
    stroke(20);
    fill(135,171,230);
    arc(300, 200, 340, 250, PI, TWO_PI, PIE);
    strokeWeight(1);
    noStroke();
    fill(93,129,186);
    arc(300, 200, 300, 225, PI, TWO_PI,PIE);
    
//    hat rim
    strokeWeight(8);
    stroke("black");
    fill(240,217,180);
    arc(300,210, 200,80, PI, TWO_PI, OPEN);
    
//    eyes
    noStroke();
    fill("white");
    ellipse(220, 290, 95, eyeHeight);
    noStroke();
    fill("white");
    ellipse(380, 290, 95, eyeHeight);
    
    //eyeball
    stroke(100);
    strokeWeight(3);
    fill("black");
    circle(eyeballX, eyeballY, 30);
    stroke(100);
    strokeWeight(3);
    fill("black");
    circle(eyeballX + 140, eyeballY, 30);
    
    //hair
    stroke(50);
    strokeWeight(3);
    fill(30);
    triangle(130,200, 175, 200, hairX, 300);
    stroke(50);
    strokeWeight(3);
    fill(30);
    triangle(470,200, 425,200, 600-hairX ,300);

//    eyebrow
    stroke("black");
    strokeWeight(5);
    noFill();
    beginShape();
    curveVertex(150, 245);
    curveVertex(150,245);
    curveVertex(190, eyebrow2);
    curveVertex(210, eyebrow2);
    curveVertex(240, eyebrow1);
    curveVertex(240, eyebrow1);
    endShape();
    stroke("black");
    strokeWeight(5);
    noFill();
    beginShape();
    curveVertex(450, 245);
    curveVertex(450,245);
    curveVertex(410, eyebrow2);
    curveVertex(390, eyebrow2);
    curveVertex(360, eyebrow1);
    curveVertex(360, eyebrow1);
    endShape();
    
    //nose
    fill(209,173,107);
    noStroke();
    triangle(300, noseHeight - 8, 280, 350, 320, 350);
    fill(237,225,183);
    noStroke();
    triangle(300, noseHeight, 280, 350, 320, 350);
    fill(237,225,183);
    stroke(217,187,132);
    strokeWeight(1);
    arc(300, 350, 40, noseTip, 0, PI, OPEN);
    
//    mouth
    noStroke();
    fill(217,108,102);
    arc(300, 390, 180, mouth1, 0, PI, PIE);
    noStroke();
    fill(252,226,177);
    arc(300, 390, 180, mouth2, 0, PI, PIE);
    
    

}

function mousePressed(){
shirtColor1 = random(10, 255);
faceRound = random(100,300); /*100, 300*/
hairX = random(120,135); /*120, 135*/
noseHeight = random(295,315); /*295, 315*/
noseTip = random(10,25); /*10, 25*/
mouth1 = random(30,120); /*30, 120*/
mouth2 = random(1,30); /*1, 30*/
eyebrow1 = random(220,255); /*220, 255*/
eyebrow2 = random(200,240); /*200, 240*/
eyeHeight = random(50,80); /*50 , 80*/
eyeballX = random(210,250); /*210, 250*/
eyeballY = random(290 - (eyeHeight/2) + 15, 290 + (eyeHeight/2) - 15); /* 290-eyeHeight/2-15, 290 + eyeHeigh/2 + 15*/
}