## Judy Li-Final Project

``````//Judy Li
//Section A
//judyli@andrew.cmu.edu
//Final Project

var yA = 1; //y-Axis
var c1; //color 1
var c2; //color 2
var x = [];
var gravity = 0.3; //downward acceleration
var springy = 1; //how much velocity is retained after bounce
var drag = 0.0001; //drag causes particles to slow down
var np = 25; //how many particles
var paperbirds = [];

function soot() {
background(204, 174, 98);
noStroke();
fill("pink");
ellipse(30, 30, 10, 10);
fill(186, 220, 88);
ellipse(25, 25, 10, 10);
fill(126, 214, 223);
ellipse(25, 40, 10, 10);
fill("coral");
ellipse(30, 35, 10, 10);
fill(224, 86, 253);
ellipse(40, 30, 10, 10);
fill("white");
ellipse(40, 40, 10, 10);
fill(0);
for (var i = 0; i < np; i++) {
//make a particle
var p = makeParticle(200, 200, random(-50, 50), random(-50, 50));
}
frameRate(10);
sootDraw();
}

function sootDraw() {
if (mouseIsPressed) {
var newp = makeParticle(mouseX, mouseY, random(-10, 10), random(-10, 0), random(0, 50));
particles.push(newp);
}
newParticles = [];
for (var i = 0; i < particles.length; i++) { // for each particle
var p = particles[i];
p.step();
p.draw();
if (p.age < 200) {
newParticles.push(p);
}
}
particles = newParticles;
}

function birds() {
setGradient(0, 0, width, height, c1, c2, yA);
drawClouds();
nBird();
nPosition();
nArray();
for (var i = 0; i < paperbirds.length; i++) {
paperbirds[i].display();
}
frameRate(10);
paperbirds.push(drawBirds());
}

function nBird() {
if (random(50, 50) < 50) {
paperbirds.push(drawBirds());
}
}

function nPosition() {
for (var i = 0; i < paperbirds.length; i++) {
paperbirds[i].move();
}
}

function nArray() {
var ogBird = [];
for (var i = 0; i < paperbirds.length; i++) {
if (paperbirds[i].x > 0) {
ogBird.push(paperbirds[i]);
}
}
paperbirds = ogBird;
}

function moveBird() {
this.x -= this.speed;
}

function seeBird() {
stroke(225, 255, 255, 200);
strokeWeight(random(1, 5));
point(this.x, this.y);
point(this.x + 2.5, this.y);
}

function drawBirds() {
var paperbirds = {x: width,
pdist: 100,
speed: 5,
birdsize: round(random(0, 5)),
y: round(random(0, height)),
move: moveBird,
display: seeBird
}
return paperbirds;
}

function drawClouds() {
noStroke();
//cloud1
fill(255, 255, 255, 200);
ellipse(75, 75, 80, 50);
ellipse(185, 75, 100, 60);
ellipse(135, 75, 115, 75);
//cloud2
ellipse(240, 200, 70, 50);
ellipse(380, 200, 100, 55);
ellipse(420, 200, 75, 30);
ellipse(300, 200, 120, 75);
//cloud3
ellipse(120, 360, 100, 40);
ellipse(240, 360, 80, 50);
ellipse(300, 360, 75, 30);
ellipse(180, 360, 120, 75);
}

function particleStep() {
this.age++;
this.x += this.dx;
this.y += this.dy;
if (this.x > width) { // bounce off right wall
this.x = width - (this.x - width);
this.dx = -this.dx * springy;
} else if (this.x < 0) { // bounce off left wall
this.x = this.x;
this.dx = -this.dx * springy;
}
if (this.y > height) { // bounce off bottom
this.y = height - (this.y - height);
this.dy = -this.dy * springy;
} else if (this.y < 0) { // bounce off top
this.y = -this.y;
this.dy = -this.dy * springy;
}
this.dy = this.dy + gravity; // force of gravity
// drag is proportional to velocity squared
// which is the sum of the squares of dy and dy
var vs = Math.pow(this.dx, 2) + Math.pow(this.dy, 2);
// d is the ratio of old velocty to new velocity
var d = vs * drag;
// d goes up with velocity squared but can never be
// so high that the velocity reverses, so limit d to 1
d = min(d, 1);
// scale dx and dy to include drag effect
this.dx *= (1 - d);
this.dy *= (1 - d);
var rpx = width;
var rpy = height;
var f;
var d;
var rpc = 10;
var x = this.x;
var y = this.y;
var dirx = (x - rpx) / d;
var diry = (y - rpy) / d;
d = dist(x, y, rpx, rpy);
f = rpc / (Math.pow(d, 2));
this.dx += dirx * f;
this.dy += diry * f;
point(rpx, rpy);
}

