Crumple Toss

1"use client";
2 
3import type React from "react";
4import { useCurrentFrame } from "remotion";
5import { DEFAULT_STEP, hashRange, qstep } from "@/lib/remocn/stop-motion";
6 
7const GRAVITY = 0.9;
8const FLIGHT_SHRINK = 0.5;
9const EXIT_OPACITY = 0.4;
10 
11const FOLD_TILT = 46;
12const WAD_REACH = 0.27;
13const WAD_SPREAD = 0.07;
14const ANGLE_JITTER = 0.22;
15const SCALE_SPREAD = 0.25;
16const DEFAULT_RANDOMNESS = 0.6;
17const DEFAULT_LAYERS = 2;
18const LAYER_TILT_FLOOR = 0.45;
19const FACET_SIZE = 0.5;
20const FACET_CAP = 0.5;
21 
22const TONE_PATTERN = [0, 1, 3, 1, 0, 2, 1, 2, 0];
23 
24const TONES = [
25  { lit: "rgba(255,255,255,0.66)", dark: "rgba(255,255,255,0.18)" },
26  { lit: "rgba(255,255,255,0.30)", dark: "rgba(38,36,44,0.10)" },
27  { lit: "rgba(255,255,255,0.08)", dark: "rgba(38,36,44,0.20)" },
28  { lit: "rgba(38,36,44,0.06)", dark: "rgba(38,36,44,0.30)" },
29];
30 
31const LIGHT_ANGLE = -55;
32const CREASE_BLEND = 9;
33 
34export type CrumplePhase = "idle" | "crumple" | "toss" | "gone";
35 
36export type CrumplePose = {
37  phase: CrumplePhase;
38  crush: number;
39  scale: number;
40  rotate: number;
41  x: number;
42  y: number;
43  opacity: number;
44};
45 
46export type CrumpleSegment = {
47  clip: [number, number][];
48  origin: [number, number];
49  dx: number;
50  dy: number;
51  scale: number;
52  rotate: number;
53  tone: number;
54  crease: number;
55};
56 
57export type CrumpleTossTiming = {
58  at: number;
59  crumpleSteps?: number;
60  tossSteps?: number;
61  direction?: number;
62  distance?: number;
63  spin?: number;
64  crushTo?: number;
65  seed?: string;
66  step?: number;
67};
68 
69const rayToEdge = (
70  angle: number,
71  halfWidth: number,
72  halfHeight: number,
73): [number, number] => {
74  const cos = Math.cos(angle);
75  const sin = Math.sin(angle);
76  const t = Math.min(
77    halfWidth / (Math.abs(cos) || 1e-9),
78    halfHeight / (Math.abs(sin) || 1e-9),
79  );
80  return [cos * t, sin * t];
81};
82 
83const normalize = (angle: number) => {
84  const turn = Math.PI * 2;
85  return ((angle % turn) + turn) % turn;
86};
87 
88const shrinkToward = (
89  [x, y]: [number, number],
90  factor: number,
91): [number, number] => [x * factor, y * factor];
92 
93const averageOf = (points: [number, number][]): [number, number] => [
94  points.reduce((sum, p) => sum + p[0], 0) / points.length,
95  points.reduce((sum, p) => sum + p[1], 0) / points.length,
96];
97 
98export function crumpleSegments(args: {
99  width: number;
100  height: number;
101  segments?: number;
102  layers?: number;
103  crushTo?: number;
104  randomness?: number;
105  seed?: string;
106}): CrumpleSegment[] {
107// … truncated