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

anabelle’s blog 02

Although I think I’m defining “generative art” a little loosely, some inspiring works to me include any type of character customization feature in video games. This goes ranges from dress-up games, Nintendo Mii creation, or the Sims. I admire how these games allow the players to have more freedom in how they approach gameplay — some may focus entirely on aesthetics, and thus spend hours creating the perfect avatar, whereas some focus on the game’s actual main goals and minimize on character building. Either way, customization always serves as an enjoyable interlude between long bouts of repetitive gameplay. I think the creator’s artistic sensibilities manifest in the algorithm by how it reveals their style and “instincts. For example, if a creator has to create 100 different options for “eyes,” their habits and preferences will eventually become pretty obvious once the reach the 90th eye design. Similarly, you can feel how they prefer to build their worlds — do they prefer to use arcs or ellipses? How do they approach drawing small, ambiguous details with code? Ultimately, even though the purpose of these games is to give the player a larger creative realm, the artist most definitely imprints their own style in every part of them.

Even Genshin Impact, a game that has nothing to do with building your own characters, has options (albeit limited ones) for customization:

Link to Official Website: https://genshin.hoyoverse.com/en/home

Created and released by Hoyoverse, 2020.

Project-02-Variable-Face Section D

I created an alien-like girl! I enjoyed the creativity of the process and clicking my mouse to generate well-proportioned ones with a nice color pallet.

sketch- generative art Download

// Sandy Youssef
// Section D
var eyeSizeW = 10;
var eyeSizeH = 10;
var pupilSize = 10
var faceWidth = 100;
var faceHeight = 120;
var skinR = 255
var skinG = 178
var skinB = 102


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

function draw() {
    background(180);
    noStroke();
    // hair
    fill(skinR - 70, skinG - 70, skinB - 70);
    ellipse(width/2, height/2, 200, 250); 
    // bow
    fill(255);
    ellipse(width/2, height*0.30, 40, 40); 
    triangle(180, 155, 180, 230, 240, 196); 
    triangle(300, 155, 300, 230, 230, 196);
    fill(skinR - 50, skinG - 50, skinB - 50);
    // ears
    fill(255);
    ellipse(width* 0.38, height/2, 30, 40); 
    ellipse(width* 0.62, height/2, 30, 40);
    // neck
    fill(skinR - 40, skinG - 40, skinB - 40);
    rect(width* 0.45, height/2, 45, 90); 
    // face
    fill(skinR, skinG, skinB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);  
    // shirt
    fill(255);
    ellipse(width/2, height* 0.75, 150, 150) 
    // eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255);
    ellipse(eyeLX, height / 2, eyeSizeW, eyeSizeH);
    fill(255);
    ellipse(eyeRX, height / 2, eyeSizeW, eyeSizeH);
    fill(0);
    var pupilL = width/2 - faceWidth * 0.25;
    var pupilR = width/2 + faceWidth * 0.25;
    fill(skinR - 50, skinG - 50, skinB - 50);
    ellipse(pupilL, height/2, pupilSize, pupilSize); // left pupil
    ellipse(pupilR, height/2, pupilSize, pupilSize); // right pupil
    // nose
    var nose1 = width/2 - faceHeight* 0.05;
    var nose2 = width/2 + faceHeight * 0.05;
    var nose3 = width/2 - faceWidth * 0.005;
    fill(skinR - 40, skinG - 40, skinB - 40);
    triangle(nose1, height*0.55, nose2, height*0.55, nose3, height*0.5)
    // mouth
    fill(238, 131, 163); 
    arc(width/2, height* 0.57, 40, 23, radians(0), radians(180));  // lips
    fill(255);
    arc(width/2, height* 0.574, 30, 15, radians(0), radians(180)); // teeth
}


function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges.
    faceWidth = random(90, 180);
    faceHeight = random(130, 180);
    eyeSizeW = random(10,35);
    eyeSizeH = random (10,30);
    pupilSize = random(8, 12);
    skinR = random(70,230);
    skinG = random (70,230);
    skinB = random (70,230);
    mouth = random (1,3);
}

LookingOutwards-02 Section D

Creator’s name: Karsten Schmidt

Title of work: Axis

Year of creation: 2008

Karsten Schmidt’s generative art titled “Axis” is very admirable for its beauty, the feelings it evokes, along with the impressive process of creating it that involved both the physical and digital worlds. This collection consists of sculptural forms that were created through the use of hanging strings whose motion was recorded over time. His portfolio states that “The local differences in velocity for each point along the string are used as a metric to create the subtle shading and cloth-like texture.” This work became postcards used to advertise an installation. This collection is absolutely beautiful to look at. Each design has a floating, soft, and dynamic appearance that resembles fabric and the way it effortlessly contours to create organic patterns. One of my favorite items to draw is fabric due to its unique texture which is one reason I truly love looking at this work. I supposed that the algorithm used to create this work involved some sort of digital camera or motion sensor that took in the information and translated it digitally on a software program. I am not completely sure what the tools and programs required to create this would be. After looking at Kasten Schmidt’s portfolio, he seems to be very interested in motion which also involves physics. We can see his artistic sensibilities and style manifested in this algorithm, especially when knowing a little bit about how it was created.

