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.

 

Author: Sheenu You

Choo choo

Leave a Reply