feat: add Deferred Lighting example

Author: aarthificial

.gitignore

@@ -1,2 +1,4 @@
 node_modules
-.idea
+.idea
+dist
+output

README.md

@@ -15,7 +15,7 @@ Make sure that you have [Git LFS][git-lfs] installed and that you cloned the pro
    ```
 4. Run one of the available examples, for instance:
    ```shell
-   npm run animating-with-code 
+   npm run deferred-lighting 
    ```
    Take a look at [`package.json`](./package.json) for the list of available examples.
 

examples/animating-with-code/.gitignore

@@ -7,11 +7,11 @@
     "serve": "vite"
   },
   "dependencies": {
-    "@motion-canvas/core": "*"
+    "@motion-canvas/core": "^11.1.0"
   },
   "devDependencies": {
-    "@motion-canvas/ui": "*",
-    "@motion-canvas/vite-plugin": "*",
+    "@motion-canvas/ui": "^11.1.0",
+    "@motion-canvas/vite-plugin": "^11.1.0",
     "vite": "^3.0.0"
   }
 }

examples/animating-with-code/package.json

@@ -11,7 +11,7 @@ export interface MouseConfig extends ShapeConfig {
 @KonvaNode()
 export class Mouse extends Shape {
   @getset(1)
-  public press: GetSet<MouseConfig['press'], this>;
+  public declare press: GetSet<MouseConfig['press'], this>;
 
   private isSelecting = false;
   private selectionStart: Vector2d;

examples/animating-with-code/src/components/Mouse.ts

@@ -14,11 +14,11 @@ interface TimelineConfig extends ShapeConfig {
 @KonvaNode({centroid: false})
 export class Timeline extends Shape {
   @getset(100)
-  public frames: GetSet<TimelineConfig['frames'], this>;
+  public declare frames: GetSet<TimelineConfig['frames'], this>;
   @getset(10)
-  public density: GetSet<TimelineConfig['density'], this>;
+  public declare density: GetSet<TimelineConfig['density'], this>;
   @getset(0)
-  public playhead: GetSet<TimelineConfig['playhead'], this>;
+  public declare playhead: GetSet<TimelineConfig['playhead'], this>;
 
   public constructor(config: ShapeConfig) {
     super(config);

examples/animating-with-code/src/components/Timeline.ts

@@ -0,0 +1,18 @@
+{
+  "name": "@examples/deferred-lighting",
+  "private": true,
+  "description": "Source code for the Deferred Lighting video",
+  "license": "MIT",
+  "scripts": {
+    "serve": "vite"
+  },
+  "dependencies": {
+    "@motion-canvas/core": "^12.3.0",
+    "@motion-canvas/2d": "^12.5.0"
+  },
+  "devDependencies": {
+    "@motion-canvas/ui": "^12.5.0",
+    "@motion-canvas/vite-plugin": "^12.6.0",
+    "vite": "^3.0.0"
+  }
+}

examples/deferred-lighting/package.json

@@ -0,0 +1,49 @@
+import {createSignal} from '@motion-canvas/core/lib/signals';
+import {loadImage} from '@motion-canvas/core/lib/media';
+import {Color, Vector2} from '@motion-canvas/core/lib/types';
+
+export class Sampler {
+  private static imageLookup: Record<string, HTMLImageElement> = {};
+  private static async getImageFor(url: string) {
+    if (url in this.imageLookup) {
+      return this.imageLookup[url];
+    }
+
+    const image = await loadImage(url);
+    this.imageLookup[url] = image;
+    return image;
+  }
+
+  private readonly context: CanvasRenderingContext2D;
+  private image: HTMLImageElement;
+  private url = createSignal<string | null>(null);
+
+  public constructor() {
+    const canvas = document.createElement('canvas');
+    this.context = canvas.getContext('2d', {willReadFrequently: true});
+  }
+
+  async setUrl(value: string) {
+    this.image = await Sampler.getImageFor(value);
+    this.context.canvas.width = this.image.naturalWidth;
+    this.context.canvas.height = this.image.naturalHeight;
+    this.context.drawImage(this.image, 0, 0);
+    this.url(value);
+  }
+
+  public getColorAtPoint(position: Vector2) {
+    const data = this.context.getImageData(position.x, position.y, 1, 1).data;
+    return new Color({
+      r: data[0],
+      g: data[1],
+      b: data[2],
+      a: data[3] / 255,
+    });
+  }
+}
+
+export async function createSampler(url: string): Promise<Sampler> {
+  const sampler = new Sampler();
+  await sampler.setUrl(url);
+  return sampler;
+}

examples/deferred-lighting/src/Sample.ts

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:869f850de17b4eb0b52d83b445b40762d0b7abf3b8a23eaaaa066e607ae9bb31
+size 9248123

examples/deferred-lighting/src/audio/voice.mp3

@@ -0,0 +1,141 @@
+import {
+  computed,
+  initial,
+  signal,
+  vector2Signal,
+} from '@motion-canvas/2d/lib/decorators';
+import {Vector2, Vector2Signal} from '@motion-canvas/core/lib/types';
+import {VectorBase, VectorBaseProps} from './VectorBase';
+import {SimpleSignal} from '@motion-canvas/core/lib/signals';
+
+export interface ArcVectorProps extends VectorBaseProps {
+  counter?: boolean;
+  x?: number;
+  y?: number;
+  position?: Vector2;
+  from?: number;
+  to?: number;
+  radius?: number;
+}
+
+export class ArcVector extends VectorBase {
+  @initial(false)
+  @signal()
+  public declare readonly counter: SimpleSignal<boolean, this>;
+
+  @initial(0)
+  @signal()
+  public declare readonly from: SimpleSignal<number, this>;
+
+  @initial(90)
+  @signal()
+  public declare readonly to: SimpleSignal<number, this>;
+
+  @initial(100)
+  @signal()
+  public declare readonly radius: SimpleSignal<number, this>;
+
+  @vector2Signal()
+  public declare readonly position: Vector2Signal<this>;
+
+  @computed()
+  public length(): number {
+    const to = this.to();
+    const from = this.from();
+
+    let angle = to - from;
+    angle %= 360;
+    if (angle < 0) {
+      angle += 360;
+    }
+
+    const radius = this.radius();
+
+    return (Math.PI * radius * radius * angle) / 360;
+  }
+
+  public constructor(props: ArcVectorProps) {
+    super(props);
+  }
+
+  @computed()
+  public center(): Vector2 {
+    const angle = (this.to() - this.from()) / 2;
+    return Vector2.fromRadians((angle / 180) * Math.PI).scale(this.radius());
+  }
+
+  public override localToParent(): DOMMatrix {
+    return new DOMMatrix([1, 0, 0, 1, this.position.x(), this.position.y()]);
+  }
+
+  protected override draw(context: CanvasRenderingContext2D) {
+    context.save();
+    this.applyStyle(context);
+    const startArrow = this.startArrow();
+    const endArrow = this.endArrow();
+    const startOffset = this.startOffset();
+    const endOffset = this.endOffset();
+    let start = this.start();
+    let end = this.end();
+
+    if (end < start) {
+      [end, start] = [start, end];
+    }
+
+    const counter = this.counter();
+    const radius = this.radius();
+    let from = (this.from() / 180) * Math.PI;
+    let to = (this.to() / 180) * Math.PI;
+
+    from += counter ? startOffset / -radius : startOffset / radius;
+    to -= counter ? endOffset / -radius : endOffset / radius;
+
+    let angle = to - from;
+    to = from + angle * end;
+    from = from + angle * start;
+    angle = to - from;
+
+    if (angle !== 0) {
+      const arrowSize = Math.min(
+        this.arrowSize(),
+        (Math.abs(angle) * radius) / 2,
+      );
+      let arrowDistance = arrowSize / radius;
+      if (counter) {
+        arrowDistance *= -1;
+      }
+
+      context.beginPath();
+      context.arc(
+        0,
+        0,
+        radius,
+        from + (startArrow ? arrowDistance : 0),
+        to - (endArrow ? arrowDistance : 0),
+        counter,
+      );
+      context.stroke();
+
+      if (startArrow) {
+        const direction = Vector2.fromRadians(from).scale(radius);
+        const arrow = Vector2.fromRadians(
+          from + arrowDistance / 2,
+        ).perpendicular.scale(counter ? arrowSize : -arrowSize);
+
+        this.drawArrow(context, direction, arrow);
+      }
+
+      if (endArrow) {
+        const direction = Vector2.fromRadians(to).scale(radius);
+        const arrow = Vector2.fromRadians(
+          to - arrowDistance / 2,
+        ).perpendicular.scale(counter ? -arrowSize : arrowSize);
+
+        this.drawArrow(context, direction, arrow);
+      }
+    }
+
+    context.restore();
+    super.draw(context);
+  }
+}