function particleDraw() {
noStroke();
fill(0);
ellipse(this.x, this.y, this.size, this.size);
}

function setSize() {
return random(5, 25);
}

function makeParticle(px, py, pdx, pdy, size) {
p = {x: px, y: py,
dx: pdx, dy: pdy,
size: setSize(),
age: 0,
step: particleStep,
draw: particleDraw
}
return p;
}

var particles = [];

function setup() {
createCanvas(480, 480);
//colors
c1 = color(129, 236, 236);
c2 = color(255, 234, 167);
}

function draw() {
setGradient(0, 0, width, height, c1, c2, yA);
placeForeground();
if (mouseX < (width / 2) & mouseY < height) {
soot();
}
if (mouseX > (width / 2) & mouseY < height) {
birds();
}
}

function placeForeground() {
noStroke();
//chim
fill(150);
quad(20, height, 30, 100, 50, 100, 60, height);
fill(0);
rect(30, 90, 20, 10);
//big red
fill(255, 82, 82);
rect(90, 145, 300, 250);
//grey
fill(175);
rect(80, 160, 80, 45);
rect(100, 250, 60, 45);
rect(315, 200, 90, 50);
//top red
fill(225, 82, 82);
rect(110, 60, 260, 40);
//mini rooms
fill(205);
rect(85, 170, 70, 30);
rect(105, 260, 50, 30);
rect(320, 210, 80, 35);
rect(95, 105, 290, 40);
//green
fill(120, 180, 143);
quad(75, 165, 85, 155, 155, 155, 165, 165);
quad(95, 255, 105, 245, 155, 245, 165, 255);
quad(310, 205, 320, 195, 400, 195, 410, 205);
quad(80, 110, 100, 100, 380, 100, 400, 110);
quad(90, 65, 200, 15, 280, 15, 390, 65);
//bottom brown
fill(139, 69, 19);
rect(190, 280, 100, 12.5);
rect(75, 205, 90, 7.5);
rect(95, 295, 70, 7.5);
rect(310, 250, 100, 7.5);
//top brown
fill(250, 211, 144);
rect(200, 200, 80, 80);
//outer red
fill(200, 57, 57);
rect(60, 330, 130, 100);
rect(290, 330, 130, 100);
//main entrance
fill(250, 211, 144);
rect(190, 325, 100, 50);
//teal
fill(120, 200, 143);
quad(180, 325, 200, 315, 280, 315, 300, 325);
quad(180, 210, 210, 180, 270, 180, 300, 210);
//sign
fill(255, 240, 195);
ellipse(240, 180, 40, 20);
ellipse(240, 15, 50, 25);
ellipse(240, 315, 60, 10);
//noStroke();
fill(204, 174, 98);
stroke(204, 174, 98);
quad(0, width, width / 3, 360, 2 * (width / 3), 360, width, height);
stroke(204, 142, 25);
line(width / 3, 450, (2 * (width / 3)) + 140, 450);
line((width / 3) - 140, 465, 2 * (width / 3), 465);
stroke(179, 57, 57);
strokeWeight(1);
fill(179, 57, 57);
triangle(0, height, 0, height - 45, 120, 369);
triangle(width, height, width, height - 45, 360, 369);
beginShape();
curveVertex(0, height);
curveVertex(0, height);
curveVertex(35, 430);
curveVertex(72.5, 395);
curveVertex(115, 370);
curveVertex(width / 3, 360);
curveVertex(width / 3, 360);
endShape();
beginShape();
curveVertex(2 * (width / 3), 360);
curveVertex(2 * (width / 3), 360);
curveVertex(365, 370);
curveVertex(407.5, 395);
curveVertex(445, 430);
curveVertex(width, height);
curveVertex(width, height);
endShape();
}

