Author: Sheenu You

Choo choo

Sheenu-Final Project

Because it can’t be viewed properly on WordPress, please download the file.

I was always fascinated in animation ever since I was little and I always wanted to create something that would help introduce people to making animations. I made this so anyone at any age can know or get the idea and possibly get inspired.

SAMPLE:

Instructions:

  1. Adjust your character to your preferred position. Please move the character slowly.
  2. Save the frame
  3. Adjust your character very slightly little by little and save the frame every time
  4. You can view your animation forward and backward by pressing and holding one of the arrow buttons.

sketch
FinalProject-DOWNLOAD

//Sheenu You
//Section E
//sheenuy@andrew.cmu.edu; 
//Final Project

//Initial X and Y coordinates for the Ragdoll Bodyparts 
var charx = 640;
var chary = 380;
var hedx = 640;
var hedy = 220;
var arlx = 640 - 160;
var arly = 380;
var arrx = 640 + 160;
var arry = 380;
var brlx = 640 - 80;
var brly = 650;
var brrx = 640 + 80;
var brry = 650;

//Arrays that register all the X Y coordinates of all the bodyparts
var xb = [];
var yb = [];
var xh = [];
var yh = [];
var xal = [];
var yal = [];
var xar = [];
var yar = [];
var xbl = [];
var ybl = [];
var xbr = [];
var ybr = [];

//Variables that track animation frames
var frameNumber = -1;
var frames = 0;

//Variables that test if functions are running. 
var initialized = 0;
var forward = 0;
var backward = 0;

function setup() {
    createCanvas(1280, 720);
    background(220);
    frameRate(24);
}

function draw() {
    noStroke();
	
    //Controls drawing of buttons
    var playing = 0;
    var blockyMath = 100;
    var distance = 150;

    background(255, 245, 195);

    body();

    fill(124, 120, 106);
    textSize(20);
    text("FRAMES: " + frames, 5, 20);

    //Draws NewFrame Button
    fill(252, 223, 135);
    rect(width/2 - 10, 80 + 10, 180, 100);
    fill(141, 205, 193);
    rect(width/2, 80, 180, 100);
	
    //Draws Play/Stop Button
    fill(252, 223, 135);
    rect((width/2) - distance - 10, 80 + 10, blockyMath, blockyMath);
    fill(235, 110, 68);
    rect((width/2) - distance, 80, blockyMath, blockyMath);
	
    //Fills triangle if one frame is made 
    if (frames >= 1){
        fill(255);
	} else { 
        fill(231, 80, 29);
	}
    triangle((width/2) - distance + 40, 40, (width/2) - distance + 40, 120, (width/2) - distance - 40, 80);
    push();
        fill(255);
        textSize(30);
        text("ADD", 610, 75);
        text("FRAME", 590, 110);
    pop();
	
	//Draws Rewind/Stop Button
    fill(252, 223, 135);
    rect((width/2) + distance - 10, 80 + 10, blockyMath, blockyMath);
    fill(211, 227, 151);
    rect((width/2) + distance, 80, blockyMath, blockyMath);
    if (frames >= 1){
        fill(255);
    } else { 
        fill(182, 204, 104);
    }
    triangle((width/2) + distance - 40, 40, (width/2) + distance - 40, 120, (width/2) + distance + 40, 80);
	
	//PLAY/Stop Button Functions-Cycles forward through frames if mouse is pressing the button 
    if (mouseX >= ((width/2) + distance - blockyMath/2) & mouseX <= ((width/2) + 
        distance + blockyMath/2) && mouseY >= 30 && mouseY <= 135 && mouseIsPressed && frames >= 1){
        frameNumber += 1
		//Cycles through all arrays
        charx = xb[frameNumber];
        chary = yb[frameNumber];

        hedx = xh[frameNumber];
        hedy = yh[frameNumber];

        arlx = xal[frameNumber];
        arly = yal[frameNumber];

        arrx = xar[frameNumber];
        arry = yar[frameNumber];

        brlx = xbl[frameNumber];
        brly = ybl[frameNumber];

        brrx = xbr[frameNumber];
        brry = ybr[frameNumber];

        playing = 1;
        initialized = 1;
        forward = 1;
		//Goes back to latest frame when mouse is released.
    } else if (forward == 1){
        frameNumber =xb.length - 1
        playing = 0;
        initialized = 0;
        forward = 0;
    }

	//REWIND/Stop Button Functions-Cycles backward through frames if mouse is pressing the button 
    if (mouseX >= ((width/2) - distance - blockyMath/2) & mouseX <= ((width/2) - distance + 
        blockyMath/2) && mouseY >= 30 && mouseY <= 135 && mouseIsPressed && frames >= 1){
        frameNumber -= 1;
		//Cycles through all arrays
        charx = xb[frameNumber];
        chary = yb[frameNumber];

        hedx = xh[frameNumber];
        hedy = yh[frameNumber];

        arlx = xal[frameNumber];
        arly = yal[frameNumber];

        arrx = xar[frameNumber];
        arry = yar[frameNumber];

        brlx = xbl[frameNumber];
        brly = ybl[frameNumber];

        brrx = xbr[frameNumber];
        brry = ybr[frameNumber];
        initialized = 1;
        playing = 1;
        backward = 1;
		//Goes back to latest frame when mouse is released.
    } else if (backward == 1){
        frameNumber = xb.length - 1
        playing = 0;
        initialized = 0;
        backward = 0;
    }

	//Allows frames to loop when animation is going forward
    if (frameNumber >= xb.length - 1 & playing == 1 && forward == 1){
        frameNumber = -1;
    }
	//Allows frame to loop when animation is going backward
    if (frameNumber <= 0 & backward == 1 && playing == 1){
        frameNumber = xb.length;
    }

}

