Skip to content

Instantly share code, notes, and snippets.

@guidoschmidt

guidoschmidt/index.ts

Created April 24, 2023 19:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save guidoschmidt/00849a4cda43530c49e0b5a7767b211d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save guidoschmidt/00849a4cda43530c49e0b5a7767b211d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. guidoschmidt created this gist Apr 24, 2023.
    48 changes: 48 additions & 0 deletions index.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    import { srgb } from "@thi.ng/color";
    import type { Color, css } from "@thi.ng/color";
    import { randMinMax2 } from "@thi.ng/vectors";
    import type { Vec } from "@thi.ng/vectors";
    import { repeatedly } from "@thi.ng/transducers";
    import { draw } from "@thi.ng/hiccup-canvas";
    import type { IToHiccup } from "@thi.ng/api";

    const NUM_CELLS = 10;
    const WIDTH = window.innerWidth;
    const HEIGHT = window.innerHeight;

    interface Cell extends IToHiccup {
    pos: Vec;
    r: number;
    color: Color;
    }

    class Cell implements Cell {
    color: Color;

    constructor(public pos: Vec, public r: number) {
    this.color = srgb.random();
    }

    toHiccup() {
    return ["circle", { fill: this.color }, this.pos, this.r];
    }
    }

    const cells = [
    ...repeatedly(
    () =>
    new Cell(
    randMinMax2([], [0, 0], [WIDTH, HEIGHT]),
    Math.round(Math.random() * 10)
    ),
    NUM_CELLS
    ),
    ];

    const canvas = document.createElement("canvas") as HTMLCanvasElement;
    document.body.appendChild(canvas);
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

    draw(ctx, ["g", {}, ...cells]);