slama.dev

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import {Circle, Layout, makeScene2D} from '@motion-canvas/2d';
import {all, createRef, sequence, useRandom} from '@motion-canvas/core';
import {appear} from "../../utilities";
import chroma from 'chroma-js';

export default makeScene2D(function* (view) {
    let random = useRandom(0xdeadbeef);

    const circles = Array.from({length: 12 ** 2}, () => createRef<Circle>());
    const layout = createRef<Layout>();

    // we can use chroma.js for nice color shenanigans
    // we're using the lightness-chroma-hue for a nicer-looking scale
    let colors = chroma.scale(['#fafa6e', '#2A4858']).mode('lch')
        .colors(circles.length)

    view.add(
        <Layout layout gap={50} ref={layout} wrap={'wrap'} width={1400}
                alignItems={'center'}
        >
            {circles.map((ref, i) =>
                <Circle
                    x={random.nextInt(-600, 600)}
                    y={random.nextInt(-300, 300)}
                    ref={ref} opacity={0} stroke={colors[i]}
                    lineWidth={5} size={random.nextInt(10, 50)}
                />
            )}
        </Layout>
    )

    layout().children().forEach(ref => ref.save())
    layout().layout(false);

    yield* sequence(0.01, ...circles.map(ref => appear(ref())));

    yield* sequence(
        0.01,
        ...circles.map(ref => all(ref().restore(1), ref().opacity(1, 1))),
    );

    layout().layout(true);

    yield* all(
        layout().gap(30, 1),
        layout().width(1200, 1),
    );

    yield* all(
        layout().gap(60, 1),
        layout().width(1600, 1),
    );
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import {Circle, Layout, makeScene2D, Polygon, Rect} from '@motion-canvas/2d';
import {all, createRef, sequence, Vector2, waitFor} from '@motion-canvas/core';
import {appear} from "../../utilities";

export default makeScene2D(function* (view) {
    // start with a square
    const square = createRef<Rect>();
    view.add(<Rect ref={square} fill={'white'} size={300}/>);

    yield* waitFor(1);

    // will be added to the very top (i.e. will now be the _last child of root_)
    const circle = createRef<Circle>();
    view.add(<Circle ref={circle} fill={'red'} size={350}/>);

    yield* waitFor(1);

    // this moves the object "to the bottom" (i.e. below the square)
    // this means that it will be the _first child of root_
    circle().moveToBottom();

    yield* waitFor(1);

    // circle: hi again!
    circle().moveToTop();

    yield* waitFor(1);

    // this is a bit more interesting; we move to the bottom, but also
    // increase the Z-index, which is the more important parameter wrt. rendering
    //
    // circle: I'm staying on top!
    circle().moveToBottom();
    circle().zIndex(10);
    circle().fill('blue');

    yield* waitFor(1);

    // circle: *dies*
    circle().remove();

    yield* waitFor(1);
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

import {Layout, makeScene2D, Rect, Txt} from '@motion-canvas/2d';
import {all, any, chain, createRef, delay, loop, sequence, waitFor} from '@motion-canvas/core';
import {appear} from "../../utilities";

export default makeScene2D(function* (view) {
    const rectangles = Array.from({length: 3}, () => createRef<Rect>());
    const rectangleColors = ['crimson', 'forestgreen', 'deepskyblue'];

    const text = createRef<Txt>();

    view.add(
        <Layout gap={50} fontSize={100} layout direction={'column'} alignItems={'center'}>
            <Txt ref={text} fill={'white'}></Txt>
            <Layout layout gap={50}>
                {rectangles.map((ref, i) =>
                    <Rect
                        ref={ref} opacity={0} stroke={rectangleColors[i]}
                        lineWidth={5} size={300}
                    />
                )}
            </Layout>
        </Layout>
    )

    yield* text().text('sequence(t, ...)', 1)

    // sequence: launch animations in a delayed sequence
    yield* sequence(
        0.15, ...rectangles.map(ref => appear(ref()))
    );

    yield* text().text('all(...)', 1)

    // all: launch all animations together
    yield* all(
        ...rectangles.map(ref => ref().opacity(0, 1))
    )

    yield* text().text('chain(...)', 1)

    // chain: launch animations one after another
    yield* chain(
        rectangles[0]().opacity(1, 0.5),
        rectangles[1]().opacity(1, 1),
        rectangles[2]().opacity(1, 0.25),
    )

    yield* text().text('delay(t, .)', 1)

    // delay: launch animations with a delay
    // we can also nest!
    yield* all(
        delay(0.6, rectangles[0]().opacity(0, 1)),
        delay(0.3, rectangles[1]().opacity(0, 1)),
        delay(0.9, rectangles[2]().opacity(0, 1)),
    )

    // any: continue when at least one finishes!!!
    yield* text().text('any(...)', 1)

    yield* any(
        delay(1, rectangles[0]().opacity(1, 1)),
        delay(0.25, rectangles[1]().opacity(1, 1)),
        delay(2, rectangles[2]().opacity(1, 1)),
    )

    yield* text().text('one finished!', 1)

    yield* waitFor(1);

    yield* text().text('loop(...)', 1)

    // loop: starts an infinite animation; expects an animation factory to do this
    // because of this, we have to use yield (without star!), running this in the background
    yield loop(
        () => rectangles[1]().opacity(0, 0.25).to(1, 0.25),
    )

    yield* waitFor(1);

    // we can, however, still animate some of its other properties!
    yield* all(
        rectangles[1]().scale(0.5, 3),
        text().text('change while looping!', 1),
    );
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

import {Circle, Layout, makeScene2D, Rect, Txt, Node} from '@motion-canvas/2d';
import {all, createRef, sequence, useRandom} from '@motion-canvas/core';
import {appear} from "../../utilities";

export default makeScene2D(function* (view) {
    const outerSquare = createRef<Rect>();
    const innerSquare = createRef<Rect>();
    const text = createRef<Txt>();

    view.add(
        // we're using two squares, since rotation changes the position of the top
        // view the scene graph in the UI editor if it's unclear what we're doing
        <Rect ref={outerSquare} size={300}>
            <Rect ref={innerSquare} stroke={'white'} lineWidth={5} size={300}/>
        </Rect>
    );

    view.add(
        <Txt ref={text} text={"A neat square."} fill={'white'}
             // make the properties of text based on signals of the square
             opacity={outerSquare().opacity}
             bottom={outerSquare().top}
             scale={outerSquare().scale}
             padding={30}
        />
    );

    yield* appear(outerSquare());

    // we change the position of outer, dragging the text with
    yield* outerSquare().position.x(-300, 1);

    // we change the rotation of the inner, meaning that the text doesn't change
    // (it relies only on the attributes of the outer square)
    yield* innerSquare().rotation(-180, 1);

    yield* all(
        innerSquare().rotation(0, 1),
        outerSquare().scale(0.5, 1),
        outerSquare().position.x(0, 1),
    )

    // now we add another signal -- we want the text to rotate according to the outer square
    text().rotation(outerSquare().rotation);

    yield* all(
        outerSquare().rotation(-90, 1),
        outerSquare().scale(2, 1),
    )
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import {Circle, Layout, makeScene2D, Rect, Txt, Node, Latex} from '@motion-canvas/2d';
import {all, createEaseInOutBack, createRef, sequence, useRandom, Vector2} from '@motion-canvas/core';
import {appear} from "../../utilities";

export default makeScene2D(function* (view) {
    const circle = createRef<Circle>();
    const text = createRef<Txt>();

    view.add(
        <>
            <Circle ref={circle} stroke={'white'} lineWidth={5} size={300}/>
            <Latex ref={text} fill={'white'}
                // make the properties of text based on functions of the signals of the circle
                   tex={() => `p = [${circle().x().toFixed(0)}, ${circle().y().toFixed(0)}]`}
                   opacity={circle().opacity}
                   scale={circle().scale}
                   bottom={() => circle().top().addY(-30)}
            />
        </>
    );

    yield* appear(circle());

    yield* circle().position.x(100, 1);

    yield* all(
        circle().position(new Vector2(-200, -100), 1),
        circle().scale(1.25, 1),
    )

    yield* all(
        circle().position(new Vector2(0, 300), 1),
        circle().scale(.5, 1),
    )

    yield* all(
        circle().position(new Vector2(0, 0), 1),
        circle().scale(1, 1),
    )
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

import {Circle, makeScene2D, Spline} from '@motion-canvas/2d';
import {createDeferredEffect, createRef, createSignal, loop, sequence, useRandom, Vector2} from '@motion-canvas/core';
import {appear} from "../../utilities";
import chroma from 'chroma-js';

export default makeScene2D(function* (view) {
    let random = useRandom(0xdeadbef2);

    // random circles at random base positions
    const circles = Array.from({length: 8 ** 2}, () => createRef<Circle>());
    const basePositions = Array.from({length: 8 ** 2}, () => new Vector2(random.nextInt(-600, 600), random.nextInt(-300, 300)));

    const circle = createRef<Circle>();

    let colors = chroma.scale(['#fafa6e', '#2A4858']).mode('lch')
        .colors(circles.length)

    view.add(
        <>
            <Circle ref={circle} fill={'white'}/>
            {
                circles.map((ref, i) =>
                    <Circle
                        x={basePositions[i].x}
                        y={basePositions[i].y}
                        ref={ref}
                        stroke={colors[i]} fill={colors[i]}
                        lineWidth={5} size={15}
                    />
                )
            }
        </>
    )

    circles.forEach(ref => ref().opacity(0));
    yield* sequence(0.01, ...circles.map(ref => appear(ref())));

    // create a repulsion force around the white circle
    createDeferredEffect(() => {
        circles.forEach((ref, i) => {
            const pos = basePositions[i];

            const vector = pos.sub(circle().position())

            const direction = vector.normalized;
            const distance = vector.magnitude;

            const strength = 1 / 50;

            // we need to push at least as much as the radius of the circle (to not collide)
            const pushStrength = Math.max(
                Math.sqrt(distance) * circle().width() * strength,
                circle().width(),
            )

            const pushVector = pos.add(direction.mul(pushStrength));

            ref().position(pushVector);
        });
    })

    yield* circle().size(100, 1);

    // move it using a nice hand-crafted spline :)
    const spline = createRef<Spline>();
    const progress = createSignal(0);

    let h = 150;
    let w = 400;

    view.add(
        <Spline
            ref={spline}
            points={[[0, 0], [0, -h], [-w, -h], [-w, h], [w, h], [w, -h], [0, -h], [0, 0]]}
            smoothness={0.6}
        />
    )

    circle().position(() => spline().getPointAtPercentage(progress()).position)

    // loop the size scaling indefinitely in the background to make the dots pulse
    // do this 3 times (loop can take a number of times :)
    yield loop(3, () => circle().size(50, 1).to(100, 1))

    yield* progress(1, 10);
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import {Circle, makeScene2D, Spline} from '@motion-canvas/2d';
import {createRef, createSignal, easeInOutExpo} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
    const spline = createRef<Spline>();
    const progress = createSignal(0);

    view.add(
        <>
            <Spline
                ref={spline}
                lineWidth={8}
                stroke={'white'}
                points={[[-500, 0], [0, -250], [500, 0]]}
                smoothness={1}
            />
            <Circle
                size={100}
                fill={'white'}
                position={() => spline().getPointAtPercentage(progress()).position}
            />,
        </>,
    );

    yield* progress(1, 2, easeInOutExpo);
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/**
 * Cross product of two 3D points.
 */
function cross(a: [number, number, number], b: [number, number, number]): [number, number, number] {
    return [
        a[1] * b[2] - a[2] * b[1],
        a[2] * b[0] - a[0] * b[2],
        a[0] * b[1] - a[1] * b[0]
    ];
}

/**
 * Calculate intersection coordinates of two lines.
 */
function lineIntersection(p1: Vector2, p2: Vector2, p3: Vector2, p4: Vector2): Vector2 {
    const pad = (point: Vector2): [number, number, number] => [point.x, point.y, 1];

    const line1Padded = [pad(p1), pad(p2)];
    const line2Padded = [pad(p3), pad(p4)];

    const line1Cross = cross(line1Padded[0], line1Padded[1]);
    const line2Cross = cross(line2Padded[0], line2Padded[1]);

    const intersection = cross(line1Cross, line2Cross);
    const [x, y, z] = intersection;

    // Return the intersection point in the xy-plane
    return new Vector2(x / z, y / z);
}

/**
 * Calculate the bisector of a given line segment.
 */
function perpendicularBisector(p1: Vector2, p2: Vector2): [Vector2, Vector2] {
    const diff = p1.sub(p2);

    let direction = cross([diff.x, diff.y, 0], [0, 0, 1]);
    let directionVector = new Vector2(direction[0], direction[1]);

    const midpoint = p1.add(p2).div(2);

    return [midpoint.add(directionVector), midpoint.sub(directionVector)];
}