Month: September 2021

LO-02: Generative art

Joshua Davis Studios

I chose to take a look at the work of Joshua Davis. I chose to look at his project “the V01D,” which, like my last post, has to do with music. My last post dealt with the autonomous creation of music, however this project was the autonomous creation of an animation that goes along with musicThe V01D is a type of generative art, which means it was created with the use of an autonomous system. Davis used dozens of reactive algorithms in order to turn the music of Kurt Uenala into animation. When paired together (the animation and the music), it is a very cool experience. I admire this project because I enjoy music and enjoy generative art like this, and since it combines the two it is very cool. Davis used 36 different algorithms in order to create these seamless animations, which is a lot more than I thought would need to be used.

The cover of Joshua Davis’s animation

Michael Hansmeyer

I really admire the complexities of the geometric shapes that are created by Michael Hansmeyer, in particular, his “Subdivided Columns” work. In addition, I like how the pillars and the architecture have such minute details and the way the art is configured creates a sense of fantasy and magic. I like the “Subdivided Columns” piece because the code allowed for such flowy and symmetrical columns. While the art is very fantastical, it still operates as a normal column. I have no idea to begin analyzing the code for such detailed columns, but one thing is for sure, I feel like because of the level of detail, it would nearly be impossible for a normal architect to create this design. There do seem to be some repeating patterns, which tells me that there are loops involved in the algorithm. In addition, the way that the general shape of the columns flows smoothly in and out allows the columns to not only appear as smooth but sturdy.

Subdivided Columns(2010-now)

Subdivided Columns

project-01Download
function setup() {
    createCanvas(600, 900);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(2, 3, 200);
    fill(255);
    triangle(400, 650, 475, 850, 325, 850);
    rect(50, 50, 500, 600);
    stroke(0);
    strokeWeight(5);
    noFill();
    triangle(400, 850, 450, 900, 350, 900);
    curve(70, 220, 100, 170, 250, 165,  280, 222);
    curve(270, 222, 300, 165, 450, 170,  480, 220);
    fill(0);
    arc(150, 170, 60, 40, 0, 3);
    arc(350, 170, 60, 40, 0, 3);
    fill(255);
    arc(150, 170, 60, 40, .5, 1);
    arc(350, 170, 60, 40, .5, 1);
    fill(255, 173, 226);
    noStroke();
    ellipse(175, 300, 50, 100);
    ellipse(375, 300, 50, 100);
    fill(250, 160, 210);
    ellipse(175, 300, 40, 40);
    ellipse(375, 300, 40, 40);
    stroke(0);
    strokeWeight(5);
    fill(0);
    curve(200, mouseY/2, 225, 400, 325, 400,  350, mouseY/2);
    noFill();
    curve(70, 100-(mouseY/2), 120, 100, 220, 100,  280, 100+(mouseY/2));
    curve(270, 100+(mouseY/2), 320, 100, 420, 100,  480, 100-(mouseY/2));

}

Project 02: Variable Face

With each click, the eyes are changed randomly. If the mouse is pressed, the facial expression changes, the arms move up and down, and the character switches between wearing different hats. When the pink button, blue button, or yellow sun button are clicked, either blushing circles, tear tracks, or yellow polka dots will appear.

sketch

//Alana Wu
//Section C


 var faceWidth = 120;
 var eyeLength = 20;
 var x = 200;
 var y = 250;
 var eyeThickness = 5; //for changing eye thickness
 var randomEars = 1; //for changing hat/ears
 var randomSun = 10; //for changing yellow polka dot locations

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

