## LO – 5

Manfred Mohr’s “space.color.motion” initially written in 1999 is an example of computational art that uses simple design elements like lines, color fill, and eventually, animation, to convey a sense of dimensionality that is both convincing and transcendent of reality– “unimaginable constellations,” to quote Mohr. The 6-d hypercube and its angles and increments are based on the present time and date but are otherwise randomly generated with every restart of the program, creating animations that are unique with every passing frame. Although these aspects are randomly generated, there is a system of diagonals that are diametrically opposite of each other, as well as one determining the thickness of lines and how it constructs planar quadrilaterals– these are controlled by the established algorithm, systematizing randomness to create an intentional and mesmerizing work of art.

The many applications of this project demonstrate an aspect of computational art that traditional art is unable to achieve. Because of its randomly generated nature, many stills of the animation can be captured and made into collections of artwork. Mohr also exhibited this project in various galleries and public spaces in the form of animation and paintings, inspiring a myriad of different experiences with one computer program.

## Project 05 – Wallpaper

I thought it would be an interesting exercise to simplify the intricate orchid flower with code. It was a fun challenge determining the most essential shapes out of the organic form. After getting the basic shapes down on paper, I made a sketch in Illustrator, then translated it into p5.js coordinates to create a “tile.” I then used loops to create a wallpaper out of the original tile design.

orchid et
``````function setup() {
createCanvas(600, 600);
}

function draw() {
background(200);
scale(.2);//scale down coordinates based on 600x600 canvas
for (var x = 0; x <= 5*width; x += 600) {
for (var y = 0; y <= 5*height; y += 600) {
push();
translate(x, y);
tile();
pop();
}

noLoop(0);
//}

}
}
function tile() { //use repeating tile to simplify loop function

noStroke();
fill(35, 58, 58);//bg dark green color
rect(0, 0, 600, 600);
//decorative lines
stroke(227, 239, 177); //yellow line
line(0, 399, 600, 399);
line(0, 407, 600, 407);
line(300, 0, 300, 600);
stroke(115, 140, 127); //green line
strokeWeight(0.5);
line(0, 403, 600, 403);
line(250, 0, 250, 600);
line(255, 0, 255, 600);
line(350, 0, 350, 600);
line(355, 0, 355, 600);
push();
orchid();
pop();
}

function orchid() {

noStroke();
push();
fill(206, 126, 179);  //midtone magenta
ellipse(300, 240, 107, 142); //back petal
fill(191, 86, 156);  //darker magenta
translate(-165, 310);
rect(180, 312, 115, 76, 60, 0, 0, 0);
pop();
push();
fill(191, 86, 156);  //midtone magenta
translate(340,-115);
rect(305, 312, 115, 76, 0, 60, 0, 0);
pop();

push();
fill(228, 211, 229); //light magenta
ellipse(212, 315, 183);//large petal1
ellipse(388, 315, 183);//large petal2
pop();
push();
fill(206, 126, 179);  //midtone magenta
rect(292, 329, 16, 80);//center rectangle
pop();

push(); //top "sandle"
fill(255); //white
ellipse(300, 320, 33);
triangle (300, 295, 317, 315, 283, 315);
fill(205, 59, 113); //true magenta
ellipse(273, 335, 24);
triangle(264, 343, 278, 343, 295, 387);
ellipse(327, 335, 24);
triangle(336, 343, 322, 343, 305, 387);
rect(268, 401, 64, 21, 0, 0, 21, 21);
fill(249, 239, 130);//yellow
ellipse(293, 400, 11);
ellipse(307, 400, 11);
pop();

}

``````

## LO 5

Throughout the past year, I noticed that 3-D graphics have become a very popular medium to decorate and enliven websites and apps. One of my favorite artists I’ve come across is Laurie Rowan. His work takes advantage of animation and the physical “realness” of his medium to communicate out-of-the-box and quirky ideas. It’s difficult to choose one, but I enjoy “MTV: Love,” a short animation reel made for MTV. I think this is a great example of how imaginative and seemingly non-practical artistic visions can be used for the benefit for mainstream audiences on a platform like television.

