Project 2

this is my second portrait.

sketch


var eyeSizeX = 14;
var eyeSizeY = 20; 
var faceWidth = 100;
var faceHeight = 150;
var hairR = 80;
var hairG = 60;
var hairB = 50;
var mouth = 4;
var hairSizeX = 160;
var hairSizeY = 150;

 function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    angleMode(DEGREES);
    //hair    
    background(180);
    strokeWeight(0);
    fill(hairR, hairG, hairB);
    ellipse(width/2, height/2-45, hairSizeX, hairSizeY);
    
    //face size
    fill(240, 221, 210);
    ellipse(width/2, height / 2, faceWidth,  faceHeight);

    //eyes
    strokeWeight(0);
    var eyeLX = width/2 - faceWidth * 0.2;
    var eyeRX = width/2 + faceWidth * 0.2;
    fill(0);
    ellipse(eyeLX, height/2, eyeSizeX, eyeSizeY);
    ellipse(eyeRX, height/2, eyeSizeX, eyeSizeY);
    fill(255, 255, 255, 170);
    ellipse(eyeLX-2, height/2, eyeSizeX/3, eyeSizeY/3);
    ellipse(eyeRX-2, height/2, eyeSizeX/3, eyeSizeY/3);
    
    
    //eyebrow 
    var BrowLX1 = width/2 - faceWidth*0.15;
    var BrowLY1 = height/2 - faceHeight*0.15;
    var BrowLX2 = width/2 - faceWidth*0.35;
    var BrowLY2 = height/2 - faceHeight*0.15;
    var BrowRX1 = width/2 + faceWidth*0.15;
    var BrowRY1 = height/2 - faceHeight*0.15;
    var BrowRX2 = width/2 + faceWidth*0.35;
    var BrowRY2 = height/2 - faceHeight*0.15;
    stroke(0);
    strokeWeight(3);

    line(BrowLX1, BrowLY1, BrowLX2, BrowLY2);
    line(BrowRX1, BrowRY2, BrowRX2, BrowRY2);
   
    //mouth
    var mouthLX = width/2 - faceWidth*0.2;
    var mouthLY = height/2 + faceHeight*0.2;
    var mouthRX = width/2 + faceWidth*0.2;
    var mouthRY = height/2 + faceHeight*0.2;

    if (mouth <= 1) {
        //happy
        strokeWeight(3);
        stroke(0);
        fill(50);
        beginShape();
        curveVertex(mouthLX, mouthLY);
        curveVertex(mouthLX, mouthLY);
        curveVertex((mouthLX+mouthRX)/2-faceWidth*0.08, mouthLY+faceHeight*0.07);
        curveVertex((mouthLX+mouthRX)/2+faceWidth*0.08, mouthLY+faceHeight*0.07);
        curveVertex(mouthRX, mouthRY);
        curveVertex((mouthLX+mouthRX)/2+faceWidth*0.08, mouthLY+faceHeight*0.15);
        curveVertex((mouthLX+mouthRX)/2-faceWidth*0.08, mouthLY+faceHeight*0.15);
        curveVertex(mouthLX, mouthLY);
        curveVertex(mouthLX, mouthLY);
        endShape();
    } else if (mouth > 1 & mouth <=2) {
        //sad
        strokeWeight(3);
        stroke(0);
        fill(50);
        beginShape();
        curveVertex(mouthLX, mouthLY+14);
        curveVertex(mouthLX, mouthLY+14);
        curveVertex((mouthLX+mouthRX)/2-faceWidth*0.08, mouthLY-faceHeight*0.07+14);
        curveVertex((mouthLX+mouthRX)/2+faceWidth*0.08, mouthLY-faceHeight*0.07+14);
        curveVertex(mouthRX, mouthRY+14);
        curveVertex((mouthLX+mouthRX)/2+faceWidth*0.08, mouthLY-faceHeight*0.15+14);
        curveVertex((mouthLX+mouthRX)/2-faceWidth*0.08, mouthLY-faceHeight*0.15+14);
        curveVertex(mouthLX, mouthLY+14);
        curveVertex(mouthLX, mouthLY+14);
        endShape();
    } else if (mouth > 2 & mouth <=3) {
        //shock
        fill(20);
        strokeWeight(3);
        ellipse((mouthLX+mouthRX)/2, mouthLY+10, 10, 20);
    } else if (mouth > 3 & mouth <= 4){
        strokeWeight(4);
        line(mouthLX, mouthLY+10, mouthRX, mouthRY+10);
    }
}


