For my final project, I created a “capture the fly” type game. I thought that this would be a prototype for a phone screen, hence the attempted phone screen sizing. My inspiration for the game comes from the song “Fireflies” by Owl City. The song is about dealing with insomnia and since I also have trouble sleeping, I thought it would be a good fit to create a pretty boring, softly colored game that people can play to fall asleep.

The mechanics are pretty simple. Here you are waving around a circle using the arrow keys, on a phone, it would be your finger. Your objective is to capture the fireflies that are flickering in the night. As you do so, your “jar/eater” becomes heavier and moves around slower, due to a slower speed function and increased computing use. The slowing is meant to make your movements more slowly and careful as you start drifting into sleep. Additionally, for decoration, the more fireflies you gather, the more that the tree will grow. This serves as a visual indicator of where you are in the game.

Here is a picture of the early stages of the game:

Here is a picture of later stages of the game:

sketch-33.js

//Victor Tavarez
//Secion D
//vtavarez@andrew.cmu.edu
//Final Project


var score = 0;//contains the images for the story board, start with blank
var particles =[];
var trueHeight;
var eaterX;
var eaterY;
var eaterSize=20;
var eaterSpeed = 10;

// draws the "jar that captures fireflies"
function drawJar(){
    fill(200,215,255,200);
    ellipse(eaterX,eaterY, eaterSize,eaterSize);
}
// moves the "jar that captues fireflies"
function moveJar(){
    //move jar within grid
    if (keyIsDown(LEFT_ARROW)&(eaterX-eaterSize/2 > 0)){
        eaterX-=eaterSpeed
    }
    if (keyIsDown(RIGHT_ARROW)&&(eaterX+eaterSize/2 < width)){
        eaterX+=eaterSpeed
    }
    if (keyIsDown(UP_ARROW)&&(eaterY-eaterSize/2 > 0)){
        eaterY-=eaterSpeed
    }
    if (keyIsDown(DOWN_ARROW)&&(eaterY+eaterSize/2 < trueHeight)){
        eaterY+=eaterSpeed
    }
}
//moves allows for the capture of firefly, increases score
function jarCapture(b,px,py){
    var limits  = dist(eaterX,eaterY, px, py);
    if(limits < eaterSize/2){
        score+=1;
        eaterSize+=b.size/4;
        b.x=eaterX;
        b.x=eaterY;
        particles.pop(b);
        if ((score%4) ==0){
            makeParticle(random(0,width),random(0,trueHeight),
                                       random(-10,10), random(-10,0),
                                       random(2,10));
        }
    }
}
//gives firelfies free motion within the space
function moveParticle(){
    this.x += this.dx;
    this.y += this.dy;

    if (mouseX == this.x & mouseY ==this.y){
        this.dx = 0;
        this.dy = 0;
    }
    if (this.x > width) { // bounce off right wall
        this.x = width - (this.x - width);
        this.dx = -this.dx 
    } else if (this.x < 0) { // bounce off left wall
        this.x = -this.x;
        this.dx = -this.dx;
    }
    if (this.y > height-50) { // bounce off bottom
        this.y = (height-50);
        this.dy = -this.dy;
    } else if (this.y < 0) { // bounce off top
        this.y = -this.y;
        this.dy = -this.dy;
    }
    //stop bugs from crawling if they reach a dark spot in underlying image;
}
//draws each individual firefly
function drawParticle(){  
    for(var i=this.size; i > 0; i--){
        //looks like they are flickering
        fill(this.cr,this.cg,this.cb,random(0,100));
        ellipse(this.x,this.y,i+10,i+10);
        fill(this.cr,this.cg,this.cb); 
        ellipse(this.x,this.y,i,i);
    }
}
//births new fireflies
function makeParticle(px,py,pdx,pdy,size){ //generate individual bugs
    var xr = 222;
    var xg = 250;
    var xb = 200;
    b = {x:px, y:py, 
         dx:pdx, dy:pdy, 
         age:0, 
         step: moveParticle, 
         draw: drawParticle, 
         cr:xr,
         cg:xg,
         cb:xb,
         size:size,
     }
    return b;
}
//draws the story board where score and directions are kept.
function drawStoryBox(){
    noStroke();
    fill(80,150,100);
    rect(0,height-50,width,70);//border between story box and canvas
    fill(50,55,55);
    textStyle(BOLD);
    text(score,width-20,height-20);//our button for changing to next page
    
    textAlign(LEFT);
    textSize(12);
    text("Use Arrow Keys to capture the Fireflies.", 10,trueHeight+30)
}
//resents the amount of dragon flies while making the game a little more difficult
function reset(){
    setup();
    eaterSize*=.75; // decrease size by 75%
    eaterSpeed-=1;  // decrease seed
    if (eaterSpeed <= 0){ //absolute reset of game
        setup();
        score=0;
        eaterSize=20;
        eaterSpeed=10;
    }
}

