(Collected by Zhou Wenbin)

Billed a “HTML5 + JavaScript Animation Foundation” to see, which a lot of mathematics and physics knowledge, with the example inside the study again. When National Day came home, I saw a book of Flash Actionsctipt 3.0 Animation Tutor which I bought two years ago. The content in it is similar, and the author is the same, but I have not read it. So I practiced the examples of the book again, and I was deeply impressed. In my opinion, the most difficult part of animation is those formulas. All the languages are similar. Maybe the author will write a book called “Processing Animation Basis” a few years later. Thinking is the core, and everything else is the same, so I plan to sort out the mathematics and physics knowledge related to animation, and put several different languages together to facilitate comparison and search when I use them in the future.

## The angles and radians rotate each other

js

``````radians=degrees*Math.PI/180
``````

as

``````radians=degrees*Math.PI/180
processing

``````

## Turn toward the mouse pointer (or any point)

js

``````dx=mouse.x-object.x;
dy=mouse.y-boject.y;
object.rotation=Math.atan2(dy,dx)*180/Math.PI;
``````

demo

as

``````dx=mouseX-sprite.x;
dy=mouseY-sprite.y;
sprite.rotation=Math.atan2(dy,dx)*180/Math.PI;
``````

processing

``````dx=mouseX-sprite.x;
dy=mousyY-sprite.y;
object.rotation=atan2(dy,dx)*180/PI;
``````

## Create a wave

js

``(function(){ window.requestAnimationFrame(drawFrame,canvas); value=center+Math.sin(angle)+range; angle+=speed; } ());``

demo

as

``````public function onEnterFrame(event:Event){
value=center+Math.sin(angle)*range;
range+=speed;
}
``````

processing

``````void draw(){
value=center+sin(angle)*range;
range+=speed;
}
``````

## Create a circle

js

``(function(){ window.requestAnimationFrame(drawFrame,canvas); xposition=centerX + Math.cos(angle) * radius; yposition=center + Math.sin(angle) * radius; angle += speed; } ());``

demo

as

``````public function onEnterFrame(event:Event){
xposition = centerX + Math.cos(angle) * radius;
yposition = centerY + Math.sin(angle) * radius;
angle += speed;
}
``````

processing

``````void draw(){
xposition = centerX + cos(angle) * radius;
yposition = centerY + sin(angle) * radius;
angle += speed;
}
``````

## Create the ellipse

js

``(function(){ window.requestAnimationFrame(drawFrame,canvas); xposition=centerX + Math.cos(angle) * radiusX; yposition=center + Math.sin(angle) * radiusY; angle += speed; } ());``

demo

as

``````public function onEnterFrame(event:Event){
xposition = centerX + Math.cos(angle) * radiusX;
yposition = centerY + Math.sin(angle) * radiusY;
angle += speed;
}
``````

processing

``````void draw(){
xposition = centerX + cos(angle) * radiusX;
yposition = centerY + sin(angle) * radiusY;
angle += speed;
}
``````

## Find the distance between two points

js

``````dx = x2 - x1;
dy = y2 - y1;
dist = Math.sqrt(dx * dx + dy * dy);
``````

demo

as

``````dx = x2 - x1;
dy = y2 - y1;
dist = Math.sqrt(dx * dx + dy * dy);
``````

processing

``````dx = x2 - x1;
dy = y2 - y1;
dist = sqrt(dx * dx + dy * dy);
``````

## Draw a curve that passes through the points

js

``````x1 = xt * 2 - (x0 + x2) / 2;
y1 = yt * 2 - (y0 + y2) / 2;
context.moveTo(x0, y0);
context.quadraticCurveTo(x1, y1, x2, y2);
``````

demo

as

``````x1 = xt * 2 - (x0 + x2) / 2;
y1 = yt * 2 - (y0 + y2) / 2;
moveTo(x0, y0);
CurveTo(x1, y1, x2, y2);
``````

processing

``````x1 = xt * 2 - (x0 + x2) / 2;
y1 = yt * 2 - (y0 + y2) / 2;
vertex(x0, y0);
quadraticVertex(x1, y1, x2, y2);
``````

## The angular velocity is decomposed into velocity vectors on the x and y axes

js

``````vx = speed * Math.cos(angle);
vy = speed * Math.sin(angle);
``````

demo

as

``````vx = speed * Math.cos(angle);
vy = speed * Math.sin(angle);
``````

processing

``````vx = speed * cos(angle);
vy = speed * sin(angle);
``````

