Author: Lily

LO4: FORMS!

FORMS – String Quartet, 2021 https://vimeo.com/553653358?embedded=true&source=vimeo_logo&owner=7721912

FORMS is a live event where musicians interpret and play scores that are randomly generated by a bot in real time. Each instrument corresponds to a certain color, displayed on screen, and the result is a comprehensive piece combining both randomized audio and visual elements. I think this piece piqued my interest because recently I’ve been toying with the idea that certain movements “lock” and “unlock” events that occur. There’s specifically a video piece that I’m working on at the moment in which a specific twist of the wrist prompts a four minute long rendition of “One Day More” from Les Mis performed by hand puppets. While this is certainly not random, I think the ideas are pretty analogous, especially in terms of audio/visual component, and especially in the way that a random notation is able to elicit a programmed response. In terms of how this (FORMS, not Les Mis puppetry) functions algorithmically, it seems pretty clear that a series of shapes are randomly notated, each with a corresponding color, and likely shifted in positionality to notate rests, changing of notes, etc. Because there are so many (infinite) shapes, and notating a specific number would perhaps be unwise for practicality reasons, it might be possible that for loops were utilized? Don’t quote me on that, but I think otherwise the work would be quite tedious.

Shot of the quartet along with the randomized score notation.

Project 04 String Art

For this project, I used the curves generated by the strings to make a sort of landscape. Because the shapes generated were pretty organic, I thought it would be fitting to make the subject matter organic as well.

sketch 

var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var numLines = 50;

function setup() {
    createCanvas(400, 300);
    background(237, 233, 223);
    dx1 = (150-50)/numLines;
    dy1 = (300-300)/numLines;
    dx2 = (400-400)/numLines;
    dy2 = (100-400)/numLines;
    dx3 = (400-400)/numLines;
    dy3 = (100-400)/numLines;
    dx4 = (500-600)/numLines;
    dy4 = (200-500)/numLines;
    dx5 = (200-400)/numLines;
    dy5 = (0-500)/numLines;
    dx6 = (200-500)/numLines;
    dy6 = (200-500)/numLines;
    dx7 = (200-400)/numLines;
    dy7 = (20-500)/numLines;
    dx8 = (400-500)/numLines;
    dy8 = (200-300)/numLines;
}

function draw() {
    var x1 = 400;
    var y1 = 0;
    var x2 = 0;
    var y2 = 300;
    var x3 = 0;
    var y3 = 300;
    var x4 = 500;
    var y4 = 300;
    var x5 = -175;
    var y5 = 150;
    var x6 = 500;
    var y6 = 700;
    var x7 = 3000;
    var y7 = 300;
    var x8 = 0;
    var y8 = 400;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight(1);
        stroke(229,193,208);
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        stroke(249,199,169);
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
        stroke(241,144,167);
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
        stroke(221,115,81);
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 += dx8;
        y8 += dy8;
    }
    noLoop();
    fill(221,81,108);
    strokeWeight(0);
    triangle(300, 150, 325, 220, 275, 220); //tree to the right
    rect(290, 220, 20, 30);
    triangle(0, 100, -50, 290, 50, 290); //big tree in foreground
    rect(0, 290, 20, 300)
    triangle(170, 150, 165, 165, 175, 165); //tiny tree far away
    rect(168, 165, 4, 8)
    fill(255,192,0);
    ellipse(100, 40, 50, 50);
}

Looking Outwards 03

Mike Kneupfel, Keyboard Frequency Sculpture https://www.businessinsider.com/mike-knuepfel-keyboard-frequency-2011-6 

I find Mike Kneupfel’s Keyboard Frequency Sculpture (as discussed in Prof. Levin’s lecture) to be very interesting. As a whole, I typically find myself drawn to works that are funny in some sort, and I think the visualization of data in this way, almost like a bar graph (but not really), to be pretty funny. Imagining the use of this object in real life is also pretty amusing. On one hand, it would be very easy to find the keys most frequently used, but ergonomically, the piece is a nightmare. The way that an intention of practicality manifests in complete usability is a humorous paradox. In terms of the actual construction, I’d assume that to create this piece, whatever percentage of the time a key is used would correspond to a certain height. For example, maybe 1% use = 1 cm, so keys used 3% of the time would be 3 cm tall. 

