38 lines
1.5 KiB
HTML
38 lines
1.5 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Clawd studio</title>
|
||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=block">
|
||
|
|
<style>
|
||
|
|
html, body { margin: 0; background: #1b1820; color: #eee; font: 13px system-ui, sans-serif; }
|
||
|
|
main { padding: 12px; display: grid; gap: 8px; }
|
||
|
|
#out { width: min(100%, 1280px); aspect-ratio: 16 / 9; height: auto; background: #F3EBDC; }
|
||
|
|
.p5Canvas { display: none !important; }
|
||
|
|
.bar { display: flex; gap: 10px; align-items: center; max-width: 1280px; }
|
||
|
|
#scrub { flex: 1; }
|
||
|
|
#tt { font-variant-numeric: tabular-nums; min-width: 190px; }
|
||
|
|
</style>
|
||
|
|
<script src="node_modules/p5/lib/p5.min.js"></script>
|
||
|
|
<script src="node_modules/p5.brush/dist/p5.brush.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<main>
|
||
|
|
<canvas id="out" width="1920" height="1080"></canvas>
|
||
|
|
<div class="bar"><input id="scrub" type="range" min="0" max="11" step="0.0417" value="0"><span id="tt">loading…</span></div>
|
||
|
|
</main>
|
||
|
|
<!-- engine -->
|
||
|
|
<script src="src/config.js"></script>
|
||
|
|
<script src="src/core.js"></script>
|
||
|
|
<script src="src/clawd.js"></script>
|
||
|
|
<script src="src/timeline.js"></script>
|
||
|
|
<!-- reference sheets (standalone loops) -->
|
||
|
|
<script src="src/sheets.js"></script>
|
||
|
|
<!-- your video: add a script per scene file, in order -->
|
||
|
|
<script src="src/scenes/demo.js"></script>
|
||
|
|
<script>
|
||
|
|
// Open studio.html?loop=emotions (or views) to scrub a standalone loop instead of the video.
|
||
|
|
const q = new URLSearchParams(location.search).get('loop'); if (q && LOOPS[q]) window.LOOP = LOOPS[q];
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|