## The angular acceleration (the force acting on the object) is decomposed into the acceleration along the x and y axes

js

``````ax = force * Math.cos(angle);
ay = force * Math.sin(agnle);
``````

demo

as

``````ax = force * Math.cos(angle);
ay = force * Math.sin(agnle);
``````

processing

``````ax = force * cos(angle);
ay = force * sin(agnle);
``````

## Add acceleration to the velocity vector

js

``````vx += ax;
vy += ay;
``````

as

``````vx += ax;
vy += ay;
``````

processing

``````vx += ax;
vy += ay;
``````

## Add the velocity vector to the position coordinates

js

``````object.x += vx;
object.y += vy;
``````

as

``````sprite.x += vx;
sprite.y += vy;
``````

processing

``````object.x += vx;
object.y += vy;
``````

## Remove objects that are out of bounds

js

``````if(object.x - object.width /2 > right ||
object.x + object.width /2 < left ||
object.y - object.height /2 > bottom ||
object.y + object.height /2 < top){

}
``````

demo

as

``````if(sprite.x - sprite.width /2 > right ||
sprite.x + sprite.width /2 < left ||
sprite.y - sprite.height /2 > bottom ||
sprite.y + sprite.height /2 < top){

}
``````

processing

``````if(object.x - object.width /2 > right ||
object.x + object.width /2 < left ||
object.y - object.height /2 > bottom ||
object.y + object.height /2 < top){

}
``````

## Reset the out-of-bounds object

js

``````if(object.x - object.width /2 > right ||
object.x + object.width /2 < left ||
object.y - object.height /2 > bottom ||
object.y + object.height /2 < top){

}
``````

demo

as

``````if(sprite.x - sprite.width /2 > right ||
sprite.x + sprite.width /2 < left ||
sprite.y - sprite.height /2 > bottom ||
sprite.y + sprite.height /2 < top){

}
``````

processing

``````if(object.x - object.width /2 > right ||
object.x + object.width /2 < left ||
object.y - object.height /2 > bottom ||
object.y + object.height /2 < top){

}
``````

## The screen wraps around objects that are out of bounds

js

``````if(object.x - object.width /2 > right){
object.x = left - object.width / 2;
}else if(object.x + object.width /2 < left){
object.x = right + object.width /2;
}
if(object.y - object.height / 2 > bottom){
object.y = top -  object.height / 2;
}else if(object.y + object.height / 2 < top){
object.y = bottom + object.height /2;
}
``````

demo

as

``````if(sprite.x - sprite.width /2 > right){
sprite.x = left - sprite.width / 2;
}else if(sprite.x + sprite.width /2 < left){
sprite.x = right + sprite.width /2;
}
if(sprite.y - sprite.height / 2 > bottom){
sprite.y = top -  sprite.height / 2;
}else if(sprite.y + sprite.height / 2 < top){
sprite.y = bottom + sprite.height /2;
}
``````

processing

``````class="brush:js">
if(object.x - object.width /2 > right){
object.x = left - object.width / 2;
}else if(object.x + object.width /2 < left){
object.x = right + object.width /2;
}
if(object.y - object.height / 2 > bottom){
object.y = top -  object.height / 2;
}else if(object.y + object.height / 2 < top){
object.y = bottom + object.height /2;
}
``````

## Applying Friction (the right way)

js

``````speed = Math.sqrt(vx * vx + vy * vy);
angle = Math.atan2(vy,vx);
if(speed > friction){
speed -= friction;
}else{
speed = 0;
}
vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;
``````

demo

as

``````speed = Math.sqrt(vx * vx + vy * vy);
angle = Math.atan2(vy,vx);
if(speed > friction){
speed -= friction;
}else{
speed = 0;
}
vx = Math.cos(angle) * speed;
vy = Math.sin(angle) * speed;
``````

processing

``````speed = sqrt(vx * vx + vy * vy);
angle = atan2(vy,vx);
if(speed > friction){
speed -= friction;
}else{
speed = 0;
}
vx = cos(angle) * speed;
vy = sin(angle) * speed;
``````

## Application of Friction (Simple Method)

js

``````vx *= friction;
vy *= friction;
``````

demo

as

``````vx *= friction;
vy *= friction;
``````

processing

``````vx *= friction;
vy *= friction;
``````

## Simple slow

js

``````object.x += (targetX - object.x) * easing;
object.y += (targetY - object.y) * easing;
``````

demo

as

``````sprite.x += (targetX - sprite.x) * easing;
sprite.y += (targetY - sprite.y) * easing;
``````

processing

