Support of Common Expressions in Friction's Expression Editor

[etakanaka]

Hi Friction Team,

First off, thank you for developing such an exciting open-source tool! The Powerful Expression Editor is a great feature, and I appreciate the inclusion of ECMAScript, syntax highlighting, and autocompletion.

As someone coming from Adobe After Effects, I often rely on certain pre-built expressions for automating animations. Some common expressions that I (and many other users) find extremely useful include:

1. Wiggle() – Randomly varies values like position, rotation, or scale.
2. Time – Drives animation based on time, great for creating dynamic effects.
3. Loop Expressions – To create repeating animations without duplicating keyframes (e.g., loopOut("cycle") and loopIn("pingpong")).
4. ValueAtTime() – Retrieves a property value at a specific time.
5. Linear() and Ease() – For remapping ranges of values with and without easing.
6. Math.random() – For generating random values.
7. Clamp() – Restricting a property within a specified range.

I would love to see these expressions or equivalent functionality natively supported in Friction's expression editor. It would make transitioning to Friction smoother for users familiar with tools like After Effects. Additionally, features like autocompletion of these common expressions would be incredibly useful for enhancing workflow.

If these expressions (or their equivalents) are already supported in Friction, could you kindly provide some instructions or examples on how to implement them using the ECMAScript expression editor? Any guidance on achieving similar automation or parameter control would be greatly appreciated!

Thanks again for your hard work on Friction, and I look forward to exploring its full potential!

Best regards,

[rodlie]

I can add a preset feature for 'Definitions' in the expression editor, that way users can make their own helper functions and load them as needed (and share them).

Clamp() – Restricting a property within a specified range.

Example for clamp:

Math.random() – For generating random values.

Most Math functions are supported.

Linear() and Ease() – For remapping ranges of values with and without easing.

We have functions for easing, but they are not exposed to the user, this can be fixed.

[rodlie]

Issue to track this feature: #244

[etakanaka]

That would be very helpful, thank you, much appreciated

[kaixoo]

I can add a preset feature for 'Definitions' in the expression editor, that way users can make their own helper functions and load them as needed (and share them).

The ideal would be to include basic functions that AE users would expect, that way we don't need to make a lot of documentation.

[pgilfernandez]

When you start exploring the limits of Friction, you arrive to expressions and realize how powerful they are, even more, as they are translated to "transforms" when exporting to SVG, they get even more powerful.

I'm trying to build my little functions library and this feature would be not only great for those who want to quickly access their common functions but also for newcomers that need to learn and understand expressions.

BTW, here are the ones I tried and are working (I guess they could be improved but they are my very first ones):

Wiggle

// DEFINITIONS
function generateNoise(t, scale = 1, strength = 1, phase = 0, detail = 1) {
    // Fixed permutation for consistency
    const permutation = Array.from({ length: 256 }, (_, i) => i).concat(Array.from({ length: 256 }, (_, i) => i));
    
    function fade(t) {
        return t * t * t * (t * (t * 6 - 15) + 10);
    }

    function lerp(a, b, t) {
        return a + t * (b - a);
    }

    function grad(hash, x) {
        const h = hash & 15;
        const gradient = 1 + (h & 7); // Gradient range between 1 and 8
        return (h & 8 ? -gradient : gradient) * x;
    }

    function perlinNoise(x) {
        const X = Math.floor(x) & 255;
        x -= Math.floor(x);
        const u = fade(x);

        const a = permutation[X];
        const b = permutation[X + 1];

        return lerp(grad(a, x), grad(b, x - 1), u);
    }

    let amplitude = strength;
    let frequency = scale;
    let total = 0;

    for (let i = 0; i < detail; i++) {
        total += perlinNoise((t + phase) * frequency) * amplitude;
        frequency *= 2;       // Double frequency for each octave
        amplitude /= 2;       // Halve amplitude for each octave
    }
    return total;
}

// BINDINGS
frame = $frame;
value = $value; // in case you want to export to SVG remove this line and create a constant in "calculate" with your desired value (if not Friction will crash)

// CALCULATE
const fps = 30;
const time = frame / fps;
//const value = 200; // uncomment if you are exporting to SVG
//                   v generateNoise(time, scale, strength, phase, detail)
const noise = generateNoise(time, 0.6, 20, 0, 4);
return noise+value

Loop

// BINDINGS
fr = $frame;

// CALCULATE
return fr%30*4-110;

Orbit

Here you need to create several "custom properties" to have more control over the script:

// CUSTOM PROPERTIES
centerX (pixels)
centerY (pixels)
radius (pixels)
speed (frames)
direction (1 clockwise, -1 counter clockwise)
offset (degrees)

// BINDINGS
centerX = properties.centerX;
centerY = properties.centerY;
radius = properties.radius;
speed = properties.speed;
direction = properties.direction;
offset = properties.offset;
frame = $frame;

// CALCULATE (under translate X)
var offset = offset * (Math.PI / 180);
var centerOfComp = [centerX, centerY];
var circleOverTime = [ Math.sin( (frame/speed) * 2 * Math.PI * direction + offset ) * radius, -Math.cos( (frame/speed)* 2 * Math.PI * direction + offset ) * radius ];  
return centerOfComp[0] + circleOverTime[0];

// CALCULATE (under translate Y)
var offset = offset * (Math.PI / 180);
var centerOfComp = [centerX, centerY];
var circleOverTime = [ Math.sin( (frame/speed) * 2 * Math.PI * direction + offset ) * radius, -Math.cos( (frame/speed) * 2 * Math.PI * direction + offset ) * radius ];  
return centerOfComp[1] + circleOverTime[1];

EDIT: updated Orbit expressions with more control