September 2022 – Page 36 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 02

For my project, I wanted to create a face who’s expression of shock varies every time the mouse is pressed.

var faceWidth = 300;
var faceHeight = 500;
var eyeSize = 30;
var faceColour = 196
var mouthWidth = 30
var mouthHeight = 50
var background1 = 227
var background2 = 181
var background3 = 189

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

function draw() {
    background(background1, background2, background3)
    noStroke();
    fill(faceColour,89,114);
    beginShape(); // face
    curveVertex(width/2, (height/2) - (faceHeight/2));
    curveVertex(width/2, (height/2) - (faceHeight/2));
    curveVertex((width/2) - (faceWidth/4), (height/2) - (3*faceHeight/8));
    curveVertex((width/2) - (3*faceWidth/8), (height/2) - (faceHeight/8));
    curveVertex((width/2) - (faceWidth/2), (height/2) + (faceHeight/8));
    curveVertex((width/2), (height/2) + (faceHeight/4));
    curveVertex((width/2) + (faceWidth/2), (height/2) + (faceHeight/8));
    curveVertex((width/2) + (3*faceWidth/8), (height/2) - (faceHeight/8));
    curveVertex((width/2) + (faceWidth/4), (height/2) - (3*faceHeight/8));
    curveVertex(width/2, (height/2) - (faceHeight/2));
    curveVertex(width/2, (height/2) - (faceHeight/2));
    endShape();
    fill(255, 228, 218)
    circle((width/2) - (faceWidth/8), (height/2) - (faceHeight/8), eyeSize); // left eye
    circle((width/2) + (faceWidth/8), (height/2) - (faceHeight/8), eyeSize); // right eye
    ellipse((width)/2, (height/2) + (faceHeight/8), mouthWidth, mouthHeight)
}

function mousePressed() {
    faceWidth = random(225, 400)
    faceHeight = random(350, 600)
    eyeSize = random(10,35)
    mouthWidth = random(20, 50)
    mouthHeight = random (20, 50)
    faceColour = random(100, 250)
    background1 = random(1, 255)
    background2 = random(1, 255)
    background3 = random(1, 255)
}

I really admire the 3D printed items made by the Nervous system for their choice of forms and their shapes, minimizing the use of materials and still managing to serve the function of the item while creating fancy patterns out of those hollowed materials.
Additionally, I also made several 3D models similar to the ones that the Nervous System made through using the grasshopper and rhinoceros program. I am pretty sure that most of the models of the ones shown on the Nervous System websites are made through making one or more Voronoi diagrams first then thicken and smoothen the lines to make it into a solid shape. One good aspect of using Grasshopper is that most variables of the 3D models are configurable, making each design can have an infinite amount of iterations.
I think the creator wanted to create something in between visibility and invisibility through the hollowed shapes using the mathematical methods to minimize visible parts of each item it creates while still working as an object without those holes.

Reference: https://n-e-r-v-o-u-s.com/shop/search_tags.php?search=3dprin

https://n-e-r-v-o-u-s.com/shop/search_tags.php?search=3dprint

LO2-Generative Art

Meander – Robert Hodgin

“Meander is a procedural system for generating historical maps of rivers that never existed”

I find this project especially interesting and inspiring because it is a representation of art that transcends time. Hodgin not only uses animations of rivers on a map, but also 3d representations that depict the effect of these rivers on the surrounding terrain, as well as the overall topography of the area. As an architecture student i find this super unique because it combines animation and art with useful information that can make predictions based on the condition of the earth.

The algorithm of this piece seems to involve the usage of vectors to produce bends that form the curves of the appearing rivers. Hodgin was inspired by the artist Harold Fisk, who first created these maps that visualize time along with engineers in the US Army Coup. in 1944. It’s fascinating that now, with more evolved technology, idealizations of many artists in the past can be produced by later generations.

Meander

Project 02 Variable Face

In my process, I wanted to figure out how to play with color and how that could change through pressing the mouse. I also was interested in and had a lot of fun figuring out how simple shape changes could affect expression.

project2

//Rachel Legg Class Section C

var eyeSize = 50;
var eyeHeight = 25;
var faceWidth = 300;
var bodyWidth = 400;
var faceHeight = 300;
var eyebrowHeight = 200;

