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 `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[];
    thickness: number;


    /**
     * Constructs a new `Line`.
     *
     * @param thickness the relative thickness of the line
     */
    constructor(thickness: number) {
        this.segments = [];
        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.thickness === other.thickness;
    }
}


/**
 * Global constants.
 */
const settings = {
    dotRadius: 10,
    fillGoal: 0.3,
    stepTime: 250,
    stepsPerLevel: 5,
};


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


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


    // Model
    const lines: Line[] = [new Line(1), new Line(5)];

    let step = 0;
    let lastStepTime = Date.now();
    setInterval(() => {
        const stepLine = Math.floor(step / (settings.stepsPerLevel ** 2));
        const inductionLine = stepLine + 1;
        const superInductionLine = stepLine + 2;

        // Add new low-level segment
        const length = settings.stepsPerLevel ** (2 + stepLine);
        // TODO: Accumulate angles
        const angle = (random_normal() - 0.5) * Math.PI * 2;
        lines[stepLine].segments.push(new LineSegment(Math.cos(angle) * length, Math.sin(angle) * length));

        // Add first-level induction line
        if ((step + 1) % settings.stepsPerLevel === 0) {
            if (lines.length <= inductionLine) {
                lines[inductionLine] = new Line(5 ** inductionLine);
            }

            lines[inductionLine].segments.push(lines[stepLine].sumSegmentsSlice(-settings.stepsPerLevel));
        }

        // Add second-level induction line
        if ((step + 1) % (settings.stepsPerLevel ** 2) === 0) {
            if (lines.length <= superInductionLine) {
                lines[superInductionLine] = new Line(5 ** superInductionLine);
            }

            lines[superInductionLine].segments.push(lines[inductionLine].sumSegmentsSlice(-settings.stepsPerLevel));
        }

        step++;
        lastStepTime = Date.now();
    }, settings.stepTime);


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


    // Draw
    const startTime = Date.now();
    let maxX = 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
        if ((1 / zoomFactor) * maxX > canvas.width * settings.fillGoal) {
            zoomFactor *= (((1 / zoomFactor) * maxX) / (canvas.width * settings.fillGoal)) ** (1 / 60);
        }
        ctx.scale(1 / zoomFactor, 1 / zoomFactor);

        // Lines
        ctx.strokeStyle = "#ffffff";
        for (const line of lines) {
            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);

                maxX = Math.max(maxX, lastPos.x);
            }

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