I assume that Laurie uses a program like Cinema4D to render his characters, and an editing software like AfterEffects to piece them together, but I’m unfamiliar with the algorithmic process. Laurie’s work inspires me to look toward other mediums to further my illustration practice.

## LO – 4

With my short-lived experience in physical computing taking an intro Arduino class last semester, I was drawn to the appearance of Ototo by Yuri Suzuki. It resembles a chip but claims to be a musical invention kit. Reading into it, Ototo does exactly as it promises. It allows the user to interact tactically with the product to experiment with possible sounds, manipulate add-ons that increase the range of sounds that can be made, and wire the product to everyday items (i.e. water, a piece of cake, a spoon) so that the musical performance experience expands to include any object you desire.

What I love about the Ototo is the accessibility of the product by the communicative means of sounds and its relationship with touch. From a young age, we are introduced to toys with buttons assigned to certain sound effects. I think this project builds on that simple concept but elevates it to something even more interesting by allowing the user to transform their own personal items into musical instruments. I’m unsure of how the machine detects changes in the connected objects (conductivity?), but I do know that a lot of thought was put into writing code that assigns sounds to different ports on the device that is further changed based on the additional input information from the connected objects. I think Suzuki’s artistry comes into this project in the consideration of human emotion and how we respond to interactivity and sound. His sound projects are highly engaging and portray sound as a viable and fun aspect of art and design.

## Project 4 – String Art

I began this project by playing around with loops to experiment with different forms. However, I later realized the loops could be used to create interesting environments with “perspective lines.” I decided to run with this and create an empty room with a door at the end. The color changing with the position of the mouse give a sense of dimension and personalization.

string art et
``````function setup() {
createCanvas(400, 300);
background(0);
}

function draw() {
spacing = 20;
red = mouseX;
blue = mouseY;

for (var a = 0; a <= 600; a += spacing) {
// sloped plane
stroke(255);
strokeWeight(0.5);
line(0, a, a, 200);

// vertical grid
stroke(red, 0, 200);
line(a, mouseX, a, a);
}
for (var a = width/3; a <= width; a += spacing/2) {
//bg diagonals
stroke(red, 255, blue);
line(a, 0, 2*a, 200);
line(2*a, 200, a, 200); //2 sets of lines converge at horizon
}
//door
stroke(red, 255, blue);
strokeWeight(1);
fill(0);
rect(width/2, height-200, 50, 100);
//doorknob
circle(width/2+40, height-150, 5);
}``````

## Project 3: Dynamic Drawing

For this week’s project, I wanted to visualize my (poor) sleep schedule with code. I realized through my time in college that I work better at night, but this makes it hard for me to function normally in the daytime.

night:day
``````var faceWidth;

function setup() {
createCanvas(450, 650);

}