var r;         // making rgb variable
var g;
var b;
var on = false;

var x = 0;
var y = 0;

function setup() {
    createCanvas(640, 480);
    background(220);
}
 
function draw() {
    noStroke();
    if(on){                                  //alternate background color on click
        background(252, 169, 133);    //orange
    }else{
        background(204, 236, 239);    //blue
    }

    //shirt
    fill(r, g, b);                                    
    ellipse(width / 2, height, bodyWidth, height);             
    fill(r + 10, g + 10, b +10);  
    ellipse(width / 4, height, bodyWidth / 4, height / 2);         
    ellipse(width * 3/4, height, bodyWidth / 4, height / 2); 

    //head
    if(on){                                //alternate head color on click
        fill(253, 222, 238);  //pink
    }else{
        fill(224, 243, 176);  //green
    }
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);  

    //eyes
    fill(r, g, b, 200);                                          
    var eyeLX = width / 2 - faceWidth * 0.25;                   
    var eyeRX = width / 2 + faceWidth * 0.25; 
    if(mouseX < width / 2){
        ellipse(eyeLX, height / 2, eyeSize, eyeHeight);               
        ellipse(eyeRX, height / 2, eyeSize, eyeHeight);
        fill(0);                                                                //pupils
        ellipse(eyeLX, height / 2, 1/2 * eyeSize, 3/4 * eyeHeight);
        ellipse(eyeRX, height / 2, 1/2 * eyeSize, 3/4 * eyeHeight);
        fill(255, 255, 255, 200);
        ellipse(eyeLX + 4, (height / 2) - 4, 1/8 * eyeSize, 1/8 * eyeHeight);    //glare
        ellipse(eyeRX + 4, (height / 2) - 4, 1/8 * eyeSize, 1/8 * eyeHeight);
    }else{
        if(on){                                //alternate nose color on click
            stroke(251, 182, 209);    //darker pink
        }else{
            stroke(145, 210, 144);    //darker green
    }
        strokeWeight(2);
        line(eyeLX - 10, height / 2, eyeLX + 10, height / 2);         //closing eyes when mouse is on right side
        line(eyeRX + 10, height / 2, eyeRX - 10, height / 2);
    }               

    //mouth
    if(mouseY > height / 2){
        fill(0);
        noStroke();
        circle(width / 2, 2/3 * height, 20, 20);                     //open mouth when below half
    }else{
        if(on){                       //alternate nose color on click
            stroke(251, 182, 209);    //darker pink
        }else{
            stroke(145, 210, 144);    //darker green
    }
        strokeWeight(2);
        line(2/5 * width, 2/3 * height, 3/5 * width, 2/3 * height);  
    }

    //nose
    noStroke();
    if(on){                           //alternate nose color on click
        fill(251, 182, 209);          //darker pink
    }else{
        fill(145, 210, 144);          //darker green
    }
    beginShape();
    curveVertex(1/5 * width, 4/5 * height); 
    curveVertex(1/2 * width, 5/9 * height);
    curveVertex(1/2 * width, 5/9 * height);
    curveVertex(4/5 * width, 4/5 * height);
    endShape();

    //eyebrow
    if(on){                       //alternate eyebrow color on click
        stroke(251, 182, 209);    //darker pink
    }else{
        stroke(145, 210, 144);    //darker green
    }
    strokeWeight(3);
    if(mouseX < width/ 2){
        line(eyeLX - 10, eyebrowHeight - 10, eyeLX + 15, eyebrowHeight - 15);               
        line(eyeRX + 10, eyebrowHeight - 5, eyeRX - 15, eyebrowHeight - 15);
    }else{
        line(eyeLX - 10, eyebrowHeight - 30, eyeLX + 15, eyebrowHeight - 20);               
        line(eyeRX + 10, eyebrowHeight - 30, eyeRX - 15, eyebrowHeight - 20);
    }

}
 
function mousePressed() {
    if(on){                               //change background on click
        on = false;
    }else{
        on =true;
    }
    faceWidth = random(300, 500);         //with click, face width changes
    bodyWidth = random(375, 415);         //with click, shirt width changes along with arms
    faceHeight = random(200, 400);        //face height changes
    eyeSize = random(20, 80);             //eye size changes
    eyeHeight = random (20, 60);
    r = random(0, 255);                   //eye and shirt color change
    g = random (0, 255);
    b = random (0, 255);
    eyebrowHeight = random(180, 200);     //eyebrow position changes
}

