Math Snippets

Math snippets with graphic programming in mind.

This is work in progress. To-do:

• Convert all snippets to JS (Some are Action Script)
• Add live code examples
• Add simple desciptions

Contents

• Snippets
  • Radias & Degrees
  • Calculate side lengths
  • Rotate a 2D point
  • Linear distance bwetween 2 points
  • Linear distance between 2 vectors
  • Length of a vector (Magnitude)
  • Add and substract vectors
  • Normalize vector
  • Dot product vectors
  • Finding angle between 2 points
  • Finding angle between 2 vectors
  • Cross Product
  • Rotate to the mouse (or any point)
  • Create waves
  • Hex to decimal
  • Decimal to hex
  • Combine component colors
  • Extract component colors
  • Draw a curve through a point
  • Convert angular velocity to x, y velocity
  • Convert angular acceleration or any other force to x and y
  • Add acceleration to velocity
  • Add velocity to position
  • Testing for out of bound
  • Apply friction (correct way)
  • Apply friction (the easy way)
  • Simple easing, long form
  • Simple easing, abbreviated form
  • Simple easing, short form
  • Simple spring, long form
  • Simple spring, abbreviated form
  • Simple spring, short form
  • Offset spring
  • Distance-based collision detection
  • Multiple-objects collision detection
  • Coordinate rotation
  • Reverse coordiante rotation
  • Conservation of momentum in ActionScript (with a shortcut)
  • Gravity implementation
• Resources

Snippets

Radians & Degrees

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

// JavaScriptvarangleInDegrees=45;varradians=angleInDegrees*Math.PI/180;varbackToDegrees=radians*180/Math.PI;

Calculate side lengths

SOHCAHTOA

Calculate basic trigonometric functions

Sine of an angle = opposite / hypotenuse
Cosine of an angle = adjacent / hypotenuse
Tangent of angle = opposite / adjacent

// Javascriptvarhyp=100;varangleDegrees=45;varangleRadians=angleDegrees*Math.PI/180;varopposite=Math.sin(angleRadians)*hyp;varadjacent=Math.cos(angleRadians)*hyp;vartangent=opposite/adjacent;

Rotate a 2D point

varvec2={x: 2,y: 3};varrotatedVector=rotate2D(vec2,angle);functionrotate2D(vector,angle){vartheta=angle*Math.PI/180;// radiansvarmatrix=[Math.cos(theta),Math.sin(theta),-Math.sin(theta),Math.cos(theta)];return{x: matrix[0]*vector.x+matrix[1]*vector.y,y: matrix[2]*vector.x+matrix[3]*vector.y};}

Linear distance between 2 points

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

// JavaScriptvarx1=3;varx2=5;vardistance=x2—x1;

Linear distance between 2 vectors

a² + b² = c²

// Javascriptvarv1={x: 4,y: -9};varv2={x: 5,y: 15};vardistance=Math.sqrt(Math.pow((v2.x—v1.x),2)+Math.pow((v2.y—v1.y),2));

Length of a vector

Magnitude

// Javascript// 2D -> hypotenusevarv={x: 4,y:-9};varlength=Math.sqrt((Math.pow(v.x,2)+Math.pow(v.y,2)));// 3Dvarv={x: 4,y:-9,z: 0.5};varlength=Math.sqrt((Math.pow(v.x,2)+Math.pow(v.y,2)+Math.pow(v.z,2)));

Add and substract vectors

varv1={x: 2,y: 3};varv2={x: 2,y: -2};varaddedVec={x: v1.x+v2.x,y: v1.y+v2.y};varsubVec={x: v1.x-v2.x,y: v1.y-v2.y};

Normalize vector

// Javascript// 2Dvarv={x: 4,y:-9};varlength=Math.sqrt((Math.pow(v.x,2)+Math.pow(v.y,2)));varn={x: v.x/length,y: v.y/length};// 3Dvarv={x: 4,y:-9,z: 3};varlength=Math.sqrt(Math.pow(v.x,2)+Math.pow(v.y,2)+Math.pow(v.z,2));varn={x: v.x/length,y: v.y/length,z: v.z/length};

Dot product vectors

// Javascriptvarv1={x: 4,y: 5,z: 9};varv2={x: 5,y: 9,z: -5};vardot=(v1.x*v2.x)+(v1.y*v2.y)+(v1.z*v2.z);

Finding angle between 2 points

//Javascriptvarx=-3;vary=-2;varradians=Math.atan2(y,x);vardegrees=radians*180/Math.PI;

Finding angle between 2 vectors

// Javascriptvarv1={x: 4,y: 5,z: 9};varv2={x: 5,y: 9,z: -5};vardot=(v1.x*v2.x)+(v1.y*v2.y)+(v1.z*v2.z);varlengthv1=length(v1);// see lengthvarlengthv2=length(v2);// see lengthvarradians=Math.acos(dot/(lengthv1*lengthv2));varangle=radians*180/Math.PI;

Cross Product

// Javascriptvarv1={x: 1,y: 2,z: 3};varv2={x: 3,y: 2,z: 1};varcross={x: v1.y*v2.z-v1.z*v2.y,y: v1.z*v2.x-v1.x*v2.z,z: v1.x*v2.y-v1.y*v2.x};

Rotate to the mouse (or any point)

vardx=mouseX-spriteX;vardy=mouseY-spriteY;sprite.rotation=Math.atan2(dy,dx)*180/Math.PI;

Create waves

// value can be properties like x, y, alpha, rotation etc.publicfunctiononEnterFrame(event:Event){value=center+Math.sin(angle)*range;angle+=speed;}

Hex to decimal

trace(hexValue);

Decimal to hex

trace(decimalValue.toString(16));

Combine component colors

color24 = red << 16 | green << 8 | blue;
color32 = alpha << 24 | red << 16 | green << 8 | blue;

Extract component colors

red = color24 >> 16;
green = color24 >> 8 & 0xFF;
blue = color24 & 0xFF;
alpha = color32 >> 24;
red = color24 >> 16 & 0xFF;
green = color24 >> 8 & 0xFF;
blue = color24 & 0xFF;

Draw a curve through a point

//xt, yt is the point to draw through
// x0, y0, x2, y2 is the end points
x1 = xt * 2 - (x0 - x2) / 2;
y1 = yt * 2 - (y0 - y2) / 2;
moveTo(x0, y0);
curveTo(x1, y1, x2, y2);

Convert angular velocity to x, y velocity

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

Convert angular acceleration or any other force to x and y

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

Add acceleration to velocity

vx += ax;
vy += ay;

Add velocity to position

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

Testing for out of bound

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)
{
//remove or reposition sprite
}

