slama.dev

import {Circle, Curve, Layout, makeScene2D, Spline} from '@motion-canvas/2d';
import {
    all,
    createRef,
    createSignal,
    easeInOutExpo,
    sequence,
    ThreadGenerator,
    useRandom,
    Vector2
} from '@motion-canvas/core';
import {appear} from "../../utilities";


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

import {Circle, Latex, Line, makeScene2D, Txt} from '@motion-canvas/2d';
import {all, createDeferredEffect, createRef, delay, Reference, sequence, Vector2} from '@motion-canvas/core';
import {appear} from "../../utilities";

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

import {Layout, makeScene2D, Rect} from '@motion-canvas/2d';
import {all, Color, createRef, delay, Reference, useRandom} from '@motion-canvas/core';
import chroma from "chroma-js";


/**
 * A nicer interpolation of colors using the 'lab' color space.
 */
export function colorLerp(from: any, to: any, value: number) {
    return Color.lerp(from, to, value, 'lab');
}

/**
 * Shuffle an array (deterministically).
 */
function shuffle<T>(array: T[]): T[] {
    let random = useRandom();

    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(random.nextFloat() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]]; // Swap elements
    }

    return array;
}

export default makeScene2D(function* (view) {
    const inputString = `
#######################################################
#  #################            ##                    #
# ##################           ####                   #
# #################            ####                   #
#  ###############             #####               # ##
#      #########               #####               ####
#         ###                  ######            ######
#          ###            ##   #####    ###       #####
#          ####      ########   ####  #####        ## #
#          #####   ##########   ###  ########       # #
#         #####   ###########        ########         #
#         ####   ###########        ##########        #
#        ##      ###########        ##########        #
#      ####     ############      #############       #
#    ######     ############     #############        #
# #########  ## ###########     #########    #        #
# ############### #########     #######               #
# ###############   ######      ######                #
# ###############    #####       ####                 #
#   #############      #                ##            #
#     #  #######                       ########### ####
#          ###         #              #################
# ##                  ####            #################
#####                ######          ##################
######                ######         ##################
# ###      ###        #######  ###   ###############  #
#         ####         ############   ####  #######   #
#        #####          ############          ###     #
#         ###            ##########                   #
#######################################################`;

    const lines = inputString.trim().split('\n');
    const grid: string[][] = lines.map(line => line.split('').map(char => char));

    const gridReferences: Reference<Rect>[][] = grid.map(line => line.map(_ => createRef<Rect>()));

    let cols = gridReferences[0].length;
    let rows = gridReferences.length;

    let width = 1600;
    let gap = 1;

    view.add(
        <Layout layout width={width} wrap={'wrap'} gap={gap}>
            {
                ...gridReferences.flat().map(
                    (ref, i) => <Rect
                        ref={ref} size={(width - gap * (cols - 1)) / cols}
                        fill={(grid[Math.floor(i / cols)][i % cols] == '#') ? 'white' : 'black'}
                        lineWidth={gap + 1}
                        stroke={'rgb(255, 255, 255)'}
                        opacity={0}
                    />
                )
            }
        </Layout>
    )

    yield* all(
        ...shuffle(gridReferences.flat()).map((ref, i) => delay(0.0001 * i, ref().opacity(1, 1)))
    );

    const distances: number[][] = grid.map(line => line.map(_ => 0));

    const queue: [[number, number], number][] = [[[1, 1], 0]];
    const visited: Set<string> = new Set();  // what the fuck!?!?

    while (queue.length > 0) {
        const [[x, y], steps] = queue.shift()!;

        distances[y][x] = steps;

        if (visited.has(`${x},${y}`))
            continue;

        if (grid[y][x] == "#")
            continue;

        visited.add(`${x},${y}`);

        const moves = [
            [0, -1], // Up
            [0, 1], // Down
            [-1, 0], // Left
            [1, 0], // Right
        ];

        for (const [dx, dy] of moves) {
            const [nx, ny] = [x + dx, y + dy];

            if (!(nx >= 0 && nx < cols && ny >= 0 && ny < rows))
                continue

            queue.push([[nx, ny], steps + 1]);
        }
    }

    let maxDistance = distances.flat().reduce((a, b) => Math.max(a, b));

    let colors = chroma.scale(["#ef476f", "#ffd166", "#06d6a0", "#118ab2"]).colors(maxDistance + 1);

    yield* all(
        ...gridReferences.flat().map(
            (ref, i) => {
                let x = i % cols;
                let y = Math.floor(i / cols);

                let distance = distances[y][x];
                let color = grid[y][x] == "#" ? 'white' : colors[distance];

                return delay(0.05 * distance, ref().fill(color, 1, undefined, colorLerp));
            }
        )
    )
});

import {Knot, makeScene2D, Spline} from '@motion-canvas/2d';
import {all, createRef, Reference, Vector2} from '@motion-canvas/core';


export default makeScene2D(function* (view) {
    const getSpline = (ref: Reference<Spline>, positions: Vector2[]) => {
        return <Spline
            ref={ref}
            lineWidth={5}
            stroke={'white'}
            smoothness={0}
            end={0}
        >
            {positions.map(pos => (<Knot position={pos}/>))}
        </Spline>
    }

    let size = 300;
    let iterations = 3;

    let line = createRef<Spline>();

    let positions = [new Vector2(-size, size), new Vector2(-size, -size), new Vector2(size, -size), new Vector2(size, size)];

    view.add(getSpline(line, positions))

    yield* line().end(1, 1);

    // not pretty code, but not sure how to do this cleaner / clearer
    for (let i = 1; i <= iterations; i++) {
        let lineRef = line().clone();
        lineRef.opacity(0);
        view.add(lineRef)

        let newSegmentScale = (2 ** (i) - 1) / (2 ** (i + 1) - 1)

        yield* all(
            line().scale(newSegmentScale, 1),
            line().topLeft(line().topLeft(), 1),
            line().stroke('gray', 1)
        )

        let l2 = line().clone();
        view.add(l2);

        yield* all(
            l2.topRight(lineRef.topRight(), 1),
        )

        let l3 = line().clone();
        let l4 = l2.clone();

        view.add(l3);
        view.add(l4);

        yield* all(
            l3.bottomRight(lineRef.bottomLeft(), 1),
            l3.rotation(90, 1),
            l4.bottomLeft(lineRef.bottomRight(), 1),
            l4.rotation(-90, 1),
        )

        let newPositionKnots = [
            ...l3.children().reverse(),
            ...line().children(),
            ...l2.children(),
            ...l4.children().reverse(),
        ]

        let newPositions = newPositionKnots.map(pos => pos.absolutePosition().sub(lineRef.absolutePosition()));

        let newLine = createRef<Spline>();

        view.add(getSpline(newLine, newPositions))

        yield* newLine().end(1, 1);

        line().remove();
        l2.remove();
        l3.remove();
        l4.remove();

        line = newLine;
    }
});