Hermes-agent
This commit is contained in:
Zakaria
Executable
+108
@@ -0,0 +1,108 @@
|
||||
#!/bin/bash
|
||||
# p5.js Skill — Headless Render Pipeline
|
||||
# Renders a p5.js sketch to MP4 video via Puppeteer + ffmpeg
|
||||
#
|
||||
# Usage:
|
||||
# bash scripts/render.sh sketch.html output.mp4 [options]
|
||||
#
|
||||
# Options:
|
||||
# --width Canvas width (default: 1920)
|
||||
# --height Canvas height (default: 1080)
|
||||
# --fps Frames per second (default: 30)
|
||||
# --duration Duration in seconds (default: 10)
|
||||
# --quality CRF value 0-51 (default: 18, lower = better)
|
||||
# --frames-only Only export frames, skip MP4 encoding
|
||||
#
|
||||
# Examples:
|
||||
# bash scripts/render.sh sketch.html output.mp4
|
||||
# bash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 60
|
||||
# bash scripts/render.sh sketch.html output.mp4 --width 3840 --height 2160
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
# Defaults
|
||||
WIDTH=1920
|
||||
HEIGHT=1080
|
||||
FPS=30
|
||||
DURATION=10
|
||||
CRF=18
|
||||
FRAMES_ONLY=false
|
||||
|
||||
# Parse arguments
|
||||
INPUT="${1:?Usage: render.sh <input.html> <output.mp4> [options]}"
|
||||
OUTPUT="${2:?Usage: render.sh <input.html> <output.mp4> [options]}"
|
||||
shift 2
|
||||
|
||||
while [[ $# -gt 0 ]]; do
|
||||
case $1 in
|
||||
--width) WIDTH="$2"; shift 2 ;;
|
||||
--height) HEIGHT="$2"; shift 2 ;;
|
||||
--fps) FPS="$2"; shift 2 ;;
|
||||
--duration) DURATION="$2"; shift 2 ;;
|
||||
--quality) CRF="$2"; shift 2 ;;
|
||||
--frames-only) FRAMES_ONLY=true; shift ;;
|
||||
*) echo "Unknown option: $1"; exit 1 ;;
|
||||
esac
|
||||
done
|
||||
|
||||
TOTAL_FRAMES=$((FPS * DURATION))
|
||||
SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||
FRAME_DIR=$(mktemp -d)
|
||||
|
||||
echo "=== p5.js Render Pipeline ==="
|
||||
echo "Input: $INPUT"
|
||||
echo "Output: $OUTPUT"
|
||||
echo "Resolution: ${WIDTH}x${HEIGHT}"
|
||||
echo "FPS: $FPS"
|
||||
echo "Duration: ${DURATION}s (${TOTAL_FRAMES} frames)"
|
||||
echo "Quality: CRF $CRF"
|
||||
echo "Frame dir: $FRAME_DIR"
|
||||
echo ""
|
||||
|
||||
# Check dependencies
|
||||
command -v node >/dev/null 2>&1 || { echo "Error: Node.js required"; exit 1; }
|
||||
if [ "$FRAMES_ONLY" = false ]; then
|
||||
command -v ffmpeg >/dev/null 2>&1 || { echo "Error: ffmpeg required for MP4"; exit 1; }
|
||||
fi
|
||||
|
||||
# Step 1: Capture frames via Puppeteer
|
||||
echo "Step 1/2: Capturing ${TOTAL_FRAMES} frames..."
|
||||
node "$SCRIPT_DIR/export-frames.js" \
|
||||
"$INPUT" \
|
||||
--output "$FRAME_DIR" \
|
||||
--width "$WIDTH" \
|
||||
--height "$HEIGHT" \
|
||||
--frames "$TOTAL_FRAMES" \
|
||||
--fps "$FPS"
|
||||
|
||||
echo "Frames captured to $FRAME_DIR"
|
||||
|
||||
if [ "$FRAMES_ONLY" = true ]; then
|
||||
echo "Frames saved to: $FRAME_DIR"
|
||||
echo "To encode manually:"
|
||||
echo " ffmpeg -framerate $FPS -i $FRAME_DIR/frame-%04d.png -c:v libx264 -crf $CRF -pix_fmt yuv420p $OUTPUT"
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# Step 2: Encode to MP4
|
||||
echo "Step 2/2: Encoding MP4..."
|
||||
ffmpeg -y \
|
||||
-framerate "$FPS" \
|
||||
-i "$FRAME_DIR/frame-%04d.png" \
|
||||
-c:v libx264 \
|
||||
-preset slow \
|
||||
-crf "$CRF" \
|
||||
-pix_fmt yuv420p \
|
||||
-movflags +faststart \
|
||||
"$OUTPUT" \
|
||||
2>"$FRAME_DIR/ffmpeg.log"
|
||||
|
||||
# Cleanup
|
||||
rm -rf "$FRAME_DIR"
|
||||
|
||||
# Report
|
||||
FILE_SIZE=$(ls -lh "$OUTPUT" | awk '{print $5}')
|
||||
echo ""
|
||||
echo "=== Done ==="
|
||||
echo "Output: $OUTPUT ($FILE_SIZE)"
|
||||
echo "Duration: ${DURATION}s at ${FPS}fps, ${WIDTH}x${HEIGHT}"
|
||||
Executable
+28
@@ -0,0 +1,28 @@
|
||||
#!/bin/bash
|
||||
# p5.js Skill — Local Development Server
|
||||
# Serves the current directory over HTTP for loading local assets (fonts, images)
|
||||
#
|
||||
# Usage:
|
||||
# bash scripts/serve.sh [port] [directory]
|
||||
#
|
||||
# Examples:
|
||||
# bash scripts/serve.sh # serve CWD on port 8080
|
||||
# bash scripts/serve.sh 3000 # serve CWD on port 3000
|
||||
# bash scripts/serve.sh 8080 ./my-project # serve specific directory
|
||||
|
||||
PORT="${1:-8080}"
|
||||
DIR="${2:-.}"
|
||||
|
||||
echo "=== p5.js Dev Server ==="
|
||||
echo "Serving: $(cd "$DIR" && pwd)"
|
||||
echo "URL: http://localhost:$PORT"
|
||||
echo "Press Ctrl+C to stop"
|
||||
echo ""
|
||||
|
||||
cd "$DIR" && python3 -m http.server "$PORT" 2>/dev/null || {
|
||||
echo "Python3 not found. Trying Node.js..."
|
||||
npx serve -l "$PORT" "$DIR" 2>/dev/null || {
|
||||
echo "Error: Need python3 or npx (Node.js) for local server"
|
||||
exit 1
|
||||
}
|
||||
}
|
||||
Executable
+87
@@ -0,0 +1,87 @@
|
||||
#!/bin/bash
|
||||
# p5.js Skill — Dependency Verification
|
||||
# Run: bash skills/creative/p5js/scripts/setup.sh
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
RED='\033[0;31m'
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[1;33m'
|
||||
NC='\033[0m'
|
||||
|
||||
ok() { echo -e "${GREEN}[OK]${NC} $1"; }
|
||||
warn() { echo -e "${YELLOW}[WARN]${NC} $1"; }
|
||||
fail() { echo -e "${RED}[FAIL]${NC} $1"; }
|
||||
|
||||
echo "=== p5.js Skill — Setup Check ==="
|
||||
echo ""
|
||||
|
||||
# Required: Node.js (for Puppeteer headless export)
|
||||
if command -v node &>/dev/null; then
|
||||
NODE_VER=$(node -v)
|
||||
ok "Node.js $NODE_VER"
|
||||
else
|
||||
warn "Node.js not found — optional, needed for headless export"
|
||||
echo " Install: https://nodejs.org/ or 'brew install node'"
|
||||
fi
|
||||
|
||||
# Required: npm (for Puppeteer install)
|
||||
if command -v npm &>/dev/null; then
|
||||
NPM_VER=$(npm -v)
|
||||
ok "npm $NPM_VER"
|
||||
else
|
||||
warn "npm not found — optional, needed for headless export"
|
||||
fi
|
||||
|
||||
# Optional: Puppeteer
|
||||
if node -e "require('puppeteer')" 2>/dev/null; then
|
||||
ok "Puppeteer installed"
|
||||
else
|
||||
warn "Puppeteer not installed — needed for headless export"
|
||||
echo " Install: npm install puppeteer"
|
||||
fi
|
||||
|
||||
# Optional: ffmpeg (for MP4 encoding from frame sequences)
|
||||
if command -v ffmpeg &>/dev/null; then
|
||||
FFMPEG_VER=$(ffmpeg -version 2>&1 | head -1 | awk '{print $3}')
|
||||
ok "ffmpeg $FFMPEG_VER"
|
||||
else
|
||||
warn "ffmpeg not found — needed for MP4 export"
|
||||
echo " Install: brew install ffmpeg (macOS) or apt install ffmpeg (Linux)"
|
||||
fi
|
||||
|
||||
# Optional: Python3 (for local server)
|
||||
if command -v python3 &>/dev/null; then
|
||||
PY_VER=$(python3 --version 2>&1 | awk '{print $2}')
|
||||
ok "Python $PY_VER (for local server: python3 -m http.server)"
|
||||
else
|
||||
warn "Python3 not found — needed for local file serving"
|
||||
fi
|
||||
|
||||
# Browser check (macOS)
|
||||
if [[ "$(uname)" == "Darwin" ]]; then
|
||||
if open -Ra "Google Chrome" 2>/dev/null; then
|
||||
ok "Google Chrome found"
|
||||
elif open -Ra "Safari" 2>/dev/null; then
|
||||
ok "Safari found"
|
||||
else
|
||||
warn "No browser detected"
|
||||
fi
|
||||
fi
|
||||
|
||||
echo ""
|
||||
echo "=== Core Requirements ==="
|
||||
echo " A modern browser (Chrome/Firefox/Safari/Edge)"
|
||||
echo " p5.js loaded via CDN — no local install needed"
|
||||
echo ""
|
||||
echo "=== Optional (for export) ==="
|
||||
echo " Node.js + Puppeteer — headless frame capture"
|
||||
echo " ffmpeg — frame sequence to MP4"
|
||||
echo " Python3 — local development server"
|
||||
echo ""
|
||||
echo "=== Quick Start ==="
|
||||
echo " 1. Create an HTML file with inline p5.js sketch"
|
||||
echo " 2. Open in browser: open sketch.html"
|
||||
echo " 3. Press 's' to save PNG, 'g' to save GIF"
|
||||
echo ""
|
||||
echo "Setup check complete."
|
||||
Reference in New Issue
Block a user