Category: SectionE

ultrablack-LookingOutwards-02

In the second week, I already found I made progress. Last week the program I wrote has some problems, I spent hours to looks at it and trying to debug still did not work. This week open that program again and immediately saw what the problem was. 

In this week’s project, I found the most challenging part is to connect the artistic idea to the code – in what way do I choose to realize it? It’s almost like creating a machine and a system or thinking of myself’s thinking. Or like navigation, looking at the map and figuring out how to go to my destination. Sometimes I have to create my own pathway. 

Looking at Leander Herzog‘s website, I am fascinated by how much computers can generate and we call it art. I found the interactive art approach interesting. It’s important to think about the way people interact – is it by moving the mouse, by pressing the mouse (in the condition of giving them a mouse and a screen); by touching, by looking at the camera, or by speaking to a microphone… And how do we suggest they to do so? By using visual implications in order to stimulate their curiosity?

Currently, I’m glad that I know how to make a program that captures mouse movement. But other skills still need to be learned.

And most significant to think – in your generative art, is it a pure image, for the sake of visual effect, or it embeds some other information, or do you endow it a meaning? And do you come up with an idea and then create a program accordingly to realize your idea; or do you create a visual effect and then associate a meaning? What’s your intention? What’s the relationship between you and the image you create? Both ways for me makes sense and feels equal to me. But important to think about.

Looking Outwards 02: Generative Art

Transiterate
Holger Lippman
2022

Spring Storm
Holger Lippman
2020-2021

The projects I have chosen are Holger Lippmann’s “Transiterate” (2022) and “Spring Storm” (2020-2021). “Transiterate” is an animated looping NFT consisting of 100 individual unique frames. Lippmann’s site describes it as “a gradual, repeating subdivision (iteration) of rhythmically consecutive color tables”, which translates to a large circle with constantly shifting and transforming subdivisions whose coloring move up and down the color wheel.

Meanwhile, “Spring Storm” is a series of prints composed of red and white swirls on a wavy background. The compositions were generated via layered Perlin noise, resulting in a highly dynamic yet varied series of artworks. The integration of code and other digital means as a core part of a lucrative artistic workflow is highly admirable.

Spring Storm (2021) – Holger Lippmann

Lippmann’s work is described as falling “somewhere in between artistic disassociation and realistic reproduction, between old values and modern perspectives”. His abstract compositions are reminiscent of the atmosphere and sensorial experience of various natural phenomena. He incorporates various algorithms, particularly RNG, which allows him to instantly generate “an abundance of possibilities”, which he feels is missing in traditional forms of media.

Links:
https://holgerlippmann.io/
https://www.lumas.com/artist/holger_lippmann/
http://e-art.co/

Looking Outwards-02

I admire the Flow Fields, reinterpretation of Vincent van Gogh’s most famous works, by LIA in 2018. I like how it takes such a famous artwork, my favorite is the Sunflower reinvention, and puts a unique spin on it because of the artist’s sensibilities. In the case of the sunflowers, it is how the lines move and flow as if they are blossoming. The blossoming movement is the artist’s variation on the original Sunflower’s lines but through a generative art technique called vector fields or flow fields. This technique reveals lines and loops that happen in magnetic and energy fields. There are endless variations to the ways the lines can move. The artist also uses Van Gogh’s color palette as a base to try to bring the viewer closer to the original. I also admire how different sections of the work can go through different motions at the same time. The timing of this and how each movement goes together with the others to form the larger picture is part of how the artist comes through in the work. However, I think there was still more room for the artist to add in their own personality. Perhaps by changing up the variations of the lines.

LIA | Flow Field #2 – Reinterpreting Sunflowers by Vincent Van Gogh | Sedition (seditionart.com)

Project 2: Variable Face

sketch
// Ana Furtado 
// Section E

var noseSize = 20;
var r = 139;
var g = 69;
var b = 19;  // r g b is going to be randomlly 
            //generating blues for corneas when mouse is pressed
var a = 105; // y of more hair left strand 1
var b = 105; // y of more hair left strand 2
var x = 405; //y of more hair right strand 1
var y = 405; //y of more hair right strand 2
var eyeLeft = 190;
var eyeRight = 290;

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