function draw() {
//sky color shift
if (mouseX>= width/2.2) {
background (255, 243, 170);//daytime
} else {
background (66, 56, 148); //nighttime
}

//base figure
var faceWidth = width/2;
push();
noStroke();
fill(20, 20, 50) //facecolor
var faceShift = constrain(mouseX, 150, 500);
ellipse (width/2, height/2, faceWidth, faceWidth);
//body
rectMode(CENTER);
rect (width/2, height/2 + 300, faceWidth, 420, 50, 50,0, 0);
pop();

//moon
var moonX = constrain(mouseX, width/4, width/2);
if (mouseX<width/2.5){
noStroke();
fill(66, 98, 167);
ellipse(moonX, height/5, faceWidth/2, faceWidth/2);
fill(66, 56, 148);
ellipse(moonX +30, height/5, faceWidth/2, faceWidth/2);
}
//sun
var sunX = constrain(mouseX, width- width/2, width - width/4)
if (mouseX>width/2.2){
noStroke();
fill(255, 214, 139);
ellipse(sunX, height/5, faceWidth/2, faceWidth/2);
stroke(255, 214, 139);
strokeWeight(2);
noFill();
ellipse(sunX, height/5, faceWidth/2 + 20, faceWidth/2 +20);
ellipse(sunX, height/5, faceWidth/2 + 40, faceWidth/2+40);
}

//dayface
//eyelids
var eyeWidth= faceWidth/4
push();

//eyebag droop
var bagdroop= constrain(mouseY, height/2, height/2 + faceWidth/10); //eyebag droop factor
if(mouseX>width/2){
//eyebag droop
stroke(173, 85, 255);
strokeWeight(3);
fill(218, 170, 255);
ellipse (176, height/2- faceWidth*1.5+ bagdroop, faceWidth/4, faceWidth/4)
ellipse (width- 176, height/2- faceWidth*1.5 + bagdroop, faceWidth/4, faceWidth/4)
}
pop();

//eyes
push ();
noStroke();
fill(255);
ellipse (176, height/2, eyeWidth, eyeWidth)
ellipse (width- 176, height/2, eyeWidth, eyeWidth)
pop();

//eyelid droop
var droop = constrain(mouseY, height/2- faceWidth/8, height/2);// eyelid droop factor
if(mouseX>width/2){
noStroke();
fill(20, 20, 50);
rect( 140, droop*.75+ eyeWidth/2, eyeWidth+20, eyeWidth)
rect (width- 218, droop*.75+ eyeWidth/2, eyeWidth+20, eyeWidth);
}

//pupils
push ();
noStroke();
fill(20, 20, 50);
ellipse (176, height/2, faceWidth/8, faceWidth/8)
ellipse (width- 176, height/2, faceWidth/8, faceWidth/8)
pop();

//mouth
push();
noFill();
stroke(255);
strokeWeight(10);
beginShape ();
curveVertex( width/2 -50, height/2 +40 );
curveVertex( width/2 -50, height/2 +40 );
curveVertex( width/2 -30, height/2 +55);
curveVertex (width/2, height/2 + 60);
curveVertex( width/2 +30, height/2 +55);
curveVertex( width/2 +50, height/2 +40 );
curveVertex( width/2 +50, height/2 +40);
endShape();
pop();

//sky shift
push();
var bgshift = constrain (mouseX, 120, width - width/3) //shift only happens once
translate (-50, -50)
noStroke();
fill(20, 20, 50);
rect (0, 0, height* 1.5, height *1.75)
pop ();

}``````

## LO – 3

Floraform by Nervous System (2014) first caught my attention because of its aesthetics and practical application in beautiful flower-inspired jewelry, sculptures, and animations. Reading more into it, I became even more inspired knowing that the generative jewelry pieces were based on extensive scientific research into the way flowers grow and the differential system. The designers took into consideration the effects of physics, environmental factors, collision detection, growth patterns, and more. At first, I was skeptical at anyone’s ability to replicate nature, as I’ve grown to understand that anything “natural” is imperfect, but the thoroughness of the project site and the practical, commercial outcome made me appreciate the initiative and its respect to reality.

Although a ton of scientific research went into creating the final products of Floraform, a lot of artistic license were taken in the way the floral system is represented visually and made into pieces of art. Nervous System creates their own software system to visualize their creations, but I can assume that it resembles a 3-D modeling software but with the capabilities of incorporating custom algorithms in accordance to the different natural considerations they made.

## Project – 02: Variable Faces

My week could be described with this emoji: 🤡, so I decided to lock myself in my apartment to code this as a coping mechanism.

I thought it was interesting that clowns are interpreted very differently depending on their context and appearance. I decided to take advantage of this project to demonstrate the unsettling feeling they give me. I was surprised to see that the incremental changes in color and size of the clown’s features actually increased the cursed factor significantly.

