Month: September 2022

Project 02: Variable Face

Variable Face
var faceWidth = 200
var faceHeight = 300
var faceColor = 255
var eyeSize = 40
var eyeL = 20
var eyeR = 20
var r = 0
var g = 0
var b = 0
var mouth = 1

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

function draw() {
    background(180);

    //head
    fill(r,g,b);
    ellipse(width/2,height/2,faceWidth, faceHeight);  

    //eyeballs
    fill(255);
    ellipse(eyeL,height/2,50,30);     //left
    ellipse(eyeR,height/2,50,30);     //right

    //pupil ellipse
    fill(111, 78, 55);
    ellipse(eyeL,height/2,20,20);     //left
    ellipse(eyeR,height/2,20,20);     //right

    //nose
    fill(255);
    stroke(0,0,0);
    strokeWeight(1);
    if(eyeL<=width/2-faceWidth/4 & eyeR<=width/2+faceWidth/4){
        triangle(width/2, height/2, width/2, height/2+faceHeight/5, width/2-faceWidth/4, height/2+faceHeight/8); //left
    }else if(eyeL>=width/2-faceWidth/4 & eyeR>=width/2+faceWidth/4){
        triangle(width/2, height/2, width/2, height/2+faceHeight/5, width/2+faceWidth/4, height/2+faceHeight/8); //right
    }else{
        triangle(width/2, height/2, width/2+faceWidth/8, height/2+faceHeight/5, width/2-faceWidth/8, height/2+faceHeight/5); //mid
    }

    //mouth
    if(mouth == 1){
        fill(0);
        arc(width/2,height/2+faceHeight/4,70,50,0,PI,CHORD);    //happy
        noFill();
        strokeWeight(3);
        arc(eyeL,height/2-30,70,40,PI,2*PI);
        arc(eyeR,height/2-30,70,40,PI,2*PI);
        strokeWeight(1);
    }else if(mouth == 2){
        fill(225,0,0);
        arc(width/2,height/2+faceHeight/3,70,50,PI,2*PI,CHORD); //mad
        stroke(255,0,0);
        strokeWeight(5);
        line(eyeL-25,height/2-40,eyeL+25,height/2-20);
        line(eyeR+25,height/2-40,eyeR-25,height/2-20);
        stroke(0);
        strokeWeight(1);                                        //resets stroke
    }else if(mouth==3){
        fill(0);
        ellipse(width/2,height/2+faceHeight/3,30,30);           //scared
        strokeWeight(3);
        line(eyeL-25,height/2-20,eyeL+25,height/2-40);
        line(eyeR+25,height/2-20,eyeR-25,height/2-40);
        strokeWeight(1);
    }
}

function mousePressed(){
    faceWidth = random(180,300);
    faceHeight = random(200,340);
    faceColor = random(0,255);
    eyeL = random(width/2-faceWidth/2+25,width/2-25);
    eyeR = random(width/2+25,width/2+faceWidth/2-25);
    r = random(0,255);
    g = random(0,255);
    b = random(0,255);
    mouth = int(random(1,4));
}



//don't mind the stuff down here 

    //mouth
    //line(200,290,280,290);

    //pupil with points      
    //stroke(111, 78, 55);        
    //strokeWeight(20);
    //point(190,190);             
    //point(280,190);

    //sunglasses and frame
//    stroke(255,0,0);
//    strokeWeight(3);
//    line(320,220,350,190);      
//    fill(180,240,0);
//    rect(130,200,90,50);        
//    fill(50,158,200);
//    rect(230,200,90,50); 



    //background ellipses
    //fill(255,230,0);
    //ellipse(250,200,500,600);
    //fill(196,80,71);
    //ellipse(250,200,400,500);
    //fill(147,248,234);
    //ellipse(250,200,330,430);
    //fill(135,73,146);
    //ellipse(250,200,270,370);
    //fill(0,0,0);
    //ellipse(250,200,230,330);

JUZY

Philip Rideout : Self portrait of Vincent Van Gogh {2010} on website Alteredqualia

A project that really inspired or perhaps struck a chord with me was the self portrait of Vincent Van Gogh created by Philip Rideout. The aspects which I liked about it was its simple nature but overwhelming presence. The artworks used in the work are simple, however, the digital manipulation is something that adds to the fun of it. The way the effect is too similar to the immersive Van Gogh experience, thus it reminded me of that. I do not know exactly how this artwork is created, but I do know that its algorithmic nature is what makes it special, a simple two dimensional piece would not have done justice to this. But, I do know that it was made using Deepwarp. 