``````object.x += (targetX - object.x) * easing;
object.y += (targetY - object.y) * easing;
``````

## Simple to bounce

js

``````vx += (targetX - object.x) * spring;
vy += (targetY - object.y) * spring;
object.x += (vx *= friction);
object.y += (vy *= friction);
``````

demo

as

``````vx += (targetX - sprite.x) * spring;
vy += (targetY - sprite.y) * spring;
sprite.x += (vx *= friction);
sprite.y += (vy *= friction);
``````

processing

``````vx += (targetX - object.x) * spring;
vy += (targetY - object.y) * spring;
object.x += (vx *= friction);
object.y += (vy *= friction);
``````

## A spring with an offset

js

``````var dx = object.x - fixedX,
dy = object.y - fixedY,
angle = Math.atan2(dy,dx),
targetX = fixedX + Math.cos(angle) * springLength,
targetY = fixedX + Math.sin(angle) * springLength;
``````

demo

as

``````var dx:Number = sprite.x - fixedX;
var dy:Number = sprite.y - fixedY;
var angle:Number = Math.atan2(dy,dx);
var targetX:Number = fixedX + Math.cos(angle) * springLength;
var targetY:Number = fixedX + Math.sin(angle) * springLength;
``````

processing

``````int dx = object.x - fixedX;
int dy = object.y - fixedY;
int angle = Math.atan2(dy,dx);
int targetX = fixedX + Math.cos(angle) * springLength;
int targetY = fixedX + Math.sin(angle) * springLength;
``````

## Distance based collision detection

js

``````var dx = objectB.x - objectA.x,
dy = objectB.y - objectB.y,
dist = Math.sqrt(dx * dx + dy * dy);

}
``````

demo

as

``````var dx:Number = spriteB.x - spriteA.x;
var dy:Number = spriteB.y - spriteB.y;
var dist:Number = Math.sqrt(dx * dx + dy * dy);

}
``````

processing

``````int dx = objectB.x - objectA.x;
int dy = objectB.y - objectB.y;
int dist = sqrt(dx * dx + dy * dy);

}
``````

## Multi-physical collision detection

js