Apply friction (correct way)

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;

Apply friction (the easy way)

vx *= friction;
vy *= friction;

Simple easing, long form

var dx = targetX - sprite.x;
var dy = targetY - sprite.y;
vx = dx * easing;
vy = dy * easing;
sprite.x += vx;
sprite.y += vy;

Simple easing, abbreviated form

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

Simple easing, short form

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

Simple spring, long form

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

Simple spring, abbreviated form

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

Simple spring, short form

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

Offset spring

var dx = sprite.x - fixedX;
var dy = sprite.y - fixedY;
var angle = Math.atan2(dy, dx);
var targetX = fixedX + Math.cos(angle) * springLength;
var targetY = fixedY + Math.sin(angle) * springLength;
// Spring to targetX and targetY;

Distance-based collision detection

// Starting with spriteA and spriteB
// If using a plain sprite, or obejct without a radius property
// you can use with and height divided by 2
var dx = spriteB.x - spriteA.x;
var dy = spriteB.y - spriteA.y;
var dist = Math.sqrt(dx*dx + dy*dy);
if(dist < spriteA.radius + spriteB.radius)
{
// handle collision
}

Multiple-objects collision detection

var numObjects = 10;
for (var i = 0; i < numObjects; i++)
{
var objectA = objects[i];
for (var j = i+1; j < numObjects; j++)
{
var objectB = objects[j];
// perform collision detection
// between objectA and objectB
}
}

Coordinate rotation

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

Reverse coordiante rotation

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

Conservation of momentum in ActionScript (with a shortcut)

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

Gravity implementation

functiongravitate(partA,partB){vardx=partB.x-partA.x;vardy=partB.y-partA.y;vardistSQ=dx*dx+dy*dy;vardist=Math.sqrt(distSQ);varforce=partA.mass*partB.mass/distSQ;varax=force*dx/dist;varay=force*dy/dist;partA.vx+=ax/partA.mass;partA.vy+=ay/partA.mass;partB.vx+=ax/partB.mass;partB.vy+=ay/partB.mass;}

Resources

• Coding Math (Github)
• Generative Art by Matt Pearson
• Math as code
• BetterExplained.com
• Essence of linear algebra