p5js

1#!/bin/bash2# p5.js Skill — Headless Render Pipeline3# Renders a p5.js sketch to MP4 video via Puppeteer + ffmpeg4#5# Usage:6#   bash scripts/render.sh sketch.html output.mp4 [options]7#8# Options:9#   --width    Canvas width (default: 1920)10#   --height   Canvas height (default: 1080)11#   --fps      Frames per second (default: 30)12#   --duration Duration in seconds (default: 10)13#   --quality  CRF value 0-51 (default: 18, lower = better)14#   --frames-only  Only export frames, skip MP4 encoding15#16# Examples:17#   bash scripts/render.sh sketch.html output.mp418#   bash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 6019#   bash scripts/render.sh sketch.html output.mp4 --width 3840 --height 216020 21set -euo pipefail22 23# Defaults24WIDTH=192025HEIGHT=108026FPS=3027DURATION=1028CRF=1829FRAMES_ONLY=false30 31# Parse arguments32INPUT="${1:?Usage: render.sh <input.html> <output.mp4> [options]}"33OUTPUT="${2:?Usage: render.sh <input.html> <output.mp4> [options]}"34shift 235 36while [[ $# -gt 0 ]]; do37  case $1 in38    --width) WIDTH="$2"; shift 2 ;;39    --height) HEIGHT="$2"; shift 2 ;;40    --fps) FPS="$2"; shift 2 ;;41    --duration) DURATION="$2"; shift 2 ;;42    --quality) CRF="$2"; shift 2 ;;43    --frames-only) FRAMES_ONLY=true; shift ;;44    *) echo "Unknown option: $1"; exit 1 ;;45  esac46done47 48TOTAL_FRAMES=$((FPS * DURATION))49SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"50FRAME_DIR=$(mktemp -d)51 52echo "=== p5.js Render Pipeline ==="53echo "Input:      $INPUT"54echo "Output:     $OUTPUT"55echo "Resolution: ${WIDTH}x${HEIGHT}"56echo "FPS:        $FPS"57echo "Duration:   ${DURATION}s (${TOTAL_FRAMES} frames)"58echo "Quality:    CRF $CRF"59echo "Frame dir:  $FRAME_DIR"60echo ""61 62# Check dependencies63command -v node >/dev/null 2>&1 || { echo "Error: Node.js required"; exit 1; }64if [ "$FRAMES_ONLY" = false ]; then65  command -v ffmpeg >/dev/null 2>&1 || { echo "Error: ffmpeg required for MP4"; exit 1; }66fi67 68# Step 1: Capture frames via Puppeteer69echo "Step 1/2: Capturing ${TOTAL_FRAMES} frames..."70node "$SCRIPT_DIR/export-frames.js" \71  "$INPUT" \72  --output "$FRAME_DIR" \73  --width "$WIDTH" \74  --height "$HEIGHT" \75  --frames "$TOTAL_FRAMES" \76  --fps "$FPS"77 78echo "Frames captured to $FRAME_DIR"79 80if [ "$FRAMES_ONLY" = true ]; then81  echo "Frames saved to: $FRAME_DIR"82  echo "To encode manually:"83  echo "  ffmpeg -framerate $FPS -i $FRAME_DIR/frame-%04d.png -c:v libx264 -crf $CRF -pix_fmt yuv420p $OUTPUT"84  exit 085fi86 87# Step 2: Encode to MP488echo "Step 2/2: Encoding MP4..."89ffmpeg -y \90  -framerate "$FPS" \91  -i "$FRAME_DIR/frame-%04d.png" \92  -c:v libx264 \93  -preset slow \94  -crf "$CRF" \95  -pix_fmt yuv420p \96  -movflags +faststart \97  "$OUTPUT" \98  2>"$FRAME_DIR/ffmpeg.log"99 100# Cleanup101rm -rf "$FRAME_DIR"102 103# Report104FILE_SIZE=$(ls -lh "$OUTPUT" | awk '{print $5}')105echo ""106echo "=== Done ==="107echo "Output: $OUTPUT ($FILE_SIZE)"108echo "Duration: ${DURATION}s at ${FPS}fps, ${WIDTH}x${HEIGHT}"109