chickoff@andrew.cmu.edu – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

Final Project

//Cora Hickoff
//Section D
//chickoff@andrew.cmu.edu
//Final-Project

//image of dog
var imgD;
//image of fish
var imgF;

//for iterating through dog and fish photos
var num = 0;

//images of dog
var loadedImagesD = [];
//images of fish
var loadedImagesF = [];

//for dragging mouse
var xarray = [];
var yarray = [];

//variables for moth
var x;
var y;
var dx;
var dy;

//variables for blue moth
var w;
var z;
var dw;
var dz; 

//variables for bee
var b;
var p;
var db;
var dp;

function preload() {

    var backgroundImageURL = "https://i.imgur.com/qDrD310.png";
    backgroundIMG = loadImage(backgroundImageURL);

    var sunImageURL = "https://i.imgur.com/6SDAJjt.png";
    sunIMG = loadImage(sunImageURL);

    var mothImageURL = "https://i.imgur.com/bGUODEv.png?1";
    mothIMG = loadImage(mothImageURL);

    var bluemothImageURL = "https://i.imgur.com/FR3gCsQ.png";
    bluemothIMG = loadImage(bluemothImageURL);

    var beeImageURL = "https://i.imgur.com/oTcCy45.png";
    beeIMG = loadImage(beeImageURL);

        //dog photos
        for (var i = 0; i < dogPhotos.length; i++) {
            loadedImagesD.push(loadImage(dogPhotos[i]));
        }

        //fish photos
        for (var i = 0; i < fishPhotos.length; i++) {
            loadedImagesF.push(loadImage(fishPhotos[i]));
        }
}

function setup() {

    createCanvas(700, 500); 

        var d = floor(random(0, dogPhotos.length));
        var f = floor(random(0, 0, fishPhotos.length));

        //images of dog
        imgD = loadedImagesD[d];
        //images of fish
        imgF = loadedImagesF[f];

        x = random(width);
        y = random(height);
        dx = random(-5, 5);
        dy = random(-5, 5);

        w = random(width);
        z = random(height);
        dw = random(-5, 5);
        dz = random(-5, 5);

        b = random(width);
        p = random(height);
        db = random(-5, 5);
        dp = random(-5, 5);
}

function draw() {

    background(200); 

    //photo of background
    image(backgroundIMG, 0, 0, 0);
    //photo of sun
    image(sunIMG, 0, 0, 0);
    //photo of dog
    image(imgD, 0, 0, imgD.width, imgD.height);
    //photo of fish
    image(imgF, 0, 0, imgF.width, imgF.height);

    //drags smaller dog image along canvas
    for (var i = 0; i < xarray.length; i++) {
        fill(0);
        image(imgD, xarray[i], yarray[i], imgD.width/2.4, imgD.height/2.4);
    }
    
    if (xarray.length > 8) {
        xarray.shift(1); 
        yarray.shift(1);
    }

    //photo of moth
    image(mothIMG, x, y, mothIMG.width/2.3, mothIMG.height/2.3);

        x += dx;
        y += dy;

        //if image exceeds canvas width,
        //set back to 0
        if (x > width) x = 0;
        else if (x < 0) x = width;
        //if image exceeds canvas height,
        //set back to 0
        if (y > height) y = 0;
        else if (y < 0) y = height;

    //photo of blue moth
    image(bluemothIMG, w, z, bluemothIMG.width/1.9, bluemothIMG.height/1.9);

        w += dw;
        z += dz;

        //if image exceeds canvas width,
        //set back to 0
        if (w > width) w = 0;
        else if (w < 0) w = width;
        //if image exceeds canvas height,
        //set back to 0
        if (z > height) z = 0;
        else if (z < 0) z = height;

    //photo of bee
    image(beeIMG, b, p, beeIMG.width/2.5, beeIMG.height/2.5);

        b += db;
        p += dp;

        //if image exceeds canvas width,
        //set back to 0
        if (b > width) b = 0;
        else if (b < 0) b = width;
        //if image exceeds canvas height,
        //set back to 0
        if (p > height) p = 0;
        else if (p < 0) p = height;

    //lightens screen when mouse over sun
    if (mouseX <= 398 & mouseX >= 320 && mouseY >= 30 && mouseY <= 105) {

        rectMode(CORNER);
        noStroke();
        fill(246, 215, 161, 70);
        rect(0, 0, 700, 500);
    }
}