//if mouse is pressed on yellow sun, yellow polka dots appear
    if (mouseIsPressed & mouseX > .7 * width && mouseX < .9 * width
        && mouseY > .1*height && mouseY < .3*height) 
    {
        fill (255, 255, 0)
        strokeWeight(0);
        ellipse (randomSun, randomSun*10, faceWidth/2, faceWidth/2);
        ellipse (x + randomSun*4, randomSun*2, faceWidth/4, faceWidth/4);
        ellipse (randomSun*20, randomSun*6, faceWidth/5, faceWidth/5);
        ellipse (randomSun*7, y + randomSun*4, faceWidth/3, faceWidth/3);
        ellipse (randomSun*12, y +randomSun*6, faceWidth/4, faceWidth/4);
        ellipse (x + randomSun*3, randomSun*2.7, faceWidth/6, faceWidth/6);
        ellipse (randomSun*2.2, y +randomSun*5.7, faceWidth/7, faceWidth/7);
        ellipse (randomSun*6, y +randomSun*10, faceWidth/2, faceWidth/2);
        ellipse (randomSun*12, y +randomSun*12, faceWidth/3, faceWidth/3);
        ellipse (randomSun*20, y - randomSun*8, faceWidth/4, faceWidth/4);
        ellipse (randomSun*32, y +randomSun*11, faceWidth/4, faceWidth/4);
        ellipse (randomSun*28, y -randomSun*6, faceWidth/3, faceWidth/3);
        ellipse (randomSun*38, y +randomSun*5, faceWidth/2, faceWidth/2);
        ellipse (randomSun*35, y -randomSun*3, faceWidth/4, faceWidth/4);
    }

//blush button
    strokeWeight (0);
    fill (255, 0, 127);
    rect (15, 15, 70, 40);

//draws blue tear shape button
    fill (0, 0, 255);
    beginShape();
    curveVertex(50, 100);
    curveVertex(50, 100);
    curveVertex(25, 150);
    curveVertex(50, 175);
    curveVertex(75, 150);
    curveVertex(50, 100);
    curveVertex(75, 150);
    curveVertex(50, 100);
    endShape();

//draws sun
    fill (255, 255, 0);
    ellipse (.8*width, .2*height, width/5, width/5);
    strokeWeight(8);
    stroke(255, 255, 0);
    line ( .8*width, .2*height, .8*width + width/6, .2*height);
    line ( .8*width, .2*height, .8*width, .2*height + width/6);
    line ( .8*width, .2*height, .8*width, .2*height - width/6);
    line ( .8*width, .2*height, .8*width - width/6, .2*height);
    line ( .8*width, .2*height, .8*width + width/8, .2*height - width/8);
    line ( .8*width, .2*height, .8*width - width/8, .2*height - width/8);
    line ( .8*width, .2*height, .8*width + width/8, .2*height + width/8);
    line ( .8*width, .2*height, .8*width - width/8, .2*height + width/8);
    fill (255);
    strokeWeight (0);
    ellipse (x, y, faceWidth, faceWidth); //draws head shape

    strokeWeight (eyeThickness); //thickness of eye line
    stroke(0);
    line (x - faceWidth/5, y - faceWidth/5,
    x - faceWidth/5, y - faceWidth/4 + eyeLength); //draws left eye line
    line (x + faceWidth/5, y - faceWidth/5,
    x + faceWidth/5, y - faceWidth/4 + eyeLength); //draws right eye line


//draws body
    strokeWeight(5);
    stroke(255);
    fill (255);
    line (x - faceWidth/5, y + faceWidth/2, x - faceWidth/3, y + faceWidth);
    line (x + faceWidth/5, y + faceWidth/2, x + faceWidth/3, y + faceWidth);
    line (x - faceWidth/3, y + faceWidth, x + faceWidth/3, y + faceWidth);
//draw legs 
    line (x - faceWidth/5, y + faceWidth, x - faceWidth/5, y + 1.3*faceWidth);
    line (x + faceWidth/5, y + faceWidth, x + faceWidth/5, y + 1.3*faceWidth);
//draw feet 
    line (x - faceWidth/5, y + 1.3*faceWidth, x - faceWidth/3, y + 1.3*faceWidth);
    line (x + faceWidth/5, y + 1.3*faceWidth, x + faceWidth/3, y + 1.3*faceWidth);

//when mouseispressed, arms are lowered
    if (mouseIsPressed)
    {
        line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth/2, y + faceWidth);
        line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth/2, y + faceWidth);
        stroke(0);
        ellipse (x, y + faceWidth/7, faceWidth/4, faceWidth/4);
    }
//when mouse isn't pressed, arms are raised 
   else
    {
        line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth, y - faceWidth/4);
        line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth, y - faceWidth/4);
        stroke (0);
        line (x + faceWidth/5, y + faceWidth/7, x - faceWidth/5, y + faceWidth/7);
    }


