## Final Project

For my final project I created an animation of a robot watching a tree grow through different seasons. I was able to create what I proposed in that the eyes watch the tree grow and there is something different about the robot in each season. I modified the tree example from lab so that it would grow at a steady rate. There is not much different between the project and my proposal except that I added a bit to summer and fall that were not mentioned. Overall some aspects of this project were harder to make than I thought, but it was a lot of fun to create.

``````//Rebecca Enright
//renright@andrew.cmu.edu
//Section A
//Final Project

//variables for rain/ snow/ leaves locations
var x;
var y;
//variable for ground color
var c;
//create object for umbrella
uX = 215;
uY = 240;
uR = 100;
uS = 50;
var umbrella = {locationX: uX, locationY: uY, left: uR, right: uS};

function setup() {
createCanvas(600, 400);
frameRate(10);

}

function draw() {
background(0, 220, 255);
//create variable for tree growth
var growth = 0;
growth = growth + (millis()/4000);
//create condition to stop growth
if (growth > 30) {
growth = 30;
}

//create conditionals to change scene
if (second() <= 14) {
MakeItRain();
}

if (second() > 14 & second() < 29 ) {
summerSun(growth);
}

if (second() >= 29 & second() < 44) {
autumn(growth);
}

if (second() >= 44) {
LetItSnow();
}

//call tree function
push();
translate(400, 350);
drawBranch(0, growth);
pop();
//call robot functions
drawRobot(growth);

}

//create tree
function drawBranch(depth, len) {
stroke(215, 150, 60);
line(0, 0, 0, -len);
push();
translate(0, -len);
drawTree(depth + 1, len);
stroke(0, 200, 0);
pop();

}

//create tree
function drawTree(depth, len) {
//variable for tree swaying
var angle = 5 * (noise(millis()/4000) - 0.5);
//conditional for number of branches
if (depth < 10) {
drawBranch(depth, len);
drawBranch(depth, len);
}
}

//create general draw robot function
function drawRobot(growth) {
//drawRock();
drawRobotBody();
}

//draw robot face
fill(200);
rect(200, 250, 25, 25);
//draw robot eyes
movingRobotEyes(growth);
//draw robot smile
fill(255);
arc(218, 270, 10, 10, 0, PI);
//draw robot antenna
fill(200);
rect(210, 240, 5, 10);
}

//function for robot body
function drawRobotBody() {
//draw neck
fill(200);
rect(207, 275, 10, 5);
//draw stomach
fill(200);
rect(200, 280, 20, 30);
//arm
fill(200);
rect(195, 280, 10, 20);
rect(195, 300, 30, 10);
//bolts for arm
fill(190);
ellipse(200, 285, 5, 5);
ellipse(200, 305, 5, 5);
//legs
fill(200);
rect(200, 310, 30, 10);
rect(220, 310, 10, 25);
//bolt for leg
fill(190);
ellipse(225, 315, 5, 5);
//foot
fill(200);
rect(220, 335, 15, 5);
}

//create rock function for robot to sit on
function drawRock() {
fill(175);
ellipse(200, 325, 50, 25);
}

//create snow function for winter
function LetItSnow() {
//draw ellipse
fill(255);
//variables for snowflake locations
//x location
x = 10 + random(5);
//y location
y = 0;
y = 2 * y;

//make loop for snowflakes
for (var i = 0; i < width; i++) {
sX = x * i;
sY = y + random(300);

r = random(5, 10);
ellipse(sX, sY, r, r);
}
//create snowy ground
fill(255);
rect(0, 295, 599, 104);
//draw red dot for robot antenna
fill(255, 0, 0);
ellipse(213, 240, 5, 5);
//draw scarf
scarf();
//draw rock to sit on
drawRock();
}

//create rain function for spring
function MakeItRain() {
stroke(0, 0, 255);
//reset variables for x and y locations
//x location
x = 5;
//y location
y = 0;
y = y + 1;

//make loop for rain drops
for (var i = 0; i < width; i++) {
//rain drop x and y location
rX = x * i;
rY = y + random(300);
line(rX, rY, rX + 5, rY + 5);
}
//reset stroke color
stroke(0);

//call workUmbrella to open umbrella
workUmbrella();

//create ground
fill(0, 190, 0);
rect(0, 295, 599, 104);
//draw rock to sit on
drawRock();
}