//Draws Ragdoll 
function body(){
	
	//Shadow
    fill(252, 223, 135);
    ellipse(charx, 670, (chary/2) + 100, 30);
	
	//Ligaments
    //Neck
    push();
    stroke(249, 213, 151);
    strokeWeight(30);
    line(charx, chary - 80, hedx, hedy);
    stroke(190, 228, 171);
    
    //ArmLeft
    line(charx, chary - 80, arlx, arly);
    
    //ArmRight
    line(charx, chary - 80, arrx, arry);
    stroke(88, 203, 172);
    
    //FootLeft
    line(charx - 20, chary + 70, brlx, brly);
   
    //FootRight
    line(charx + 20, chary + 70, brrx, brry);
    pop();

    noStroke();
    rectMode(CENTER);
    
    //Head 
    fill(249, 213, 151);
    ellipse(hedx, hedy, 100, 100);
    fill(80);
    ellipse(hedx - 10, hedy - 10, 10, 20);
    ellipse(hedx + 10, hedy - 10, 10, 20);
    ellipse(hedx, hedy + 20, 30, 30);
    fill(249, 213, 151);
    ellipse(hedx, hedy + 15, 30, 30);
   
    //Left Arm
    fill(249, 213, 151);
    ellipse(arlx, arly, 50, 50);
  
    //Right Arm
    fill(249, 213, 151);
    ellipse(arrx, arry, 50, 50);
 
    //Left Foot
    fill(112, 47, 53);
    rect(brlx, brly, 50, 50);
  
    //Right Foot
    fill(112, 47, 53);
    rect(brrx, brry, 50, 50);
   
     //Character
    fill(190, 228, 171);
    rect(charx, chary, 100, 200);
    fill(88, 203, 172);
    rect(charx, chary + 50, 100, 100);
    fill(88, 203, 172);
    rect(charx + 30, chary - 50, 20, 100);
    rect(charx - 30, chary - 50, 20, 100);

    //MouseDrag Body
    if (mouseX >= charx - 50 & mouseX <= charx + 50 && mouseY >= chary - 100 && mouseY <= chary + 100 && mouseIsPressed){
        charx = mouseX;
        chary = mouseY;
    }
    //MouseDrag Head
    if (mouseX >= hedx - 50 & mouseX <= hedx + 50 && mouseY >= hedy - 50 && mouseY <= hedy + 50 && mouseIsPressed){
        hedx = mouseX;
        hedy = mouseY;
    } 
    //MouseDrag Left Arm
    if (mouseX >= arlx - 25 & mouseX <= arlx + 25 && mouseY >= arly - 25 && mouseY <= arly + 25&& mouseIsPressed){
        arlx = mouseX;
        arly = mouseY;
    }
    //MouseDrag Right Arm
    if (mouseX >= arrx - 25 & mouseX <= arrx + 25 && mouseY >= arry - 25 && mouseY <= arry + 25 && mouseIsPressed){
        arrx = mouseX;
        arry = mouseY;
    }
    //MouseDrag Left Foot
    if (mouseX >= brlx - 25 & mouseX <= brlx + 25 && mouseY >= brly - 25 && mouseY <= brly + 25 && mouseIsPressed){
        brlx = mouseX;
        brly = mouseY;
    }
    //MouseDrag Right Foot
    if (mouseX >= brrx - 25 & mouseX <= brrx +25 && mouseY >= brry - 25 && mouseY <= brry + 25 && mouseIsPressed){
        brrx = mouseX;
        brry = mouseY;
    }

}
function mousePressed(){
	//Register/records character coordinates to new frame when "New Frame" button is pressed
    if (mouseX >= (width/2) - 90 & mouseX <= (width/2) + 90 && mouseY >= 30 && mouseY <= 135 && mouseIsPressed){
    frameNumber += 1
    frames += 1
	
	//Push character coordinates to x y arrays.
    xb.push(charx);
    yb.push(chary);

    xh.push(hedx);
    yh.push(hedy);

    xal.push(arlx);
    yal.push(arly);

    xar.push(arrx);
    yar.push(arry);

    xbl.push(brlx);
    ybl.push(brly);

    xbr.push(brrx);
    ybr.push(brry);

	//Flash
    background(255, 0, 0, 90);
	}

}
//Resets all body parts to x y coordinates of last frame created when mouse is released
//and cycling is over. 
function mouseReleased(){
    if (initialized == 1){
        charx = xb[xb.length - 1];
        chary = yb[yb.length - 1];

        hedx = xh[xh.length - 1];
        hedy = yh[yh.length - 1];
 
        arlx = xal[xal.length - 1];
        arly = yal[yal.length - 1];

        arrx = xar[xar.length - 1];
        arry = yar[yar.length - 1];

        brlx = xbl[xbl.length - 1];
        brly = ybl[ybl.length - 1];

        brrx = xbr[xbr.length - 1];
        brry = ybr[ybr.length - 1];
    }
}