clown!
``````//global variables
var eyewhite = 42;
var pupil = 20;
var faceWidth = 315;
var faceHeight = 315;
var nose = 63;
var cheek = 58;
var eyebrow = 50;
var shoulderWidth = 480;
var mouthType = 1
//shirtcolor
var shirtR = 0;
var shirtG = 192;
var shirtB = 184;
//red default color
var r  = 255;
var g = 5;
var b = 37;

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

function draw() {
background(255, 160, 59);
var centerX = width / 2;
var centerY = height / 2;

//body
//shoulders
noStroke();
fill (shirtR, shirtG, shirtB);
rect(0, 480, shoulderWidth, 165, 90, 90, 0, 0);

//bottomneck
noStroke();
fill (255, 237, 219);
ellipse (centerX, 486, 144, 82);

//neck
noStroke();
fill (255, 237, 219);
rect (168, 419, 144, 66);

//buttons
noStroke();
fill (255, 250, 116);
ellipse (centerX, 557, 27, 27);

noStroke();
fill (255, 250, 116);
ellipse (centerX, 592, 27, 27);

noStroke();
fill (255, 250, 116);
ellipse (centerX, 626, 27, 27);

//face
noStroke();
fill(255, 245, 227);
ellipse ( centerX, centerY, faceWidth, faceHeight);

//cheeks
noStroke();
fill(255, 51, 86, 100);
ellipse (140, centerY, cheek, cheek);

noStroke();
fill(255, 51, 86, 100);
ellipse (333, centerY, cheek, cheek);

//nose
noStroke();
fill (r - 18, g, b); //darker red
ellipse (centerX, 320, nose, nose);

//eye
var eyeLX = 185;
var eyeRX = 291;
var eyeY = 271;

noStroke();

noStroke();

//eyewhite
noStroke ();
fill (255);
ellipse (eyeLX, eyeY, eyewhite);

noStroke ();
fill (255);
ellipse (eyeRX, eyeY, eyewhite);

//pupil
noStroke ();
fill (0);
ellipse (eyeLX, eyeY, pupil, pupil);

noStroke ();
fill (0);
ellipse (eyeRX, eyeY, pupil, pupil);

//mouth
var mouthLX = 170;
var mouthRX = 310;
var smileY = 352;
var neutralY = 374;
var frownY = 400;

//draw three different mouth expressions
if (mouthType ==1){
//smile
noFill();//lips
stroke(r, g, b);
strokeWeight(36);
beginShape ();
curveVertex( mouthLX, smileY)
curveVertex( mouthLX, smileY)
curveVertex( 195, 377)
curveVertex (centerX, 393)
curveVertex( width - 195, 377)
curveVertex( mouthRX, smileY)
curveVertex( mouthRX, smileY)
endShape();

noFill();//teeth
stroke(255);
strokeWeight(11);
beginShape ();
curveVertex( mouthLX, smileY)
curveVertex( mouthLX, smileY)
curveVertex( 195, 377)
curveVertex (centerX, 393)
curveVertex( width - 195, 377)
curveVertex( mouthRX, smileY)
curveVertex( mouthRX, smileY)
endShape();

} else if (mouthType ==2){
//neutral
noFill();//lips
stroke(r,g,b);
strokeWeight (36);
line (mouthLX, neutralY, mouthRX, neutralY);

noFill();//teeth
stroke(255);
strokeWeight (11);
line (mouthLX, neutralY, mouthRX, neutralY);

} else if (mouthType ==3){
//frown
noFill();//lips
stroke(r, g, b);
strokeWeight(36);
beginShape ();
curveVertex( mouthLX, frownY)
curveVertex( mouthLX, frownY)
curveVertex( 195, 370)
curveVertex( centerX, 359)
curveVertex( width - 195, 370)
curveVertex( mouthRX, frownY)
curveVertex( mouthRX, frownY)
endShape();

noFill();//teeth
stroke(255);
strokeWeight(11);
beginShape ();
curveVertex( mouthLX, frownY)
curveVertex( mouthLX, frownY)
curveVertex( 195, 370)
curveVertex( centerX, 359)
curveVertex( width - 195, 370)
curveVertex( mouthRX, frownY)
curveVertex( mouthRX, frownY)
endShape();
}
//hair
//left
noStroke();
fill(r,g,b);
ellipse (83, 260, 42);
ellipse (91, 230, 42);
ellipse (57, 209, 42);
ellipse (77, 203, 42);
ellipse (68, 167, 42);
ellipse (52, 147, 42);
ellipse (56, 209, 42);
ellipse (47, 182, 42);
ellipse (67, 235, 60);
ellipse (98, 198, 50);
ellipse (57, 125, 29);

//right
noStroke();
fill(r,g,b);
ellipse (width- 83, 260, 42);
ellipse (width- 91, 230, 42);
ellipse (width- 57, 209, 42);
ellipse (width- 77, 203, 42);
ellipse (width- 68, 167, 42);
ellipse (width- 52, 147, 42);
ellipse (width- 56, 209, 42);
ellipse (width- 47, 182, 42);
ellipse (width- 67, 235, 60);
ellipse (width- 98, 198, 50);
ellipse (width- 57, 125, 29);
}

