renright@andrew.cmu.edu – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

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.

sketch

//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) {
        rotate(radians(-10 + angle));
        drawBranch(depth, len);
        rotate(radians(20));
        drawBranch(depth, len);
    }
}

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

//function for robot head
function drawRobotHead(growth) {
    //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) {
        rotate(radians(-10 + angle));
        drawBranch2(depth, len);
        rotate(radians(20));
        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.

taken from http://www.creativeapplications.net/sound/mikrokontrolleur-an-instrument-to-play-ones-voice/

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.

sketch

//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 rad = radians(this.angle);
    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.

Picture of her display in a store front; taken from http://zany parade.com

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.

Carnival Interactive Aquarium from Todd vanderlin on Vimeo.

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.

sketch

//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.

sketch

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

var portrait;

function preload() {
    var myImage = "https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/10/IMG_5712-225x300.jpg";
    portrait = loadImage(myImage);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    portrait.loadPixels();
    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.

Eyeo 2015 – Deray Mckesson and Samuel Sinyangwe from Eyeo Festival // INSTINT on Vimeo.