function mousePressed() {
    faceWidth = random(75, 120);
    faceHeight = random(90, 140);
    eyeSizeX = random(15, 20);
    eyeSizeY = random(15,25);
    hairR = random(80, 255);
    hairB = random(100, 200);
    hairSizeX = random(130, 190);
    hairSizeY = random(130, 160);
    mouth = random(0, 4);
}

Looking Alp-wards

Leander Herzog’s “Alp” (2021) is a browser-based program that presents an “alpine” landscape of (presumably) randomly generated shapes. It layers 6-7 coordinated colors in a random yet recognizable landscape form, which is simple yet beautiful to me. The colors are especially eye-catching, and I wonder if they are determined by the same code used by color swatch-generating sites like Coolors and Adobe Color.

my favorite variation of Herzog’s “Alp”

Both the colors and the shapes of the “rocks” seem to be generated concurrently and randomly. Perhaps the shapes are polygons with constrained coordinates that change whenever the function repeats itself. The ellipse in the top left “sky” area doesn’t change in placement or diameter, but its color changes to fit the palette.

Herzog’s other work generally seems to share the “less is more” ideology. Many of his other algorithms use only 2 colors and simple geometry that reacts to mouse clicks and movement. The graphics are so mesmerizing, I could play around with them for hours, and I think you all should too!

Project 02: Variable Face

This one was a struggle, not gonna lie, so I chose to make this one simpler: cross-eyed monochrome faces.

// Kailani Small
// Section A

// cross-eyed monochrome faces
var eyeSize;
var pupilSize;
var faceWidth;
var faceHeight;
var r;
var g;
var b;

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

function draw() {
background(225);
// face shape
ellipse(width / 2, height / 2, faceWidth, faceHeight);

// eyes
var lefteye = width / 2 - faceWidth * 0.25;
var righteye = width / 2 + faceWidth * 0.25;
ellipse(lefteye, height / 2, eyeSize, eyeSize);
ellipse(righteye, height / 2, eyeSize, eyeSize);
var leftpupil = width / 2 - faceWidth * 0.2;
var rightpupil = width / 2 + faceWidth * 0.2;
ellipse(leftpupil, height / 2, pupilSize, pupilSize);
ellipse(rightpupil, height / 2, pupilSize, pupilSize);

// mouth
ellipse(width / 2, height * .6, faceWidth * 0.25, faceHeight * 0.25);

}

function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges
faceWidth = random(75, 150);
faceHeight = random(100, 200);
eyeSize = random(10, 30);
faceColor = fill(random(140, 255));
pupilSize = random(5, 8);
}

Looking Outwards: 02

Panoramical, a generative video game created by Fernando Ramallo and David Kanaga responds to the player’s movements to create an audiovisual experience that combines the worlds of both music and art. The game’s psychedelic experience gives nods to virtual reality and is mostly used now by DJ’s at music sets. Not only is this video game visually beautiful, but it is admirable for the endless mediums it can be used for. Music is often a personal experience for the consumer, so Panoramical pairs well with concerts, studying, virtual and augmented reality, or even something to just play around and get mesmerized in. It’s assumed that the algorithm relies on user touch interface to randomly generate different patterns for the visual element, and different rhythms and beats for the musical element. Ramallo wants the heart of the experience to be the multiple sensory abilities that can be created within the game. One can get absolutely lost in this interface, and a very personal element arises as the user creates an experience tailored for themselves, by themselves.

Looking Outwards 2