Photograph of Kneupfel’s Keyboard Frequency Sculpture.

LO: Nonsense Library

Nonsense Library – Allison Parrish (2021)

https://artsexperiments.withgoogle.com/nonsense-laboratory/

One of the most admirable things about Nonsense Library, is the way that real knowledge is game-ified, and programming, video games, and knowledge about linguistics/speech interact. It serves both as a learning tool and an experiment, and hence the ways in which one could interact with the program varies greatly. The game aspect makes the site endlessly engaging, and the way in which the program messes with pronunciation quite literally forces the viewer to speak aloud and have a conversation with the computer. I would guess that in order to achieve this, Parrish built an extensive algorithm linking phonetic & pronounced sounds. I would also guess that she, too, spent a lot of time feeling the words in her mouth in front of a computer. Because of the truly absurd speech one can receive simply by inputting a couple adjustments (“Hew hew heish weelhy heelhyy weehly heegy hsewhy heelych…”) I would guess that Parrish has a good sense of humor, and embraces the absurd in her work. 

Nonsense Library phrase pre-modification. “How doth the little crocodile improve his shining tail”
Nonsense Library phrase post-modification. “Haah taahth thae layhai chawahaja aypharh haycha hcheyehaj tahlah…”

Project 2: Generative Faces

Some faces, generated!

sketch 

