Expressions tutorial?

[pgilfernandez]

I'm looking for a good tutorial about the expressions editor and I'm struggling finding one.

I would like to add a wiggle to a parameter (as in AE) but I could not do it properly. I tried several options but none is good enough...

Are there any tutorials, docs or similar that could introduce the expression editor to newbies?

Thanks!

[rodlie]

Yeah, documentation is lacking (nonexistent).

Everything in the editor is JS with auto complete. Core JS functions are available, as with Math, other than that you are on your own.

Bindings - This is where you get data from Friction and other items in your project.

To get current frame add currentFrame = $frame.
To get "RectangleBox" transform X value: boxX = RectangleBox.transform.translation.x

etc.

You can now reference the variables in the calculate section.

Calculate - This is where you do the scripting and return a value.

You can use core JS functions and have access to any variable added in Bindings and any function that exist in the Definitions tab.

Definitions

This section is for functions you can use in the calculate section, you can make/add any JS function you like.

---

Ready-made functions etc is on the roadmap for v1.1 #244.

[pgilfernandez]

Well, this is a work in progress as I doesn't come from AE but I've seen the way to get what I want is with that wiggle() funcion that comes out of the box in AE.

With some help from chatGPT I'm at this point:

// bindings
value = $value;
frame = $frame;

// calculate
return smoothWiggleX(2, 20, frame, value)

// Definitions
function smoothWiggleY(frequency, amplitude, time, start) {
    var offsetY = Math.cos(time * frequency * 1.3) * amplitude + start;
    return offsetY
}

function smoothWiggleX(frequency, amplitude, time, start) {
    var offsetX = Math.sin(time * frequency) * amplitude + start;
    return offsetX
}

[rodlie]

After a quick search it seems to me like wiggle just generate random "noise".

Something like this:

time = $frame;
value = $value;

return wiggle(time+value,5,10)

function wiggle(value, freq, amp) {
  const noise = Math.sin(Math.random() * freq * Math.PI * 2) * amp;
  return value + noise;
}

[pgilfernandez]

I started with some simple functions like yours but I could not control il as I wanted... maybe I just didn't tweaked it enough...

Anyway, I was able to replicate Blender noise modifier and now it works as I wanted:

frame = $frame;
value = $value;

const fps = 30;
const time = frame / fps;
//                     generateNoise(time, scale, strength, phase, detail)
const noise = generateNoise(time, 0.6, 20, 0, 4);
return noise+value

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;
}

This is the result with 2 circles and changing the phase so that they are not "wiggling" along:

wiggle.mp4

wiggle_v01.zip

One last question, is there a way to globally define a function and be able to use it anywhere?

[AlmostMikhail]

Where do you even learn how to create generate noise function? Do you just translate the mathematics from blender c++ source code in Javascript?

[pgilfernandez]

Where do you even learn how to create generate noise function? Do you just translate the mathematics from blender c++ source code in Javascript?

In my case it was a mix of exploring how other softwares do, documenting myself on internet, getting help of chatGPT to adapt what I wanted, testing and fixing issues manually...