psychotherapy/src/main/js/Main.ts

// @ts-ignore
const {$, doAfterLoad} = window.fwdekker;


/**
 * A two-dimensional point.
 */
class Point {
    x: number;
    y: number;


    /**
     * Constructs a new `Point`.
     *
     * @param x the X coordinate of the `Point`
     * @param y the Y coordinate of the `Point`
     */
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }


    /**
     * Returns `true` if and only if this `Point` is exactly the same as `other`.
     *
     * @param other the `Point` to check equality against
     * @return `true` if and only if this `Point` is exactly the same as `other`
     */
    equals(other: Point): boolean {
        return this.x === other.x && this.y === other.y;
    }
}

/**
 * A segment that is part of a [Line].
 */
class LineSegment {
    x: number;
    y: number;


    /**
     * Constructs a new [LineSegment].
     *
     * @param x the relative horizontal translation of this `LineSegment`
     * @param y the relative vertical translation of this `LineSegment`
     */
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }


    /**
     * Returns the angle formed by this `LineSegment` in radians.
     *
     * @return the angle formed by this `LineSegment` in radians
     */
    angle(): number {
        return Math.atan2(this.y, this.x);
    }


    /**
     * Returns `true` if and only if this `LineSegment` is exactly the same as `other`.
     *
     * @param other the `LineSegment` to check equality against
     * @return `true` if and only if this `LineSegment` is exactly the same as `other`
     */
    equals(other: LineSegment): boolean {
        return this.x === other.x && this.y === other.y;
    }
}

/**
 * A line that is made up of [LineSegment]s.
 */
class Line {
    segments: LineSegment[];
    color: string;
    thickness: number;


    /**
     * Constructs a new `Line`.
     *
     * @param color the color to draw the line in
     * @param thickness the relative thickness of the line
     */
    constructor(color: string, thickness: number) {
        this.segments = [];
        this.color = color;
        this.thickness = thickness;
    }


    /**
     * Returns the sum of a slice of this `Line`'s [LineSegment]s.
     *
     * @param start the start of the slice to sum over
     * @param end the end of the slice to sum over
     * @return the sum of a slice of this `Line`'s [LineSegment]s
     */
    sumSegmentsSlice(start?: number, end?: number): LineSegment {
        const slice = this.segments.slice(start, end);
        return new LineSegment(slice.reduce((acc, it) => acc + it.x, 0), slice.reduce((acc, it) => acc + it.y, 0));
    }


    /**
     * Returns `true` if and only if this `Line` is exactly the same as `other`.
     *
     * @param other the `Line` to check equality against
     * @return `true` if and only if this `Line` is exactly the same as `other`
     */
    equals(other: Line): boolean {
        return this.segments.every((_, i) => this.segments[i].equals(other.segments[i]))
            && this.color == other.color && this.thickness === other.thickness;
    }
}


/**
 * Global constants.
 */
const settings = {
    // Radius of the central dot
    dotRadius: 20,
    // How much percent of the window width should be filled in either direction before zooming starts
    fillGoal: 0.6,
    // Colors to assign to the lines
    lineColors: ["#0072bd", "#d95319", "#edb120", "#7e2f8e", "#77ac30"],
    // Length of an individual line piece
    lineLength: 5,
    // Desired thickness of a line, based on the current level
    lineThicknesses: [1, 5, 15],
    // Number of milliseconds between each new line segment
    stepTime: 25,
    // Number of steps before performing induction
    stepsPerLevel: 15,
    // How responsive zooming should be. Lower values are smoother but change zooming speed more often
    zoomSpeed: 1 / 30,
};


// Unhide main element
doAfterLoad(() => $("main").classList.remove("hidden"));


// Application loop(s)
doAfterLoad(() => {
    const canvas = $("#art");
    const ctx = canvas.getContext("2d");


    // Model
    const lineColorOffset = Math.floor(Math.random() * settings.lineColors.length);
    const lines: Line[] = [
        new Line(settings.lineColors[lineColorOffset], settings.lineThicknesses[0]),
        new Line(settings.lineColors[(lineColorOffset + 1) % settings.lineColors.length], settings.lineThicknesses[1])
    ];
    let step = 0;
    setInterval(() => {
        const currentLevel = lines.findIndex(it => it.segments.length !== settings.stepsPerLevel ** 2);

        // Add low-level segment
        const length = settings.lineLength ** (2 + currentLevel);
        let angle: number;
        if (lines[currentLevel].segments.length > 0)
            angle = lines[currentLevel].segments.slice(-1)[0].angle() + (random_normal() - 0.5) * Math.PI * 2;
        else
            angle = Math.random() * Math.PI * 2;
        lines[currentLevel].segments.push(new LineSegment(Math.cos(angle) * length, Math.sin(angle) * length));

        // Add induction segments
        for (const level of [1, 2]) {
            const inductionLevel = currentLevel + level;
            const lowerLines = lines[inductionLevel - 1];

            if (lowerLines.segments.length !== 0 && lowerLines.segments.length % settings.stepsPerLevel === 0) {
                if (lines.length <= inductionLevel) {
                    lines[inductionLevel] = new Line(
                        settings.lineColors[(lineColorOffset + inductionLevel) % settings.lineColors.length],
                        settings.lineThicknesses[level] / zoomFactor
                    );
                }

                lines[inductionLevel].segments.push(lowerLines.sumSegmentsSlice(-settings.stepsPerLevel));
            }
        }

        // Update shared info
        step++;
    }, settings.stepTime);


    // Resize
    const resize = () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    };
    window.addEventListener("resize", resize, false);
    resize();


    // Draw
    let maxPoint = new Point(0, 0);
    let zoomFactor = 1;
    const draw = () => {
        ctx.restore();
        ctx.save();

        // Background
        ctx.fillStyle = "#000000";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Draw from center
        const center = new Point(canvas.width / 2, canvas.height / 2);
        ctx.translate(center.x, center.y);

        // Center dot
        ctx.beginPath();
        ctx.strokeStyle = "#ffffff";
        ctx.arc(0, 0, settings.dotRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // Zoom
        const excessFactor = Math.max(
            (zoomFactor * maxPoint.x) / (canvas.width / 2 * settings.fillGoal),
            (zoomFactor * maxPoint.y) / (canvas.height / 2 * settings.fillGoal)
        );
        if (excessFactor > 1) {
            zoomFactor /= excessFactor ** settings.zoomSpeed;
        }
        ctx.scale(zoomFactor, zoomFactor);

        // Lines
        ctx.lineCap = "round";
        ctx.strokeStyle = "#ffffff";
        for (const line of lines) {
            ctx.strokeStyle = line.color;
            ctx.lineWidth = line.thickness;
            ctx.beginPath();
            ctx.moveTo(0, 0);

            let lastPos = new Point(0, 0);
            for (const segment of line.segments) {
                lastPos = new Point(lastPos.x + segment.x, lastPos.y + segment.y);
                ctx.lineTo(lastPos.x, lastPos.y);

                maxPoint = new Point(
                    Math.max(maxPoint.x, Math.abs(lastPos.x)),
                    Math.max(maxPoint.y, Math.abs(lastPos.y))
                );
            }

            ctx.stroke();
        }

        // Repeat
        window.requestAnimationFrame(draw);
    };
    window.requestAnimationFrame(draw);
});


// Taken from https://stackoverflow.com/a/49434653/
function random_normal(): number {
    let u = 0;
    while (u === 0) u = Math.random();
    let v = 0;
    while (v === 0) v = Math.random();

    const num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v) / 10.0 + 0.5;
    if (num >= 0 && num < 1) return num;
    return random_normal();
}