💾 Archived View for thingvellir.net › toys › applet › index.html captured on 2023-01-29 at 02:57:48.
-=-=-=-=-=-=-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebAssembly Applet — thingvellir.net</title>
<meta name="referrer" content="no-referrer">
<meta name="viewport" width="device-width" initial-scale="1.0">
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="/style.css">
<link rel="icon" href="/favicon.png">
<style>
div#applet { text-align: center }
div#applet canvas {
image-rendering: pixelated;
filter: grayscale(0%) blur(0px);
transition: .5s filter;
background: #0003;
}
div#applet canvas.quitted {
filter: grayscale(80%) blur(8px);
}
div#applet canvas.quitted::after {
content: "Applet Quitted";
display: block;
font: bold 16pt sans-serif;
width: 100%;
height: 100%;
background: #0007;
color: #fff;
z-index: 1000;
}
div#applet textarea {
width: 100%;
height: 16ch;
resize: none;
white-space: pre-wrap;
overflow-x: wrap;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1>WebAssembly Applet</h1>
<p>I miss the old Java applets and Flash animations of the
mid-to-late 2000s. They're long dead by now; Over the years
it became increasingly obvious that giving servers the ability to
run arbitrary un-sandboxed programs on their clients was Very Bad.</p>
<p>So far, I haven't seen anything similar to applets for WebAssembly.
A relatively simple, standardised API for user input and graphics
would be cool for making little games and tools without needing
to spend time focusing on everything around the canvas.</p>
<h2>The Applet Demo Itself</h2>
<div id="applet">
<canvas width="64" height="64" tabindex="1">
<p>This toy needs a Gecko, WebKit, or Blink web browser
with Javascript enabled and support for WebAssembly
to function properly.</p>
</canvas>
<hr>
<label for="demo-picker">Pick a demo:</label>
<select name="demo-picker" id="demo-picker">
<option value="stream.wasm">Stream</option>
<option value="noise.wasm">Noise</option>
<option value="tunnel.wasm">Tunnel</option>
</select>
<button onclick="run_demo()">Run</button>
<hr>
<label for="logbox">Log Box</label>
<textarea name="logbox" readonly></textarea>
</div>
<script src="index.js"></script>
</body>
</html>