``objects.forEach(function(objectA, i){ for(var j = i + 1; j < objects.length; j++){ var objectB = objects[j]; // Executes collision detection between objectA and objectB. }});``

demo

as

``var numObjects:unit = 10; for(var i:uint = 0; i < numObjects -1; i++){ var ObjectA = objects[i]; for(var j:uint = i + 1; j < numObjects; j++){ var objectB = objects[j]; // Executes collision detection between objectA and objectB. }}); }``

processing

``int numObjects = 10; for(int i = 0; i < numObjects -1; i++){ int ObjectA = objects[i]; for(int j = i + 1; j < numObjects; j++){ int objectB = objects[j]; // Executes collision detection between objectA and objectB. }}); }``

## Coordinate rotation

js

``````x1 = x * Math.cos(rotation) - y * Math.sin(rotation);
y1 = y * Math.cos(rotation) + x * Math.sin(rotation);
``````

demo

as

``````x1 = x * Math.cos(rotation) - y * Math.sin(rotation);
y1 = y * Math.cos(rotation) + x * Math.sin(rotation);
``````

processing

``````x1 = x * cos(rotation) - y * sin(rotation);
y1 = y * cos(rotation) + x * sin(rotation);
``````

## Reverse coordinate rotation

js

``````x1 = x * Math.cos(rotation) + y * Math.sin(rotation);
y1 = y * Math.cos(rotation) - x * Math.sin(rotation);
``````

as

``````x1 = x * Math.cos(rotation) + y * Math.sin(rotation);
y1 = y * Math.cos(rotation) - x * Math.sin(rotation);
``````

processing

``````x1 = x * cos(rotation) + y * sin(rotation);
y1 = y * cos(rotation) - x * sin(rotation);
``````

## Conservation of momentum

js

``````var vxTotal = vx0 -vx1;
vx0 = ((ball0.mass -ball1.mass) * vx0 + 2 * ball1.mass * vx1) / (ball0.mass + ball1.mass);
vx1 = vxTotal + vx0;
``````

demo

as

``````var vxTotal:Number = vx0 -vx1;
vx0 = ((ball0.mass -ball1.mass) * vx0 + 2 * ball1.mass * vx1) / (ball0.mass + ball1.mass);
vx1 = vxTotal + vx0;
``````

processing

``````int vxTotal = vx0 -vx1;
vx0 = ((ball0.mass -ball1.mass) * vx0 + 2 * ball1.mass * vx1) / (ball0.mass + ball1.mass);
vx1 = vxTotal + vx0;
``````

## gravity

js

``````function gravitate(partA, partB){
var dx = partB.x - partA.x;
dy = partB.y - partA.y;
distSQ =  dx * dx + dy * dy;
dist = Math.sqrt(distSQ);
force = partA.mass * partB.mass / distSQ;
ax = force * dx /dist;
ay = force * dy / dist;

partA.vx += ax / partA.mass;
partA.vy += ax / partA.mass;
partB.vx -= ax / partB.mass;
partB.vy -= ax / partB.mass;
}
``````

demo

as

``````void gravitate(partA, partB){
var dx:Number = partB.x - partA.x;
var dy:Number = partB.y - partA.y;
var distSQ:Number =  dx * dx + dy * dy;
var dist:Number = sqrt(distSQ);
var force:Number = partA.mass * partB.mass / distSQ;
var ax:Number = force * dx /dist;
var ay:Number = force * dy / dist;

partA.vx += ax / partA.mass;
partA.vy += ax / partA.mass;
partB.vx -= ax / partB.mass;
partB.vy -= ax / partB.mass;
}
``````

processing

``````void gravitate(partA, partB){
float dx = partB.x - partA.x;
float dy = partB.y - partA.y;
float distSQ =  dx * dx + dy * dy;
float dist = sqrt(distSQ);
float force = partA.mass * partB.mass / distSQ;
float ax = force * dx /dist;
float ay = force * dy / dist;

partA.vx += ax / partA.mass;
partA.vy += ax / partA.mass;
partB.vx -= ax / partB.mass;
partB.vy -= ax / partB.mass;
}
``````

## Cosine theorem

js

``````var A = Math.acos((b * b + c * c - a * a) / (2 * b * c));
var B = Math.acos((a * a + c * c - b * b) / (2 * a * c));
var C = Math.acos((a * a + b * b - c * c) / (2 * a * b));
``````

demo

as

``````A = Math.acos((b * b + c * c - a * a) / (2 * b * c));
B = Math.acos((a * a + c * c - b * b) / (2 * a * c));
C = Math.acos((a * a + b * b - c * c) / (2 * a * b));
``````

processing

``````float A = acos((b * b + c * c - a * a) / (2 * b * c));
float B = acos((a * a + c * c - b * b) / (2 * a * c));
float C = acos((a * a + b * b - c * c) / (2 * a * b));
``````

## Basic perspective

js

``````scale = fl / (fl + zpos);
object.scaleX = object.scaleY = scale;
object.alpha = scale;
object.x = vanishingPointX + xpos * scale;
object.y = vanishingPointY + ypos * scale;
``````

demo

as

``````scale = fl / (fl + zpos);
sprite.scaleX = sprite.scaleY = scale;
sprite.alpha = scale;
sprite.x = vanishingPointX + xpos * scale;
sprite.y = vanishingPointY + ypos * scale;
``````

processing

``Processing 3D has other approaches``

## Z order

js

``````function zSort(a, b){
return (b.zpos - a.pos);
}
objects.sort(zsort);
``````

demo

as

``````objectArray.sortOn("zpos",Array.DESCENDING | Array.NUMERIC);
for(var i:uint =0; i < numObjects; i++){
setChildIndex(objectArray[i], i);
}
``````

processing

Processing 3D has other approaches

## Coordinate rotation

js

``````x1 = xpos * cos(angleZ) - ypos * sin(angleZ);
y1 = ypos * cos(angleZ) - xpos * sin(angleZ);

x1 = xpos * cos(angleY) - zpos * sin(angleY);
z1 = zpos * cos(angleY) + xpos * sin(angleY);

y1 = ypos * cos(angleX) - zpos * sin(angleX);
z1 = zpos * cos(angleX) + ypos * sin(angleX);
``````

demo

as

``````x1 = xpos * cos(angleZ) - ypos * sin(angleZ);
y1 = ypos * cos(angleZ) + xpos * sin(angleZ);

x1 = xpos * cos(angleY) - zpos * sin(angleY);
z1 = zpos * cos(angleY) + xpos * sin(angleY);

y1 = ypos * cos(angleX) - zpos * sin(angleX);
z1 = zpos * cos(angleX) + ypos * sin(angleX);
``````

processing

Processing 3D has other approaches

## The three dimensional distance

js

``````dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
``````

demo

as

``````dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
``````

processing

``````dist = sqrt(dx * dx + dy * dy + dz * dz);
``````