💾 Archived View for thingvellir.net › toys › applet › index.html captured on 2023-03-20 at 17:52:07.

View Raw

More Information

⬅️ Previous capture (2023-01-29)

➡️ Next capture (2024-07-09)

🚧 View Differences

-=-=-=-=-=-=-

<!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">
</head>
<style>
div#applet { text-align: center }
div#applet canvas {
	image-rendering: pixelated;
	background: linear-gradient(135deg, #fff3, #0003);
	box-shadow: none;
}

div#applet canvas.quitted {
	box-shadow: 0 0 0 .2rem #5d3;
}

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>
		</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>