Because it can’t be viewed properly on WordPress, please download the file.

 

Sheenu-Looking Outwards-12

Bleep Space – iOS Sequencer Toy and Tabletop Arcade

Bleep Space is an iOS Sequencer Toy and arcade created by Andy Wallace & Dan Friel that uses geometric graphics that produce music and sound. The inspiration for this public installation came when Andy enjoyed playing with his friend’s KORG synthesizer. The game was written on OpenFrameworks and the arcade version of this game is nearly identical to its online PC release counterpart. People can create something that is not only auditorily pleasing but also visually pleasing as well.

The Creatures of Prometheus – Generative visualisation of Beethoven’s ballet with Houdini

Another project is called The Creatures of Prometheus, created by Simon Russell. The piece is an orchestra of animated figures that move, change color, and play music using a MIDI file on the program Houdini, a software made to program and run all the figures. An interesting quote from Russell himself is when he said “Usually I’d hand animate every last detail but this one is essentially generative”. This quote really relates to my proposed project.

Both projects involve sound and visual graphics, however the Bleep Space game is more of a videogame that requires people to interact and play with as The Creatures of Prometheus  is a program that automatically takes MIDI music and converts it into animation.

I see both projects very relevant to my proposed project. I proposed to make an animation software that is easy to use yet very generative and unpredictable. I want my project to be just as fun to use like the Bleep Space game and also very artsy, generative, and automated just like The Creatures of Prometheus program.

Sheenu-Project 12-Proposal

Ever since I was very little, I always loved telling stories and making animations. The idea of making characters you imagine come to life and have their own life stories and experiences always fascinated me. So, when I was first introduced to the computer during my elementary years, I already self-taught myself the fundamentals of animation and how to publish these animations to YouTube. During the years, I kept on making animations and practicing during my free time, however as I got older and busier, making the animations themselves became a struggle and difficult even for someone who has the passion for it. Because of this, I now search for ways to make animations not only better, but faster to produce through computer programming, rigs, and algorithms.

I propose to make a simple program that allows you to move and save the position of an animated stick-figure rig or shape, move and save a second position, and allow the character to move using those two or as much saved positions as possible. The animation can be played forward or backwards and its frame cycling speed can be adjusted. My proposal sounds both very difficult and simple yet I am excited to give it a try.

Sheenu-Project 11-Composition

sketch

var myTurtle;
var startFrame;
function setup() {
    createCanvas(400, 400);
    background(220);
    myTurtle=makeTurtle(width/2,height/2);
    myTurtle.setColor(color(0))
    myTurtle.setWeight(2);
    myTurtle.penDown();
    myTurtle.left(90);
    myTurtle.forward(10);

}
function draw() {
	var rand = random(0,10);
	if(rand>5){
		myTurtle.left(45);
		myTurtle.forward(5);
		//myTurtle.penUp();
	} else if (rand<5){
		myTurtle.right(45);
		myTurtle.forward(5);
		//myTurtle.penUp();
	}
}


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

