Groups, Animations, Signals, Effects

 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

import {Layout, makeScene2D, Rect, Shape} from '@canvas-commons/2d';
import {all, createRef, sequence, ThreadGenerator} from '@canvas-commons/core';

/**
 * Animate the appearance of an object.
 */
function* appear(object: Shape, duration = 1): ThreadGenerator {
    let scale = object.scale();

    yield* all(
        object.scale(0).scale(scale, duration),
        object.opacity(0).opacity(1, duration),
    );
}

export default makeScene2D(function* (view) {
    const rectangles = Array.from({length: 3}, () => createRef<Rect>());

    // we can use any of the names from the X11 color standard!
    // a nice website for picking colors: https://x11.linci.co/
    const rectangleColors = ['crimson', 'forestgreen', 'deepskyblue'];

    const layout = createRef<Layout>();

    view.add(
        <Layout layout gap={50} ref={layout}>
            {rectangles.map((ref, i) =>
                <Rect
                    ref={ref} opacity={0} stroke={rectangleColors[i]}
                    lineWidth={5} size={300}
                />
            )}
        </Layout>
    )

    yield* sequence(0.15, ...rectangles.map(ref => appear(ref())));

    // scale the entire group
    yield* all(
        layout().scale(1.5, 1),
        layout().position.y(-200, 1),
    )

    // suppress the layout for a while and remember the positions
    layout().children().forEach(ref => ref.save())
    layout().layout(false);
    layout().children().forEach(ref => ref.restore())

    // now we can move it
    yield* rectangles[1]().position.y(300, 1);

    // layout doesn't have attributes of the children, so setting colors on it won't work
    yield* all(...rectangles.map(ref => ref().stroke('white', 1)));
    yield* all(...rectangles.map(ref => ref().fill('white', 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

from manim import *


class VGroupExample(Scene):
    def construct(self):
        s1 = Square(color=RED)
        s2 = Square(color=GREEN)
        s3 = Square(color=BLUE)

        s1.next_to(s2, LEFT)
        s3.next_to(s2, RIGHT)

        self.play(Write(s1), Write(s2), Write(s3))

        group = VGroup(s1, s2, s3)

        # scale the entire group
        self.play(group.animate.scale(1.5).shift(UP))

        # only work with one of the group's objects
        self.play(group[1].animate.shift(DOWN * 2))

        # change color and fill
        self.play(group.animate.set_color(WHITE))
        self.play(group.animate.set_fill(WHITE, 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

import {Circle, Layout, makeScene2D, Shape} from '@canvas-commons/2d';
import {all, createRef, sequence, useRandom, ThreadGenerator} from '@canvas-commons/core';

/**
 * Animate the appearance of an object.
 */
function* appear(object: Shape, duration = 1): ThreadGenerator {
    let scale = object.scale();

    yield* all(
        object.scale(0).scale(scale, duration),
        object.opacity(0).opacity(1, duration),
    );
}

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

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

    view.add(
        <Layout layout gap={50} ref={layout} alignItems={'center'}>
            {circles.map((ref, i) =>
                <Circle
                    x={random.nextInt(-700, 700)}
                    y={random.nextInt(-300, 300)}
                    ref={ref} opacity={0} stroke={'red'}
                    lineWidth={5} size={random.nextInt(10, 100)}
                />
            )}
        </Layout>
    )

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

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

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

    layout().layout(true);

    // some layout properties are not supported yet :(
    // https://github.com/motion-canvas/motion-canvas/issues/363
    yield* all(
        layout().gap(10, 1),
        layout().direction('column', 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

from manim import *
from random import seed, uniform


class ArrangeExample(Scene):
    def construct(self):
        seed(0xDEADBEEF)

        circles = VGroup(
            *[
                Circle(radius=0.1)
                .scale(uniform(0.5, 4))
                .shift(UP * uniform(-3, 3) + RIGHT * uniform(-5, 5))
                for _ in range(12)
            ]
        )

        self.play(FadeIn(circles))

        # left-to-right arrangement
        self.play(circles.animate.arrange())

        # specify the direction of arrangement and spacing between the objects
        self.play(circles.animate.arrange(direction=DOWN, buff=0.3))
        self.play(circles.animate.arrange(direction=LEFT + DOWN, buff=0.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
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

import {Circle, Curve, Layout, makeScene2D, Spline, Shape} from '@canvas-commons/2d';
import {
    all,
    createRef,
    createSignal,
    easeInOutExpo,
    sequence,
    ThreadGenerator,
    useRandom,
    Vector2
} from '@canvas-commons/core';

/**
 * Animate the appearance of an object.
 */
function* appear(object: Shape, duration = 1): ThreadGenerator {
    let scale = object.scale();

    yield* all(
        object.scale(0).scale(scale, duration),
        object.opacity(0).opacity(1, duration),
    );
}


/**
 * Swaps the positions of two layouts in a visual view by animating them along spline paths.
 *
 * @param {Layout} view - The parent layout that contains both `a` and `b`.
 * @param {Layout} a - The first layout to be swapped.
 * @param {Layout} b - The second layout to be swapped.
 * @param duration - How long should the animation be?
 */
function* swap(view: Layout, a: Layout, b: Layout, duration: number = 1): ThreadGenerator {
    let start = a.position();
    let end = b.position();

    let mid = new Vector2().add(start).add(end).div(2);

    const progress = createSignal(0);

    let s1 = createRef<Spline>();
    let s2 = createRef<Spline>();

    let yOffset = Math.abs(a.position().x - b.position().x) / 2.5;

    view.add(<Spline ref={s1} points={[start, mid.addY(yOffset), end]} smoothness={1}/>)
    view.add(<Spline ref={s2} points={[end, mid.addY(-yOffset), start]} smoothness={1}/>)

    a.position(() => s1().getPointAtPercentage(progress()).position)
    b.position(() => s2().getPointAtPercentage(progress()).position)

    yield* progress(1, duration, easeInOutExpo);  // nicer curve :)

    // don't clutter the scene!
    s1().remove();
    s2().remove();
}

/**
 * Highlight a curve object.
 */
function* highlightCircle(object: Curve): ThreadGenerator {
    yield* all(
        object.stroke('red', 1).to('white', 1),
        object.lineWidth(20, 1).to(object.lineWidth(), 1),
        object.fill('red', 1).to('white', 1)
    );
}

export default makeScene2D(function* (view) {
    const circles = Array.from({length: 5}, () => createRef<Circle>());

    const layout = createRef<Layout>();
    view.add(<Layout layout ref={layout} gap={100}>
        {circles.map(ref =>
            <Circle ref={ref} size={170} fill={'white'} stroke={'white'} opacity={0}/>
        )}
    </Layout>)

    // position them using the layout and stop using it so we can move the nodes freely
    circles.forEach(ref => ref().save())
    layout().layout(false);
    circles.forEach(ref => ref().restore())

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

    yield* highlightCircle(circles[0]());

    let swaps = 20;
    let speedStart = 1;
    let speedEnd = 0.15;

    // use MotionCanvas' RNG so that the results are seeded
    let random = useRandom(0xdeadbeef);

    for (let i = 0; i < swaps; ++i) {
        let s1 = Math.floor(random.nextFloat() * circles.length);
        let s2;
        do {
            s2 = Math.floor(random.nextFloat() * circles.length);
        } while (s2 === s1);

        let duration = speedStart - Math.abs(speedStart - speedEnd) / swaps * i;

        yield* swap(
            view,
            circles[s1](),
            circles[s2](),
            duration,
        );
    }

    yield* highlightCircle(circles[0]());
});

 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

from manim import *
from random import *


class Shuffle(Scene):
    def construct(self):
        seed(0xDEADBEEF)

        # number of values to shuffle
        n = 5

        circles = [
            Circle(color=WHITE, fill_opacity=0.8, fill_color=WHITE).scale(0.6)
            for _ in range(n)
        ]

        # spacing between the circles
        spacing = 2
        for i, circle in enumerate(circles):
            circle.shift(RIGHT * (i - (len(circles) - 1) / 2) * spacing)

        self.play(*[Write(circle) for circle in circles])

        # selected circle
        selected = randint(0, n - 1)
        self.play(circles[selected].animate.set_color(RED))
        self.play(circles[selected].animate.set_color(WHITE))

        # slowly increase speed when swapping
        swaps = 13
        speed_start = 1
        speed_end = 0.2

        for i in range(swaps):
            speed = speed_start - abs(speed_start - speed_end) / swaps * i

            # pick two random circles (ensuring a != b)
            a, b = sample(range(n), 2)

            # swap with a slightly larger arc angle
            self.play(
                Swap(circles[a], circles[b]), run_time=speed, path_arc=135 * DEGREES
            )

        # highlight the initial circle again
        self.play(circles[selected].animate.set_color(RED))
        self.play(circles[selected].animate.set_color(WHITE))

  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
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

import {Circle, Latex, Line, makeScene2D, Txt, Shape} from '@canvas-commons/2d';
import {all, createDeferredEffect, createRef, delay, Reference, sequence, Vector2, ThreadGenerator} from '@canvas-commons/core';

/**
 * Animate the appearance of an object.
 */
function* appear(object: Shape, duration = 1): ThreadGenerator {
    let scale = object.scale();

    yield* all(
        object.scale(0).scale(scale, duration),
        object.opacity(0).opacity(1, duration),
    );
}

/**
 * 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)];
}

/**
 * Calculate the position for the label of the given circle to always point towards the center of the triangle.
 */
function getLabelPosition(circle: Reference<Circle>, circles: Array<Reference<Circle>>): Vector2 {
    let center = new Vector2();

    circles.forEach(c => {
        center = center.add(c().position())
    });

    center = center.div(circles.length);

    const vector = circle().position().sub(center).normalized;

    return circle().position().add(vector.mul(70));
}


export default makeScene2D(function* (view) {
    const circles = Array.from({length: 3}, () => createRef<Circle>());
    const positions = [new Vector2(0, -300), new Vector2(-300, 200), new Vector2(300, 200)];

    const labels = Array.from({length: 3}, () => createRef<Txt>());
    const labelStrings = ['a', 'b', 'c'];

    const lines = Array.from({length: 3}, () => createRef<Line>());

    view.add(
        <>
            {circles.map((ref, i) =>
                <Circle
                    ref={ref} opacity={0} size={30} fill={'white'}
                    position={positions[i]}
                />
            )}
            {lines.map((ref, i) =>
                // always keep the lines on adjacent circles
                <Line
                    points={[circles[i]().position, circles[(i + 1) % circles.length]().position]}
                    ref={ref} stroke={'white'}
                    lineWidth={8} size={30}
                    end={0}
                />
            )}
            {labels.map((ref, i) =>
                // always keep the label away from the center of the triangle
                <Latex
                    tex={labelStrings[i]}
                    ref={ref} fill={'white'}
                    opacity={circles[i]().opacity}
                    scale={circles[i]().scale}
                    position={() => getLabelPosition(circles[i], circles)}
                    fontSize={70}
                />
            )}
        </>
    )

    const circumscribedCircle = createRef<Circle>();
    view.add(
        <Circle ref={circumscribedCircle}
                size={30} lineWidth={5} start={1} stroke={'red'} zIndex={-1}/>
    )

    // change the center and size of the circumscribed circle to be within the bisectors
    createDeferredEffect(() => {
        let position = lineIntersection(
            ...perpendicularBisector(circles[0]().position(), circles[1]().position()),
            ...perpendicularBisector(circles[1]().position(), circles[2]().position()),
        );

        let size = position.sub(circles[0]().position()).magnitude;

        circumscribedCircle().position(position);
        circumscribedCircle().size(size * 2);
    })

    // nice appearing
    yield* all(
        sequence(0.25, ...circles.map(ref => appear(ref()))),
        delay(
            0.5,
            sequence(0.25, ...lines.map(ref => ref().end(1, 0.5))),
        ),

        delay(
            1.5,
            circumscribedCircle().start(0, 1),
        )
    );

    // move circles
    yield* all(
        ...circles.map((ref, i) => ref().position(circles[(i + 1) % circles.length]().position(), 1))
    );

    // move circles again
    yield* all(
        circles[0]().position(circles[0]().position().addX(-100), 1),
        circles[1]().position(circles[1]().position().addX(100).addY(-300), 1),
        circles[2]().position(circles[2]().position().addY(100), 1),
    );
});