//create function for umbrella
function workUmbrella() {
fill(255, 0, 0);
arc(umbrella.locationX, umbrella.locationY, umbrella.left, umbrella.right, PI, 0);
fill(0);
ellipse(umbrella.locationX, umbrella.locationY - 25, 5, 5);
}

//create function for scarf
function scarf() {
fill(0, 190, 0);
rect(200, 275, 25, 5);
fill(200);
rect(220, 280, 5, 10);
fill(0, 190, 0);
rect(220, 290, 5, 10);
}

//create function for summer
function summerSun(growth) {//lX, lY, lS, lC, len) {
//create sun
fill(255, 255, 0);
ellipse(100, 100, 50, 50);
//create rays for sun
push();
translate(100, 100);
for (i = 0; i < 8; i++) {
//create sun rays
rotate(QUARTER_PI);
triangle(30, 30, 40, 60, 50, 50);
}
pop();
//create ground
fill(0, 227, 0);
rect(0, 295, 599, 104);

//call leaves
push();
translate(400, 350);
drawBranch2(0, growth);
pop();
//create flower for antenna
flower();
//create rock to sit on
drawRock();
}
//create second drawbranch function for green during summer
function drawBranch2(depth, len) {
stroke(0, 200, 0);
line(0, 0, 0, -len);
push();
translate(0, -len);
drawTree2(depth + 1, len);
stroke(0, 200, 0);
pop();

}

//create second drawtree for green during summer
function drawTree2(depth, len) {
//variable for tree swaying
var angle = 5 * (noise(millis()/4000) - 0.5);
//conditional for tree branches
if (depth < 12) {
drawBranch2(depth, len);
drawBranch2(depth, len);
}
}

//create function for fall
function autumn(growth) {
//create ground
fill(0, 210, 0);
rect(0, 295, 599, 104);
//create leaves on ground
var ln = 10;
ln = ln + millis()/5000;

for (i = 0; i < ln; i++) {
//set random leaf locations around base of tree
var lx = random(340, 460);
var ly = random(350, 390);
//create leaf size
var ls = 1;
ls = growth//1 + millis()/5000;
//draw leaves
fill(random(255), random(255), 0);
ellipse(lx, ly, ls/2, ls/2 + 2);
}
//create background
fallLeafBackground();
//draw  pumpkin for robot to sit on
drawPumpkin();
}

//create function for leaf background
function fallLeafBackground() {
//reassign pixel vairables so m moves by 10
//and reassign y so that it is randomized
for (var i = 0; i < width; i++) {
//leaf locations
var blx = 25;
blx = blx * i;
var bly = random(1,300);
//draw leaves
fill(random(255), random(255), 0);
ellipse(blx, bly, 5, 10);

}

}

//put flower on antenna during summer
function flower() {
//center
fill(255, 255, 0);
ellipse(215, 235, 5, 5);
//petals
push();
translate(215, 235);
for (var i = 0; i < 10; i++) {
rotate(QUARTER_PI);
fill(255);
ellipse(5, 0, 5, 5);
}
pop();
}

//create function so that robot eyes move
function movingRobotEyes(growth) {
//variable for robot pupil y location
var ey = 262;
ey = ey - (millis()/4000)/10;
//conditional to limit eye location
if (ey < 259) {
ey = 259;
}

//draw robot eyes
fill(255);
ellipse(210, 260, 10, 10);
ellipse(225, 260, 10, 10);
//pupil
fill(0);
ellipse(212, ey, 5, 5);
ellipse(227, ey, 5, 5);
}

function drawPumpkin() {
fill(255, 150, 0);
ellipse(200, 325, 50, 25);
fill(0);
//eyes
triangle(190, 325, 195, 320, 200, 325);
triangle(205, 325, 210, 320, 215, 325);
//mouth
rect(190, 330, 25, 2);
rect(195, 332, 5, 2);
rect(205, 332, 5, 2);
}

``````

## Final Project Proposal

For my final project I would like to make an animation of a robot planting a plant, and then sitting and watching it grow through all kinds of weather. Below I have included some sketches of what I hope to create.