The creator has taken a simple approach towards a simple artwork, but his fine adjustments helped make it a fine artwork with commanding presence and a certain 3 dimensional quality. The warping quality sure adds to that. I really admire the way the artwork turns simple elements into complex art. 

https://alteredqualia.com/xg/examples/vincent.html

Variable Face

I want to create a simple cartoon face that has many expressions. Therefore, I add many variables including the mouth, hair, eyebrow, and so on. The outcome looks good.

Variable Face

// Setting variables for coding facial actions
var eyeSizeX = 20;
var eyeSizeY = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthExpression = 1;
var noseExpression = 1;
var hairExpression = 1;
var hairSize = 0.4;
var mouthSize = 0.1;
var r = 225
var g = 175
var b = 125
var rot = 0; 
var eyeOffAry = [-1, -0.5, 0, 0.5, 1];
var eyeOffs = 0;

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

function draw() {
    background(180);
    
    //draw face
    fill(r, g, b);
    strokeWeight(0);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    
    //draw hair
    //hair
    if (hairExpression <= 1) {
    fill(r-100, g-100, b-100);
    arc(width / 2, height / 2, faceWidth,  faceHeight, faceWidth*hairSize-160, -faceWidth*hairSize-20, CHORD);
    } 
    //beard
    else if (hairExpression >= 1 & hairExpression <= 2) {
    stroke(r-100, g-100, b-100);
    strokeWeight(faceWidth/5);
    arc(width / 2, height / 2, faceWidth, faceHeight, faceWidth*hairSize+40, 140-faceWidth*hairSize);
    }
    //hair line
    else if (hairExpression >= 2 & hairExpression <= 3) {
    stroke(r-100, g-100, b-100);
    strokeWeight(faceWidth/5);
    arc(width / 2, height / 2, faceWidth, faceHeight, -180+faceWidth*hairSize, -faceWidth*hairSize);
    }
    //long hair
    else if (hairExpression >= 3 & hairExpression <= 4) {
    //draw long hair behind face
    rectMode(CORNER);
    fill(r-100, g-100, b-100);
    stroke(r-100, g-100, b-100);
    strokeWeight(faceWidth/6);
    rect(width/2-faceWidth/2, height/2, faceWidth, faceHeight);
    //draw face forward
    fill(r, g, b); 
    strokeWeight(0);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //draw hair forward
    fill(r-100, g-100, b-100);
    arc(width / 2, height / 2, faceWidth,  faceHeight, faceWidth*hairSize-160, -faceWidth*hairSize-20, CHORD);
    noFill();
    stroke(r-100, g-100, b-100);
    strokeWeight(faceWidth/5);
    arc(width / 2, height / 2, faceWidth, faceHeight, -180, 0);
    }


    //draw eyes
    stroke(0);
    strokeWeight(0);
    var eyeLX = width / 2 - faceWidth * 0.15;
    var eyeRX = width / 2 + faceWidth * 0.15;
    fill(255);
    ellipse(eyeLX, height / 2, eyeSizeX, eyeSizeY);
    ellipse(eyeRX, height / 2, eyeSizeX, eyeSizeY);
    fill(0);
    ellipse(eyeLX + eyeOffs*(eyeSizeX / 4), height / 2, eyeSizeX / 2, eyeSizeY / 2);
    ellipse(eyeRX + eyeOffs*(eyeSizeX / 4), height / 2, eyeSizeX / 2, eyeSizeY / 2);

    //draw noses
    fill(r-100,g-100,b-100);
    if (noseExpression <= 1) {
    ellipse(width/2, height/2 + faceHeight*0.05, faceWidth/20, faceHeight/20);
    } else if(noseExpression >= 1 & noseExpression <=2) {
    rectMode(CENTER);
    rect (width/2, height/2 + faceHeight*0.08, faceWidth/20, 1.3*faceHeight/20);
    } else {
    triangle(width/2, height/2 + faceHeight*0.05, width/2-faceWidth/20, height/2 + faceHeight*0.1, width/2+faceWidth/20, height/2 + faceHeight*0.1)
    }
    
    //draw eyebrows
    var ebrowLX1 = width / 2 - faceWidth * 0.2;
    var ebrowLY1 = height / 2 - faceHeight * 0.15;
    var ebrowLX2 = width / 2 - faceWidth * 0.35;
    var ebrowLY2 = height / 2 - faceHeight * 0.15;
    var ebrowRX1 = width / 2 + faceWidth * 0.2;
    var ebrowRY1 = height / 2 - faceHeight * 0.15;
    var ebrowRX2 = width / 2 + faceWidth * 0.35;
    var ebrowRY2 = height / 2 - faceHeight * 0.15;
    noFill();
    stroke(0);
    strokeWeight(5);
    
    translate((ebrowLX1+ebrowLX1)/2, (ebrowLY1+ebrowLY2)/2);
    rotate(rot);
    line(10, 0, -10, 0);
    rotate(-rot);
    translate(-(ebrowLX1+ebrowLX1)/2, -(ebrowLY1+ebrowLY2)/2);

    translate((ebrowRX1+ebrowRX1)/2, (ebrowRY1+ebrowRY2)/2);
    rotate(-rot);
    line(10, 0, -10, 0);
    rotate(rot);
    translate(-(ebrowRX1+ebrowRX1)/2, -(ebrowRY1+ebrowRY2)/2);

    //draw mouth
    var mouthLX = width / 2 - faceWidth * 0.25;
    var mouthLY = height / 2 + faceHeight * 0.25;
    var mouthRX = width / 2 + faceWidth * 0.25;
    var mouthRY = height / 2 + faceHeight * 0.25;
    noFill();
    strokeWeight(0);
    if (mouthExpression <= 1) {
    //open happy mouth 
    fill(255);
    beginShape();
    curveVertex(mouthLX, mouthLY);
    curveVertex(mouthLX, mouthLY);
    curveVertex(0.5*(mouthLX+mouthRX)-faceWidth*0.1, mouthLY+faceHeight*0.1);
    curveVertex(0.5*(mouthLX+mouthRX)+faceWidth*0.1, mouthLY+faceHeight*0.1);
    curveVertex(mouthRX, mouthRY);
    curveVertex(0.5*(mouthLX+mouthRX)+faceWidth*0.1, mouthLY+faceHeight*mouthSize/2);
    curveVertex(0.5*(mouthLX+mouthRX)-faceWidth*0.1, mouthLY+faceHeight*mouthSize/2);
    curveVertex(mouthLX, mouthLY);
    curveVertex(mouthLX, mouthLY);
    endShape(); 
    } else if (mouthExpression >= 1 & mouthExpression <= 2) {
    //open sad mouth 
    fill(255);
    beginShape();
    curveVertex(mouthLX, mouthLY);
    curveVertex(mouthLX, mouthLY);
    curveVertex(0.5*(mouthLX+mouthRX)-faceWidth*0.1, mouthLY-faceHeight*0.1);
    curveVertex(0.5*(mouthLX+mouthRX)+faceWidth*0.1, mouthLY-faceHeight*0.1);
    curveVertex(mouthRX, mouthRY);
    curveVertex(0.5*(mouthLX+mouthRX)+faceWidth*0.1, mouthLY-faceHeight*mouthSize/2);
    curveVertex(0.5*(mouthLX+mouthRX)-faceWidth*0.1, mouthLY-faceHeight*mouthSize/2);
    curveVertex(mouthLX, mouthLY);
    curveVertex(mouthLX, mouthLY);
    endShape();
    } else if (mouthExpression >= 2 & mouthExpression <= 3){
    //closed mouth
    strokeWeight(5);
    beginShape();
    curveVertex(mouthLX, mouthLY);
    curveVertex(mouthLX, mouthLY);
    curveVertex(0.5*(mouthLX+mouthRX)-faceWidth*0.1, mouthRY-faceHeight*mouthSize);
    curveVertex(0.5*(mouthLX+mouthRX)+faceWidth*0.1, mouthLY-faceHeight*mouthSize);
    curveVertex(mouthRX, mouthRY);
    curveVertex(mouthRX, mouthRY);
    endShape();
    } else if (mouthExpression >= 3 & mouthExpression <= 4){
    //no expression
    strokeWeight(5);
    beginShape();
    curveVertex(mouthLX, mouthLY);
    curveVertex(mouthLX, mouthLY);
    curveVertex(mouthRX, mouthRY);
    curveVertex(mouthRX, mouthRY);
    endShape();
    }
}   