var eyeType = 3
var faceWidth = 200
var faceHeight = 275
var eyeSize = 60
var earSize = 60
var pupilSize = 40
var noseType = 1
var mouthType = 1
var blush = 1
var r = 89
var g = 74
var b = 58 //color 1, 2, & 3 used to be able to randomize the color of hair

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(252, 215, 91);
    strokeWeight(0);

    fill(r, g, b); //random hair color
    ellipse(width/2, (height/2)-((faceHeight-faceWidth)/2), faceWidth+20, faceWidth+20); //hair
    rect((width/2)-(faceWidth/2), height/2, faceWidth, faceHeight*(2/3)); //hair

    fill(194, 160, 97); //face/head
    ellipse(width/2, height/2, faceWidth, faceHeight); //chin
    ellipse(width/2, (height/2)-((faceHeight-faceWidth)/2), faceWidth, faceWidth); //to round out the top of the head better, less oval-y
    ellipse((width/2)-(faceWidth/2), height/2, earSize*(3/4), earSize); //left ear, size randomly generated
    ellipse((width/2)+(faceWidth/2), height/2, earSize*(3/4), earSize); //right ear, size ranomly generated

    fill(r, g, b); //random hair color for eyebrow
    ellipse((width/2)+(faceWidth/4), height/2-50, 40, 20);
    ellipse((width/2)-(faceWidth/4), height/2-50, 40, 20);

    if(blush <= 1) { //section to create blush possibility
    	fill(176, 121, 76, 255)
    } else {
    	fill(176, 121, 76, 0)
    }
    ellipse((width/2)-(faceWidth/4), (height/2)+40, 40, 20);
    ellipse((width/2)+(faceWidth/4), (height/2)+40, 40, 20);

    if(mouthType <= 1) { //section to create mouth type 1 (open)
        fill(77, 41, 34, 255)
    } else {
    	fill(77, 41, 34, 0)
    }
    ellipse(width/2, (height/2)+(faceHeight/3), 60, 30);
    if(mouthType <= 1) {
        fill(252, 251, 247, 255)
    } else {
    	fill(252, 251, 247, 0)
    }   
    ellipse(width/2, (height/2)+(faceHeight/3)-10, 40, 10);

    if(mouthType > 1 & mouthType < 2) { //section to create mouth type 2 (sad mouth)
    	fill(77, 41, 34, 255)
    } else {
    	fill(77, 41, 34, 0)
    }
    ellipse((width/2), (height/2)+(faceHeight/3)+7, 60, 40); //skin to carve out shape
     if(mouthType > 1 & mouthType < 2) { 
    	fill(194, 160, 97, 255)
    } else {
    	fill(194, 160, 97, 0)
    }
    ellipse(width/2, (height/2)+(faceHeight/3), 60, 40);

    if(mouthType >= 2) { //section to create mouth type 3 (happy mouth)
    	fill(77, 41, 34, 255)
    } else {
    	fill(77, 41, 34, 0)
    }
    ellipse((width/2), (height/2)+(faceHeight/3)-20, 60, 40); //skin to carve out shape
     if(mouthType >= 2) { 
    	fill(194, 160, 97, 255)
    } else {
    	fill(194, 160, 97, 0)
    }
    ellipse(width/2, (height/2)+(faceHeight/3)-27, 60, 40);

    if(eyeType <= 1) { //section to create eye type 1 (open regular)
        fill(242, 246, 247, 255)
    } else {
    	fill(242, 246, 247, 0)
    }
    ellipse((width/2)-(faceWidth/4), height/2, eyeSize, eyeSize);
    ellipse((width/2)+(faceWidth/4), height/2, eyeSize, eyeSize);
    if(eyeType <= 1) {
        fill(0, 0, 0, 255)
    } else {
    	fill(0, 0, 0, 0)
    }   
    ellipse((width/2)-(faceWidth/4)+1, height/2, pupilSize, pupilSize);
    ellipse((width/2)+(faceWidth/4)-1, height/2, pupilSize, pupilSize);

    if(eyeType > 1 & eyeType < 2) { //section to create eye type 2 (happy eye)
    	fill(77, 41, 34, 255)
    } else {
    	fill(252, 251, 247, 0)
    }
    ellipse((width/2)-(faceWidth/4), height/2, 60, 40);
    ellipse((width/2)+(faceWidth/4), height/2, 60, 40);
     if(eyeType > 1 & eyeType < 2) { 
    	fill(194, 160, 97, 255)
    } else {
    	fill(194, 160, 97, 0)
    }
    ellipse((width/2)-(faceWidth/4), (height/2)+7, 60, 40);
    ellipse((width/2)+(faceWidth/4), (height/2)+7, 60, 40);

    if(eyeType >= 2) { //section to create eye type 3 (sad eye)
    	fill(77, 41, 34, 255)
    } else {
    	fill(77, 41, 34, 0)
    }
    ellipse((width/2)-(faceWidth/4), height/2, 60, 40);
    ellipse((width/2)+(faceWidth/4), height/2, 60, 40);
    if(eyeType >= 2) { 
    	fill(194, 160, 97, 255)
    } else {
    	fill(194, 160, 97, 0)
    }
    ellipse((width/2)-(faceWidth/4), (height/2)-7, 60, 40);
    ellipse((width/2)+(faceWidth/4), (height/2)-7, 60, 40);

    if(noseType <= 1) { //section to create round nose type
    	fill(176, 121, 76, 255)
    } else {
    	fill(176, 121, 76, 0)
    }
    ellipse(width/2, (height/2)+20, 20, 60);

    if(noseType > 1) { //section to create triangle nose type
    	fill(176, 121, 76, 255)
    } else {
    	fill(176, 121, 76, 0)
    }
    triangle(width/2, (height/2), (width/2)-10, (height/2)+50, (width/2)+10, (height/2)+50);

}
 
function mousePressed() {
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
    eyeType = random(0, 3); //eye type will be randomized, 1-3, and said # will correlate to an if else tree w eye options
    faceWidth = random(150, 225);
    faceHeight = random(226, 300);
    earSize = random(60, 80);
    pupilSize = random(30, 40);
    eyeSize = random(50, 70);
    noseType = random(0, 2); //nose type randomized based on two types
    mouthType = random(0,3);
    blush = random(0, 2); //whether or not blushing
}

LO: My Inspiration

Turning Red, 2022, Domee Shi
While much of what I will talk about in this blog post is applicable to large scale 3D animation projects as a whole, for this post, I will focus on “Turning Red”, a film recently released by Pixar. I think that one of the most inspirational (and relatable) facets of 3D animation is the time it takes to produce- of course earlier steps in the creative process in itself are time consuming, but even aspects of the pipeline that one might not even consider, like rendering, are extremely tedious. In animation, the rule of thumb is that 24 frames are shown per second of film, and at studios like Disney and Pixar, due to the amount of detail packed into each frame, rendering one frame is a process that takes about 24 hours. As a result, it is no surprise that Turning Red took four years to complete (a relatively quick turnaround for Pixar). While Autodesk Maya is the 3D animation software most commonly used for feature length films and games, Pixar uses its own software (what is, essentially, the in-studio version of Maya), called Presto. That being said, of course, through the course of production, in order to better capture life, usually animators will homebrew their own scripts, whether it is to better capture the bounce of curly hair (as with Brave), or further nail down the way water moves (as with Moana). This pattern is really interesting, as each film that gets released by major studios ends up not only being a (usually) well thought out story, but also, a display of new 3D animation technologies that push the medium forward. Recently, I have noticed that 3D animation is becoming more and more stylized (a trend I hope to see continue!), and I’m excited to see the new technologies that emerge with said stylization.

