Helpful Functions Thread

Demos and Tutorials
#1

Math
Math formulas can help with positions and other stuff.
Here are some math formulas that I use (some may already be in javascript, just let me know)

Cap and Bot
I use these to clamp a value while letting it fall beneath or rise above it however much it needs to

function cap(num, max)
{
    if(num > max)
    {
        return max;
    }

    return num;
}

function bot(num, min)
{
    if(num < min)
    {
        return min;
    }

    return num;
}

Distance
Find the distance between two points

function distance(x1, y1, x2, y2)
{
    var a = x1 - x2;
    var b = y1 - y2;

    return Math.sqrt( a*a + b*b );
}

Linear Interpolation

function lerp(v0, v1, t) {
    return (1 - t) * v0 + t * v1;
}

This one is kind of difficult to explain. Essentially the third value takes a number from 0 to 1. If the value is 0, the function returns v0. If it is 1 it returns v1. If it is between 0 and 1 then it will return something between those two numbers depending on how close it is to 0 or 1.

Here are some examples:

var j = 0;

onEvent('update', function () 
{
    // 1 is divided by 60, the framerate, and added to j
    // so that after one second, j will be equal to 1
    j += 1 / 60

    // After one second, when j is equal to 1,
    // the function will return 0 
    // and it will have faded out
    this.opacity = lerp(1, 0, j);
});

Here is another one

var j = 0;

onEvent('update', function () 
{
    // 1 is divided by 60, the framerate, and added to j
    // so that after one second, j will be equal to 1
    j += 1 / 60

    // After one second, the objects position will go from 0 to 100
    this.x = lerp(0, 100, j);
    this.y = lerp(0, 100, j);
});

Lerp has a lot of functionality and you just need to experiment with it to get the full effect

Angles Angles and more Angles
Angles are scary, especially in programming.
Here I have compiled some simple angle formulas for Wick that can be applied in many situations

Angle Conversions
Sometimes you get radians and sometimes you get degrees, sometimes you want the other

Radians to Degrees

rad *= (180/Math.PI)

Degrees to Radians

deg *= (Math.PI/180)

Rotate towards an object/mouse/position
This rotates the object so that the up direction is facing the mouse or another position. For other directions simply increase the offset. For another object just replace the mouseX and mouseY with the x and y of the object.

var offset = 0;
var objX = mouseX;
var objY = mouseY;

// Angle in radians
var angleRad = Math.atan2(objX - this.x, -(objY - this.y));
// Convert to degrees
var angleDeg = angleRad * (180/Math.PI);

this.rotation = angleDeg - offset;

Move towards angle of rotation
This one uses the rotation of the object and moves it along that line of rotation. This is good for an object that chases the mouse or enemies that move and rotate towards the player.

var offset = 0;
var objX = mouseX;
var objY = mouseY;

var angle = Math.atan2(objX - this.x, -(objY - this.y));
// Optional:
//this.rotation = angle;

// You can multiply these by a speed!
this.x += Math.cos(angle - (offset * (Math.PI/180))); 
this.y += Math.sin(angle - (offset * (Math.PI/180)));

Example Projects
Lerp:
TopDown.wick (32.9 KB)
TopDownSpeedfix.wick (33.7 KB)
Angles:
BallShootDemo.wick (7.9 KB)

I will most likely add and edit this post to include anything else I find useful, but if something isn’t here then you can reply with it!

Edits
Edits: Clarity and error fixes
Edit 3: Added distance formula and Lerp demo
Edit 5: Added Top Down Speedfix example

9 Likes