function draw() {
    stroke(84, 18, 18);      // reddish brown
    strokeWeight(30);
    line(175, 160, 120, 620);      // back hair left
    line(175, 160, 155, 620);
    line(305, 160, 365, 620);     // back hair right
    line(305, 160, 315, 620);
    stroke(0, 0, 0);     // black
    strokeWeight(1);
    fill(0, 206, 209);     // light blue
    ellipse(140, 330, 30, 30);     // earrings
    ellipse(340, 330, 30, 30);
    fill(255, 228, 196);     // skin
    ellipse(240, 540, 75, 400);     // neck
    fill(255, 228, 196);     // skin
    ellipse(240, 320, 200, 400);     // face
    fill(255, 255, 255);     // white
    ellipse(190, 270, 50, 100);     // left eye
    ellipse(290, 270, 50, 100);     // right eye
    fill(r, g, b);    // brown
    ellipse(190, 270, 25, 50);     // left cornea
    ellipse(290, 270, 25, 50);     // right cornea
    fill(0);
    ellipse(eyeLeft, 270, 10, 20);     // left pupil 
    ellipse(eyeRight, 270, 10, 20);     // right pupil 
    fill(255, 228, 196);     // skin
    circle(240, 320, noseSize, noseSize);     // nose
    //line(190, 200, 190, 125);
    //line(210, 200, 210, 125);
    fill(220, 20, 60);     // red
    ellipse(240, 420, 110, 50)     // mouth
    line(185, 420, 295, 420);
    stroke(84, 18, 18);      // reddish brown
    strokeWeight(1);
    fill(84, 18, 18);     // reddish brown
    ellipse(240, 160, 150, 80);     // hair top
    strokeWeight(10);
    line(160, 160, 90, 620);      // hair left
    line(160, 160, 115, 620);
    line(160, 160, a, 620);
    line(160, 160, b, 620);
    line(310, 160, 415, 620);     // hair right
    line(310, 160, 390, 620);
    line(310, 160, x, 620);
    line(310, 160, y, 620);
    noStroke();
    fill(r, g, b);     // bow
    ellipse(305, 150, 20);
    ellipse(325, 150, 20);
}

function mousePressed() { 
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'noseSize' gets a random value between 10 and 30.
    // eye color changes as bow color changes to match
    // more left and right hair 
    // left and right pupils move
    noseSize = random(10, 30);
    r = random(0, 100);
    g = random(0, 250); 
    b = random(200, 250); 
    a = random(0, 175);
    b = random(0, 175);
    x = random(305,620);
    y = random(305,620);
    eyeLeft = random(177.5, 202.5);
    eyeRight = random(277.5, 302.5);
}

I started with the same proportions as the face for project 1. I modified it by changing the eye color, hair, and adding a bow. The pupils also move at the press of the mouse. The most challenging part was to get the pupils to move and understanding the difference between mouseIsPressed and mousePressed in practice.

Project 2: Variable Face

sketch

//Name: Hari Vardhan Sampath
//Section: E

var x = 80;
var y = 160;
var eyeSize = 50;
var faceWidth = 200;
var faceHeight = 300;
var backgroundColor = 180
var chinWidth = 15
var mouthHeight1 = 20
var mouthHeight2 = 20 
var noseHeight = 100

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

function draw() {
    background(backgroundColor);

    // outline of face
    fill(210,180,140);
    beginShape();
    curveVertex(x*2, y);
    curveVertex(x*2, y);
    curveVertex(x, y*2);
    curveVertex(x*2 + chinWidth, y*3 + x/2);
    curveVertex(x*4 - chinWidth, y*3 + x/2);
    curveVertex(x*5, y*2);
    curveVertex(x*4, y);
    curveVertex(x*2, y);
    curveVertex(x*2, y);
    endShape();

    // mouth
    noFill();
    beginShape();
    vertex(x*2 + 30, y*3);
    bezierVertex(x*2 + 60, y*3 + mouthHeight1, 
        x*4 - 60, y*3 + mouthHeight2, x*4 - 30, y*3);
    endShape();

    // eyes
    fill(255,248,220);
    ellipse(x*2 + 10, y*2, eyeSize, eyeSize+5);
    ellipse(x*4 - 10, y*2, eyeSize, eyeSize+5);
    fill(0,0,0);
    ellipse(x*2 + 10, y*2, eyeSize/2, eyeSize/2);
    ellipse(x*4 - 10, y*2, eyeSize/2, eyeSize/2);

    // hair 
    fill(5,5,0);
    beginShape();
    curveVertex(x*2, y + x);
    curveVertex(x*2, y + x);
    curveVertex(x, y*2);
    curveVertex(x, y*2 - x);
    curveVertex(x*2, y - 15);
    curveVertex(x*4, y - 15);
    curveVertex(x*5, y*2 - 25);
    curveVertex(x*2, y + x);
    curveVertex(x*2, y + x)
    endShape();

    // nose
    fill(210,180,140);
    beginShape();
    curveVertex(x*3 - 30, y*2 + noseHeight - 20);
    curveVertex(x*3 - 30, y*2 + noseHeight - 20);
    curveVertex(x*3 - 30, y*2 + noseHeight - 10);
    curveVertex(x*3 - 15, y*2 + noseHeight - 15);
    curveVertex(x*3, y*2 + noseHeight);
    curveVertex(x*3 + 15, y*2 + noseHeight - 15);
    curveVertex(x*3 + 30, y*2 + noseHeight - 10);
    curveVertex(x*3 + 30, y*2 + noseHeight - 20);
    curveVertex(x*3 + 30, y*2 + noseHeight - 20);
    endShape();

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'backgroundColor' gets a random value between 160 and 200.
    x = random(75, 95);
    y = random(150, 170);
    eyeSize = random(30, 70);
    backgroundColor = random(160, 200);
    chinWidth = random(0, 25);
    mouthHeight1 = random(-30, 40);
    noseHeight = randon(90, 110);
}