//Randomize the value of variables when the user clicks to generate a new random face
function mousePressed() {
    faceWidth = random(100, 200);
    faceHeight = random(150, 250);
    eyeSizeX = random(20, 30);
    eyeSizeY = random(10, 30);
    mouthExpression = random(0, 4);
    noseExpression = random(0, 3);
    hairExpression = random(0, 5);//give some chance between 4-5 for no hair
    mouthSize = random(-0.1, 0.1);
    hairSize = random(0.1, 0.2);
    eyeOffs = random(eyeOffAry);
    r = random(100, 255);
    g = random(100, 255);
    b = random(100, 255);
    rot = random(-45, 45);
}

xuyrrej-LookingOutwards-02

For this blog, I am choosing to write about Fluctus by Lia. Firstly, I admire its color palette. The entire project, whichever surface it is projected, gives off a futuristic feel, with its dark colors contrasting with bright blue. Second, I love that the project has moved and is not a static image. The movement gives the piece life and makes it seem like a living, breathing creature. Lastly, I enjoy the organic feel of the project. There are no straight lines, and even though everything seems to flow freely, organized patterns still manage to form.
I think the artwork is generated by an automatically repeating code that only needs to be set off by a single command. The continually running sequence might be simple at its core, with the patterns created being intended but not entirely planned.
Her other projects seem to follow a similar design language, with a strong preference for movement, organic design, and pattern.