function mousePressed() {
eyewhite = random (30, 60);
pupil = random (15, 30);
faceWidth = random(300, 330);
faceHeight = random(315, 380);
nose = random(45, 90);
cheek = random(55, 90);
mouthType = int(random(1,4));
//shirtcolor
shirtR = random(0, 255);
shirtG = random(0, 255);
shirtB = random(0, 255);
}
``````

## LO2 – Generative Art

LIA’s SV01, SV15, SV04, SV08 was a generative art installation at One Culver creative space, Culver City, California, displayed on 2018/07/01 – 2018/09/30 and 2018/07/01 – 2018/12/31. Most of her contract work seems to be displayed on a large screen in large, public areas. The large scale of LIA’s art is what inspires me– it commands just the right amount of presence and has the impact to elevate the space to feel more high-end and dynamic. Though the reel showcases moving pictures that involve both angular and more fluid, blob-like shapes, they all complement the architectural elements of the space and serves as both an aesthetically-pleasing side piece but also a moment for visitors to be present in the space and admire the artwork.

I believe the algorithm that generated the work is probably dependent on layers and has a flexible system that controls transparency. Semi-transparent layers crossing over each other at a more-or-less constant pace are a recurring element in LIA’s work. LIA’s artistic sensibilities are very present in her work, as she must create a piece of work that not only matches but elevates the experience of a large space. It is functional in that way, but it is also a very abstract concept that she must translate into a tangible product.

## Project 01 – Self-Portrait

My default pose:)

Self-Portrait
``````function setup() {
createCanvas(600,600);
background(155, 154, 255, 255)
}