The robot would also change depending on the weather, for instance if it rained it would have an umbrella, or if it snowed it would have a scarf. The weather would cycle through several times while the tree continued to grow, and the robot would just sit there and watch it. It’s eyes would also progressively follow the tree’s height.

## Looking Outwards-12

This week I looked at Glenn Marshall’s work called Statue, which displays a dramatic look at the Statue of Liberty being crucified. I also looked at the Hyphae Zoetrope on Nervous System, which is an animation of a plant-like figure growing.

I find these both interesting because they each have a component of the animation that I aim to make. I admire the growing branch-like look to the hyphae zoetrope, and I admire the design and camera work of the Statue project. They are different in their content, but share the 3D aspect to their projects.The meaning behind the works also appear to differ as Statue appeared largely political, while the Hyphae Zoetrope was more intricate and appeared to be designed for aesthetic purposes.

Statue was created on November 9, 2016, while the Hyphae Zoetrope was created in 2014.

A link can be found here for the statue project, while a link can be found here for the Hyphae Zoetrope. The video of the Statue project can also be found below.

## Looking-Outwards-11

This week, I looked at an instrument called the MikroKontrolleur that allows you to “play” your voice. It was invented in 2015-2016 by Katharina Hauke and Dominik Hildebrand Marques Lopes.

I really admire the idea behind this, and I think it’s an interesting concept and creation. I don’t particularly like the sound it produces as you can hear in the video, it sounds like something from a horror movie. Nonetheless, I find it very interesting.

This instrument is computational because it analyzes different physical aspects of the singer in order to affect the computed portion of the instrument -the aspects of it that cause such varying sounds to be made.

The link to the article describing the instrument can be found here along with a video. Below are some pictures taken of a singer using the instrument.

## Project-11-Composition

For this project, I thought of how the turtle could respond to the mouse and I really liked the idea of a drawing pad, and so I recreated that. The turtle follows the mouse and draws as the mouse moves. It is similar to the snake assignment, but in some aspects was easier for me to understand how it worked.

``````//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//turtle project

//global location variable

var x = 0;
var y = 0;

function setup() {
createCanvas(400,400);
background(75, 175, 255);

}

function draw() {
var t1 = makeTurtle(x, y);
t1.penDown();
t1.right(90);
t1.setColor(255);
//reassign x and y to = mouseX and mouseY so it draws
t1.goto(mouseX, mouseY);
x = mouseX;
y = mouseY;

}

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;
}``````

## Looking-Outwards-10

I looked at Emily Gobeille’s projects for this week’s looking outwards, and I really like her work Carnival Cruise, which is an interactive aquarium that she designed for Arnold R&D. Her work was displayed on store windows across 6 cities, and change depending on the viewer. Generally, though, she appears to have a diverse selection of interactive projects for a variety of employers.

Gobeille designed it so that viewers can call and enter a fish designed from the sounds they make into the aquarium. They also can just have the fish react depending on their movement. The fish are described much like Pokemon in how they are able to be evolved and fed each time you call in.

I really like this project because it’s so interactive and fun. Anyone can play and admire it as they walk past, and it seems like it would make someone’s day brighter if they were to see it, which I think is important for a project to do.

The video for her project can be seen below, while the link can be found here.

## Project-10-Landscape

This project was a lot of fun. I had trouble at first, but it got easier as I worked on it. I was inspired by pac man and video games in general, and so I tried to reflect retro video game pixels in the background and put pac man and the ghosts that follow him as my objects. As you can see, they become a random size each time they cycle through.

``````//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//Generative landscape

//initialize variables for background pixels
var m = 1;
var s = 20;
var y = 100;

//create variable for pacman to be an object
//move = x location, b = y location, r = ellipse size
var pacman = {move: 10, b: 200, r: 100};

//create variable for ghost to be an object
//go = x location, chase = y location, r = ellipse size
var ghost = {go: 1, chase: 200, r: 100};

//initialize distance variables
var dist1;
var dist2;
var dist3;

function setup() {
createCanvas(600, 400);
//make pixels move quickly across screen
frameRate(50);
}