function setGradient(x, y, w, h, c1, c2, axis) {
noFill();
if (axis == yA) {//top > bottom gradient
for (var i = y; i <= y + h; i++) {
var inter = map(i, y, y + h, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x + w, i);
}
}
}``````

For the final project, I wanted to recreate three of my favorite scenes in the movie, Spirited Away. The first scene shows bridge and the exterior of the bath house. Since this building is famous in the movie, I wanted to start my project out with this first background image. When you move you mouse in the left hand side within the bounding box, it moves onto a new background/scene. This scene is the part when Chihiro is interacting with the soot creatures. She throws candy onto a corner of the floor so that the soot would get away from her. To go back to the original/first scene, you would just move your mouse down and out of the bounding box. And for the third scene, I remade the part that shows the flying paper birds through a simple animation. I really enjoyed that scene because it was really aesthetically filmed/made in the movie and I wanted to incorporate that.

## Judy Li-Project-12-Proposal

For the final project, I would like to do an animation with sound. I wasn’t sure what kind of animation I wanted to do, but I am deciding between my routine/ritual or a short animation of a film that I really like. I would start the canvas with a white background and have a title that shows up through a darker opacity after ‘x’ amount of seconds. And then, the animation would start. I would like to have my character exactly in the middle and having the background/foreground move around her. To make different backgrounds of the animation, I would have a start time and an end time for each background and the objects in the background/foreground. To make this project all flow together, I would like to digitally draw the characters using a style that I like.

The image above is what I would imagine my animation to be like. The link to the animation is here.

## Looking Outwards – 12

The project The Space Between Us, is by Janet Echelman and the project The Chronarium, is by Rachel Wingfield. Both of these projects are similar in the way that they are both human centered and designed for interaction and to create an experience throughout. I found these projects interesting because the approaches to similar concepts are different. Echelman’s project is situated in an open environment, while Wingfield’s project is a part of an enclosed space. While both are different in the physical aspect, both project incorporates lighting and sound to create an immersive audiovisual experience for their audience. Both project also include some sort of physical change to the environment by the audience. In the Space Between Us, the audience had to carve or make indentations through the sand so that they could sit comfortably to look up at the aerial sculpture. In the Chronarium, the audience would lie inside a textile canopy, which would change the shape and form of the envelope as they moved/turned to find the most comfortable position to rest/sleep.

## Looking Outwards – 11

I found this project really interesting because the visual artist, Palmer Eldritch, combined a series of tech-noir chaos, their reactivity, and rotoscoping into his video and audio outputs. The sequences are made possible through the use of Max/Jitter with a bunch of different visual elements that are made by softwares like Ready, After Effects, GForce Suite, 3DSMax/VRay, Sound Forge/Waves, and many others.  This work was also possible courtesy of Paul Fennell through his creations made on Max/Jitter. Eldritch made changes and modified an open source code to suit his thoughts and the direction of his project. As a result, many overlays were a result of experimentation with noise patterns and sonifications courtesy of Tomasz Sulej.

Article: by FilipVisnjic, January 3rd, 2017

## Judy Li-Project-11-Composition

``````/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-11
*/

var ttl1 = [];//turtle 1
var ttl2 = [];//turtle 2
var ttl3 = [];//turtle 3
var ttl4 = [];//turtle 4
var opacity = 255;//starting color