Project-02-Variable Face

sketch

function setup() {
    createCanvas(640, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 300;
var mouthHeight = 230;
var noseHeight = 190;
 
var rface = 240;
var gface = 188;
var bface = 212;

var rmouth = 48;
var gmouth = 213;
var bmouth = 200;

var rnose = 62;
var gnose = 12;
var bnose = 94;

var reyes = 208;
var geyes = 255;
var beyes = 206;

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);


    fill (rface,gface,bface);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);


    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill (reyes,geyes,beyes);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    fill(rmouth, gmouth, bmouth);
    arc (width/2, mouthHeight, 30, 10, TWO_PI, PI); //mouth

    fill (rnose, gnose, bnose);
    ellipse (width/2, noseHeight, 20); //nose
}
 
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(200, 350);
    eyeSize = random(10, 40);
    mouthHeight = random(210, 240);
    noseHeight = random (180, 200);
    rface = random (200, 290);
    gface = random (170, 200);
    bface = random (200, 240);

}

Blog 02

Akten, True Colors 2020

https://www.memo.tv/works/true-colors/

One of the artists I really enjoyed the work of was Memo Akten, his work with AI intrigued me. The computer could only recognise things that it already knows, one of the demonstrations was a video of a woman moving some keys and headphones around. Next to that video was one that was a record of what the computer could comprehend, in that video appeared flowers and moving water. The interpretation struck a chord because it shows that the computer, although not “feeling” , pieced together beautiful things and saw them as default shapes (probably because they’re less complex than things like faces). I’m not sure how he creates art like this but I assume it’s something along the lines of feeding a computer program a bunch of pictures and then showing it new pictures and watching it try to figure out what it is. I’ve seen other programs that you can put two words into and a program try to create something that fits the two words together. I assume that this is almost like the opposite of this. It’s also kind of interesting that the motivation behind Akten’s projects is to create something but he’s doing it in a second hand way. He creates the thing that then creates the final product, I can appreciate the level of detachment he has from his final product while still being able to orchestrate it.

Looking Outwards – 02

When exploring generative art and different artists, I discovered Georg Nees and had fun looking through his work. Nees has a background in math and physics and started working in the field of computer graphics in 1964. He was one of the first artists to use algorithms on a computer to create his artwork. He first publicly displayed his work in 1965. The artwork was first coded on punched paper tape before being created by a drawing machine (Zuse Graphomat Z64). I think it is pretty cool to hear about an older system of coding like punching paper and translating to a drawing machine, and I admire the want to make art with a different system like computers. I enjoy looking at Nees’s artwork as it holds both a simplicity and complexity. The black line on a white background seems simple, but the patterns and images become so complicated. There is a sense of order and chaos. Pretty amazing that they are all created with code!

Artist: Georg Nees
Source: http://dada.compart-bremen.de/item/agent/15

Variable Face

generative face

var x = 150;
var y = 220;
var faceWidth = 150;
var faceHeight = 200;
var hairLength = 180;
var mouthSize = 20;
var eyeL = 40;
var eyeW = 20;
var pupiL = 15;
var bgR = 225;
var bgG = 123;
var bgB = 138;
var bodThic = 100;



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