function draw() {
background(0);

//repeats pixelate to have multiple pixels in background
for (var r = 0; r < 20; r++) {
pixelate();
}

//create pacman and ghosts
createPacman();
createGhostOne();
createGhostTwo();
createGhostThree();

//restablish fill for background pixels
fill(random(1,255), random(1, 255), random(1, 255));

}

function pixelate() {
//reassign pixel vairables so m moves by 10
//and reassign y so that it is randomized
m = m + 10;
y = random(1,400);
//draw rectangle(pixel)
rect(m, y, s, s);
//create contidional to randomize pixel fill, size, and reset location to 0
if (m > width) {
m = 0;
fill(random(1,255), random(1, 255), random(1, 255));
s = random(10,50);
}
}

function createPacman() {
//create variable for pacman to be an object
//move = x location, b = y location, r = ellipse size, c = fill color

fill(255, 255, 0);
arc(pacman.move, pacman.b, pacman.r, pacman.r, HALF_PI, TWO_PI);

//make pacman move
pacman.move = pacman.move + 1;

//make pacman move back to start
if (pacman.move > width + 500) {
pacman.move = -50;
pacman.r = random(10, 100);
}
}

function createGhostOne(){
//create arc (ghost)
fill(255, 0, 0);
arc(ghost.go, ghost.chase, ghost.r, ghost.r, PI, TWO_PI);

//set variable for distance between pac man and ghost
dist1 = 200;
ghost.go = pacman.move - dist1;
ghost.r = pacman.r;
}

function createGhostTwo() {
//create arc (ghost)
fill(0, 255, 0);
arc(ghost.go, ghost.chase, ghost.r, ghost.r, PI, TWO_PI);

//set variable for distance between pac man and ghost
dist2 = 300;
ghost.go = pacman.move - dist2;
ghost.r = pacman.r;
}

function createGhostThree() {
//create arc (ghost)
fill(0, 0, 255);
arc(ghost.go, ghost.chase, ghost.r, ghost.r, PI, TWO_PI);

//set variable for distance between pac man and ghost
dist3 = 400;
ghost.go = pacman.move - dist3;
ghost.r = pacman.r;
}

``````

Below is my rough sketch for this project.

## Looking-Outwards-09

For this week’s Looking Outwards I read Kyle Lee’s and it looked really interesting as it was about artificial fish that are put on display at a festival in Tokyo, Japan. They were invented by TeamLab and were brilliantly put on display in shallow water to allude to real fish.

I agree with what Kyle Lee said about experiences; they are irreplaceable. However, I am not sure about whether we are heading down the right path in that so many seem to be technological. Rather than see real fish, large amounts of money and effort were put into this display which, although beautiful, cannot replace the real thing.

The link to the display can be found here, while the link to Kyle Lee’s Looking Outward can be found here.

Below is a video of the display. In it, you can see people standing ankle-deep in water, which the fish are projected upon.

## Project-09 Portrait

This is the self-portrait image I used for this project. I had a lot of trouble with uploading the image, I tried to use Imgur but couldn’t get it to work properly, and so I tried to publish it on here instead. Below is the code and computed portrait, I modified it so that it would be created out of randomly placed triangles.

``````//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//Portrait assignment

var portrait;

}

function setup() {
createCanvas(500, 500);
background(0);
frameRate(10);
}

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 = portrait.get(ix, iy);

noStroke();
fill(theColorAtLocationXY);
triangle(px + 10, py + 10, px, py, px - 10, py - 10);

}
``````

## Looking Outwards-08

Deray Mckesson and Daniel Sinyangwe are two activists in the Black Lives Matter Movement. They noted that they became such when they realize how different America is from the country they thought it be; specifically for McKesson, it was when he was in a crowd and got tear gassed during a protest.

I really admire their passion for fighting against police brutality and how earnest they are about it. They go so deeply into researching the issues and not just perpetuating every story they hear, but making sure that the facts are there and that they are truly helping their cause. They create multiple graphs and charts to demonstrate their information clearly and effectively. In particular though I admire the map of police murders of black people because it is so effective and dispels falsely conceived notions about how these are isolated incidents.

I linked to their two websites here and here. One is specifically about mapping the police violence, while the other is about the movement in general. Their video can be seen below.