function mouseDragged() {

    xarray.push(mouseX);
    yarray.push(mouseY);
}

function mousePressed() {

    //iterates through dog photos when mouse clicks its body
    if (mouseX <= 500 & mouseX >= 150 && mouseY >= 275 && mouseY <= 400) {
        var d = num % dogPhotos.length;
        imgD = loadedImagesD[d];
        num++;
    }

    //iterates through fish photos when mouse clicks blanket
    if (mouseX <= 700 & mouseX >= 0 && mouseY >= 130 && mouseY <= 250) {
        var f = num % fishPhotos.length;
        imgF = loadedImagesF[f];
        num++;
    }
}

var dogPhotos = [

    //rusty-colored dog
    "https://i.imgur.com/2vglMnn.png",
    //white/pink dog
    "https://i.imgur.com/IWbYamo.png",
    //lilac dog
    "https://i.imgur.com/I5xU7LF.png",
    //black dog
    "https://i.imgur.com/AAQQgCj.png",
    //blue dog
    "https://i.imgur.com/CTZSr9D.png",
    //mulberry dog
    "https://i.imgur.com/kt5rN0R.png"]

var fishPhotos = [
    
    //first fish
    "https://i.imgur.com/bD3GBjE.png",
    //second fish
    "https://i.imgur.com/eUWa3dx.png",
    //third fish
    "https://i.imgur.com/XJFlBTd.png"]

https://vimeo.com/246466644

When I started this project, I knew that I wanted to give users a hands-on experience, similar to the I Spy computer games that I’d play as a kid, which I drew inspiration from. The worlds created in these games still felt genuine despite the fact that they were within a computer screen. This is in part because photos from real life were used.

Moreover, I really loved the Mixies Assignment and that it felt like we were playing with puzzle pieces and working with our hands, even though we were doing this electronically. This is why I chose to use photos that I’ve taken and use similar methods from that assignment to make this project interactive and fun.

To download this project, click this zip file: chickoff-final-project

LookingOutwards-12-Chickoff

“On Feeling Melancholy” by the YouTube channel, the School of Life, is a video and animation (done in collaboration by animators Hannah Jacobs and Lara Lee) that I absolutely love and appreciate. This video struck me when I first saw it, and though I can go into a longer discussion about its contents and themes, I’ll focus on the music, sound, and art for this post.

“THE ARROW” by Emilio Yebra, an animator from Valencia based in Edinburgh, is also a great example of something I would love to implement into my final project. I love the rhythm of the music and sound effects and how it is quick, smooth, and matches the visuals.

I find that both of these projects are great examples of rich feeling and substance, particularly because of the way sound and visuals combine to strike the viewer or listener with feeling. I would love to create something along these lines in my final project, in that I give someone a unique feeling by stirring their senses.

Project-12-Proposal-Chickoff

For my final project, I have a couple of ideas. One is to create a generative landscape with more thought put into the images that are appearing. I’d like to create my own drawings of creatures and landscapes and implement them into a landscape. I’d also like to put ambient sound to evoke a sense of space. There could also be an interactive component where clicking on certain objects or animals causes them to make sound. I am very interested in hand-drawn animations, and so I’d love to see if I could do this through JavaScript.

Another would be to use objects and incorporate sound so that whenever the user clicked them they would have their own unique sound. This could be in the form of animals on a farm, the forest or ocean, and so on. I would like the user to be involved somehow, though I am not quite sure how that will be integrated.

Regardless of which route I take, I would love to hit the user with feeling through the use of music, sound, visuals, color, etc. as mentioned in my LookingOutwards-12 post.

Example of possible drawings to use in a generative landscape

Project-11-Composition-Chickoff

sketch

//Cora Hickoff
//Section D
//chickoff@andrew.cmu.edu
//Project-11

function setup() {

    createCanvas(480, 480);
    background(200, 99, 88);

    textSize(15);
    fill(217, 255, 255);
    text("Click the Canvas!", 10, 20);
   
    r = random(255);

      //lilac "spider legs"
      var t1 = makeTurtle(width/2, height/2);

      t1.setColor(color(179, 178, 134, 3));
      t1.setWeight(10);

    for (var p = 0; p < 100; p++) {

        t1.forward(p*3);
        t1.penDown();
        t1.right(147);
        t1.penUp();
        t1.penDown();

    //creates more dense "spider legs"
    for (var i = 0; i < width; i++) {

        t1.forward(6);
        t1.left(120);
        t1.right(90);
        t1.forward(90);
    }

    //creates less dense/sparser "spider legs"
    //(these are the circular shapes, which are not angular)
    for (var i = 0; i < width; i++) {

        t1.forward(6);
        t1.left(5);
        t1.right(9);
        t1.forward(6);
    }

        t1.penUp();

  } 
   
}

