mirror of
https://github.com/arcodange-org/mediabunny.git
synced 2026-09-27 02:43:48 +02:00
78 lines
4.5 KiB
HTML
78 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US" translate="no">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Procedural Generation example | Mediabunny</title>
|
|
<meta name="description" content="Using Mediabunny, this page will procedurally generate a video of musical bouncing balls as fast as possible.">
|
|
<script type="module" src="../base.ts"></script>
|
|
<script type="module" src="./procedural-generation.ts"></script>
|
|
<link rel="stylesheet" href="../base.css">
|
|
<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
|
|
<link rel="canonical" href="https://mediabunny.dev/examples/procedural-generation/">
|
|
<meta property="og:site_name" content="Mediabunny">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Procedural Generation example | Mediabunny">
|
|
<meta property="og:description" content="Using Mediabunny, this page will procedurally generate a video of musical bouncing balls as fast as possible.">
|
|
<meta property="og:url" content="https://mediabunny.dev/examples/procedural-generation/">
|
|
<meta property="og:image" content="https://mediabunny.dev/mediabunny-og-image.png">
|
|
<meta property="og:locale" content="en-US">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@vanilagy">
|
|
<meta name="twitter:title" content="Procedural Generation example | Mediabunny">
|
|
<meta name="twitter:description" content="Using Mediabunny, this page will procedurally generate a video of musical bouncing balls as fast as possible.">
|
|
<meta name="twitter:image" content="https://mediabunny.dev/mediabunny-og-image.png">
|
|
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Examples","item":"https://mediabunny.dev/examples"},{"@type":"ListItem","position":2,"name":"Procedural generation"}]}</script>
|
|
</head>
|
|
|
|
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
|
|
<h1 class="text-3xl font-bold text-pink-500 text-center">Procedural generation example</h1>
|
|
<p class="max-w-lg text-center">Using Mediabunny, this page will procedurally generate a video of musical bouncing balls as fast as possible.</p>
|
|
|
|
<div class="flex flex-col gap-6 mt-8 w-full max-w-80">
|
|
<div class="flex flex-col gap-2">
|
|
<label for="duration-slider" class="text-sm font-medium">Video duration</label>
|
|
<input type="range" id="duration-slider" min="5" max="60" value="15" step="1" class="h-2 bg-zinc-200 dark:bg-zinc-750 rounded-lg appearance-none cursor-pointer">
|
|
<p class="text-xs text-zinc-600 dark:text-zinc-400" id="duration-value"></p>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<label for="balls-slider" class="text-sm font-medium">Number of balls</label>
|
|
<input type="range" id="balls-slider" min="0" max="40" value="16" step="1" class="h-2 bg-zinc-200 dark:bg-zinc-750 rounded-lg appearance-none cursor-pointer">
|
|
<p class="text-xs text-zinc-600 dark:text-zinc-400" id="balls-value"></p>
|
|
</div>
|
|
|
|
<button id="render-button" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
|
|
Generate video
|
|
</button>
|
|
</div>
|
|
|
|
<hr class="w-full max-w-96 my-6 border-zinc-300 dark:border-zinc-700" style="display: none;">
|
|
|
|
<p id="error-element" class="text-red-500 mx-auto text-center max-w-[36rem]"></p>
|
|
|
|
<div class="w-full max-w-80 h-2 rounded-full bg-zinc-200 dark:bg-zinc-750 overflow-hidden" id="progress-bar-container" style="display: none;">
|
|
<div class="h-full bg-pink-500 w-0" id="progress-bar"></div>
|
|
</div>
|
|
<p class="text-xs font-medium mt-1.5 tabular-nums" id="progress-text" style="display: none;"></p>
|
|
|
|
<video controls class="rounded-md" id="result-video" style="display: none;"></video>
|
|
<p class="text-xs font-medium mt-1" id="video-info" style="display: none;"></p>
|
|
|
|
<a href="/" class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
|
<img src="../../docs/public/mediabunny-logo.svg" class="size-6">
|
|
<p class="text-sm font-medium">Mediabunny</p>
|
|
</a>
|
|
|
|
<a
|
|
href="https://github.com/Vanilagy/mediabunny/tree/main/examples/procedural-generation"
|
|
target="_blank"
|
|
class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-bl-xl"
|
|
>
|
|
<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
|
|
<p>View source code</p>
|
|
</a>
|
|
</body>
|
|
</html>
|