Month: September 2022

Project 01

Here is my self portrait.

function setup() {
    createCanvas(500, 500);
    background(252, 181, 104); // background orange
}

function draw() {
	// ornament
	strokeWeight(3);
	stroke(255);
	fill(116, 203, 200); //teal stripe
	rect(225, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(79, 141, 241); // blue stripe
	rect(135, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(255, 190, 214); // pink stripe
	rect(45, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(192, 226, 148); // green stripe
	rect(315, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(255, 246, 140); // yellow stripe
	rect(405, 0, 45, 500);

	// hair
	noStroke();
	fill(40, 24, 15); // hair color
	ellipse(250, 250, 380, 420);
	noStroke();
	fill(40, 24, 15);
	rect(60, 250, 380, 300);
	noStroke();
	fill(40, 24, 15);
	triangle(20, 500, 90, 405, 90, 500);
	noStroke();
	fill(40, 24, 15);
	triangle(480, 500, 410, 405, 410, 500);

	// ears
	strokeWeight(5);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	ellipse(100, 260, 60, 80);
	strokeWeight(5);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	ellipse(400, 260, 60, 80);

	// neck
	strokeWeight(5);
	stroke(247, 150, 107); // shadow color edge
	fill(244, 218, 188); // shadow color
	rect(185, 415, 125, 100);

	// face
	strokeWeight(5);
	stroke(247, 150, 107); // skin color edge
	fill(255, 237, 213); // skin color
	ellipse(250, 250, 300, 365);

	// eyes
	strokeWeight(3);
	stroke(0, 34, 68); // eye color edge
	fill(238, 239, 248); // eye color
	ellipse(190, 230, 75, 55);
	strokeWeight(3);
	stroke(0, 34, 68);
	fill(238, 239, 248); 
	ellipse(310, 230, 75, 55);

	strokeWeight(3);
	stroke(0, 34, 68);
	fill(91, 32, 1); // iris color
	circle(190, 225, 45);
	strokeWeight(3);
	stroke(0, 34, 68);
	fill(91, 32, 1);
	circle(310, 225, 45);

	noStroke();
	fill(0); // pupil color
	circle(310, 225, 15);
	noStroke();
	fill(0);
	circle(190, 225, 15);

	strokeWeight(10);
	stroke(255); // reflection color
	point(195, 220);
	strokeWeight(10);
	stroke(255);
	point(315, 220);

	strokeWeight(7);
	stroke(0, 34, 68); // eyelash color
	line(190, 205, 190, 185);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(310, 205, 310, 185);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(172, 210, 172, 190);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(328, 210, 328, 190);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(208, 210, 208, 190);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(292, 210, 292, 190);

	// glasses
	strokeWeight(6);
	stroke(82, 76, 69); // glasses color
	noFill();
	ellipse(175, 225, 123, 100);
	strokeWeight(6);
	stroke(82, 76, 69);
	noFill();
	ellipse(325, 225, 123, 100);
	strokeWeight(6);
	stroke(82, 76, 69);
	line(237, 225, 263, 225);

	// bangs
	noStroke();
	fill(40, 24, 15); // bang color
	square(200, 60, 100, 15);
	noStroke();
	fill(40, 24, 15);
	square(129, 80, 80, 15);
	noStroke();
	fill(40, 24, 15);
	square(290, 80, 80, 15);
	noStroke();
	fill(40, 24, 15);
	rect(155, 70, 190, 60);

	// eyebrows
	noStroke();
	fill(0); // eyebrow color
	triangle(205, 180, 205, 160, 140, 180);
	noStroke();
	fill(0);
	triangle(295, 180, 295, 160, 360, 180);

	//nose
	strokeWeight(4);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	circle(230, 306, 24);
	strokeWeight(4);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	circle(270, 306, 24);

	strokeWeight(5);
	stroke(247, 150, 107);
	fill(255, 237, 213);
	circle(250, 307, 27);

	noStroke();
	fill(255, 237, 213);
	ellipse(250, 298, 30, 40);

	// mouth
	strokeWeight(8);
	stroke(229, 162, 153); // lip color
	fill(255); // teeth color
	arc(250, 340, 155, 100, 0, HALF_PI)
	strokeWeight(8);
	stroke(229, 162, 153);
	fill(255);
	arc(250, 340, 155, 100, HALF_PI, PI);
	strokeWeight(8);
	stroke(229, 162, 153);
	line(175, 340, 325, 340);

	// earrings
	strokeWeight(3);
	stroke(224, 135, 73); // earrings edge color
	fill(232, 190, 64); // earrings color
	rect(80, 290, 25, 60, 20);
	strokeWeight(3);
	stroke(224, 135, 73);
	fill(232, 190, 64);
	rect(395, 290, 25, 60, 20);

	strokeWeight(4);
	stroke(255); // earrings reflection color
	fill(255);
	rect(88, 300, 2, 32, 10);
	strokeWeight(4);
	stroke(255);
	fill(255);
	rect(403, 300, 2, 32, 10);

}

lo: generative art

One computational art project I admire is actually from a previous design professor of mine, Kyuha (Q) Shim. Much of his work operates in the realm between art, design, and technology, but I am really drawn to his experiments with typographic algorithms. What I find admiring is how Q approaches iterations and experimentation. He says the benefit to using computational systems is the themes you can see across a series of iterations that would otherwise take a long time. The ability to find these motifs then allows designers to create more solutions and observe broader systems than we can without technology. I’m not sure of the specifics of how he generated these designs, but I would assume it incorporates some image recognition based on type and qr codes. These experiments reflect the practical nature of Q and have a lot of potential both in technology and artistic aspects.

More info here

Looking Outwards 02

LIA’s work draws me in because it is outstandingly compelling, and every piece has thought behind it. Her “Four Seasons” series is most interesting personally because of the shapes and colors she uses, as well as the details in movement for each season; slow, sharp, and downward movement for a snowy Winter, as opposed to the bright, warm, and growing/spiraling motion for spring, etc. The artistic sense is undeniable in LIA’s projects as her eye for color and composition as stated above is incredible.

In terms of the algorithm that generates her work, LIA’s animations are generated randomly as stated in the beginning of her videos, so there is no repetition. Moreover, it seems that she uses many variables for color, shapes, and motion because the website states that she codes with a fluidity. This implies that she may not have a specific picture in mind before coding, and declaring her own variables would allow for her to make changes to the entire piece in a convenient manner. I suppose this is especially useful in deciding colors, since I know from experience that even the slightest change in value or hue can enhance or mar the product.

“Winter” by LIA, the second part of a four-part series on seasons that showcases her ability to code and eye for shape, color, and motion
“Spring” by LIA, the third edition to the “Four Seasons” series that showcases her ability to code and eye for shape, color, and motion

L.A. Philharmonic Light Show at the “Walt Disney Concert Hall.”

Srishty Bhavsar

One of the first buildings that caught my attention when I was younger was the Walt Disney Concert Hall by Frank Gehry in downtown Los Angeles. I remembered being taken back by its cluster of large metal winged walls that stood out amongst its surrounding buildings. As I walked by the building, I noticed how whimsical, symphonic, and extravagant it was. Today, I admire how fitting these characteristics are to its function of being a hall for orchestras and bands. The building itself was designed using a C++ software package designed and used by aerospace engineers called the CATIA. Through this software, Gehry was able to achieve impeccable acoustics within the concert hall.

In 2018, the L.A Philharmonic Light show had an installation performance which transformed the facade of the Walt Disney Concert Hall at night. The installation was designed by Refik Anadol and Google Arts and Culture. Made up of deep neural connections, Anadol and Google created a data universe that translated data points from the LA Philharmonic’s digital archives into projections of light and color. The installation was designed with a parametric data sculpture approach where music was sorted into thematic compositions by machine learning algorithms. Inside the concert hall, visitors were able to interact with mirrored walls that showcased the philharmonic’s archives. Anadol’s light show is a great example of how visual generative art combined with audio and a computational structure can encapsulate a visceral and immersive experience.

Sources:

https://en.wikiarquitectura.com/building/walt-disney-concert-hall/

https://www.archdaily.com/902277/s-walt-disney-concert-hall-will-be-lit-by-algorithms-in-dream-like-light-show

project 2: variable faces

I had a fun time planning out all the changing parts of these animal faces and figuring out how to use color type variables for fur tone was interesting!

Planning each variable feature
variable animal faces
// isis berymon section D

function setup() {
    createCanvas(640, 480);
    frameRate(10);
    background(245, 232, 215); //biege
}

function draw() {
}

function mousePressed() {
    background(245, 232, 215); //biege
    var face;

    //face color generator
    if(random(3) <= 1){
        face = color(145, 191, 217); //blue
    } else if(random(3) <= 2) {
        face = color(181, 145, 217); //purple
    } else {
        face = color(232, 149, 201); //pink
    }
    
     //face
    fill(face);
    noStroke();
    ellipse(width/2, height/2, 270, 250);
    //nose
    fill(30);
    ellipse(290, 270, 60, 50);
    ellipse(350, 270, 60, 50);
    fill(face);
    ellipse(287, 265, 60, 50);
    ellipse(353, 265, 60, 50);
    fill(43, 34, 40);
    triangle(320, 270, 310, 250, 330, 250);

    //ear generator
    if(random(3) <= 1){
        //cat ears
        fill(face);
        triangle(200, 190, 230, 80, 330, 200);
        triangle(350, 190, 410, 80, 440, 200);
    } else if(random(3) <=2) {
        //dog ears
        fill(face);
        ellipse(250, 150, 80, 120);
        ellipse(390, 150, 80, 120);
    } else {
        //bunny ears
        fill(face);
        ellipse(250, 150, 60, 200);
        ellipse(390, 150, 60, 200);
    }

    //neutral eyes
        fill(30);
        ellipse(260, 220, 60, 80);
        ellipse(380, 220, 60, 80);
        fill(200);
        circle(250, 210, 30);
        circle(370, 210, 30);

    //eye expression generator
    if(random(3) <= 1) {
        //happy eyes
        fill(face);
        ellipse(260, 260, 60, 30);
        ellipse(380, 260, 60, 30);
    } else if(random(3) <=2) {
        //smug eyes
        fill(face);
        rect(230, 180, 60, 30);
        rect(350, 180, 60, 30);
    }
}

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 1: My Self Portrait

The most challenging part was figuring out the math for the arc shapes and matching them up to the rest of my face.

sketch
/*
    Joan Lee
    Section D
*/

function setup() {
    createCanvas(300, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(200);

    //hair behind face
    noStroke();
    fill(53, 25, 15);
    rect(65, 100, 170, 300);
    ellipse(70, 260, 70, 350);
    ellipse(230, 260, 70, 350);     //background hair
    ellipse(115, 120, 120, 130);
    ellipse(185, 120, 120, 130);
  
     //body
    fill(223, 205, 230);
    triangle(150, 200, 230, 400, 70, 400);

    //face
    fill(250, 230, 180);
    noStroke();
    quad(75, 100, 225, 100, 230, 230, 70, 230);     //head
    quad(70, 230, 230, 230, 165, 285, 135, 285);    //jaw

    //eyebrows
    stroke(73, 45, 35);
    strokeWeight(5);
    line(171, 150, 206, 152);
    line(94, 152, 129, 150);

    //eyes
    fill(245, 245, 245);
    stroke(0);
    strokeWeight(3);
    arc(110, 180, 35, 25, PI, TWO_PI);
    arc(185, 180, 35, 25, PI, TWO_PI);  //eyeballs and lash line
    fill(63, 35, 11);
    stroke(0);
    strokeWeight(2);
    circle(111, 177, 17);
    circle(184, 177, 17);   //pupils and irises
    fill(255, 225, 215);
    stroke(205, 179, 156);
    strokeWeight(1);
    ellipse(110, 183, 35, 7);
    ellipse(185, 183, 35, 7);   //undereye silkworms

    //nose
    triangle(148, 180, 165, 220, 132, 220);

    //mouth
    stroke(255, 210, 200);  //lips
    strokeWeight(5);
    fill(255);
    arc(148, 233, 70, 50, 0, PI, CHORD);

    //front hair
    stroke(53, 25, 15);
    strokeWeight(1);
    noFill();
    arc(70, 100, 70, 200, TWO_PI, PI - HALF_PI);
    arc(230, 100, 80, 240, PI - HALF_PI, PI);
    arc(240, 100, 150, 190, PI - HALF_PI, PI);
    arc(100, 100, 100, 80, TWO_PI, PI - HALF_PI);
    arc(200, 100, 100, 80, PI - HALF_PI, PI);   //lil baby hairs
    noStroke();
    fill(53, 25, 15);
    arc(60, 95, 110, 170, TWO_PI, PI - HALF_PI);
    arc(230, 100, 80, 170, PI - HALF_PI, PI);   //side bangs
}

Lo My Inspiration

Just Dance is a party game staple that has reached millions of users worldwide with just one instruction: just dance! I admire the intention of the game, which is to allow users to have fun gaming without having to slouch on the couch for hours. As someone who plays various games with friends, I appreciate when they don’t cause me back and shoulder pain. Additionally, I remember being absolutely amazed by the movement tracking my first time playing, and wondering how the game knew when I was lifting the wrong arm or kicking too
late (I’m not the greatest dancer). Just Dance was created by Ubisoft Paris in six months using Perforce Helix Core, a commercial software they have been using since 2001. The creators were inspired by Dance Dance Revolution, another popular dancing game that had players stepping on arrows to the beat of music. The body tracking in this game points to the potential of technology that extends to a variety of fields, including games, animation, health, and education.
https://justdancenow.com/
Ubisoft 2009
Reference: Parkin, S. (2013, October 27). The science of just dance. Eurogamer.net. Retrieved September 2, 2022, from https://www.eurogamer.net/the-science-of-just-dance-article

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();

}