The project I’m choosing is Michael Hansmeyer’s Zauberflöte(2018), which is a stage design for Mozart’s Magic Flute.  In my previous research about Hnsmeyer’s architectural design, I admire how he focused more on the process of generating design and the visual impact. And for this stage design specifically, Hansmeyer used the computer to generate countless details and constellations, which makes astonishing visual effects for the audience. The visual impact helps the audience directly sense the stage atmosphere. With the cooperation of actors, the audience will be able to gain novel spacial feelings about the show, using their own imagination to dig into the deeper core of the opera’s philosophical part.

Moving on to the algorithm that generated the work, Hansmeyer said that they “seek to create an architecture that defies classification and reductionism”. The algorithm runs continuously and forms a constant and holistic shape. The computer algorithm plays a major role in the design: with the organization of designers, the computer can bring some of the expected effects, while also bringing unexpected results with its own permutation.

here is a link: https://www.michael-hansmeyer.com/zauberfloete

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)

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

Looking Outward-02

Goerge Michael Brower – Staggering Beauty

Regarding this project, I really admire its comedic nature as the rapid moving of the worm causes a spastic response with tiled images of explosions flashing very colorfully. It completely violates all contextual expectations of the silly-looking worm and the majestic-sounding website/project name. The worm seamlessly follows where your mouse goes, and there’s a threshold of moving it around enough that it will start generating an absurd amount of colors and images that flash really fast at the user. I actually decided to do this because I was looking at Leander Herzog’s work first, and it really reminded me of this nostalgic viral phenom that is the Staggering Beauty.
I mean, the code for this algorithm can probably be figured out or reverse-engineered pretty easily in theory. Since it is known as a javascript demo, I can definitely conceive of it in p5.js. The shape of the worm flowing is probably the most difficult part, but generally moving with your mouse is using the mouseX and mouseY variables with whatever makes up the shape of the worm. It also hits the walls, so there are bounds involved. Lastly, I don’t know how specifically the algorithm measures the speed at which the user is moving their mouse, but a certain surpassing of a set threshold with an if statement allows for all the flashing colors and images to appear rapidly according to your mouse speed after breaking that threshold.

The artist’s sensibilities just really come alive in this piece by how animated this little guy is. The worm is so minimalistic, but it plays into its weirdly cute and nonchalant nature as its eyes blink intermittently as well. The fact that you can see the dynamic animation of its eyes getting bigger and an “x-ray” look of its simplistic organs as if the worm is getting shocked in the cartoons is really just great, memorable, and deservingly viral.

http://www.staggeringbeauty.com/

Project 02: Variable Faces, Faces Vara

//Alexia Forsyth
// Section A

//base colors
var r = 255;
var g = 231;
var b = 125;

//
faceWidth = 180;
faceHeight = 250;
hairWidth = 300;
hairHeight = 320;
lipWidth = 55;
lipHeight = 35;
eyebrowWidth = 40;
eyebrowHeight = 5;

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

function draw() {
//face #1
background(r ,g, b);
strokeWeight(1);
//hair
fill(r-255,g-231,b-125);
ellipse(width/2, 260, hairWidth, hairHeight);

    //neck
    fill(r-156, g-156, b-112);
    rect(205,400, 220,90);
    rect(290, 320, 60, 100);

    //face
    ellipse(width/2, height/2, faceWidth, faceHeight);
    circle(420,240,1);

    //nose
    ellipse(310, 290, 20,11);
    ellipse(330, 290, 20,11);
    rect(width/2-7,height/2-15,15,65);
    fill(0);
    ellipse(310,290,11,4);
    fill(0);
    ellipse(330,290,11,4);

    //ears
    fill(r-156, g-156, b-112);
    ellipse(410,230,30,45);
    fill(r, g+24, b+130);
    circle(410,250, 10,10); //earrings 

    fill(r-156, g-156, b-112);
    ellipse(225,230,30,45);
    fill(r, g+24, b+130);
    circle(225,250, 10,10); //earrings

    //eyes
    fill(255);
    ellipse(width/2 +40 ,215,faceWidth*.222,faceHeight*.12);
    fill(r-207, g-132, b-112);
    circle(width/2 +40,215,faceWidth*.139);
    fill(0);
    circle(width/2 +40,215,faceWidth*.1);
    stroke(0);

    fill(255);
    ellipse(width/2 -40,215,faceWidth*.222,faceHeight*.12);
    fill(r-207, g-132, b-112);
    circle(width/2 -40,215,faceWidth*.139);
    fill(0);
    circle(width/2 -40,215,faceWidth*.1);
    stroke(0);


    //eyebrows
    fill(r-255,g-231,b-125);
    rect(width/2 +20,190,eyebrowWidth,eyebrowHeight);
    rect(width/2 -60,190,eyebrowWidth,eyebrowHeight);

    //freckles
    circle(335,250,2);
    circle(380,250,2);
    circle(320,240,2);
    circle(360,245,2);
    circle(280,240,2);
    circle(310,230,2);
    circle(290,250,2);
    circle(270,250,2);
    circle(340,230,2);

    //lips
    fill(r-209, g-199, b-109);
    ellipse(width/2,320,lipWidth,lipHeight);
    strokeWeight(5);
    line(width/2 -(lipWidth-25), 320, width/2 + (lipWidth - 25), 320);

}

