Category: Uncategorized

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.

sketch

//Robert Managad
//Section-E
//rmanagad@andrew.cmu.edu
//Final Project -- Trigonometric Loading Icons

//This code loops on the basis of the trigonometric functions cosine, sine, and tangent.
//It can be modified to produce three distinct animations, depending on the trig function used,
// and on the axis be affected.


var spins = [];
var drips = [];
var warps = [];
var pluss = [];

function setup() {
	createCanvas(420, 420);

	//Spin Loop, center
	push();
	for (var i = 0; i < 12; i++){
		var spinposition = createVector(i * 20, i);
		var spinradius = i * 1; // Radius increases by 200% for every iteration of i, up to 12.
		spins[i] = new Spin(spinposition, spinradius); //holds circle function in the array
	}  
	pop();

	//Drip loop, top center
	for (var i = 0; i < 8; i++){
		var dripposition = createVector(i*18, i);
		var dripradius = i * 2;
		drips[i] = new Drip(dripposition, dripradius);
	}

	//Warp loop, left center
	for (var i = 0; i < 12; i++){
		var warpposition = createVector(i*20, i);
		var warpradius = i * 1.5;
		warps[i] = new Warp(warpposition, warpradius);
	}

	//Plus loop, left center
	for (var i = 0; i < 12; i++){
		var plusposition = createVector(i*20, i);
		var plusradius = i * 1.5;
		pluss[i] = new Plus(plusposition, plusradius);
	}
}

function draw() {
	background(0);

	//drip draw
	for(var i = drips.length - 1; i >= 0; i--){
		var drip = drips[i];
		drip.update();
		drip.display();
	}  

	//rectangle mask
	fill(0);
	noStroke();
	rect(140, 130, 140, 300);

	//warp draw
	for(var i = warps.length - 1; i >= 0; i--){
		var warp = warps[i];
		warp.update();
		warp.display();
	}  

	//spin draw
	for(var i = spins.length - 1; i >= 0; i--){
		var spin = spins[i];
		spin.update();
		spin.display();
	}  

	//plus draw
	for(var i = pluss.length - 1; i >= 0; i--){
		var plus = pluss[i];
		plus.update();
		plus.display();
	}  
}

//--------------------

//elements of each circle are compounded into the Spin function.
function Spin(spinposition, spinradius){
  this.position = spinposition;
  this.radius = spinradius;
  this.direction = 1;
  this.time = 0; //controls the placement of the starting anchor, time to jump towards.
  //updates position every time draw is called.
  this.update = function(){
	this.time += this.direction * this.radius * 0.007; //holds value of velocity. Higher radius value = higher speed.
	this.position.y = (200 + 90 * cos(this.time))/2;
	this.position.x = (200 + 90 * sin(this.time))/2;
	//trig function directs the animation (slowing down in middle/accelerating the circles as they approach the edges)
  }

  //holds visual presentation
  this.display = function(){
  	noFill();
    stroke(255);
    strokeWeight(1.5);
    ellipse(this.position.x - 20, this.position.y - 20, this.radius, this.radius);  
  }
}

//---------------------

function Drip(dripposition, dripradius){
  this.position = dripposition;
  this.radius = dripradius;
  this.direction = 1;
  this.time = 0; //controls the placement of the starting anchor, time to jump towards.
  //updates position every time draw is called.
  this.update = function(){
	this.time += this.direction * this.radius * 0.004; //holds value of velocity. Higher radius value = higher speed.
	this.position.y = (200 + 90 * tan(this.time))/3;
	//trig function directs the animation (slowing down in middle/accelerating the circles as they approach the edges)
  }

  //holds visual presentation
  this.display = function(){
  	noFill();
    stroke(255);
    strokeWeight(1.5);
    ellipse(this.position.x + 275, this.position.y - 10, this.radius, this.radius);  
  }
}

//------------------------

function Warp(warpposition, warpradius){
  this.position = warpposition;
  this.radius = warpradius;
  this.direction = 1;
  this.time = 0; //controls the placement of the starting anchor, time to jump towards.
  //updates position every time draw is called.
  this.update = function(){
	this.time += this.direction * this.radius * 0.002; //holds value of velocity. Higher radius value = higher speed.
	this.position.y = 200 + 30 * cos(this.time);
	this.position.x = 200 + 30 * tan(this.time);
	//trig function directs the animation (slowing down in middle/accelerating the circles as they approach the edges)
  }

  //holds visual presentation
  this.display = function(){
  	noFill();
    stroke(255);
    strokeWeight(1.5);
    ellipse(this.position.x , this.position.y + 160, this.radius, this.radius);  
  }
}

//----------------------------

function Plus(plusposition, plusradius){
  this.position = plusposition;
  this.radius = plusradius;
  this.direction = 1;
  this.time = 0; //controls the placement of the starting anchor, time to jump towards.
  //updates position every time draw is called.
  this.update = function(){
	this.time += this.direction * this.radius * 0.002; //holds value of velocity. Higher radius value = higher speed.
	this.position.y = 200 + 40 * 1/cos(this.time)/3;
	this.position.x = 200 + 40 * 1/sin(this.time)/3;
	//trig function directs the animation (slowing down in middle/accelerating the circles as they approach the edges)
  }

  //holds visual presentation
  this.display = function(){
  	noFill();
    stroke(255);
    strokeWeight(1.5);
    ellipse(this.position.x , this.position.y, this.radius, this.radius);  
  }
}

If gifs below are frozen: right-click and open the image in a new tab.

My final project culminated in a series of six loading icons. I used trigonometric functions to calculate x and y positions — because of their cyclical behaviours, sin, cosine, and tangent worked well for looping animations. Individual animation gifs can be seen above. Process work can be seen below

From a design standpoint, I developed these loading icons with several human factors in mind — from longevity and human attention span, to interactivity and engagement. Repetition in form, symmetry in composition and shape, and cyclical rhythm all contribute to keeping people from becoming disengaged with the content. As a component living in a transitionary space, the loading icon serves to bridge one space to the next.