Axis | Flickr

LO 02: Generative Art

Form is a Fluid by Leonardo Solaas, October 2016

I looked at the generative art-inspired geometric structures by Leonardo Solaas. I think it’s really interesting how he used code and patterns to comment on the fluidity of form. There wasn’t much information about the code and algorithm itself but I would assume it involved moving through the number of lines that would be in the drawing, ranging from around 6 to 12, and slightly changing the angle and adjusting the length of every repetition to achieve that twisting movement as you look from one side to the other of the collection. When the individual drawings are looked at zoomed in, they are much more detailed and delicately crafted. I assume there was some part of the algorithm that created hatching lines between a point and different edges. The artist’s abilities especially shine through when looking at the chairs placed in front of the generated geometrical shapes– you can clearly connect the chairs to their inspiration and I think the process of studying form in this simulated but really organic way is super cool and inspiring.

Second Project

here is my silly little thing $$

sketch/a>

My favorite part was randomizing colors and being surprised when the program generated nice color pallets.

//Evette LaComb
//Section D

var chin = 120;
var nose = 1;
var shirt = 150;
var hairR = 0;
var hairG = 0;
var hairB = 0;
var skinR = 0;
var skinG = 0;
var skinB = 0;
var mouthY = 130;
var mouthW = 30;
var mouthH = 5;
var eyeD = 20;

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

function draw() {
    noStroke(); //apply to all bellow 
    background(195, 216, 212);

    fill(hairR -70, hairG -70, hairB -70); //HAIR COLOR  
        rect(35, 50, 130, 150); //background hair 
    fill(skinR +70, skinG -70, skinB -70); //SHIRT SHADE 
        ellipse(100, 200, shirt, 150)//shirt
    fill(skinR -70, skinG -70, skinB -70); //SKIN SHADOW
        triangle(60, 125, 140, 125, 100, 175); //neck
        ellipse(50, 93, 45, 45); //ear left
        ellipse(150, 93, 45, 45); //right ear

    fill(skinR, skinG, skinB); //FACE 
        ellipse(100, 90, 100, chin);//face
    fill(195, 216, 212); //forhead cover (hide top of head poking out of bangs)
        ellipse(100, 25, 100, 100)

    fill(hairR, hairG, hairB);
        ellipse(70, 64, 85, 55); //left hair Bang
        ellipse(130, 64, 85, 55); //right hair Bang

    fill(hairR -70, hairG -70, hairB -70); //Mouth and back hair shade 
        ellipse(100, mouthY, mouthW, mouthH); //mouth
    fill(skinR +70, skinG -70, skinB -70); //same shade as shirt 
        ellipse(100, 115, 20, 20); //nose

    fill(skinR -70, skinG -70, skinB -70); //EYE BAG 
        ellipse(75, 106, eyeD +5); //left eye
        ellipse(125, 106, eyeD +5); //right eye
    fill(195, 216, 212); //WHITES
        ellipse(75, 103, eyeD); //left eye
        ellipse(125, 103, eyeD); //right eye
    fill(hairR -120, hairG -120, hairB -120); //PUPIL
        ellipse(75, 102, eyeD -7); //left eye
        ellipse(125, 102, eyeD -7); //right eye
}

function mousePressed() {
    chin = random(120, 150);
    shirt = random(150, 200);
    hairR = random(0, 255);
    hairG = random(0, 255);
    hairB = random(0, 255);
    skinR = random(0, 255);
    skinG = random(0, 255);
    skinB = random(0, 255);
    mouthY = random(130, 145);
    mouthW = random(10, 35);
    mouthH = random(5, 10);
    eyeD = random(10, 30);
}

Project-02-Variable-Face

The hardest part of my project was attempting to debug the randomizer function.

sketch

// Zoe Lin (ID: youlin)
// Section B

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var faceType;
var noseType = 3;
var mouthType = 1;
var earType;
var pupilSize;
var browType;
var stuffType;
var r;
var g;
var b;
 
function setup() {
    createCanvas(300, 300);
    rectMode(CENTER);
}
 
function draw() {
    background(r, g, b);
    face();
    nose();
    eyes();
    //brows();
    pupils();
    mouth();
    //ears();
    //stuffs();
  
}
 
 //face shape   
function face() {
    if (faceType < 0.7) {
      ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    } else {
      rect(width / 2, height / 2, faceWidth, faceHeight/1.05, 30)
    }
  
}

