feat: create symmetric-binary-tree project

nodejs-tools/nodejs-apps/vighnesh153-astro-svelte/src/components/projects/graphics/symmetric-binary-tree/ProjectRoot.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import { SymmetricBinaryTreeGame, CanvasWrapperImpl } from '@vighnesh153/graphics-programming';
+
+  let canvasElement: HTMLCanvasElement;
+  let game: SymmetricBinaryTreeGame;
+
+  let angle = 49.66;
+  let chaos = false;
+
+  onMount(() => {
+    const canvasWrapper = new CanvasWrapperImpl(canvasElement);
+    game = new SymmetricBinaryTreeGame(canvasWrapper, {});
+  });
+
+  $: {
+    game?.update(angle, chaos);
+  }
+</script>
+
+<div class="flex justify-center items-center gap-20">
+  <div class="flex flex-col items-center gap-1">
+    <label for="chaos">Chaos?</label>
+    <input type="checkbox" bind:checked={chaos} id="chaos" />
+  </div>
+  <div class="flex flex-col items-center gap-1">
+    <label for="angle">Seed angle</label>
+    <input type="range" min="47" max="56.55" bind:value={angle} id="angle" step="0.01" />
+  </div>
+</div>
+
+<canvas class="mt-6 mx-auto w-full max-w-3xl aspect-video bg-text" bind:this={canvasElement}>
+  Sorry your browser doesn't support the canvas element
+</canvas>

nodejs-tools/nodejs-apps/vighnesh153-astro-svelte/src/pages/projects/graphics/symmetric-binary-tree.astro

@@ -0,0 +1,23 @@
+---
+import { graphicsProjectsMap } from '@vighnesh153/graphics-programming';
+
+import { classes, verifyGraphicsProjectPath } from '@/utils';
+import { projectNavItems } from '@/constants';
+import ContentLayout from '@/layouts/ContentLayout.astro';
+import ProjectRoot from '@/components/projects/graphics/symmetric-binary-tree/ProjectRoot.svelte';
+
+const project = graphicsProjectsMap.symmetricBinaryTree;
+verifyGraphicsProjectPath(project, Astro.request.url);
+
+const title = `Vighnesh Raut | Graphics Projects - Symmetric Binary Tree`;
+const description =
+  `A binary tree representation by its branches and how the final shape is ` +
+  `different for even a slight change in the angle`;
+---
+
+<ContentLayout title={title} description={description} navItems={projectNavItems} showFooter={false}>
+  <div class={classes(`mt-28 mb-12 max-w-xl mx-auto lg:max-w-[unset] scroll-mt-8`)}>
+    <h1 class="text-3xl mb-6 text-center">Symmetric Binary Tree</h1>
+    <ProjectRoot client:load />
+  </div>
+</ContentLayout>

nodejs-tools/nodejs-lib/graphics-programming/src/canvas-wrapper.ts

@@ -4,6 +4,7 @@ export interface CanvasWrapper {
   readonly width: number;
   readonly height: number;
   readonly canvasElement: HTMLCanvasElement;
+  readonly context: CanvasRenderingContext2D;
 
   reset(): void;
   getBoundingClientRect(): DOMRect;
@@ -35,6 +36,10 @@ export class CanvasWrapperImpl implements CanvasWrapper {
     return this.#canvas;
   }
 
+  get context(): CanvasRenderingContext2D {
+    return this.#canvasContext;
+  }
+
   constructor(canvas: HTMLCanvasElement) {
     const canvasContext = canvas.getContext('2d', {
       willReadFrequently: true,

nodejs-tools/nodejs-lib/graphics-programming/src/index.ts

@@ -1,5 +1,6 @@
 export * from './grid-path-finder';
 export * from './sierpinskis-triangle';
+export * from './symmetric-binary-tree';
 export * from './tower-of-hanoi';
 export * from './canvas-wrapper';
 export * from './collection';

nodejs-tools/nodejs-lib/graphics-programming/src/symmetric-binary-tree/Game.ts

@@ -0,0 +1,82 @@
+import { CanvasWrapper } from '@/canvas-wrapper';
+import { randomColor } from './randomColor';
+
+interface Options {
+  /**
+   * In degrees
+   */
+  angle?: number;
+
+  thickness?: number;
+  color?: string;
+  scaleDownFactor?: number;
+  initialLength?: number;
+  lengthThreshold?: number;
+}
+
+export class SymmetricBinaryTreeGame {
+  #canvasWrapper: CanvasWrapper;
+
+  readonly #thickness: number;
+  readonly #color: string;
+  readonly #scaleDownFactor: number;
+  readonly #initialLength: number;
+  readonly #lengthThreshold: number;
+  #angle: number;
+  #chaos = false;
+
+  constructor(canvasWrapper: CanvasWrapper, options: Options = {}) {
+    this.#canvasWrapper = canvasWrapper;
+    const h = this.#canvasWrapper.getBoundingClientRect().height;
+
+    this.#angle = ((options.angle ?? 40) * Math.PI) / 180;
+    this.#thickness = options.thickness ?? 3;
+    this.#color = options.color ?? 'black';
+    this.#scaleDownFactor = options.scaleDownFactor ?? 0.7;
+    this.#initialLength = options.initialLength ?? h * 0.3;
+    this.#lengthThreshold = options.lengthThreshold ?? 3;
+
+    this.draw();
+  }
+
+  update(newAngle: number, chaos: boolean) {
+    this.#angle = newAngle;
+    this.#chaos = chaos;
+
+    this.draw();
+  }
+
+  draw() {
+    const w = this.#canvasWrapper.width;
+    const h = this.#canvasWrapper.height;
+    const x = w / 2;
+    const y = h;
+    this.#canvasWrapper.context.clearRect(0, 0, w, h);
+
+    this.recursivelyBranch(x, y, this.#initialLength);
+  }
+
+  private recursivelyBranch(x: number, y: number, length: number) {
+    if (length < this.#lengthThreshold) return;
+
+    const thickness = this.#thickness;
+    const color = this.#chaos ? randomColor() : this.#color;
+    const scaleDownFactor = this.#scaleDownFactor;
+
+    this.#canvasWrapper.drawLine(x, y, x, y - length, thickness, color);
+
+    [-this.wrapAngle(), this.wrapAngle()].forEach((angle) => {
+      this.#canvasWrapper.pushState();
+      this.#canvasWrapper.translate(0, -length);
+      this.#canvasWrapper.translate(x, y);
+      this.#canvasWrapper.rotate(angle);
+      this.#canvasWrapper.translate(-x, -y);
+      this.recursivelyBranch(x, y, length * scaleDownFactor);
+      this.#canvasWrapper.popState();
+    });
+  }
+
+  private wrapAngle(): number {
+    return this.#chaos ? this.#angle + Math.random() : this.#angle;
+  }
+}

nodejs-tools/nodejs-lib/graphics-programming/src/symmetric-binary-tree/index.ts

@@ -0,0 +1 @@
+export { SymmetricBinaryTreeGame } from './Game';

nodejs-tools/nodejs-lib/graphics-programming/src/symmetric-binary-tree/randomColor.ts

@@ -0,0 +1,7 @@
+import { shuffle } from '@vighnesh153/utils';
+
+const colors = ['red', 'green', 'black', 'blue', 'yellow', 'orange', 'purple'];
+
+export function randomColor(): string {
+  return shuffle(colors)[0];
+}