function draw() {
//backhair
fill(0);
noStroke();
rect(257, 362, 149, 237, 0, 105, 0, 0);

noFill();
stroke(255, 242, 165);
strokeWeight(2);
rect(260, 358, 151, 242, 0, 106, 0, 0);

//shirt
fill(255, 64, 34);
noStroke();
rect(96, 419, 292, 181, 0, 81, 0, 0);

fill(244, 64, 34);
noStroke();
rect(438, 528, 83, 72, 0, 20, 0, 0);

//neck
fill(255,216,195);
noStroke();
rect(170,274,92,181);

fill(255,216,195);
noStroke();
rect( 151, 419, 156, 81, 0, 0, 55, 0);

//face
strokeWeight(2);
stroke(0);
fill(255, 247, 227);
rect(195, 222.5, 120, 170, 0, 0, 0, 400);

fill(255, 247, 227);
noStroke();
ellipse(278, 223, 258);

//coverface
fill(155, 154, 255, 255);
noStroke();
rect(369, 162, 47, 160);

//chin
noStroke();
fill(255, 247, 227);
ellipse (312, 366.5, 52);

//black long hair
noStroke();
fill(0);
rect(86, 208, 112, 135);

noStroke();
fill(0);
rect(29, 327, 169, 273, 106, 0, 0, 0);

//blonde long hair
fill(255, 242, 165);
noStroke();
rect(161, 208, 38, 399, 0, 0, 0, 37);

noFill();
stroke(255, 242, 165);
strokeWeight(2);
rect(157, 212, 42, 400, 0, 0, 0, 41)

//eyes
//white
noStroke();
fill(255);
rect(245, 235, 29, 20, 0, 0, 0, 15);

noStroke();
fill(255);
rect(356, 237, 13, 13, 0, 0, 0, 8);

//pupil
noStroke();
fill(0);
ellipse(275, 243, 26);

noStroke();
fill(0);
ellipse(369, 243, 16);

//eyeliner
stroke(0);
strokeWeight(3);
line(248, 229, 273, 232);

stroke(0);
strokeWeight(3);
line(369, 237, 387, 235);

//eyebrow
stroke(0);
strokeWeight(3);
line(220, 191, 289, 215);

stroke(0);
strokeWeight(2);
line(326, 200, 390, 200);

//nose
noStroke();
fill(0);
ellipse(310, 300, 5);

stroke(0);
strokeWeight(2);
noFill();
arc(335, 297, 12, 12, 7*PI/4, PI/4);

strokeWeight(2);
line(326, 294, 326, 200);

//lips
noStroke();
fill(255, 216, 195);
ellipse(333, 345, 27);

noStroke();
fill(255, 151, 135);
arc(333, 338, 47, 47, PI, 2*PI);

noStroke();
fill(255, 247, 227);
ellipse(333, 315, 23);

//cheek
noStroke();
fill(255, 151, 135, 120);
ellipse(198, 311, 106);

noStroke();
fill(255, 151, 135, 120);
ellipse(369, 280, 44);

//bangs
//right
noStroke();
fill(255, 242, 165);
rect(311, 78, 91, 104, 0, 70, 0, 70);

noStroke();
fill(0);
rect(311, 74, 91, 104, 0, 70, 0, 70);

//left
noStroke();
fill(255, 242, 165);
rect(86, 54, 253, 163, 142, 0, 146, 0);

noStroke();
fill(0);
rect(86, 35, 260, 167, 145, 0, 150, 0);

//hand
//pointer
noFill();
stroke(255, 247, 227);
strokeWeight(20);
line(437, 405, 458, 486);

//middle
noFill();
stroke(255, 247, 227);
strokeWeight(20);
line(496, 405, 471, 486);

fill(255, 215, 195);
noStroke();
rect(438, 474, 83, 82, 23, 0, 36, 0);

//4thfinger
fill(255, 247, 227);
noStroke();
rect(487, 467, 20, 61, 10);

//pinkie
fill(255, 247, 227);
noStroke();
rect(504, 470, 20, 47, 10);

//thumb
noFill();
stroke(255, 247, 227);
strokeWeight(20);
line(471, 486, 471, 540);

fill(255, 247, 227);
noStroke();
rect(438, 496, 50, 59, 0, 46, 0, 0);

noLoop();

}
``````

After sketching out different poses, I went into Illustrator to create my self-portrait so I could reference the dimensions and color codes of my shapes without as much guess-and-check. Translating the shapes into p5.js still took longer than expected, but it was pretty gratifying to see myself slowly building up a finished painting. Along the way, I realized that I was unable to replicate some rounded rectangles from Illustrator because p5.js does not recognize a radius as large as Illustrator does. This was frustrating but I came to enjoy the limitations of the program and my final result. I also wasn’t able to figure out how to rotate an object, so I ended up making my fingers out of strokes with a heavy stroke-weight– it worked!