function mousePressed(){
faceWidth = random(100,250);
faceHeight = random(200,290);
hairWidth = faceWidth + 120;
hairHeight = faceHeight + 70;
lipWidth = random(30,70);
lipHeight = random(20,50);
eyebrowWidth = random(35,45);
eyebrowHeight = random(.5, 10);
r = random(150,400);
g = random(150,400);
b = random(100,400);
}

Self portrait: Alexia Forsyth

Alexia Forsyth: javascript self-portrait

function setup() {
createCanvas(500, 300);
background(214, 90, 154);
text(“p5.js vers 0.9.0 test.”, 10, 15);
}

function draw() {
//hair
fill(122, 82, 43);
ellipse(width/2, 195, 200,350);

//braids
stroke(77, 51, 25);
line(300, 42, 270, 540);
stroke(77, 51, 25);
line(320, 67, 300, 540);
stroke(77, 51, 25);
line(340, 120, 310, 540);
stroke(77, 51, 25);
line(260, 20, 260, 540);
stroke(77, 51, 25);
line(200, 42, 250, 540);
stroke(77, 51, 25);
line(180, 67, 230, 540);
stroke(77, 51, 25);
line(160, 120, 200, 540);

//neck
fill(179, 141, 104);
rect(220, 265, 60, 100);

//face
fill(179, 141, 104);
ellipse(width/2, height/2, 150, 250);

//nose
ellipse(240, 170, 18,9);
ellipse(260, 170, 18,9);
rect(246,120,9,50);
fill(0);
ellipse(240,171,11,4);
fill(0);
ellipse(260,171,11,4);

//ears
fill(179, 141, 104);
ellipse(330,145,25,38);
fill(0);
circle(330,160, 7,7); //earrings 

fill(179, 141, 104);
ellipse(170,145,25,38);
fill(0);
circle(170,160, 7,7); //earrings




//eyes
fill(255);
ellipse(290,110,40,30);
fill(168, 131, 45);
circle(290,110,25);
fill(0);
circle(290,110,18);
stroke(0);
line(305, 99, 306,96);
line(300, 96, 301,94);
line(295, 95, 295,92);
line(290, 95, 290,92);
line(285, 95,284,93);
line(280, 96,279,93);

fill(255);
ellipse(215,110,40,30);
fill(168, 131, 45);
circle(215,110,25);
fill(0);
circle(215,110,18);
stroke(0);
line(230, 99, 231,96);
line(225, 96, 225,94);
line(220, 95, 220,92);
line(215, 95, 215,92);
line(210, 95,209,93);
line(205, 96,204,93);

//eyebrows
fill(77, 51, 25);
rect(270,87,40,3);

fill(77, 51, 25);
rect(200,87,40,3);

//lips
fill(171, 44, 68);
ellipse(width/2,220,55,35);
strokeWeight(5);
line(223, 220, 277, 220);
noLoop();

}