//eye shape
function eyes() {
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
}
  
//pupil size
function pupils() {
    push();
    //strokeWeight(9);
    //pupilSize = strokeWeight(1);
    if (pupilSize >= 1 & pupilSize <= 2) {
      strokeWeight(4);
    } else if (pupilSize >= 2 & pupilSize <= 3) {
      strokeWeight(5);
    } else if (pupilSize >= 3 & pupilSize <= 4) {
      strokeWeight(6);
    } else if (pupilSize >= 4 & pupilSize <= 5) {
      strokeWeight(7);
    } else if (pupilSize >= 5 & pupilSize <= 6) {
      strokeWeight(8);
    } else if (pupilSize >= 6 & pupilSize <= 7) {
      strokeWeight(9);
    } else if (pupilSize >= 7 & pupilSize <= 8) {
      strokeWeight(10);
    } else {
      strokeWeight(11);
    }
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    point(eyeLX, height / 2, eyeSize);
    point(eyeRX, height / 2, eyeSize);
    //strokeWeight(random(1, 7));
    pop();
}

//nose shape
function nose() {
    var noseW = width / 2 - faceWidth * 0.04
    var noseH = height / 2 + faceHeight * 0.07
    //noseType = random(1, 5);
    if (noseType >= 1 & noseType <= 2) {
      rect(noseW+4, noseH, 7, 18, 10);
    } else if (noseType >= 2 & noseType <= 3) {
      arc(noseW+4, noseH, 10, 10, PI + TWO_PI, TWO_PI);
    } else if (noseType >= 3 & noseType <= 4) {
      push();
      strokeWeight(4);
      point(noseW+2, noseH+5);
      point(noseW+10, noseH+5);
      pop();
      //triangle(noseW-3, noseH, noseW, noseH-4, noseW+3, noseH)
    } else if (noseType >= 4 & noseType <= 5) {
     ellipse(noseW+4, noseH+3, 10, 10);
    } else if (noseType >= 5 & noseType <= 6) {
      triangle(noseW+2, noseH, noseW+5, noseH-4, noseW+8, noseH)
    }
}
  
//mouth shape
function mouth() {
    var mouthW = width / 2
    var mouthH = height / 2 + faceHeight * 0.1
    if (mouthType >= 1 && mouthType <= 2) {
      push();
      fill(0);
      ellipse(mouthW, mouthH+20, 10, 10);
      pop();
    } else if (mouthType >= 2 & mouthType <= 3) {
      push();
      noFill();
      arc(mouthW, mouthH+25, 25, 18, PI + TWO_PI, TWO_PI);
      pop();
    } else if (mouthType >= 3 & mouthType <= 4) {
      push();
      noFill();
      arc(mouthW, mouthH+2, 60, 40, PI*0.1, PI*0.9, OPEN);
      pop();
    } else if (mouthType >= 4 & mouthType <= 5) {
      line(mouthW-15, mouthH+20, mouthW+15, mouthH+20);
    }
}
 
function mousePressed() {
    faceWidth = random(100, 170);
    faceHeight = random(100, 165);
    eyeSize = random(10, 30);
    pupilSize = random(1, 9);
    faceType = random(0, 2);
    noseType = random(1, 6);
    mouthType = random(1, 5);
    r = random(20, 230);
    g = random(120, 200);
    b = random(50, 255);
    strokeWeight(random(1.5, 3));
}

Project – 02 Variable Faces

emily-variableface

//Emily Brunner, Section C
 
var eyeSize = 60;  //size of eye
var faceWidth = 300;  //face width
var faceHeight = 300;  //face height
var faceColorR = 255; //face color red space
var faceColorB = 155;  //face color blue space
var pupilSize = 5;   //pupil width and height
var mouth = 190;  //mouth width
var mouthColorR = 255; //mouth color red space
var mouthColorG = 25;  //mouth color green space
var mouthOpen = 95;  //mouth height
var nose = 20; //nose width


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

function draw() {
    strokeWeight(0);
    background(180);

    fill(faceColorR, 150, faceColorB); //head color
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); //head
    
    var eyeLX = width / 2 - faceWidth * 0.2; //left eye width
    var eyeRX = width / 2 + faceWidth * 0.2; //right eye width
    fill(255, 255, 0); //color of eyes
    ellipse(eyeLX, height / 3, eyeSize, eyeSize); //height of left eye
    ellipse(eyeRX, height / 3, eyeSize, eyeSize); //height of right eye
    
    var pupilLX = width / 2 - faceWidth * 0.2; //width of left pupil
    var pupilRX = width / 2 + faceWidth * 0.2  //width of right pupil
    fill(0, 0, 0); //color of pupils
    ellipse(pupilLX, height / 3, pupilSize, pupilSize);  //height of left pupil
    ellipse(pupilRX, height / 3, pupilSize, pupilSize);  //height of right pupil
    
    fill (mouthColorR, mouthColorG, 156); //color of mouth
    ellipse(width / 2, height / 2 + faceHeight / 4, mouth, mouthOpen); //position of mouth relative to head
    
    fill(255, 100, 97); //color of nose
    ellipse(width / 2, height / 2, nose, nose / 2) //position of nose

}