function mousePressed() {

    r = random(109);
    //dark red clouds
    var t2 = makeTurtle(mouseX, mouseY);

    t2.setColor(color(r, 0, 0, 35));
    t2.setWeight(30);

      for (var i = 0; i < 30; i++) {
          
          t2.forward(10);
          t2.forward(23);
          t2.right(random(1, 180));
          t2.forward(20);
          t2.right(78);

      }
      
      //light blue lines
      var t3 = makeTurtle(mouseX, mouseY);

      t3.setColor(color(191, 230, 255, 20));
      t3.setWeight(2);

    for (var p = 0; p < 100; p++) {

        t3.right(random(14, 26));
        t3.forward(.5);
        t3.right(random(3, 40));
        t3.forward(200);

    }
}

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

When I began this project, I aimed to enjoy myself because the concept of Turtle Graphics is inherently fun. I knew that I wanted the program to be interactive, so I integrated the mousePressed function so that every time the user clicked, they would create these cloud/berry-shaped turtles. To make things more interesting, I added a randomness factor to the color and shape so that the canvas would never be uniform and the user would still have fun seeing what new turtles they create.

LookingOutwards-11-Chickoff

In this week’s Looking Outwards post, I’d like to focus on two examples of sound art and computational music, mainly focusing on a specific artist first (whose project fits into the sound art option more than the computational music option). This artist is named Cevdet Erik, a Turkish artist and musician.

A particular work of his, SSS – Shore Scene Soundtrack / SSS – Sahil Sahnesi Sesi, is a sound installation in which the participant moves and slides their hands along a carpet in massage-like movements which cause the sound of the ocean to play. Typically putting his works in site-specific locations, Erik uses his knowledge from his studies of architecture and sound design and explores themes such as rhythm, time, and space in his work.

Still from SSS – Shore Scene Soundtrack / SSS – Sahil Sahnesi Sesi

What I really love about this sound installation is that it is based on user experience. Sound doesn’t just happen to you—you’re the source. I find that this project of Erik’s helps people feel more in touch with their bodies as fluid organisms rather than something that just helps them get around.

Lastly, I wanted to mention that I found out about this Artificial Intelligence named Aiva that was created to compose soundtracks for films, video games, tv shows, and commercials. Aiva was taught to compose classical music specifically. It was fascinating to many that the pieces created were still emotionally touching, and surprised audiences that an entity that is not human is capable of doing so: https://newatlas.com/creative-artificial-intelligence-computer-algorithmic-music/35764/

LookingOutwards-10-Chickoff

Swing is a video piece created by Yael Kanarek who is an Israeli American new media artist. She is based in New York City, where she was born, while having been raised in Israel. Returning to NYC for art school in 1991, she began her path into the internet art scene, while also having founded Upgrade!, a network of international artists concerned with combining activism with art and technology.

This artwork in particular is a screen capture of a computational video. As Kanarek states, “In this piece, a digital clock is used as the compositional device. The work runs live on a computer and is played by software that syncs video and audio with the computer’s internal clock. Thus, actual time is represented by the audiovisual experience on-screen.” More importantly, the children in the video (brothers and friends) discuss the issues of water scarcity in Israel as well as the lack of peace with Syria. Time being integral to such issues, and whether they are dealt with accordingly is incredibly present in this piece—the rhythmic swinging of the boy is the timekeeper.

Project 10-Chickoff

sketch

//Cora Hickoff
//Section D
//chickoff@andrew.cmu.edu
//Project 10

var terrain = [];

function setup() {

    createCanvas(480, 400); 
    frameRate(13);
    
    // create an initial collection of terrains
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        //"terrain" is the mountainous 
        //landscape at bottom of screen
        terrain[i] = makeTerrain(rx);
    }
}

function draw() {
    background(190, 140, 20); 
  
    updateAndDisplayTerrain();
    removeTerrainThatHasSlippedOutOfView();
    addNewTerrainWithSomeRandomProbability(); 

    drawTerrain(); 
}

function updateAndDisplayTerrain() {
    // Update the terrain's position, and display them.
    for (var i = 0; i < terrain.length; i++) {
        terrain[i].move();
        terrain[i].display();
    }
}