function setup(){
    createCanvas(300,500);
    trueHeight = height-50;
    eaterX = width/2;
    eaterY = trueHeight/2;
    frameRate(35);
    for(var i=0; i < 10; i++){
        var newParticle = makeParticle(random(0,width),random(0,trueHeight),
                                       random(-10,10), random(-10,0),
                                       random(2,10));
        particles.push(newParticle);
    }
}
var angle;
function draw(){
    background(50,60,100)    
    for (var i=0; i < particles.length;i++){
        var b = particles[i];
        b.step();
        b.draw();
        jarCapture(b,b.x,b.y,b.size);
    }

    drawStoryBox();// has the directions to the game
    drawJar();
    moveJar();  
    //reset the setup time you run out of fireflies, after 10 times, game resets
    if (particles.length == 0){
        reset();
    }

    //tree for decorations
    angle = 10*(noise(millis()/4000)-0.5);
    push();
    fill(0);
    translate(width/2, trueHeight+5);
    drawBranch(0, 10);
    pop();  
}
function drawBranch(depth,len) {
    strokeWeight(1)
    stroke(0);
    line(0, 0, 0, -len);
    push();
    translate(0, -len);
    drawTree(depth + 1, len);
    pop();
}
function drawTree(depth,len) {
    if (depth <= score/10){ 
        push();
        rotate(radians(20 + angle));
        drawBranch(depth,len);
        pop();
        push();
        rotate(radians(-10+ angle));
        drawBranch(depth,len);
        pop();
    }
}

For my final project I would like to create an animation that first draws itself, then tells a story or narrative. I would like to use elements of a drawing feature to incorporate forms of interaction for the user. I think the story would include sounds and possibly a narration. I think it would be extremely short and comical. At the end I hope to make it an audiovisual interactive piece.

For images of the animation, I will take a simplistic approach to match my artistic capabilities. Much like the walking man animation that we have used for homework, I will be drawing my own stick figures to be persons in this story. I will try to create an interactive environment for the persons in my story. I think that I can create the ability for users to draw pieces of the environment for the characters in my animations to interact with. 