function setup() {
createCanvas(480, 480);
background("white");
strokeJoin(MITER);
strokeCap(PROJECT);
//ttl1
for (var i = 0; i < 10; i++) {
ttl1.push(makeTurtle(0, 0));
ttl1[i].penDown();
ttl1[i].right(36 * i);
}
//ttl2
for (var j = 0; j < 10; j++) {
ttl2.push(makeTurtle(480, 0));
ttl2[j].penDown();
ttl2[j].left(36 * j);
}
//ttl3
for (var k = 0; k < 10; k++) {
ttl3.push(makeTurtle(0, 480));
ttl3[k].penDown();
ttl3[k].right(36 * k);
}
//ttl4
for (var l = 0; l < 10; l++) {
ttl4.push(makeTurtle(480, 480));
ttl4[l].penDown();
ttl4[l].left(36 * l);
}
}

function draw() {
var dir = random(15, 90);
var dist = random(10, 25);
if (opacity > 100) {
opacity -= 10;
}
else opacity = 205;
for (var i = 0; i < 10; i++) {
//1
ttl1[i].setColor(opacity);
ttl1[i].setWeight(2);
ttl1[i].forward(dist);
ttl1[i].right(dir);
//2
ttl2[i].setColor(opacity);
ttl2[i].setWeight(2);
ttl2[i].forward(dist);
ttl2[i].left(dir);
//3
ttl3[i].setColor(opacity);
ttl3[i].setWeight(2);
ttl3[i].forward(dist);
ttl3[i].right(dir);
//4
ttl4[i].setColor(opacity);
ttl4[i].setWeight(2);
ttl4[i].forward(dist);
ttl4[i].left(dir);
}
}

function turtleLeft(d) {
this.angle -= d;
}

function turtleRight(d) {
this.angle += d;
}

function turtleForward(p) {
var newx = this.x + cos(rad) * p;
var newy = this.y + sin(rad) * p;
this.goto(newx, newy);
}

function turtleBack(p) {
this.forward(-p);
}

function turtlePenDown() {
this.penIsDown = true;
}

function turtlePenUp() {
this.penIsDown = false;
}

function turtleGoTo(x, y) {
if (this.penIsDown) {
stroke(this.color);
strokeWeight(this.weight);
line(this.x, this.y, x, y);
}
this.x = x;
this.y = y;
}

function turtleDistTo(x, y) {
return sqrt(sq(this.x - x) + sq(this.y - y));
}

function turtleAngleTo(x, y) {
var absAngle = degrees(atan2(y - this.y, x - this.x));
var angle = ((absAngle - this.angle) + 360) % 360.0;
return angle;
}

function turtleTurnToward(x, y, d) {
var angle = this.angleTo(x, y);
if (angle < 180) {
this.angle += d;
} else {
this.angle -= d;
}
}

function turtleSetColor(c) {
this.color = c;
}

function turtleSetWeight(w) {
this.weight = w;
}

function turtleFace(angle) {
this.angle = angle;
}

function makeTurtle(tx, ty) {
var turtle = {x: tx, y: ty,
angle: 0.0,
penIsDown: true,
color: color(128),
weight: 1,
left: turtleLeft, right: turtleRight,
forward: turtleForward, back: turtleBack,
penDown: turtlePenDown, penUp: turtlePenUp,
goto: turtleGoTo, angleto: turtleAngleTo,
turnToward: turtleTurnToward,
distanceTo: turtleDistTo, angleTo: turtleAngleTo,
setColor: turtleSetColor, setWeight: turtleSetWeight,
face: turtleFace};
return turtle;
}
``````

For this project, I wanted to create a turtle pattern that fills up the background. I made turtles at four different starting points so that the canvas is filled up more quickly and with more depth of color through differences in color as they move about. When I played with different moves and directions, I liked this composition the best because it looks like the way a knit hat is supposed to be made.

## Judy Li-Project-10-Landscape

``````/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-10
*/

var terrainSpeed = 0.0005;
var terrainDetail = 0.002;
var terrainDetail1 = 0.00125;
var terrainDetail2 = 0.001;
var terrainDetail3 = 0.0005;
var yaxis = 1;
var c;
var c1;
var c2;
var star = [];

function setup() {
createCanvas(480, 480);
frameRate(10);
c2 = color(179, 77, 37);
c1 = color(64, 40, 74);
c = color(247, 222, 85);

star.push(drawStar());
}