function removeTerrainThatHasSlippedOutOfView() {

    var terrainToKeep = [];
    for (var i = 0; i < terrain.length; i++) {
        if (terrain[i].x + terrain[i].breadth > 0) {
            terrainToKeep.push(terrain[i]);
        }
    }
    terrain = terrainToKeep; // remember the surviving terrain
}

function addNewTerrainWithSomeRandomProbability() {
    // With a very high probability, add a new terrain to the end.
    var newTerrainLikelihood = 1; 
    if (random(0,3) < newTerrainLikelihood) {
        terrain.push(makeTerrain(width));
    }
}

// method to update position of terrain every frame
function terrainMove() {
    this.x += this.speed;
}
    
// draw the mountain range
function terrainDisplay() {
    
    var floorHeight = 400;
    var bHeight = this.nFloors * floorHeight; 
    
        fill(154, 176, 119); 
        stroke(210, 164, 54); 
        strokeWeight(random(0,9));
        push();
        translate(this.x, height - 40);

        curveVertex(84,  91);
        curveVertex(68,  19);
        curveVertex(21,  107);
        curveVertex(0, -bHeight);

        stroke(74, 115, 119, 80); 
        strokeWeight(random(0,9));

    for (var i = 0; i < this.nFloors; i++) {

        beginShape();
        curveVertex(5, i * floorHeight);
        curveVertex(floorHeight, 34);
        curveVertex(68,  1);
        curveVertex(21,  107);
        curveVertex(400, 100);
        curveVertex(32, 100);
        endShape();

        beginShape();
        curveVertex(04, i * floorHeight);
        curveVertex(84,  91);
        curveVertex(68,  19);
        curveVertex(21,  107);
        curveVertex(3, 100);
        curveVertex(32, 100);
        endShape();
    }
        pop();

}

function makeTerrain(birthLocationX) {
    var trn = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: terrainMove,
                display: terrainDisplay}
    return trn;
}

function drawTerrain() {

    fill(230, 160, 190);
    
    beginShape(); 
    for (var x = 10; x < width; x++) {
        var t = (x) + (millis() * 40);
        var y = map(noise(t), 0, 30, 10, height);
        vertex(x, y); 
    }
    endShape();

    //moon
    fill(240, 230, 74, 250);
    strokeWeight(random(0,9));
    ellipse(0, 0, width - 1, height - 1);

    //crater 1
    fill(250, 245, 140, 100)
    strokeWeight(random(0,4));
    ellipse(100, 23, 33, 33);

    //crater 1 faded edge
    fill(250, 245, 230, 100)
    strokeWeight(random(0,4));
    ellipse(100, 23, 23, 26);

    //crater 2
    fill(250, 245, 140, 100)
    strokeWeight(random(0,4));
    ellipse(123, 93, 33);

    //crater 3
    fill(250, 245, 230, 78)
    strokeWeight(random(0,4));
    ellipse(23, 53, 53, 46);

    //crater 4
    fill(250, 245, 230, 78)
    strokeWeight(random(0,4));
    ellipse(23, 153, 13, 16);

    //crater 5
    fill(250, 245, 140, 100)
    strokeWeight(random(0,4));
    ellipse(180, 0, 30, 30);

}

When I started this project, I knew that I wanted to create a landscape that involved nature. I wasn’t sure where to go with this until I started thinking about the idea of doing the opposite of a really lush landscape, and create something a bit more dead or barren. When I sketched, I thought about the idea of an asteroid, planet, or even our moon coming a little too close to Earth, enough to hurt the organisms living there.

I knew that to create this uneasy feeling, I’d have to play with color as well as a dizzying/shaky effect, which usually signals that something is wrong, and not everything is as it should be.

Project-09-Chickoff-Self Portrait

sketch

//Cora Hickoff
//Section D
//chickoff@andrew.cmu.edu
//Project-09  

var underlyingImage;
var nPoints = 100;
var CYCLOID = 0; 

var titles = ["-●●●-"];
var curveMode = CYCLOID;

function preload() {

    var myImageURL = "https://i.imgur.com/cNsCKtz.png";
    underlyingImage = loadImage(myImageURL);
}

function setup() {

    createCanvas(480, 480);
    background(100, 170, 25, 100);

    underlyingImage.loadPixels();
    frameRate(100);

    var myImageURL2 = "https://i.imgur.com/Sna9w4t.png";
    img = loadImage(myImageURL2)
    
}