A fully rendered, edited, etc. still from Turning Red, 2022

project 01

My self portrait project!

sketch
function setup() {
    createCanvas(500, 500);
    background(249, 198, 187);
}

function draw() {
	background(249, 198, 187);
	strokeWeight(0);
	fill(239, 221, 199); //skin tone
	rect(200, 200, 100, 300); //neck
	fill(226, 189, 181); //skin shadow
	ellipse(250, 300, 110, 110); //neck shadow
	fill(249, 198, 187); //bg color to carve neck shape out
	ellipse(330, 385, 80, 320); //bg to carve neck shape (right)
	ellipse(170, 385, 80, 320); //bg to carve neck shape (left)
    fill(168, 142, 112); //hair color
    ellipse(250, 180, 250, 270); //back of hair
	fill(239, 221, 199); //skin tone
    ellipse(250, 200, 200, 250); //bottom of head/chin
    ellipse(250, 180, 200, 200); //top of head, to round out
    ellipse(150, 220, 60, 80); //left ear
    ellipse(350, 220, 60, 80); //right ear
    stroke(226, 189, 181); //ear x
    strokeWeight(4);
    line(130, 210, 155, 240); //L X
    line(135, 240, 150, 205); //L X
    line(370, 210, 345, 240); //R X
    line(365, 240, 350, 205);
    strokeWeight(0); //reset
    fill(168, 142, 112); //hair color
    ellipse(260, 100, 70, 70) //middle curl
    fill(239, 221, 199); //skin tone
    ellipse(274, 107, 55, 55); //skin to carve curl
    fill(122, 114, 105); //eyeliner color
    ellipse(200, 196, 55, 60); //L eyeliner
    ellipse(300, 196, 55, 60); //R eyeliner
    fill(234, 240, 247); //whites of eyes
    ellipse(200, 200, 55, 60); //L white of eye
    ellipse(300, 200, 55, 60); //R white of eye
    fill(113, 130, 154); //eyeball color
    ellipse(202, 200, 33, 33); //L eye
    ellipse(298, 200, 33, 33); //R eye
    fill(255); //eye highlights
    ellipse(190, 187, 15, 15); //L highlight
    ellipse(286, 187, 15, 15); //R highlight
    fill(168, 142, 112); //hair color (for eyebrows)
    ellipse(202, 150, 22, 10); //L eyebrow
    ellipse(298, 150, 22, 10); //R eyebrow
    fill(226, 189, 181); //skin shadow (for nose)
    triangle(250, 200, 235, 250, 265, 250);
    fill(186, 101, 101); //mouth color
    ellipse(250, 275, 35, 20); //mouth
    fill(250, 250, 242); //teeth color
    ellipse(250, 270, 30, 10); //teeth
    fill(103, 95, 130); //shirt color
    ellipse(250, 520, 250, 200); //shirt
    fill(129, 121, 156); //shirt collar color
    ellipse(250, 455, 115, 80) //collar
    fill(239, 221, 199); //skin tone
    ellipse(250, 445, 100, 70); //neck base
    fill(201, 199, 209); //for jewelry
    ellipse(145, 255, 10, 10); //L earring(s)
    ellipse(133, 246, 10, 10); //L earring(s)
    ellipse(130, 195, 10, 10); //L earring(s)
    ellipse(355, 255, 10, 10); //R earring(s)
    ellipse(367, 246, 10, 10); //R earring(s)
    ellipse(373, 232, 10, 10); //R earring(s)
    ellipse(237, 240, 10, 7); //nose piercing
    fill(125, 184, 144); //nose piercing jewel color
    ellipse(237, 240, 6, 4); //nose piercing jewel
}