function mousePressed() {
    faceWidth = random(300, 650);
    faceHeight = random (300, 600);
    eyeSize = random(10, 30);
    mouth = random(100, 200);
    nose = random(20, 70);
    mouthOpen = random (0, 100);
    faceColorR = random (0, 255);
    faceColorB = random (0,255);
    mouthColorR = random (0, 255);
    mouthColorG = random (0, 255);
}

This project was interesting. I had a lot of fun getting the colors to change. I am struggling with how to get objects to be relative to each other in space and change relative to each other when the mouse is pressed, so there are fewer attributes/physical features than I would like. If I were to do this again, I would probably spend more time on more facial features than the changes the face has.

Looking Outwards 02: Generative Art

Project: Purform – The White Box, Audiovisual Performance, 2010

“This cycle metaphorically transposes, into sounds and images, concepts from systems theory related to black, white and grey boxes.”

I admire the aesthetics and fluidity of this project. The combination of the wide range of sounds and dynamic abstract visuals and their harmony of working together allows the audience to be fully absorbed into the piece. I am especially inspired by how the visual and audio components work together and are dependent on each other to make this piece whole. This piece is almost inviting; its fluidity and dynamicism pulls and mesmerizes the audience in and be in synch with the audio and visuals. I suppose the project was made by a looping code that was taught to react to sound vibrations and audio stimuli, and translate it into a random visual or shape. The artists’ (Alain Thibault for music, Yan Breuleux for visuals, and Jean-Sebastien Rousseau and Peter Dines for the program) sensibilities all come together to create one aesthetically and fundamentally cohesive and effective piece.

link to YouTube video

Project: Purform – The White Box, Audiovisual Performance, 2010

Tina Franks “20160815” Project (2016)

A project that I find inspirational, is Tina Franks’s “20160815” created in 2016 with Peter Rehberg on sound.

What I admire about his project is the way combines electronic with a natural phenomenon that humans experience. The project wonders if androids would see phosphenes, which are luminous floating shapes that humans see when we close our eyes tightly and stimulate our retinas (aka rub our eyeballs). She thought that android’s would interpret these as raw liquid crystals, similar to those that are in LCD screens and electronic devices, just more raw and less crystal clear. She combined that with Peter Rehberg’s electronic music, and its a very interesting and cool project to see/hear! I admire the combination of electronics and humans, as our world is very much trying to blur the line between the two and bring us closer to our devices. Thus, Tina Frank’s project is not only relevant and inspiring to other artist during our time, but it is also very beautiful to see.

I am not sure how the algorithm works in this generated work, but I think that the work is based on randomly changing between created pictures of lines. Tina Frank also uses pixels from old video test strips from televisions to create some of these pixel images. The pixel lines are probably also similarly created by random generation of color pixels within a strip of space. Beyond that, I am not sure how this art was made.

The algorithm supports the artists vision as the different generated images are randomly spliced and cut together one after another that is similar to how phosphenes happen naturally. It is also similar to how an old TV would glitch with static or the colorized testing strip. The world she created is coarse, jarring and unfamiliar, something that she wanted to happen, as the thought of a future with HD implants in the brain or with android’s, is something very foreign and remote to many of us today.

A 1-minute preview of the audio-visual project “20160815” created by Tina Frank (video) and Peter Rehberg (audio).

Blog 01

Neri Oxman – architect, artist, professor – focuses on work that
combines design, biology, computing, and materials engineering.
Of her many projects, all pushing the boundaries of biology and
art, I have always been particularly fascinated by
Silk Pavilions I and II – a series of silkworm spun installations
that, beyond their visual impact, explore sustainable methods of
spinning, weaving, and making silk without the use of cocoons.
Silk Pavilion I, designed by her research team
(and 6500 live silkworms) was constructed over a period of
three weeks, all with the help of a robotic loom-like jig and
a CNC machine to make the 26 polygonal panels as a base structure
for the silkworms to begin laying their silk upon. Her Silk Pavilions,
along with the rest of her work, point to a future of
interdisciplinary and interspecies work that aims to solve
sustainability challenges – like some of the techniques used to
make silk that requires silkworms to be boiled.

Silk Pavilion I: https://oxman.com/projects/silk-pavilion-i
Silk Pavilion II: https://oxman.com/projects/silk-pavilion-ii