//blush spots appear when you click "blush" button
    if (mouseIsPressed & mouseX > 15 && mouseX < 85 && mouseY > 15 && mouseY < 55)
    {
        strokeWeight (0);
        fill (255, 0, 127);
        ellipse (x + faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
        ellipse (x - faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
    }

// draws blue tear lines under eyes when blue teardrop is clicked
    if (mouseIsPressed & mouseX > 25 && mouseX < 75 && mouseY > 100 && mouseY < 175)
    {
        stroke (0, 0, 255);
        strokeWeight(8);
        line (x - faceWidth/5, 1.02*y, x - faceWidth/5, y + faceWidth/2);
        line (x + faceWidth/5, 1.02*y, x + faceWidth/5, y + faceWidth/2);
        strokeWeight (0);

    }

//depending on random number generated, either panda ears, a cone hat, or a top hat appears
    if (randomEars <= 1) //draws panda ears
    {
        fill (0);
        ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
        ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
        fill (255);
        ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
        ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
    }
    else if (randomEars <= 2) //draws red top hat w/ black and white buckle
    {
        strokeWeight (0);
        fill (255, 0, 0);
        rect (x - faceWidth/2, y - .6*faceWidth, faceWidth, faceWidth/4);
        rect (x - faceWidth/4, y - faceWidth, faceWidth/2, faceWidth/2);
        fill (0);
        rect (x - faceWidth/5, y - .58*faceWidth, faceWidth/2.5, faceWidth/5.5);
        fill (255);
        rect (x - faceWidth/9.5, y - .55*faceWidth, faceWidth/5, faceWidth/8);
    }
    else if (randomEars <= 3) //draws pink cone hat
    {
        strokeWeight(0);
        fill (255, 0, 127);
        triangle (x, y - 1.2*faceWidth, x - faceWidth/2.5, y - faceWidth/3, x + faceWidth/2.5, y - faceWidth/3);
        fill (255);
        ellipse (x, y - 1.2*faceWidth, faceWidth/4, faceWidth/4);
    }   
}


function mousePressed ()
{
    //when user clicks, these variables are reassigned to random values w/n specific ranges
    eyeLength = random (8, 25);
    eyeThickness = random (5, 12);
    randomEars = random (0, 3);
    randomSun = random (5, width/10);

}

Project 5: Wallpaper

wallpaper karan

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

function draw() {
    for(x=75;x<=375;x+=150){ //loop for pink shaded eye pattern
        for(y=37.5;y<=412.5;y+=75){
            pattern(x,y);
        }
    }
    for(x=0;x<=width;x+=150){ //loop for yellow shaded eye pattern
        for(y=0;y<=height;y+=75){
            pattern2(x,y);
        }
    }
    noLoop()
}

function pattern(centerX,centerY){ //pattern for pink eye
    noStroke()
    fill(200,121,174); 
    quad(centerX-75,centerY,centerX,centerY-37.5,centerX+75,centerY,centerX,centerY+37.5); //rhombus
    fill(79,0,145);
    arc(centerX,centerY+18.75,75,75,PI+PI/6,2*PI-PI/6,CHORD) //outer eye top half
    arc(centerX,centerY-18.75,75,75,PI/6,PI-PI/6,CHORD) //outer eye lower half
    fill(189,151,177);
    ellipse(centerX,centerY,37.5,37.5);//outer pupil 
    fill(0);
    ellipse(centerX,centerY,18.75,18.75);//inner pupil
}

function pattern2(centerX,centerY){//same code, different colours
    noStroke()
    fill(254,199,73);
    quad(centerX-75,centerY,centerX,centerY-37.5,centerX+75,centerY,centerX,centerY+37.5);
    fill(251,254,46);
    arc(centerX,centerY+18.75,75,75,PI+PI/6,2*PI-PI/6,CHORD)
    arc(centerX,centerY-18.75,75,75,PI/6,PI-PI/6,CHORD)
    fill(254,183,116);
    ellipse(centerX,centerY,37.5,37.5);
    fill(0);
    ellipse(centerX,centerY,18.75,18.75);
}

This was an interesting project because I liked that I drew eyes. It was a little tricky figure where the arcs should be placed.

Project 2: Variable Faces

chapmanGenerativeFaces

//Elise Chapman
//ejchapma@andrew.cmu.edu
//Section D

function setup() {
    createCanvas(400, 500);
}

/* variables: skin color, head width, head height, 
eye size eye color, nose, skin color, 
eyebrows, eyebrow color, mouth, ear size */
/* non-variables: eye-spacing, eyebrow height */
var hWidth;
var hHeight;
var skin;
var eyeSize;
var eyeColor;
var noseY;
var earX;
var earY;
var eyebrows;
var eyebrowsY;
var txtY = 250;

function mousePressed() {
    hWidth = int(random(100,200));
    hHeight = int(random(150,225));
    skin = int(random(1,8));
    eyeSize = int(random(20,40));
    eyeSize2 = int(random(20,40));
    eyeColor = int(random(1,7));
    nose = int(random(1,5));
    noseY = int(random(270,300));
    earX = int(random(30,50));
    earY = int(random(40,70));
    eyebrows = int(random(1,7));
    eyebrowsY = random((height/2)-0.1*hHeight,(height/2)-0.27*hHeight)
    txtY = 800;
}

function draw() {
    background(101,222,241);
    //intro text
    fill(300);
    stroke(20);
    loadFont("Courier New");
    strokeWeight(5);
    textSize(18);
    textFont("Courier New");
    text("Dad Generator: Click to begin.",40,txtY);
    noStroke();
    //skin color
    var alien;
    if (skin==1) {
        fill(197,149,123);
    } else if (skin==2) {
        fill(236,188,180);
    } else if (skin==3) {
        fill(290,201,164);
    } else if (skin==4) {
        fill(161,102,94);
    } else if (skin==5) {
        fill(80,51,53);
    } else if (skin==6) {
        fill(89,47,42);
    } else {
        fill(187,219,155);
        var alien="true";
    }
    //head
    ellipse(200,250, hWidth,hHeight);
    //ears
    if (alien=="true") {
        rect((width/2)-(hWidth/2)-(earX/1.25),height/2.25,earX,earY,0,80,80,80);
        rect((width/2)+(hWidth/2.75)+(earX/4),height/2.25,earX,earY,80,0,80,80);
    } else {
        rect((width/2)-(hWidth/2)-(earX/1.25),height/2.25,earX,earY,80,80,80,80);
        rect((width/2)+(hWidth/2.75)+(earX/4),height/2.25,earX,earY,80,80,80,80);
    }
    //nose
    if (skin==1) {
        fill(161,103,68);
    } else if (skin==2) {
        fill(200,136,120);
    } else if (skin==3) {
        fill(206,132,95);
    } else if (skin==4) {
        fill(105,49,29);
    } else if (skin==5) {
        fill(43,24,23);
    } else if (skin==6) {
        fill(38,19,10);
    } else {
        fill(105,122,33);
        var alien="true";
    }
    triangle(width/2,height/2,(width/2)+10,noseY,(width/2)-10,noseY);
    //eyes
    var eyeLX=200-hWidth*0.25;
    var eyeRX=200+hWidth*0.25;
    fill(300); //white
    ellipse(eyeLX, 250, eyeSize, eyeSize);
    ellipse(eyeRX, 250, eyeSize, eyeSize);
    if (eyeColor==1) {
        fill(138,203,136);
    } else if (eyeColor==2) {
        fill(198,224,255);
    } else if (eyeColor==3) {
        fill(58,124,165);
    } else if (eyeColor==4) {
        fill(22,38,46);
    } else {
        fill(58,51,53);
    }
    var pupilRX=200-hWidth*0.25
    var pupilLX=200+hWidth*0.25
    ellipse(pupilRX, 250, eyeSize/1.25, eyeSize/1.25);
    ellipse(pupilLX, 250, eyeSize/1.25, eyeSize/1.25);
    //eyebrows
    fill(30);
    if (eyebrows==1) {
        rect(eyeLX-(eyeSize/2),eyebrowsY,40,10);
        rect(eyeRX-(eyeSize/2),eyebrowsY,40,10);
    } else if (eyebrows==2) {
        rect(eyeLX-(eyeSize/2),eyebrowsY,30,20);
        rect(eyeRX-(eyeSize/2),eyebrowsY,30,20);
    } else if (eyebrows==3) {
        rect(eyeLX-(eyeSize/2),eyebrowsY,40,5);
        rect(eyeRX-(eyeSize/2),eyebrowsY,40,5);
    } else if (eyebrows==4) {
        rect(eyeLX-(eyeSize/2),eyebrowsY,30,10);
        rect(eyeRX-(eyeSize/2),eyebrowsY,30,10);
    } else if (eyebrows==5) {
        rect(eyeLX-(eyeSize/2),eyebrowsY,40,2);
        rect(eyeRX-(eyeSize/2),eyebrowsY,40,2);
    } else if (eyebrows==6) {
        rect(eyeLX-(eyeSize/2),eyebrowsY,40,20);
        rect(eyeRX-(eyeSize/2),eyebrowsY,40,20);
    }
}

Looking Outwards 02: Generative Art

https://www.dataisnature.com/

I have always found the idea of math and data present in nature and art very fascinating. In my previous design courses there was always a mention of how the forms of nature can be an inspiration to art. A specific example would be the classic Apple logo. The logo follows the golden ratio: a ratio of a line segment cut into two pieces of different lengths where the ratio of the whole segment to that of the longer is equal to the ratio of the longer to the shorter. The golden ratio is found in everyday applications/programs along with natural elements we see. Apart from the technological incidences, the golden ratio is present all around campus: leaves, flowers, ants, bees, cicadas, etc. After reading the article “Data is Nature” I found a more profound interest in finding these mathematical elements in daily life.

Project 2: Variable Face

sketch
//Anthony Pan
//Section C
//Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var nose1 = 140;
var nose2 = 180;
var nose3 = 150;
var nose4 = 165;
var nose5 = 155;
var nose6 = 170;
var mouth = 1;
var hair = 1;
var color = 1;

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

function draw() {
    background(180);
    if (hair < 0.33){
        //hair middle
        line(width/2, height/2, width/2, height/2 - 2/3*faceHeight);
    }if (hair < 0.66){
        //hair right
        curve(width/2, height/2, width/2 + 25, height/2 - 1/3*faceHeight,
         width/2 + 50, height/2 - 1/2*faceHeight, width/2 + 75, height/2 - 3/4*faceHeight);
    }if (hair < 1){
        //hair left
        curve(width/2, height/2, width/2 - 25, height/2 - 1/3*faceHeight, 
        width/2 - 50, height/2 - 1/2*faceHeight, width/2 - 75, height/2 - 3/4*faceHeight);
    }
    if (color < 0.25){
        //pastel red face
        fill(235,136,129);
    }else if(color < 0.5){
        //pastel blue face
        fill(129, 219, 235);
    }else if (color < 0.75){
        //pastel green face
        fill(181, 245, 176);
    }else{
        //white face
        fill(255,255,255);
    }
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255,255,255); //keeps features white
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    if (mouth < 0.33){ 
        //happy mouth
        arc(150, 180, 20, 20, 0, PI + QUARTER_PI, CHORD);
    }else if (mouth < 0.66) {
        //sad mouth
        noFill(); //keeps mouth white
        curve(130, 200, 145, 185, 160, 185, 175, 200);
    }else {
        //neutral mouth
        line(140, 190, 170, 190);
    }
    fill(255,255,255); // keeps nose white
    triangle(nose1, nose2, nose3, nose4, nose5, nose6); //triangular nose with random coordinates

    

}

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);
    nose1 = random(145, 150);
    nose2 = random(180, 190);
    nose3 = random(150, 155);
    nose4 = random(165, 170);
    nose5 = random(155, 160);
    nose6 = random(170, 180);
    mouth = random(0,1);
    hair = random(0,1);
    color = random(0,1);
    console.log(mouth);




}

LO 02: Generative Art

This week, I took a look at Karl Sims and his piece, Seven Experiments in Procedural Animation 2018. I found this piece very inspiring because of its beautiful renderings. The movements of the different experiments feeling natural, smooth, and organic. But they also have an artificial touch to them as they are computer-generated renderings in the first place. I admired the clean yet sophisticated forms he produced using mathematical equations. It’s strange to me to think that beauty can be derived from an equation: quantifying beauty in a sense. It is stated that he is using fractal equations, procedural noise, and reaction-diffusion techniques to create his visuals in this piece. Sims’ goal was to create an algorithm/visual piece that mimicked living organisms and microscopic structures that would evoke a biological aesthetic. Clearly, he was able to achieve what he set out to do, illustrated by the very fine movements and organic forms he incorporated into his work.

Karl Sims Seven Experiments in Procedural Animation