Section A
https://www.liaworks.com/theprojects/fluctus/
https://vimeo.com/320461873

SydneyCha-Project-01-Face

//Sydney Cha
//Section D

function setup() {
    createCanvas(400, 500);
    background(225);
    noStroke();
}

function draw() {
    noStroke();
  
    fill(73, 63, 47);
    triangle(270, 100, 300, 150, 280, 300); //hairside

    fill(73, 63, 47);
    triangle(90, 100, 80, 200, 200, 200); //hairsnippet

    fill(73, 63, 47);
    ellipse(70, 180, 70, 100); //hairbun

    fill(252, 240, 222);
    ellipse(190, 210, 200, 230); //facebase

    fill(252, 240, 222);
    quad(280, 250, 260, 320, 230, 330, 190, 325); //chin

    fill(252, 240, 222);
    quad(130, 250, 220, 300, 160, 390, 80, 360); //neck

    fill(240, 230, 210);
    quad(250, 220, 270, 250, 265, 260, 245, 265); //nosebase

    fill(240, 230, 210);
    ellipse(205, 215, 50, 35); //lefteyebase

    fill(240, 230, 210);
    ellipse(275, 210, 25, 30); //righteyebase

    fill(102, 94, 89);
    quad(170, 197, 190, 190, 230, 192, 230, 200); //lefteyebrow

    fill(102, 94, 89);
    quad(260, 198, 262, 190, 280, 189, 290, 195); //righteyebrow

    fill(193, 104, 115);
    quad(250, 280, 263, 280, 258, 295, 230, 290); //lips

    fill(102, 94, 89);
    triangle(200, 130, 70, 170, 110, 300); //hairbottom

    fill(102, 94, 89);
    triangle(80, 170, 140, 80, 270, 100); //hairtop

    fill(102, 94, 89);
    triangle(270, 100, 220, 120, 290, 200); //hairbangs

    fill(244, 194, 194);
    arc(195, 165, 230, 210, PI, TWO_PI); //capbase

    fill(244, 194, 194);
    quad(300, 160, 380, 170, 370, 180, 195, 165); //capextension

    stroke(1);
    strokeWeight(1);
    
    fill(250);
    arc(210, 220, 40, 30, PI, TWO_PI); //lefteye

    fill(250);
    arc(277, 218, 25, 30, PI, TWO_PI); //righteye

    fill(73, 63, 47);
    ellipse(215, 213, 18, 16); //leftpupil

    fill(73, 63, 47);
    ellipse(276, 211, 15, 15); //rightpupil
    }

SydneyCha-LookingOutwards-01

Before Your Eyes promotional trailer

Before Your Eyes is a VR game where the player blinks to progress through the game. The gameplay itself is extremely simple, but the story is striking. While some games rely on high quality graphics or intense gameplay for entertainment, Before Your Eyes is an immersive, bittersweet story that lets players experience the life of the protagonist through their own eyes. The game not only made me emotional, but left me with a lasting gratefulness for the undefined time I’ve been given to live.

