716 lines
24 KiB
TypeScript
716 lines
24 KiB
TypeScript
|
import React, {useLayoutEffect, useMemo, useRef} from 'react';
|
||
|
|
import {
|
||
|
|
AbsoluteFill,
|
||
|
|
Audio,
|
||
|
|
Img,
|
||
|
|
Sequence,
|
||
|
|
useCurrentFrame,
|
||
|
|
useVideoConfig,
|
||
|
|
} from 'remotion';
|
||
|
|
import type {RenderData} from '../shared/types';
|
||
|
|
import {scrollTrack} from '../shared/scroll';
|
||
|
|
import {
|
||
|
|
activeRingsAt,
|
||
|
|
arcPoint,
|
||
|
|
groupLandings,
|
||
|
|
liftDepth,
|
||
|
|
performanceAt,
|
||
|
|
REST_DEPTH,
|
||
|
|
type Motion,
|
||
|
|
} from './animation';
|
||
|
|
|
||
|
|
const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Accepts hex and rgb()/rgba() colours. Canvas silently keeps its previous
|
||
|
|
* strokeStyle for invalid colours (default black), so this must cover whatever
|
||
|
|
* `mix()` hands back.
|
||
|
|
*/
|
||
|
|
function parseColor(color: string): [number, number, number] {
|
||
|
|
const value = color.trim();
|
||
|
|
const rgb = value.match(/^rgba?\(([^)]+)\)$/i);
|
||
|
|
if (rgb) {
|
||
|
|
const parts = rgb[1]!.split(',').map((part) => Number.parseFloat(part.trim()));
|
||
|
|
if (parts.length >= 3 && parts.slice(0, 3).every(Number.isFinite)) {
|
||
|
|
return [parts[0]!, parts[1]!, parts[2]!];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const hex = value.startsWith('#') ? value.slice(1) : value;
|
||
|
|
if (/^[0-9a-f]{3}$/i.test(hex)) {
|
||
|
|
return [
|
||
|
|
Number.parseInt(hex[0]! + hex[0]!, 16),
|
||
|
|
Number.parseInt(hex[1]! + hex[1]!, 16),
|
||
|
|
Number.parseInt(hex[2]! + hex[2]!, 16),
|
||
|
|
];
|
||
|
|
}
|
||
|
|
if (/^[0-9a-f]{6}$/i.test(hex)) {
|
||
|
|
return [
|
||
|
|
Number.parseInt(hex.slice(0, 2), 16),
|
||
|
|
Number.parseInt(hex.slice(2, 4), 16),
|
||
|
|
Number.parseInt(hex.slice(4, 6), 16),
|
||
|
|
];
|
||
|
|
}
|
||
|
|
return [255, 255, 255];
|
||
|
|
}
|
||
|
|
|
||
|
|
function withAlpha(hex: string, alpha: number): string {
|
||
|
|
const [r, g, b] = parseColor(hex);
|
||
|
|
return `rgba(${r},${g},${b},${clamp(alpha, 0, 1)})`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function mix(hexA: string, hexB: string, amount: number): string {
|
||
|
|
const a = parseColor(hexA);
|
||
|
|
const b = parseColor(hexB);
|
||
|
|
const t = clamp(amount, 0, 1);
|
||
|
|
return `rgb(${Math.round(a[0] + (b[0] - a[0]) * t)},${Math.round(
|
||
|
|
a[1] + (b[1] - a[1]) * t,
|
||
|
|
)},${Math.round(a[2] + (b[2] - a[2]) * t)})`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function makePaperTexture(): string | undefined {
|
||
|
|
if (typeof document === 'undefined') return undefined;
|
||
|
|
const size = 96;
|
||
|
|
const canvas = document.createElement('canvas');
|
||
|
|
canvas.width = size;
|
||
|
|
canvas.height = size;
|
||
|
|
const ctx = canvas.getContext('2d');
|
||
|
|
if (!ctx) return undefined;
|
||
|
|
const image = ctx.createImageData(size, size);
|
||
|
|
let seed = 0x1a2b3c4d;
|
||
|
|
for (let i = 0; i < image.data.length; i += 4) {
|
||
|
|
seed = (seed * 1664525 + 1013904223) >>> 0;
|
||
|
|
const grain = seed % 18;
|
||
|
|
image.data[i] = 0;
|
||
|
|
image.data[i + 1] = 0;
|
||
|
|
image.data[i + 2] = 0;
|
||
|
|
image.data[i + 3] = grain;
|
||
|
|
}
|
||
|
|
ctx.putImageData(image, 0, 0);
|
||
|
|
return canvas.toDataURL('image/png');
|
||
|
|
}
|
||
|
|
|
||
|
|
type BallState = {
|
||
|
|
staff: number;
|
||
|
|
color: string;
|
||
|
|
motion: Motion;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const MusicScroll: React.FC<{data: RenderData}> = ({data}) => {
|
||
|
|
const frame = useCurrentFrame();
|
||
|
|
const {width, height, fps} = useVideoConfig();
|
||
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||
|
|
const paperTexture = useMemo(makePaperTexture, []);
|
||
|
|
const settings = data.settings;
|
||
|
|
const meta = data.meta;
|
||
|
|
|
||
|
|
const uniqueLanes = useMemo(
|
||
|
|
() => [...new Set(data.activations.map((note) => note.staff))].sort((a, b) => a - b),
|
||
|
|
[data.activations],
|
||
|
|
);
|
||
|
|
const landings = useMemo(
|
||
|
|
() => new Map(uniqueLanes.map((staff) => [staff, groupLandings(data.activations, staff)])),
|
||
|
|
[data.activations, uniqueLanes],
|
||
|
|
);
|
||
|
|
const colorForStaff = useMemo(() => {
|
||
|
|
const map = new Map<number, string>();
|
||
|
|
uniqueLanes.forEach((staff, index) => {
|
||
|
|
map.set(staff, settings.staffColors[index % settings.staffColors.length] ?? '#bda0ff');
|
||
|
|
});
|
||
|
|
return map;
|
||
|
|
}, [uniqueLanes, settings.staffColors]);
|
||
|
|
|
||
|
|
const introSeconds = settings.introSeconds;
|
||
|
|
const t = frame / fps - introSeconds;
|
||
|
|
const paperOpacity = clamp((t + introSeconds) / Math.max(0.2, Math.min(0.55, introSeconds)), 0, 1);
|
||
|
|
const contentOpacity = clamp((t + 0.2) / 0.28, 0, 1);
|
||
|
|
const titleOpacity = clamp((t + introSeconds) / Math.max(0.3, Math.min(0.7, introSeconds)), 0, 1);
|
||
|
|
|
||
|
|
const displayHeight = Math.max(120, height * settings.scoreHeightRatio);
|
||
|
|
const displayScale = displayHeight / Math.max(1, meta.svgHeight);
|
||
|
|
const totalWidth = meta.svgWidth * displayScale;
|
||
|
|
const centerOffset = totalWidth < width ? (width - totalWidth) / 2 : 0;
|
||
|
|
const scrollX = scrollTrack(data.scroll, t);
|
||
|
|
const scoreLeft = centerOffset - scrollX * displayScale;
|
||
|
|
const scoreTop = (height - displayHeight) / 2 + height * 0.018;
|
||
|
|
const paperPad = Math.max(16, displayHeight * 0.07);
|
||
|
|
/**
|
||
|
|
* The sheet is much wider than the frame: once the camera tilts, a
|
||
|
|
* viewport-wide band would show its left/right edges inside the picture.
|
||
|
|
*/
|
||
|
|
const paperOverhang = width * 2;
|
||
|
|
|
||
|
|
const balls: BallState[] = [];
|
||
|
|
for (const staff of uniqueLanes) {
|
||
|
|
const motion = performanceAt(landings.get(staff) ?? [], t);
|
||
|
|
if (!motion) continue;
|
||
|
|
if (motion.opacity <= 0.001) continue;
|
||
|
|
balls.push({staff, color: colorForStaff.get(staff) ?? '#bda0ff', motion});
|
||
|
|
}
|
||
|
|
|
||
|
|
const rings = activeRingsAt(data.activations, t);
|
||
|
|
const noteAlpha = paperOpacity;
|
||
|
|
const isPortrait = height > width;
|
||
|
|
const headerTop = height * (isPortrait ? 0.05 : 0.055);
|
||
|
|
const headerPadding = width * (isPortrait ? 0.065 : 0.055);
|
||
|
|
const titleSize = Math.round(height * (isPortrait ? 0.026 : 0.04));
|
||
|
|
const subtitleSize = Math.round(height * (isPortrait ? 0.014 : 0.019));
|
||
|
|
const composerSize = Math.round(height * (isPortrait ? 0.013 : 0.017));
|
||
|
|
const progressBottom = height * (isPortrait ? 0.045 : 0.042);
|
||
|
|
const progress = clamp(t / Math.max(0.1, meta.musicDuration), 0, 1);
|
||
|
|
const progressOpacity = titleOpacity * (settings.showProgress ? 0.6 : 0);
|
||
|
|
|
||
|
|
const tiltX = settings.tiltX ?? 0;
|
||
|
|
const tiltY = settings.tiltY ?? 0;
|
||
|
|
const tiltZ = settings.tiltZ ?? 0;
|
||
|
|
const perspective = Math.max(500, settings.perspective ?? 1800);
|
||
|
|
const tiltZoom = Math.max(0.5, settings.tiltZoom ?? 1);
|
||
|
|
const paperAlpha = settings.paperAlpha ?? 1;
|
||
|
|
const scoreColor = settings.scoreColor ?? '#14110d';
|
||
|
|
const planeTransform = `rotateX(${tiltX}deg) rotateY(${tiltY}deg) rotateZ(${tiltZ}deg) scale(${tiltZoom})`;
|
||
|
|
|
||
|
|
const introFrames = Math.round(settings.introSeconds * fps);
|
||
|
|
const offsetMs = settings.audioOffsetMs;
|
||
|
|
const delayFrames = offsetMs > 0 ? Math.round((offsetMs / 1000) * fps) : 0;
|
||
|
|
const trimFrames = offsetMs < 0 ? Math.round((-offsetMs / 1000) * fps) : 0;
|
||
|
|
|
||
|
|
useLayoutEffect(() => {
|
||
|
|
const canvas = canvasRef.current;
|
||
|
|
if (!canvas) return;
|
||
|
|
if (canvas.width !== width) canvas.width = width;
|
||
|
|
if (canvas.height !== height) canvas.height = height;
|
||
|
|
const ctx = canvas.getContext('2d');
|
||
|
|
if (!ctx) return;
|
||
|
|
ctx.clearRect(0, 0, width, height);
|
||
|
|
|
||
|
|
const unit = displayScale;
|
||
|
|
/** Score coordinates -> the plane's own pixel canvas (before the 3D transform). */
|
||
|
|
const toPaper = (x: number, y: number): [number, number] => [
|
||
|
|
(x - scrollX) * displayScale + centerOffset,
|
||
|
|
scoreTop + y * displayScale,
|
||
|
|
];
|
||
|
|
|
||
|
|
// Mirror of the CSS transform on the score plane, evaluated here so the orbs
|
||
|
|
// can be drawn in screen space: they keep a round silhouette at any camera
|
||
|
|
// angle instead of being squashed into ellipses by the paper's perspective.
|
||
|
|
const rad = (deg: number) => (deg * Math.PI) / 180;
|
||
|
|
const cosX = Math.cos(rad(tiltX));
|
||
|
|
const sinX = Math.sin(rad(tiltX));
|
||
|
|
const cosY = Math.cos(rad(tiltY));
|
||
|
|
const sinY = Math.sin(rad(tiltY));
|
||
|
|
const cosZ = Math.cos(rad(tiltZ));
|
||
|
|
const sinZ = Math.sin(rad(tiltZ));
|
||
|
|
const midX = width / 2;
|
||
|
|
const midY = height / 2;
|
||
|
|
/** Score units above the paper -> plane-local pixels, before the 3D transform. */
|
||
|
|
const lift = Math.max(0, settings.ballLift ?? 1);
|
||
|
|
const depthToPixels = (depth: number) => liftDepth(depth, lift) * displayScale;
|
||
|
|
const orbRadius = (depth: number) => 2.5 * unit * settings.ballScale * depth;
|
||
|
|
|
||
|
|
const project = (x: number, y: number, z = 0) => {
|
||
|
|
const lx = (x - midX) * tiltZoom;
|
||
|
|
const ly = (y - midY) * tiltZoom;
|
||
|
|
// CSS applies rotateX * rotateY * rotateZ * scale to the local point.
|
||
|
|
const rzX = lx * cosZ - ly * sinZ;
|
||
|
|
const rzY = lx * sinZ + ly * cosZ;
|
||
|
|
const ryX = rzX * cosY + z * sinY;
|
||
|
|
const ryZ = -rzX * sinY + z * cosY;
|
||
|
|
const rxY = rzY * cosX - ryZ * sinX;
|
||
|
|
const rxZ = rzY * sinX + ryZ * cosX;
|
||
|
|
const w = perspective / Math.max(1, perspective - rxZ);
|
||
|
|
return {x: midX + ryX * w, y: midY + rxY * w, w, depth: rxZ};
|
||
|
|
};
|
||
|
|
|
||
|
|
/** Draw in paper-plane units, so shadows and rings lie flat on the sheet. */
|
||
|
|
const onPaper = (x: number, y: number, draw: () => void) => {
|
||
|
|
const origin = project(x, y, 0);
|
||
|
|
const alongX = project(x + 1, y, 0);
|
||
|
|
const alongY = project(x, y + 1, 0);
|
||
|
|
ctx.save();
|
||
|
|
ctx.setTransform(
|
||
|
|
alongX.x - origin.x,
|
||
|
|
alongX.y - origin.y,
|
||
|
|
alongY.x - origin.x,
|
||
|
|
alongY.y - origin.y,
|
||
|
|
origin.x,
|
||
|
|
origin.y,
|
||
|
|
);
|
||
|
|
draw();
|
||
|
|
ctx.restore();
|
||
|
|
};
|
||
|
|
|
||
|
|
// Contact shadows, flattened onto the sheet so each hop reads as height.
|
||
|
|
for (const ball of balls) {
|
||
|
|
const motion = ball.motion;
|
||
|
|
const [px, py] = toPaper(motion.position[0], motion.position[1]);
|
||
|
|
const r = 2.5 * unit * settings.ballScale;
|
||
|
|
const height = Math.max(0, motion.depth - REST_DEPTH) * lift;
|
||
|
|
const spread = r * (1.6 + Math.min(2.2, height * 0.08));
|
||
|
|
const strength = 0.36 / (1 + height / 9);
|
||
|
|
onPaper(px, py, () => {
|
||
|
|
const shadow = ctx.createRadialGradient(0, 0, r * 0.1, 0, 0, spread);
|
||
|
|
shadow.addColorStop(0, `rgba(0,0,0,${strength})`);
|
||
|
|
shadow.addColorStop(0.5, `rgba(0,0,0,${strength * 0.4})`);
|
||
|
|
shadow.addColorStop(1, 'rgba(0,0,0,0)');
|
||
|
|
ctx.globalAlpha = motion.opacity * 0.9 * contentOpacity;
|
||
|
|
ctx.fillStyle = shadow;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(0, 0, spread, 0, Math.PI * 2);
|
||
|
|
ctx.fill();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Hit markers stay on the sheet and carry the orb's own lane colour, so a
|
||
|
|
// played note reads as a trace of that ball instead of a dark ring.
|
||
|
|
for (const note of rings) {
|
||
|
|
const age = t - note.time;
|
||
|
|
if (age < 0 || age > 3.6) continue;
|
||
|
|
const sustain = note.kind === 'sustain';
|
||
|
|
const flash = Math.exp(-age / 0.14) * (sustain ? 0.55 : 1);
|
||
|
|
const fade = Math.max(0, 1 - age / 3.6) ** 1.15;
|
||
|
|
const expansion = 1 + 0.23 * (1 - Math.exp(-age / 0.055));
|
||
|
|
const color = colorForStaff.get(note.staff) ?? '#bda0ff';
|
||
|
|
const [nx, ny] = toPaper(note.x, note.y);
|
||
|
|
const ringR = 4.2 * unit * expansion;
|
||
|
|
onPaper(nx, ny, () => {
|
||
|
|
ctx.globalAlpha = noteAlpha;
|
||
|
|
|
||
|
|
const halo = ctx.createRadialGradient(0, 0, ringR * 0.45, 0, 0, ringR * 2.3);
|
||
|
|
halo.addColorStop(0, withAlpha(color, (0.3 + flash * 0.25) * fade));
|
||
|
|
halo.addColorStop(1, withAlpha(color, 0));
|
||
|
|
ctx.fillStyle = halo;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(0, 0, ringR * 2.3, 0, Math.PI * 2);
|
||
|
|
ctx.fill();
|
||
|
|
|
||
|
|
ctx.strokeStyle = withAlpha(color, (sustain ? 0.6 : 0.82) * fade);
|
||
|
|
ctx.lineWidth = Math.max(1.2, 0.55 * unit);
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(0, 0, ringR, 0, Math.PI * 2);
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
ctx.strokeStyle = withAlpha(mix(color, '#ffffff', 0.4 + flash * 0.4), 0.6 * fade);
|
||
|
|
ctx.lineWidth = Math.max(0.9, 0.28 * unit);
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(0, 0, ringR * 0.84, 0, Math.PI * 2);
|
||
|
|
ctx.stroke();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Trails: a 3D arc in the same space as the orb, drawn only along the part
|
||
|
|
// of the hop already travelled so it reads as a tail behind the ball.
|
||
|
|
for (const ball of balls) {
|
||
|
|
const motion = ball.motion;
|
||
|
|
if (motion.trailOpacity <= 0.001) continue;
|
||
|
|
const steps = 30;
|
||
|
|
const trailEnd = motion.departing ? Math.max(0.04, motion.u) : 1;
|
||
|
|
const samples = Array.from({length: steps}, (_, i) => {
|
||
|
|
const [x, y, z] = arcPoint(motion.from, motion.to, (i / (steps - 1)) * trailEnd);
|
||
|
|
const [px, py] = toPaper(x, y);
|
||
|
|
const point = project(px, py, depthToPixels(z));
|
||
|
|
return {x: point.x, y: point.y, w: point.w};
|
||
|
|
});
|
||
|
|
ctx.save();
|
||
|
|
ctx.globalCompositeOperation = 'lighter';
|
||
|
|
ctx.lineCap = 'round';
|
||
|
|
ctx.lineJoin = 'round';
|
||
|
|
const stroke = (widthScale: number, alphaScale: number) => {
|
||
|
|
for (let i = 1; i < samples.length; i += 1) {
|
||
|
|
const a = samples[i - 1]!;
|
||
|
|
const b = samples[i]!;
|
||
|
|
const f = i / (samples.length - 1);
|
||
|
|
const head = f * f;
|
||
|
|
ctx.globalAlpha = noteAlpha * motion.trailOpacity * (0.04 + head * 0.72) * alphaScale;
|
||
|
|
ctx.strokeStyle = withAlpha(ball.color, 0.85);
|
||
|
|
ctx.lineWidth = Math.max(
|
||
|
|
0.7,
|
||
|
|
(0.3 + 0.62 * head) * unit * b.w * widthScale,
|
||
|
|
);
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(a.x, a.y);
|
||
|
|
ctx.lineTo(b.x, b.y);
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
stroke(3.6, 0.16);
|
||
|
|
stroke(1, 1);
|
||
|
|
ctx.restore();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Orbs: real spheres in screen space, so they never collapse into ellipses.
|
||
|
|
for (const ball of balls) {
|
||
|
|
const motion = ball.motion;
|
||
|
|
const opacity = motion.opacity * contentOpacity;
|
||
|
|
if (opacity <= 0.001) continue;
|
||
|
|
const [px, py] = toPaper(motion.position[0], motion.position[1]);
|
||
|
|
const head = project(px, py, depthToPixels(motion.depth));
|
||
|
|
const r = orbRadius(head.w);
|
||
|
|
const pulse = motion.pulse;
|
||
|
|
const radius = r * (1 + pulse * 0.1);
|
||
|
|
const sx = head.x;
|
||
|
|
const sy = head.y;
|
||
|
|
|
||
|
|
ctx.save();
|
||
|
|
ctx.globalCompositeOperation = 'lighter';
|
||
|
|
ctx.globalAlpha = opacity;
|
||
|
|
const glowRadius = radius * 9.5;
|
||
|
|
const glow = ctx.createRadialGradient(sx, sy, radius * 0.2, sx, sy, glowRadius);
|
||
|
|
glow.addColorStop(0, withAlpha(ball.color, 0.5 * settings.glow));
|
||
|
|
glow.addColorStop(0.22, withAlpha(ball.color, 0.16 * settings.glow));
|
||
|
|
glow.addColorStop(0.6, withAlpha(ball.color, 0.04 * settings.glow));
|
||
|
|
glow.addColorStop(1, withAlpha(ball.color, 0));
|
||
|
|
ctx.fillStyle = glow;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(sx, sy, glowRadius, 0, Math.PI * 2);
|
||
|
|
ctx.fill();
|
||
|
|
ctx.restore();
|
||
|
|
|
||
|
|
ctx.save();
|
||
|
|
ctx.globalAlpha = opacity;
|
||
|
|
const body = ctx.createRadialGradient(
|
||
|
|
sx - radius * 0.34,
|
||
|
|
sy - radius * 0.38,
|
||
|
|
radius * 0.04,
|
||
|
|
sx + radius * 0.1,
|
||
|
|
sy + radius * 0.14,
|
||
|
|
radius * 1.1,
|
||
|
|
);
|
||
|
|
body.addColorStop(0, 'rgba(255,255,255,1)');
|
||
|
|
body.addColorStop(0.16, mix(ball.color, '#ffffff', 0.9));
|
||
|
|
body.addColorStop(0.42, mix(ball.color, '#ffffff', 0.52));
|
||
|
|
body.addColorStop(0.7, mix(ball.color, '#ffffff', 0.18));
|
||
|
|
body.addColorStop(0.9, ball.color);
|
||
|
|
body.addColorStop(1, mix(ball.color, '#000000', 0.12));
|
||
|
|
ctx.fillStyle = body;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(sx, sy, radius, 0, Math.PI * 2);
|
||
|
|
ctx.fill();
|
||
|
|
|
||
|
|
const specular = ctx.createRadialGradient(
|
||
|
|
sx - radius * 0.36,
|
||
|
|
sy - radius * 0.4,
|
||
|
|
0,
|
||
|
|
sx - radius * 0.36,
|
||
|
|
sy - radius * 0.4,
|
||
|
|
radius * 0.46,
|
||
|
|
);
|
||
|
|
specular.addColorStop(0, 'rgba(255,255,255,0.92)');
|
||
|
|
specular.addColorStop(1, 'rgba(255,255,255,0)');
|
||
|
|
ctx.fillStyle = specular;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(sx, sy, radius, 0, Math.PI * 2);
|
||
|
|
ctx.fill();
|
||
|
|
|
||
|
|
ctx.globalCompositeOperation = 'lighter';
|
||
|
|
ctx.strokeStyle = withAlpha(mix(ball.color, '#ffffff', 0.85), 0.2 * opacity);
|
||
|
|
ctx.lineWidth = Math.max(0.8, radius * 0.07);
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(sx, sy, radius * 0.94, 0, Math.PI * 2);
|
||
|
|
ctx.stroke();
|
||
|
|
ctx.restore();
|
||
|
|
}
|
||
|
|
}, [
|
||
|
|
width,
|
||
|
|
height,
|
||
|
|
t,
|
||
|
|
scrollX,
|
||
|
|
displayScale,
|
||
|
|
displayHeight,
|
||
|
|
centerOffset,
|
||
|
|
scoreTop,
|
||
|
|
balls,
|
||
|
|
rings,
|
||
|
|
noteAlpha,
|
||
|
|
contentOpacity,
|
||
|
|
settings.ballScale,
|
||
|
|
settings.ballLift,
|
||
|
|
settings.glow,
|
||
|
|
colorForStaff,
|
||
|
|
tiltX,
|
||
|
|
tiltY,
|
||
|
|
tiltZ,
|
||
|
|
perspective,
|
||
|
|
tiltZoom,
|
||
|
|
]);
|
||
|
|
|
||
|
|
if (!data.events.length || !data.svgUrl) {
|
||
|
|
return (
|
||
|
|
<AbsoluteFill
|
||
|
|
style={{
|
||
|
|
background: settings.background,
|
||
|
|
color: '#e6ded2',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
fontSize: 38,
|
||
|
|
fontFamily: settings.titleFont,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
请先在网页中上传 MusicXML 并生成预览
|
||
|
|
</AbsoluteFill>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AbsoluteFill style={{background: settings.background, overflow: 'hidden'}}>
|
||
|
|
<AbsoluteFill
|
||
|
|
style={{
|
||
|
|
background:
|
||
|
|
'radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.045), transparent 58%)',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Tilted score plane: paper, notation and its light spill share one 3D transform */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
inset: 0,
|
||
|
|
perspective: `${perspective}px`,
|
||
|
|
perspectiveOrigin: '50% 50%',
|
||
|
|
overflow: 'hidden',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
inset: 0,
|
||
|
|
transformOrigin: '50% 50%',
|
||
|
|
transformStyle: 'preserve-3d',
|
||
|
|
transform: planeTransform,
|
||
|
|
willChange: 'transform',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* Paper band, wider than the frame so tilted edges stay off-screen */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
left: -paperOverhang,
|
||
|
|
width: width + paperOverhang * 2,
|
||
|
|
top: scoreTop - paperPad,
|
||
|
|
height: displayHeight + paperPad * 2,
|
||
|
|
opacity: paperOpacity * paperAlpha,
|
||
|
|
backgroundColor: settings.paperColor,
|
||
|
|
backgroundImage: [
|
||
|
|
paperTexture ? `url(${paperTexture})` : '',
|
||
|
|
'linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02) 16%, rgba(0,0,0,0.025) 78%, rgba(0,0,0,0.2))',
|
||
|
|
'radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.12), transparent 72%)',
|
||
|
|
]
|
||
|
|
.filter(Boolean)
|
||
|
|
.join(', '),
|
||
|
|
backgroundSize: paperTexture
|
||
|
|
? '96px 96px, 100% 100%, 100% 100%'
|
||
|
|
: '100% 100%, 100% 100%',
|
||
|
|
boxShadow:
|
||
|
|
'0 32px 90px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.12) inset, 0 -2px 0 rgba(0,0,0,0.18) inset',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Score: the opaque SVG becomes a mask so its ink colour is live-editable */}
|
||
|
|
<Img
|
||
|
|
src={data.svgUrl}
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
left: 0,
|
||
|
|
top: 0,
|
||
|
|
width: 1,
|
||
|
|
height: 1,
|
||
|
|
opacity: 0,
|
||
|
|
pointerEvents: 'none',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
left: scoreLeft,
|
||
|
|
top: scoreTop,
|
||
|
|
width: totalWidth,
|
||
|
|
height: displayHeight,
|
||
|
|
opacity: paperOpacity,
|
||
|
|
backgroundColor: scoreColor,
|
||
|
|
WebkitMaskImage: `url("${data.svgUrl}")`,
|
||
|
|
WebkitMaskRepeat: 'no-repeat',
|
||
|
|
WebkitMaskSize: '100% 100%',
|
||
|
|
WebkitMaskPosition: '0 0',
|
||
|
|
maskImage: `url("${data.svgUrl}")`,
|
||
|
|
maskRepeat: 'no-repeat',
|
||
|
|
maskSize: '100% 100%',
|
||
|
|
maskPosition: '0 0',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Paper lights */}
|
||
|
|
{balls.map((ball) => {
|
||
|
|
const [x, y] = [
|
||
|
|
(ball.motion.position[0] - scrollX) * displayScale + centerOffset,
|
||
|
|
scoreTop + ball.motion.position[1] * displayScale,
|
||
|
|
];
|
||
|
|
const radius = Math.max(150, displayHeight * 0.48) * (0.85 + 0.2 * settings.glow);
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={`light-${ball.staff}`}
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
inset: 0,
|
||
|
|
pointerEvents: 'none',
|
||
|
|
opacity: paperOpacity,
|
||
|
|
mixBlendMode: 'screen',
|
||
|
|
background: `radial-gradient(circle ${radius}px at ${x}px ${y}px, ${withAlpha(
|
||
|
|
ball.color,
|
||
|
|
0.34 * settings.glow * ball.motion.opacity,
|
||
|
|
)} 0%, ${withAlpha(ball.color, 0.1 * settings.glow * ball.motion.opacity)} 34%, transparent 70%)`,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Orbs live above the tilted plane and are drawn in screen space */}
|
||
|
|
<canvas
|
||
|
|
ref={canvasRef}
|
||
|
|
style={{position: 'absolute', inset: 0, width: '100%', height: '100%'}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Vignette keeps the eye on the score */}
|
||
|
|
<AbsoluteFill
|
||
|
|
style={{
|
||
|
|
pointerEvents: 'none',
|
||
|
|
background:
|
||
|
|
'radial-gradient(ellipse at 50% 52%, transparent 34%, rgba(7,5,12,0.18) 76%, rgba(3,2,7,0.5) 112%)',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Header scrim keeps the title readable over a tilted sheet */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
left: 0,
|
||
|
|
right: 0,
|
||
|
|
top: 0,
|
||
|
|
height: height * 0.24,
|
||
|
|
pointerEvents: 'none',
|
||
|
|
background: `linear-gradient(180deg, ${withAlpha(settings.background, 0.82)} 0%, ${withAlpha(
|
||
|
|
settings.background,
|
||
|
|
0.4,
|
||
|
|
)} 55%, transparent 100%)`,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{settings.showTitle && (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
top: headerTop,
|
||
|
|
left: headerPadding,
|
||
|
|
right: headerPadding,
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'flex-end',
|
||
|
|
gap: width * 0.04,
|
||
|
|
opacity: titleOpacity,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div style={{minWidth: 0, flex: 1}}>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
fontFamily: settings.titleFont,
|
||
|
|
fontSize: titleSize,
|
||
|
|
lineHeight: 1.05,
|
||
|
|
color: '#f4ede2',
|
||
|
|
letterSpacing: '0.012em',
|
||
|
|
whiteSpace: 'nowrap',
|
||
|
|
overflow: 'hidden',
|
||
|
|
textOverflow: 'ellipsis',
|
||
|
|
textShadow: '0 2px 20px rgba(0,0,0,0.35)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{meta.title || 'Untitled'}
|
||
|
|
</div>
|
||
|
|
{meta.subtitle ? (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
marginTop: height * 0.008,
|
||
|
|
fontFamily: settings.titleFont,
|
||
|
|
fontSize: subtitleSize,
|
||
|
|
color: 'rgba(244,237,226,0.52)',
|
||
|
|
letterSpacing: '0.05em',
|
||
|
|
whiteSpace: 'nowrap',
|
||
|
|
overflow: 'hidden',
|
||
|
|
textOverflow: 'ellipsis',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{meta.subtitle}
|
||
|
|
</div>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
{meta.composer ? (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
fontFamily: settings.titleFont,
|
||
|
|
fontSize: composerSize,
|
||
|
|
color: 'rgba(244,237,226,0.55)',
|
||
|
|
letterSpacing: '0.08em',
|
||
|
|
whiteSpace: 'nowrap',
|
||
|
|
paddingBottom: height * 0.006,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{meta.composer}
|
||
|
|
</div>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Thin rule under header */}
|
||
|
|
{settings.showTitle && (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
top: headerTop + titleSize * 1.35 + (meta.subtitle ? subtitleSize * 1.35 : 0),
|
||
|
|
left: headerPadding,
|
||
|
|
right: headerPadding,
|
||
|
|
height: 1,
|
||
|
|
opacity: titleOpacity * 0.5,
|
||
|
|
background: `linear-gradient(90deg, ${withAlpha(
|
||
|
|
settings.staffColors[0] ?? '#bda0ff',
|
||
|
|
0.75,
|
||
|
|
)}, rgba(255,255,255,0.08) 55%, transparent)`,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Progress */}
|
||
|
|
{settings.showProgress && (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
left: headerPadding,
|
||
|
|
right: headerPadding,
|
||
|
|
bottom: progressBottom,
|
||
|
|
height: 2,
|
||
|
|
opacity: progressOpacity,
|
||
|
|
backgroundColor: 'rgba(255,255,255,0.12)',
|
||
|
|
borderRadius: 2,
|
||
|
|
overflow: 'hidden',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: `${progress * 100}%`,
|
||
|
|
height: '100%',
|
||
|
|
background: `linear-gradient(90deg, ${withAlpha(
|
||
|
|
settings.staffColors[0] ?? '#bda0ff',
|
||
|
|
0.9,
|
||
|
|
)}, ${withAlpha(settings.staffColors[1] ?? '#ffbc6d', 0.9)})`,
|
||
|
|
borderRadius: 2,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{data.audioUrl ? (
|
||
|
|
<Sequence from={introFrames + delayFrames}>
|
||
|
|
<Audio src={data.audioUrl} startFrom={trimFrames} />
|
||
|
|
</Sequence>
|
||
|
|
) : null}
|
||
|
|
</AbsoluteFill>
|
||
|
|
);
|
||
|
|
};
|