This is a project that didn’t come out as planned, yet looked very interesting in the end. I originally tried to make the turtle generate structures that looked similar to trees or tree roots using arrays. I was planning to find a way to make the program create a turtle using a For loop and push that turtle into the array on command. Although, I admit that I wasn’t sure where to start when thinking about this, I still tried my best to do what I wanted to do and got started. I was working on the code and wanted to give the program a test run. When I ran the program, it generated these octagonal structures and lines all over the canvas. That is when I realized that this structure was more interesting than the tree structure I had in mind.

Sheenu-Looking Outwards-11

This is a segment from Animusic, a series of musical and computational 3D animations. This particular one is named “Pipe Dream” and features numerous balls shooting out of pipes and hitting guitar strings, bells, xylophones, drums, and cymbals. Each segment in the series follows a certain artistic theme, a certain genre of music, and a certain type of orchestra. Electronic music would have a sci-fi theme and its orchestra would mainly consist of synthesizers and electronic drums. Classical music would have an orchestra consisting of violins, brass, and woodwinds.

As a child, I was always fascinated by the variety, creativity, and autonomy that is displayed in the Animusic series. At the time, the idea of robots playing music was a fascinating subject to me and it still is today. However, what I didn’t realize was that the animation itself was already, in a way, a robot playing music.

The Animusic animations are not animated by hand, but rather are animated and controlled by the computer through listening to the music. The software used to make the whole animation come to life is a custom made engine named “MIDImotion”. Because the songs are in MIDI format, the program responds to the data that is sent from the song file and translates it into animation for certain instruments. This is how the animation can show so many things happening at once; animating all of this by hand would be extremely difficult.

I recommend looking up and viewing all the other Animusic segments on YouTube. There are many other fascinating segments out there that are just as good as the one I’ve shown above.

Sheenu-Looking Outwards-10

The artist I chose to talk about is Heather Kelly. Heather Kelly is a game designer, curator, and digital artist who is considered the “Five most powerful women in gaming” and “technology” according to Inc. magazine and Fast Company. As a curator, she co-curated “Joue le jeu / Play Along at La Gaîté lyrique” in Paris, a groundbreaking exhibition, and curated the GAMMA event, a renowned event that promotes experimental videogames as creative expression. As a game designer, she created numerous projects such as “Fabulous/Fabuleux”, a game installation that  can be controlled with your full body. Another game she worked on is called “Hyper Cube”, a VR puzzler pong game that takes the original game to a whole new level. In a technological field where it consists of people who are mostly men, Heather Kelly will be one of the most influential people that will make the technological field more gender diverse.

SUPERHYPERCUBE

 

Sheenu-Project 10-Generative Landscape

sketch