function wave1() {
beginShape();
stroke(26, 20, 95);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 5, 0, height / 4);
line(x, y + (height / 2), x, height);
}
endShape();
}

function wave2() {
beginShape();
stroke(26, 40, 95);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail1) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 4, 0, height / 2);
line(x, y + 15 + (height / 2), x, height);
}
endShape();
}

function wave3() {
beginShape();
stroke(26, 60, 95);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail2) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 3.5, 0, height);
line(x, y + 25 + (height / 2), x, height);
}
endShape();
}

function wave4() {
beginShape();
stroke(26, 70, 95);
for (var x = 0; x < width; x++) {
var t = (x * terrainDetail3) + (millis() * terrainSpeed);
var y = map(noise(t), 0, 3, 0, height);
line(x, y + 50 + (height / 2), x, height);
}
endShape();
}

function draw() {
background("white");
nStar();
nPosition();
nArray();
setGradient(0, 0, width, height / 3, c1, c2, yaxis);
setGradient(0, height / 3, width, 2 * (height / 3), c2, c, yaxis);

fill(247, 222, 125);
ellipse(width / 2, 25 + (height / 2), 50, 50);

push();
strokeWeight(1.5);
stroke(255, 255, 255, 100);
ellipse(width - 50, 50, 50, 50);
fill(247, 222, 200);
ellipse(width - 50, 50, 49, 49);
pop();

for (var i = 0; i < star.length; i++) {
star[i].display();
}

push();
wave1();
wave2();
wave3();
wave4();
noFill();
rect(0, 0, width, height);
pop();
}

function nStar() {
if (random(0, 250) < 50) {
star.push(drawStar());
}
}

function nPosition() {
for (var i = 0; i < star.length; i++) {
star[i].move();
}
}

function nArray() {
var ogStar = [];
for (var i = 0; i < star.length; i++) {
if (star[i].x > 0) {
ogStar.push(star[i]);
}
}
star = ogStar;
}

function moveStar() {
this.x -= this.speed;
}

function seeStar() {
stroke(255, 255, 255, 250);
strokeWeight(random(1, 5));
point(this.x, this.y);
}

function drawStar() {
var star = {x: width,
pdist: 100,
speed: 5,
starsize: round(random(0, 5)),
y: round(random(0, height / 4)),
move: moveStar,
display: seeStar
}
return star;
}

function setGradient(x, y, w, h, c1, c2, axis) {
noFill();
if (axis == yaxis) {  // Top to bottom gradient
for (var i = y; i <= y+h; i++) {
var inter = map(i, y, y+h, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(x, i, x + w, i);
}
}
}
``````

For this project, I wanted to mimic the moment of a sunset on the horizons of an ocean. I used four waves to create a different movement between the others. I also included stars slowly throughout to capture the day to night lapse. And to make it a little fun on the part of the sun, the stroke weights were in a random order so that it captures the movement of the disappearing sun. I had a lot of fun with this project, but I struggled a bit in the beginning with the details of the wave. But I think that the templates on the course page helped a lot with my other objects.

## Looking Outwards – 10

From the Energy Futures project in 2012, the Algae Curtain was a part of the Living Laboratory. Materials used for this project includes: clear tubing, silicon casts, cultures of algae (specifically Nannochloropsis), nutrients for the algae, electronics and pumps, and lighting. The tubes are weaved into drapes suspended from the windows and algae is pumped inside the textile, where it performs photosynthesis to produce a bio-fuel for local use. This structure provides a permanent infrastructural support for the Future Fruits and it also formed micro-ecologies inside the plastic tubes. I find this project really unique because living organisms are integrated with a building’s structure and not only does it provide some sort of structural assistance, it could also provide fuel!

Rachel is a researcher, educator, and a designer who trained at the Royal College of Art. She specializes and studies living environments and their responses to the environments. She likes to explore emerging technological and biological futures by integrating technology, space, and living materials to create unique environments and experiences. Her past works not only showcases a new role for designers to innovate and intervene at an urban scale, but they also offered collaborative tools for public engagement activities/practices.

Other works by Studio Loop.pH:
Loop.pH is a studio based in London that experiments across the fields of the sciences, architecture, and design. This studio was founded so that people are able to create visionary experiences that can help them dream or re-imagine new visions for the future.

## Judy Li-Project-09-Portrait

``````/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-09
*/

var friendsImage;

var myImageURL = "https://i.imgur.com/1nenA0cl.jpg";
}