function draw() {

    //original face but made dependant on itself not coords make teh stuff in relation to the face width
    background(bgR, bgG, bgB);

    fill(0)
    rect(width/2-0.6*faceWidth, height/2-0.2*faceHeight, (width/2+0.6*faceWidth)-(width/2-0.6*faceWidth), hairLength)

    fill(255-bgR, 225-bgG,225-bgB);
    ellipse(width / 2, height, bodThic, height);

    fill(253,227,220);
    strokeWeight(0);
    ellipse(width/2, height/2, faceWidth, faceHeight);    //face

    fill(0);
    quad(width/2-0.25*faceWidth, height/2-0.5*faceHeight, width/2+0.25*faceWidth, height/2-0.5*faceHeight, width/2+0.6*faceWidth, height/2-0.2*faceHeight, width/2-0.6*faceWidth, height/2-0.2*faceHeight)    //trap bang

    fill(225,199,190);
    triangle(width/2, height/2 ,width/2-0.07*faceWidth,height/2+0.23*faceHeight,width/2+0.07*faceWidth,height/2+0.23*faceHeight);    //nose

    strokeWeight(3);
    stroke(239,94,94);
    noFill();
    ellipse(width/2, height/2+0.35*faceHeight, mouthSize);


    fill(245,249,255); 
    strokeWeight(0);
    ellipse(width/2-0.25*faceWidth, height/2-0.0025*faceHeight, eyeL, eyeW);    //eye left
    ellipse(width/2+0.25*faceWidth, height/2+0.0025*faceHeight, eyeL, eyeW);    // eye right

    fill(127,71,42);
    strokeWeight(0);
    ellipse(width/2-0.25*faceWidth, height/2-0.0025*faceHeight, pupiL);   //pupil left
    ellipse(width/2+0.25*faceWidth, height/2+0.0025*faceHeight, pupiL);    // pupil right 

    fill(253,227,220);
   // rect((width/2-0.25*faceWidth) - (eyeL / 2), (height/2-0.0025*faceHeight) - (eyeW / 2), eyeL, eyeW / 2);    //lids left
  
    fill(10)
    rect ((width/2-0.25*faceWidth) - (eyeL / 2), (height/2-0.0025*faceHeight) - (eyeW / 2), eyeL, 2);   //eyebrow left
    rect ((width/2+0.25*faceWidth) - (eyeL / 2), (height/2+0.0025*faceHeight) - (eyeW / 2), eyeL, 2);   //eyebrow left

}


function mousePressed(){
    faceWidth = random(75, 200);
    faceHeight = random(100, 300);
    hairLength = random(100, 300);
    mouthSize = random(5, 40);
    eyeL = random(20, 50);
    eyeW = random(10, 50);
    pupiL = random(5, 20);
    bgR = random(0, 225);
    bgG = random(0, 225);
    bgB = random(0, 225);
    bodThic = random(100, width);
}

Looking Outwards 02: Generative Art

The project I admired the most about is the ” algorithmic modulations” by Manfred Mohr. It’s a projection of a rotating 12-D hypercube onto a 2-D surface with thin black lines in the center that changes upon the movement of the quadrilaterals to provide visual impact.

I was first attracted because I thought the shapes of cubes looked like the shape of a human with different movements. As I watched the animated version, I was impressed by the beauty of images created by the randoms of rotating quadrilaterals. The randomness of the quadrilaterals was impressive not only for its excitement for unknown changes of the image, but also for a pattern due to the rotation of the 12-D hypercube that there are rules in the randomness.

The work was generated by the algorithm with random transparency and random 3 colors for the quadrilaterals . The code was also created with blacks lines that extend to negative x-values with different thickness to create a visual effect of reflection of different black lines.

The creator’s artistic sensibilities were demonstrated in the randomness that created by the rotation 12-D hypercube and the dynamicness of colors and transparency of the image.

Link: Manfred Mohr, algorithmic modulations, P2610, animation example, 2019 (emohr.com)

LO 2 – Generative Art

For a while, I assumed that for works to be classified under the genre of ‘generative art’, they had to hold a certain level of complexity. I used to picture them as works that completely stray away from all pre-established artistic styles. Manolo Gamboa Naon makes me think otherwise. Through experimentation with basic geometric shapes, his work bridges the world of digital and analog art. In manipulating the most bare artistic elements, Manolo explores the divides between organic and artificial. The fluidity of his works are achieved by approaching the digital surface as a plastic space. Even though this field of generative art may be new to many, historical influences (such as Kandinsky) in his work furthers a sense of relatability. For me, the rhythm and beauty of his works are derived from simple manipulations of color and composition. Even through minor shifts of pattern and placement of shape, Manolo achieves a great range of emotion.

While it may take me a while to understand the specifics of his algorithm, Manolo translates techniques like Decalcomania–a blotting process where paints create a mirror image–into code. Through–presumably–random layering of color, his program creates gradient-like surfaces that each fade into one another. Thus, these digital tools enable him to create levels of fluidity that cannot be achieved with any other analog techniques.