function draw() {

    textSize(23);
    fill(0, 200, 0);
    text("Eat healthy, ya picky eater!", 10, 30);

    textSize(23);
    fill(0, 200, 0);
    text("These edamame beans will make you strong", 10, 400);

    //photo of edamame beans 
    image(img, 0, height/4, width/2);

    //draws the picture
    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 = underlyingImage.get(ix, iy);

        noStroke();
        fill(theColorAtLocationXY);
        //little pie slices
        arc(px, py, 17, 17, 0, HALF_PI);
    
        //little edamame beans
        //controlled by mouse
        fill(78, 215, 0, 25); 
        text(titles[curveMode], mouseX, mouseY);
        //having this below means the 
        //beans will have no no stroke
        stroke(0);
}

function drawEdamameBeans (thisX, thisY) {

    fill(theColorAtLocationXY);
    titles(titles[curveMode], py, thisX, thisY);
}

My goal with this project was to focus on having fun and being playful with code versus feeling defeated by it. I started with a photo of me from freshman year eating my typical meal, broccoli (which I never ate because it was undercooked) and mac and cheese. That year was not very healthy for me food wise, and so I wanted to make fun of myself being a picky eater in this project, though I have improved a lot.

I decided to have arcs make up the photo because they looked like slices of pie, and then wrote code so that whenever the mouse was dragged a shape would be drawn. I chose “-●●●-“ to be the shape because it looks like edamame beans, which I found I enjoy eating. Plus they’re healthy. Now, by moving these around on the screen, I essentially am “feeding myself” if an edamame bean is moved towards my mouth!

LookingOutwards-09-Chickoff

In this Looking Outwards post, I’ll be talking about Michelle Janco’s Looking Outwards post for Week 5 where she focused on a a piece by Mikael Hvidtfeldt Christensen called “Algebraic Decay” which was uploaded on October 19, 2012. Christensen is a physicist who creates 3D generative artworks using open source applications called Structure Synth and Fragmentarium.

In terms of Michelle’s assessment of the work, I definitely agree with her that the landscape and makeup of the artwork is very biological and organic. It’s curious that it is difficult to recognize what this form is. There aren’t enough hints, and so the viewer is left to guess whether this is this a cell, a living creature, a landscape, and so on. I enjoy this guessing game and find it important that art has rational elements to ground it, but still remains ambiguous enough that it confuses the viewer and makes them question what they are looking at.

What does frustrate me however is that the background of this work is grey and barren, which only emphasizes the fact that this is computer generated. Whether this was Christensen’s intention or not, I can’t help but be reminded of the dull backdrop of programs such as Maya and Rhino3D. This makes it seem even more unlike something that could actually exist in our world, and fails to convince viewers that it does belong.

LookingOutwards-08-Chickoff

This is an Eyeo Lecture by Theo Watson and Nick Hardeman. I will specifically be focusing on and speaking about Watson, who is a British artist and programmer focusing on creating work that comes alive invites people to play. He received a BFA in Design and Technology at Parsons School of Design.

Watson, Hardeman, and Emily Gobeille have a small studio based out of Cambridge, Massachusetts and are very focused on the new ways of storytelling through creating interactive installations and visualizations.

Along with Gobeille, Watson has founded Design I/O which is a studio that specializes in “the design and development of cutting edge, immersive, interactive installations.” I really like what Watson said about interaction testing and that it “often involves getting on your knees and trying to make your body the size of a five year-old’s body, trying to see how that feels both from an interaction perspective but also a scale perspective.” It is crucial to see how viewers are going to experience your work, especially if they are coming into it from a new perspective, both literally and figuratively seeing this project, Connected Worlds, targeted a younger audience.

My favorite work of Watson’s and his teammates’ is called Funky Forest, which allows children to make trees using their bodies as well as direct water to their roots to keep them alive. Throughout the installation, they will hopefully discover that their actions have consequences and that creatures will either “appear or disappear depending on the health of the forest.”

Overall, I really appreciated how focused Watson was on the feedback and experience of the children who helped play test and eventually fully experience the Connected Worlds project. I found his positive attitude really refreshing. When children were asked to give feedback on some of the creatures, I found it compelling that they were the most descriptive about those they did not like or understand, as well as the fact that Watson and his teammates used that to their advantage by making more characters like that in order to intrigue the kids and make them question what they were seeing.