function setup() {
createCanvas(480, 480);
background(0);
frameRate(100);
}

function draw() {
var px = random(width);
var py = random(height);
var ix = constrain(floor(px), 0, width-1);
var iy = constrain(floor(py), 0, height-1);
var theColorAtLocationXY = friendsImage.get(ix, iy);

noStroke();
fill(theColorAtLocationXY);
push();
scale(random(.25, 3));
ellipse(px, py, 6, 6);
pop();

noStroke();
var sizeP = random(5, 10);
var theColorAtTheMouse = friendsImage.get(mouseX, mouseY);
fill(theColorAtTheMouse);
ellipse(mouseX, mouseY, sizeP);
}``````

For this project, I wanted to create a portrait of my friend that showcases our fun and bubbly excursion in the Nolita area of New York. Because the background is full of color and is very vibrant, I wanted the computational background to resemble that as well. I added in the function of the mouse so that the user and control the parts he/she want to make prominent, such as the background text and the person herself!

## Looking Outwards – 09

For this week, I looked over Veronica Wang’s Looking Outward posts. I found this particular work interesting because I have been fascinated by designers that focus their works on digital fabrication and computation.

Veronica wrote in her post:

I am inspired by Travis Fitch’s art pieces that are generated from minimal surface geometries. I was introduced to his work by one of his former thesis advisors on minimal surface design and the process. He used Rhino modeling as well as a custom Grasshopper script to create a minimal surface module, with inputs being curves or meshes. I have also tried playing with similar scripts and using components such as ‘mesh relaxation’, ‘exoskeleton’, and ‘iso surface’. His wearable pieces were taking 3D printed rigid modules and connecting them to create a flexible piece of ‘fabric’. There are also many different materials in his products, including porcelain, metal, and nylon.

I agree with Veronica on how this work can inspire others. I feel that designing clothes or a fashion line based on a digitally fabricated medium  is still relatively new and I believe that pursuing this sort of work can open up new doors towards the fashion/costume design scene. A lot of my friends majoring in art also told me how great it would be if some of us could trade skills so that they could be able to do more unique projects and I agreed with them. With the introduction of computational software, other artists/designers can incorporate that into their work to create something new and the outcomes could be amazing!

## Looking Outwards – 08

Lemercier is a French artist that studies and focuses his works on our perception of light projection in space. His projection performance, some of them live, have been seen throughout the world starting in 2006. He has an interest in physical structions along with light mapping. He founded a visual label, AntiVJ, with a partner in 2008; and has kept it going until 2013.  He then founded a new studio in Brussels, which focused on development and research of installations and experiments using light projection in space. His past works include working for Mutek, a music festival in which he worked with stage design, Flying Lotus and Portishead’s Adrian Utley – both whom are artists, and others. Starting in 2010, Lemercier focused more on installations and gallery work. From then, his works/projects have been exhibited at the China Museum of Digital Art, The Sundance Film Festival, and the Art Basel Miami.

Joanie Lemercier relates to his audience by including his process/initial works throughout his talk/videos. The audience is able to follow how he got to his next iterations/prototypes and the direction he takes next. His works fascinate me because he uses light as a medium and space as a canvas. I have never thought of using light as a medium before, but more of a tool/accessory. I really admired his thoughts and his process works, especially the ones shown on his twitter because they are raw and offers me fresh perspectives on material and tools. When he drew landscapes initially, he knew that something was missing. He was inspired by real time and space events of certain moments and used light to give it more living qualities and dynamics through moving projections.

Eye of Festival – Joanie Lemercier: Vimeo video shown above

Joanie Lemercier: A brief introduction on the eye of festival website

Nimbes Project: A teaser video showcasing Nimbes, an audiovisual piece.