LO 02: Memo Akten – Circa 2018/2019

Memo Akten is a computational artist whose work revolve around converting data into speculative videos through generative design. One of his projects titled Cicra is a video essay that revolves around interconnectedness of algorithms and human existence in this world. Most of the generative artists work with video and sound to produce an atmosphere. The most I admire about Akten’s work is the storytelling along with the stitched snippets of videos which are algorithmically generated, which emphasizes the human-machine relationship.

Memo Akten is a computational artist whose work revolve around converting data into speculative video through generative design. One of his projects titled Cicra is a video essay that revolves around interconnections of algorithms and human existence in this world. Most of the generative artists work with video and sound to produce an atmosphere. The most I admire about Akten’s work is the storytelling along with the stitched snippets of videos which are algorithmically generated, which emphasizes the human-machine relationship.

A selection of (camera friendly) work in 4 minutes with voice-over (as of 2020) from Memo Akten on Vimeo.

Project 2: Variable Face

sketch
sketch
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var R = 0;
var G = 0;
var B = 0;
var FR = 252;
var FG = 224;
var FB = 203;
var nose = 10
var HR = 100;
var HG = 100;
var HB = 100;
var CR = 140;
var CG = 140;
var CB = 140;



 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(R,G,B);
    noStroke();
    //back hair
    fill(HR,HG,HB);
    ellipse(width / 2, height / 2, faceWidth+10,  faceHeight+10);
    strokeWeight(2);
    stroke(0);
    rect(width / 2 - faceWidth/2-5, height / 2 -20, faceWidth + 10, faceHeight/2+25);
    noStroke();
    //clothes
    if(mouseX < width/2){
        fill(CR,CG,CB);
        ellipse(width/2,height,faceWidth+50,height/2 +faceHeight/2-10);
        fill(CR+40,CG+40,CB+40);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+20, 10);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+30, 10);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+10, 10);
    }else{
        fill(255-CR,255-CG,255-CB);
        ellipse(width/2,height,faceWidth+50,height/2 +faceHeight/2-10);
        fill(CR+40,CG+40,CB+40);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+20, 10);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+30, 10);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+10, 10);

    }
    //neck
    fill(FR-20,FG-20,FB-20);
    rect(width/2- faceWidth/8, height/2 + faceHeight/2 -10, faceWidth/4,20);
    ellipse(width/2, height/2 + faceHeight/2 +10, faceWidth/4,faceWidth/4);
    //face outline
    fill(FR,FG,FB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    //eye
    fill(255);
    strokeWeight(1);
    stroke(0);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    noStroke();
    fill(0);
    ellipse(eyeLX,height / 2,eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2);
    fill(255);
    ellipse(eyeLX + 2,height / 2 -2,eyeSize / 6);
    ellipse(eyeRX + 2,height / 2 -2,eyeSize / 6);

    //mouth
    fill(240,90,85);
    arc(150,180,20,20,0,PI, open);
    //teeth
    fill(255);
    rect(145,180,10,2);
    //nose
    strokeWeight(2);
    stroke(0);
    line(150,150,150,150 + nose);
    //front hair
    fill(HR,HG,HB);
    arc(width / 2, height / 2-15, faceWidth+10,  faceHeight-10, PI,2*PI, PI);
}
 
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.
    R = random(50,250);
    G = random(0,256);
    B = random(0,256);
    FR = R + 50;
    FG = FR - 25;
    FB = FG - 25;
    HR = 255-R;
    HG = 255-G;
    HB = 255-B
    faceWidth = random(75, 150);
    faceHeight = random(100, 150);
    eyeSize = random(20, 30);
    nose = random(10,20);
    CR = random(100,200);
    CG =random(100,200);
    CB =random(100,200);
}

LO 2: Generative Art

I found that the work Into the Trees by Robert Hodgin is very interesting and inspiring. This work depicts a walk into the forest with colorful small path that change colors and glowing light all the time. The feeling it brings to me as the scene goes into the forest is very refreshing. The change of day and night also makes the project more interesting, making me feel like I’m exploring the forest for a very long time.

I think the changing colors of the path is really the greatest part of the project. This rainbow glowing path catches my eyes from the start, and as it extends into the forest, I can’t help myself imagining this as a game scene and I’m following this path to a place where there’s a very beautiful creature.

From the technics used, I think the artist generates a 3-D world that’s generating new scenes. With a background showing changing day and night, the artist then randomly generates the path and trees alongside.

Project 02


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

sketch

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)
}