The idea for the game started in 2014 with Will Hellwarth, a student assistant for an intro-level game development course at the University of Southern California. The initial project was presented at a game fair by Hellwarth and assisting developers and was later picked up and developed by GoodbyeWorld Games. The final game was published by Skybound Games in 2021.

Guided gameplay-at the start of the game, the player is instructed to look at an option and blink to select it.

Though VR gaming had existed for a while, Hellwarth invented a new approach by toggling with a previous game to respond to the player’s eye movements using the VR headset’s built-in camera. This inspired the idea for his game, which was initially called Close Your.

The story was influenced by the play Death of a Salesman, which has a similar theme of progressing the story through the protagonist’s earlier memories after his death.

Kickstarter promotional video for Close Your, an early version of Before Your Eyes.

Below is a link to the Steam site where the game can be purchased.

https://store.steampowered.com/app/1082430/Before_Your_Eyes/

SydneyCha-LookingOutwards-02

No. 001 | Arcs 21 – Lia (2018)

The Arcs 21 project by Lia was made using Processing code and AxiDraw, a mechanical plotter–a calculated process, yet the final piece is as compelling as a drawing done by hand.

One of the most important aspects of creation is the process between the conception and execution of an idea. Pieces I find most compelling show bits of the process and the artist’s mind at a glance. To be transparent, I used to look down on computer-generated art for this reason. Computers to me were always cold and calculating, and I had the notion that anything that was processed through a computer would end up just as emotionless. I thought I wouldn’t be able to sense anything about the artist through a generated piece.

I was confused when I first saw No. 001. There were clusters of thin pen strokes that were playful, yet perfectly placed. Some of the other pieces felt too “obvious,” but No. 001 really felt like a piece from the artist’s heart. I was reminded of tree bark, desert sand, and the expressive ink exercises I did last year for Design. I think I feel especially attached to this piece because it has the ability to make me think about things I’ve experienced.

Mechanical Plotter Drawings – Arcs 21 from Lia on Vimeo.

https://www.liaworks.com/theprojects/mechanical-plotter-drawings-arcs-21/

LO 02: Generative Art

I am inspired by the work Flow Field Coloring by Juhani Halkomaki (from openprocessing.org). I think this project is really beautiful in the way it represents abstract art, shapes, and colors. This work is an interactive dynamic image of moving curved lines on the canvas that transform as the
mouse is moved across the screen. I am able to interact with this piece to create my own piece of art within an already defined system. The way the colors slowly transition and the lines move across the page is mesmerizing. The algorithm within this project, I would assume, incorporates code for the initial generated swirling shape and randomizes how each line flows between the defined points. The algorithm tracks the mouse and moves the lines and creates new colors. The creator incorporates their artistic vision in the piece in two ways where one is the interactive movement of the user’s mouse across the canvas, creating a harmony of different colors, and the other is when the image is static and shows the resulting abstract art that has resulted from the user.

Link to artwork

LO 02: Generative Art

“Flow” is an interactive art exhibit by Karl Sims. Developed in 2018, it is a computer simulation that displays particle flows and fluid dynamics in vibrant colors on very large screens. The simulation becomes an interactive art installation when viewers interact with it. A Kinect depth sensor registers the human form and mirrors their appearance, placing the viewer in the art. The program senses human gestures and the algorithm registers these gestures as disruptions in the flow; thus generating new and unique art with each viewer. The particle simulation is reminiscent of Van Gogh’s art and immerses the viewer in their own “Starry Night.” The fluid simulations look as though the viewer can paint with their gestures or as though they are immersed in blooming ink drops. Still others give the effect of being embodied in light or rainbow fabrics. In all there are 10 different effects in this exhibit.

There is simplicity in this installation that I admire. It combines the physics of particle flow and fluid dynamics with color. The flow algorithms give the art its initial form, but this dynamic form becomes dependent on viewers as they interact with it. The physics are based on vectors and fluid flow models. Details can be found here.

Sims has been creating flow simulations and generative art since the 1980s. The progression of his work in combining software, art, and the human experience is evident when viewing his earlier works. This installation was commissioned by MIT’s CSAIL, Computer Science and Artificial Intelligence Laboratory. It is currently on display at the MIT Stata Center, in Boston, Massachusetts.