//Sheenu You
//Section E
//sheenuy@andrew.cmu.edu
//Project-10
var tspeed=0.0001
var td=.0005
var signs = [];
function preload(){
	var carcar ="https://i.imgur.com/2n8J78A.png";
	car=loadImage(carcar)

}
function setup() {
    createCanvas(480, 480);
    background(248,177,149);
    for (var i = 0; i < 10; i++){
    signs[i]=makesigns();
	}
}
function draw() {
	 background(248,177,149);
    fill(246,114,128); 
    noStroke();
    beginShape(); 
    //Terrain
    for (var x = 0; x < width; x++) {
        var t = (x * td) + (millis() * tspeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
        vertex(0,250)
        vertex(480,250)
    }
    endShape();
    rectMode(CORNERS)
    //Ground
    fill(246,114,128); 
    rect(0,250,480,480)
    fill(192,108,132)
    rect(0,270,480,480)
    //Draw Sticks
    updatesigns();
    removesigns();
    addsigns();
    //Draw Ground again
    fill(108,91,123)
    rect(0,290,480,480)
    fill(53,92,125)
    rect(0,320,480,480)
    //Car
    image(car,130,247,210,75)
}
//Sticks
//Make signs move or grow
function updatesigns(){
	for (var i=0;i<signs.length;i++){
		signs[i].move();
		signs[i].display();
	}
}
//Remove signs when they come to the end
function removesigns(){
var signstokeep =[];
	for (var i=0;i<signs.length;i++){
		if(signs[i].x+signs[i].breadth>0){
			signstokeep.push(signs[i]);
		}
	}
	signs=signstokeep;
}
//Generate the signs
function addsigns(){
	var newsignchance=.1;
	if(random(0,1)<newsignchance){
		signs.push(makesigns(width));
	}
}
//Make signs move
function signsmove(){
	this.x-=15
}
//Draw one sign
function signdisplay(){
	var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(255); 
    push();
    translate(this.x, height - 40);
    fill(108,91,123)
    rect(0, -bHeight-200, 7, bHeight);
    stroke(200); 
    pop();
}
//Generate signs at a certain location
function makesigns(birthLocationX) {
    var sgn={x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: signsmove,
                display: signdisplay}
    return sgn;
}

I sometimes think about the times when me and my family go on vacation for a road trip and take a drive on the road. I would always be the one looking through the side window; observing all the cars, the signs, the billboards, and the nature around us. I always found the background around us fascinating and ephemeral moments that zoom past my sight of vision within seconds. This is why I chose to make this a car driving by mountains and sticks on a road. I used a color palette to distinguish depth in the background and also color objects such as mountains, sticks, walls, and the car itself. I used the building generation template and the mountain generation template as a reference.

Preliminary drawing made on MS Paint

Sheenu-Project 09-Portrait

sketch

// Portrait
// Name: Sheenu You
// Andrew ID: sheenuy
// Section E

//Variables
var sheenu;
var a =0;
var b =0;
//Loads Image
function preload() {
    var myImageURL = "https://i.imgur.com/JCe4MPY.jpg";
    sheenu = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    //Load Pixels of image
    sheenu.loadPixels();
    frameRate(120);
}

function draw() {
    //Variables that generate Image
    var x = random(width);
    var y = random(height);
    //Gets all those pixels and arranges into variable
    //Generates "Sheenu" pixel
    var image = sheenu.get(x, y);
    fill(image);
    textSize(7);
    text("Sheenu",x, y);
    //Generates random "You" pixel
    text("You",a,b)
    //"You" pixel genereator
  a += 20;
  if (a > width) {
    a = 0;
    b += 20;
  }



}

I wanted to do something with text, so I decided to use my name as a custom pixel. I guess you can say this portrait has my name (and face) all over it. I like how the text starts to appear like brush strokes or pastel as more text generates and creates the full image. I found it as an interesting effect I wasn’t aware of nor expecting. I also wanted to do something with my last name, so I made them generate in an orderly fashion but with randomly generated colors. The “You” is definitely a huge contrast compared to the “Sheenu”, which generates randomly and has a specifically generated fill. In the end, all I can say is that a picture is truly worth a thousand words (or names).

Sheenu-Looking Outwards-09

http://www.notcot.org/post/62386/

https://www.bmo200.com/

I came across yoonyouk’s first Looking Outwards from Section E and discovered this installation piece that captured my eye. This is an electric “fountain” created for the Bank of Montreal’s 200th Anniversary by BMO workers and artists Jennifer Marman and Daniel Borins. The idea of a “fountain” came to be because BMO wanted to grant wishes to it’s customers through tossing a coin.

How viewers can interact with this piece is by “tossing” a coin on their mobile devices. The piece senses the devices and responds through hundreds of “flip-up” plates that alter the color of the entire structure from white to blue. Numerous animated patterns and ripples can be made on the fountain stream and on the floor.

YoonYouk finds the project enjoyable since it successfully combines art, interaction, and software all in one great piece. She also enjoys how it uses flip-up plates to alter the structure rather than using electronic screens. I can totally agree with all her points. I found this piece enjoyable because of its easy-going interaction with viewers: there is no need to do something complicated. I can also agree that the use of flip up plates makes the piece truly different. If the piece used electronic screens, I believe the magic and uniqueness of the piece would disappear.

Overall, me and yoouyouk found this piece to be truly innovative, unique, and successful.

Sheenu-Looking Outwards-08

Klaus Obermaier is a media-artist, choreographer, and composer in Vienna who creates multimedia art performances/installations using dancing, projectors provided from a team in Japan, animations, music, and computer programming developed and provided from a team in London. When presenting his works, he focuses on hierarchy and lighting along with the types of dances and abstractions. From his works, I learned that subtle details people tend to ignore such as lighting are things that should be he most important things to focus on. One of my most favorite works was named “APPARITION”, a dance and media performance that confronts aesthetic potential and the after effects of integrating interactivity. I like this piece because the animated projection in the background creates a harmony with the projections on the dancers through conflicting patterns and animations. Watching these patterns animate along with the dances and lighting is quite satisfying. His works are truly different and make use of very advanced technology. It’s worth checking out his works.

Website:

http://www.exile.at/apparition/background.html