Noise Turbulence Doodles by Raven Kwok is a fun interactive piece that allows the user to draw generative patterns. I really like this piece because of its fluidity and randomness. I think Kwok could have taken this a step further by allowing the user to decide what direction the generative art could go (since it goes to the upper right corner at the moment.

Emoji Portraits by Yung Jake uses simple emoji’s to create portraits of well known figures by using emoji.ink. I really like that Jake uses very common images to construct his portraits. I think that these pieces could be improved if they were interactive and showed Jakes drawing process.

I think for my final project I would like to incorporate elements of the two pieces by ensuring that my project is both interactive, and utilizes very recognizable images. I think this could be done creating a drawing tool for people who like to see images unravel before their eyes.

The Computer Orchestra is a crowdsourcing musical tool that allows people to upload sounds into a database for musicians to access and play. The technology was developed by Fragment.in. The crowdsourcing and interface of the tool most interest me. I think it is pretty unique that many people can contribute to the work of one musician. I think this makes the possibility for musical sound is just far wider than one can understand. In addition, I think the interface is pretty unique because it uses a Kinect and several computers to play. Under the right maestro, I think this tool can produce some really great sounding music as shown in the TEDx video.

The Computer Orchestra from computer-orchestra on Vimeo.

My approach to this project was simple. I was looking at previous assignments, particular homework 10-b and thought how can you add movement to it. I think the outcome is fun because there are several designs that come from just a few adjustments to each of the turtles.

sketch-43.js

//Victor Tavarez
//Secion D
//vtavarez@andrew.cmu.edu
//Project-11

var startFrame;

function setup(){
    createCanvas(800,800);
    strokeJoin(MITER);
    strokeCap(PROJECT);
    frameRate(8);
    startFrame = frameCount
    //use helper fcns to draw each row individually
}

function drawTurtle1(turtle1,step){
    turtle1.setWeight(2);
    turtle1.setColor(color(250,20,250));
    for (var i=0; i <10; i++){
        turtle1.penDown();
        turtle1.left(80*step);
        turtle1.forward(10);
        turtle1.right(90);
        turtle1.forward(10);
        turtle1.right(90);
        turtle1.forward(10*step);
        turtle1.left(90);
        turtle1.forward(10);
    }
}

function drawTurtle2(turtle2,step){
    turtle2.setWeight(2);
    turtle2.setColor(color(230,12,10));
    for (var i=0; i <10; i++){
        turtle2.penDown();
        turtle2.left(90*step);
        turtle2.forward(10*step);
        turtle2.right(90);
        turtle2.forward(10);
        turtle2.right(90);
        turtle2.forward(10);
        turtle2.left(90);
        turtle2.forward(10);
    }
}

function drawTurtle3(turtle3,step){
    turtle3.setWeight(2);
    turtle3.setColor(color(230,230,250));
    for (var i=0; i <10; i++){
        turtle3.penDown();
        turtle3.left(100*step);
        turtle3.forward(10*step);
        turtle3.right(90);
        turtle3.forward(10);
        turtle3.right(90);
        turtle3.forward(10*step);
        turtle3.left(90*step);
        turtle3.forward(10);
    }
}


function draw(){
    background(20);
    var step = (frameCount - startFrame)/30.0;
    for (var x = 20; x < width+200; x+=60*step){
        var turtle1 = makeTurtle(width/4,height/2);
        drawTurtle1(turtle1,step);
        var turtle2 = makeTurtle(3*width/4,height/2);
        drawTurtle2(turtle2,step);
        var turtle3 = makeTurtle(width/2,height/2);
        drawTurtle3(turtle3,step);
    }
}



//=====================Turtle Funcions Below from lecture notes===============

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

For this piece, I wanted to use the walking animation that we used in a previous assignment to take our walker on an adventure. I decided to make the figures of this adventure and was happy to figure out a way to make it seem like it is going really slow. There are times where he randomly disappears as everything else in this piece seemingly fades away. It was difficult to figure out the mechanics to making the looping work, but once I did I was able to apply it to the two main objects that I created. I was hoping to get the character to move around like a game but didn’t get that far. Maybe next time I will get it.

sketch-31.js

//Victor Tavarez
//Secion D
//vtavarez@andrew.cmu.edu
//Project-10-Landscape


var frames = []; // An array to store the images
var lamps = [];
var lights = []

//=====Code directly from HomeWork 9 for walking man
//---------------------------------------
function preload(){
    // These URLs are for the individual walk cycle images,
    // stored in the imgur album http://imgur.com/a/85DTu
    var filenames = [];
    filenames[0] = "http://i.imgur.com/svA3cqA.png";
    filenames[1] = "http://i.imgur.com/jV3FsVQ.png";
    filenames[2] = "http://i.imgur.com/IgQDmRK.png";
    filenames[3] = "http://i.imgur.com/kmVGuo9.png";
    filenames[4] = "http://i.imgur.com/jcMNeGq.png";
    filenames[5] = "http://i.imgur.com/ttJGwkt.png";
    filenames[6] = "http://i.imgur.com/9tL5TRr.png";
    filenames[7] = "http://i.imgur.com/IYn7mIB.png";
    // PUT CODE HERE TO LOAD THE IMAGES INTO THE frames ARRAY,
    // USING THE FILENAMES STORED IN THE filenames ARRAY.
    for (var i=0; i < filenames.length; i++){
        frames.push(loadImage(filenames[i]));
    }  
}
function setup(){
    createCanvas(600,400);
    imageMode(CENTER);
    //create lamps
    for(var i=0; i<6; i++){
        var rx=random(width);
        var rx2=random(width);
        lamps.push(makeLamps(rx));
        lights.push(makeLights(rx2));
    }
    frameRate(10);    
}
//---------------------------------------
function draw() {
    background(0,30,30,30);
    updateAndDisplayLights();
    removeLights();
    addNewLights();   
      
    updateAndDisplayLamps();
    removeLamps();
    addNewLamps();
    //walker from HW 9
}
function drawWalker(y){
    noStroke();  
    var currentFrame = frameCount % 8;
    push();     
    image(frames[currentFrame], width/2, height-50);
    pop()
}
function removeLamps(){
    var lampsToKeep = [];
    for (var i=0; i<lamps.length; i++){
        if (lamps[i].x + lamps[i].lampWidth >0){
            lampsToKeep.push(lamps[i])
        }
    }
    lamps=lampsToKeep
}
function removeLights(){
    var lightsToKeep = [];
    for (var i=0; i<lights.length; i++){
        if (lights[i].x + lights[i].size >0){
            lightsToKeep.push(lights[i])
        }
    }    
    lights=lightsToKeep

}
function addNewLamps(){
    var newLampsProbability = 0.06;
    if (random(0,1) < newLampsProbability){
        lamps.push(makeLamps(width));
    }
}
function addNewLights(){
    var newLightsProbability = 0.9;
    if (random(0,1) < newLightsProbability){
        lights.push(makeLights(width));
    }
}
function updateAndDisplayLamps(){
    for (var i=0; i<lamps.length; i++){
        lamps[i].move();
        lamps[i].display();
    }
}
function updateAndDisplayLights(){
    for (var i=0; i<lights.length; i++){
        lights[i].move();
        lights[i].display();
    }
}
function lampMove(){
    this.x+=this.speed;
}
function lightsMove(){
    this.x+=this.speed;
}
function lampDisplay(){
    fill(255,random(200,255),random(130,255));
    stroke(0);
    push();
    rect(this.x,0,this.lampWidth,this.lampHeight);

    rect(this.x,this.lampHeight+150,this.lampWidth,height)
    pop();

    drawWalker(this.lampHeight+75);
}
function lightsDisplay(){
    fill(random(200,255),random(230,255),random(200,255),40);
    noStroke()
    push();
    ellipse(this.x,this.y,this.size,this.size)
    pop();
}
function makeLamps(birthLocationX){
    var lamp = {x: birthLocationX,
                lampWidth: random(5,10),
                speed: -10.0,
                lampHeight: random(50,250),
                move: lampMove,
                display: lampDisplay}
    return lamp;
}
function makeLights(birthLocationX){
    var lamp = {x: birthLocationX,
                y: random(0,height),
                size: random(5,30),
                speed: -1*random(1,10),
                move: lightsMove,
                display: lightsDisplay}
    return lamp;
}

Base 8 by Chris Sugrue is an interesting piece that explores the negative spaces and movements between fingers, hands and arm in order to create the field of augmented reality. I highly admire the creative influence people have over this augmented reality drawn by the device. I think the designs are really elegant and visually pleasing, despite being based on technology.

Chris is a artist and programmer that works on interactive installations, audio-visual performances and experimental interfaces. She studied Fine Arts in Design and Technology at Parsons School of Design and has been utilizing technology in her artwork ever since.  Some of her other designs, such as Delicate Boundaries, also utilize lighting and user input in a similar way.

Base 8, Chris Sugrue, 2008

In week five Mercedes Reyes, wrote about Eyal Gever‘s Sublime Moments (2014). In the blogpost, Mercedes writes the artist’s use of hyperrealism to be ugly, yet very interesting due to his ability to “capture the ominous potential along with a beauty and serenity of natural forms in a poetic juxtaposition”. I believe that the pieces Gever presents are beautiful due to their ability to capture actions in still moments. I would disagree with Mercedes and say that the beauty in Gever’s works is in ability to capture kinetic sculptures in still live images. I would like to add that his use of 3D printing technology and photographs is powerful, as we get to see things occurring in a macro level. I think his ability to do so, give him the ability to become much more creative with each piece. For example in his Water Dancer 3D liquid Simulation as shown below represents his use of merging hyperrealism with other creative approaches.

Water Dancer 3D liquid simulation from Eyal Gever on Vimeo.

This project was very enjoyable. In my initial plans, I wanted to make the photo look like a pile of colorful sticks. I choose a photo with alot of colors and was just trying to figure out the best way to work in lines. I opted a program that allows the user to have a small level of control over the “dropping sticks.” As you can see below, the outcome is a bit of a blurred image.

sketch-100

//Victor Tavarez
//Section D
//vtavarez@andrew.cmu.edu
//Project-09

var myImage;

function preload() {
    var introduceImage = "http://i.imgur.com/UZISIgI.jpg";
    myImage = loadImage(introduceImage);
}

function setup() {
    createCanvas(500,500);
    background(0);
    myImage.loadPixels();
    frameRate(100);
}

function draw(){
    var px = random(width);
    var py = random (height);
    // accesses the color of each pixel as it is randomly selected 
    var ix = constrain(floor(px),0,width-1);
    var iy = constrain(floor(py),0,height-1);
    var theColorAtLoationXY = myImage.get(ix,iy);
    
    stroke(theColorAtLoationXY);
    for (var i=0; i<20;i++){
        push();
        // creating rotating lines
        var xmapping = map(mouseX, 0,width,0,20);
        var ymapping = map(mouseY, 0,height, 0, 20);
        translate(ix,iy);
        rotate(i*radians(36))
        line(i,i,random(xmapping),random(ymapping))
        pop();

    }

}

James George, is a artist that utilizes vision and tracking technologies to redefine what a photograph looks like. By applying the formats associated with feature films, interactive installations, and software products to advance the art of the moving image. He is a computer scientist and uses his skills to enhance the artwork. By exploring tools like microsoft’s kinect to figure out how to create virtual spaces.

I really admire that his work consist of collaborating with other researchers and artist, and taking photos and inserting them into digital spaces. I think projects like Clouds and Exquisite City are really fascinating because they make three dimensional spaces that one can venture through virtually. Clouds is my favorite because it collaborates with various artist and allows people to see the world through the lens of the artist. I think this has a very unique perspective to how to approach artwork, since we can see what the outcomes of the artist’s efforts can be.

Because his artwork is so collaborative, his presentation style is very unique as it brings in many other artist’s perspectives. He describes his work as a small portion of a new space within art forms. I think he effectively describes the medium of his work, since they are very technical. He describes the capabilities and limitations of said medium as well. When sharing my work, I think talking about my influencers, limitations and advantages are all good practices.

Eyeo 2015 – James George from Eyeo Festival // INSTINT on Vimeo.