feat: add assets and code video

Author: aarthificial

.prettierrc

@@ -4,5 +4,6 @@
   "printWidth": 80,
   "trailingComma": "all",
   "arrowParens": "avoid",
-  "proseWrap": "always"
+  "proseWrap": "always",
+  "plugins": ["prettier-plugin-organize-imports"]
 }

README.md

@@ -16,6 +16,16 @@ A set of videos made using [Motion Canvas](https://motioncanvas.io).
 
 ## Available examples
 
+### Could This Asset Be Code
+
+```shell
+npm run asset-code
+```
+
+<a href="https://youtu.be/s1ZQnS_tOg0">
+   <img alt="One Year of Motion Canvas" src="https://img.youtube.com/vi/s1ZQnS_tOg0/maxresdefault.jpg" width=480 />
+</a>
+
 ### One Year of Motion Canvas
 
 ```shell

examples/asset-code/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@examples/asset-code",
+  "private": true,
+  "description": "Source code for the Could This Asset Be Code video",
+  "license": "MIT",
+  "scripts": {
+    "serve": "vite"
+  }
+}

examples/asset-code/src/audio/voice.mp3

@@ -0,0 +1 @@
+/// <reference types="@motion-canvas/core/project" />

examples/asset-code/src/image/jeff.png

@@ -0,0 +1,10 @@
+import {Txt, withDefaults} from '@motion-canvas/2d';
+
+export const ATxt = withDefaults(Txt, {
+  fill: 'rgba(255, 255, 255, 0.6)',
+  fontFamily: 'JetBrains Mono',
+  fontWeight: 700,
+  height: 40,
+  lineHeight: 48,
+  fontSize: 28,
+});

examples/asset-code/src/image/logo.svg

@@ -0,0 +1,88 @@
+import {
+  drawImage,
+  Img,
+  ImgProps,
+  initial,
+  signal,
+  vector2Signal,
+} from '@motion-canvas/2d';
+import {
+  BBox,
+  PossibleVector2,
+  ReferenceReceiver,
+  SignalValue,
+  SimpleSignal,
+  useThread,
+  Vector2Signal,
+} from '@motion-canvas/core';
+
+export interface AtlasProps extends ImgProps {
+  grid?: SignalValue<PossibleVector2>;
+  gridX?: SignalValue<number>;
+  gridY?: SignalValue<number>;
+  index?: SignalValue<number>;
+}
+
+export function animate(
+  from: number,
+  length: number,
+  duration: number = 0.1,
+  ref?: ReferenceReceiver<Atlas>,
+): ReferenceReceiver<Atlas> {
+  const time = useThread().time;
+  return atlas => {
+    ref?.(atlas);
+    atlas.index(() => {
+      const frames = Math.round(time() / duration);
+      return from + (frames % length);
+    });
+  };
+}
+
+export class Atlas extends Img {
+  @initial(1)
+  @vector2Signal('grid')
+  public declare readonly grid: Vector2Signal<this>;
+
+  @initial(0)
+  @signal()
+  public declare readonly index: SimpleSignal<number, this>;
+
+  public constructor(props: AtlasProps) {
+    super({
+      smoothing: false,
+      ...props,
+    });
+  }
+
+  protected draw(context: CanvasRenderingContext2D) {
+    this.drawShape(context);
+    const alpha = this.alpha();
+    if (alpha > 0) {
+      const box = BBox.fromSizeCentered(this.computedSize());
+      context.save();
+      context.clip(this.getPath());
+      if (alpha < 1) {
+        context.globalAlpha *= alpha;
+      }
+      context.imageSmoothingEnabled = this.smoothing();
+      const image = this.image();
+      const grid = this.grid();
+      const width = image.naturalWidth / grid.x;
+      const height = image.naturalHeight / grid.y;
+      const index = this.index();
+      const x = index % grid.x;
+      const y = Math.floor(index / grid.x);
+      const source = new BBox(x * width, y * height, width, height);
+
+      drawImage(context, this.image(), source, box);
+      context.restore();
+    }
+
+    if (this.clip()) {
+      context.clip(this.getPath());
+    }
+
+    this.drawChildren(context);
+  }
+}

examples/asset-code/src/motion-canvas.d.ts

@@ -0,0 +1,76 @@
+import {initial, Shape, ShapeProps, vector2Signal} from '@motion-canvas/2d';
+import {
+  clampRemap,
+  createSignal,
+  loop,
+  PossibleVector2,
+  Random,
+  SignalValue,
+  spawn,
+  usePlayback,
+  Vector2,
+  Vector2Signal,
+} from '@motion-canvas/core';
+
+export interface BinaryProps extends ShapeProps {
+  reveal: SignalValue<PossibleVector2>;
+}
+
+export class Binary extends Shape {
+  @initial(0)
+  @vector2Signal()
+  public declare readonly reveal: Vector2Signal<this>;
+
+  private progress = createSignal(0);
+
+  public constructor(props: BinaryProps) {
+    super(props);
+    spawn(
+      loop(() => {
+        this.progress(this.progress() + usePlayback().deltaTime);
+      }),
+    );
+  }
+
+  protected draw(context: CanvasRenderingContext2D) {
+    this.requestFontUpdate();
+
+    context.save();
+    this.applyStyle(context);
+    this.applyText(context);
+    context.font = this.styles.font;
+    context.textBaseline = 'top';
+    const size = this.computedSize();
+    context.translate(size.x / -2, size.y / -2);
+    const char = new Vector2(50, 80);
+    const steps = size.div(char).ceiled;
+    const random = new Random(1);
+    const progress = this.progress();
+    const reveal = this.reveal();
+    for (let x = -1; x <= steps.x; x++) {
+      const array = random.floatArray(steps.y);
+      for (let y = -1; y <= steps.y; y++) {
+        const cycles = Math.floor(progress);
+        let zero: number;
+        let charY: number;
+        charY = char.y * (y + 1 - (progress % 1));
+        zero = array[(y + cycles) % steps.y] > 0.5 ? 1 : 0;
+        const position = new Vector2(x, y + 1)
+          .sub(steps.div(2))
+          .div(steps.x).magnitude;
+        // context.globalAlpha = ((y + 1) / steps.y) > reveal.y ? 0 : 1;
+        // context.globalAlpha *= x / steps.x > reveal.x ? 0 : 1;
+        context.globalAlpha = clampRemap(
+          -0.05,
+          0.05,
+          0,
+          1,
+          reveal.x - position,
+        );
+        context.fillText(zero > 0.5 ? '1' : '0', char.x * x, charY);
+      }
+    }
+
+    context.restore();
+  }
+}