Skip to content

Instantly share code, notes, and snippets.

@bellbind
bellbind / index.html
Last active July 23, 2022 05:39
[WebGPU] Game of Life as Compute+Render example for Chrome-103
<!doctype html>
<html>
<head>
<!-- IMPORTANT: The current Chrome requires some origin-trial token in <meta>.
To register origins at the last "WebGPU REGISTER" in https://developer.chrome.com/origintrials/
This token is for a Web Origin "https://gist.githack.com" (maybe expired at Mar 31, 2022)
It can register localhost origin as "http://localhost:8000"
-->
<meta http-equiv="origin-trial"
content="Akv07qcAop5MFaZYxJtHHjUuM8eV3GpbHkTeuhZo/4wsNjYnQ7GSGJyo7hRVZvpvyjYwilbJ8KbFVchI4O1DpA0AAABQeyJvcmlnaW4iOiJodHRwczovL2dpc3QuZ2l0aGFjay5jb206NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY1MjgzMTk5OX0=" />
@bellbind
bellbind / compute-example.js
Last active May 9, 2022 03:40
[WebGPU] Draw a square with WebGPU for chrome-103
// Compute example for WebGPU API for Chrome-103: https://www.w3.org/TR/webgpu/
// [Usage] Paste whole codes into Web Comsole of the WebGPU demo page, then output 1024 Float32Array of squares
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
// WGSL shaders: https://www.w3.org/TR/WGSL/
const workgroupSize = device.limits?.maxComputeInvocationsPerWorkgroup ?? 64;
const computeWgsl = `
struct IO {
values: array<i32>,
@bellbind
bellbind / index.html
Last active April 3, 2022 13:04
[WebGPU] Game of Life as Compute+Render example
<!doctype html>
<html>
<head>
<!-- IMPORTANT: The current Chrome requires some origin-trial token in <meta>.
To register origins at the last "WebGPU REGISTER" in https://developer.chrome.com/origintrials/
This token is for a Web Origin "https://gist.githack.com" (maybe expired at Mar 31, 2022)
It can register localhost origin as "http://localhost:8000"
-->
<meta http-equiv="origin-trial"
content="Akv07qcAop5MFaZYxJtHHjUuM8eV3GpbHkTeuhZo/4wsNjYnQ7GSGJyo7hRVZvpvyjYwilbJ8KbFVchI4O1DpA0AAABQeyJvcmlnaW4iOiJodHRwczovL2dpc3QuZ2l0aGFjay5jb206NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY1MjgzMTk5OX0=" />
@bellbind
bellbind / compute-example.js
Last active April 3, 2022 13:03
[WebGPU] Draw a square with WebGPU for chrome-98/firefox-99
// Compute example for WebGPU API: https://www.w3.org/TR/webgpu/
// [Usage] Paste whole codes into Web Comsole of the WebGPU demo page, then output 1024 Float32Array of squares
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
// WGSL shaders: https://www.w3.org/TR/WGSL/
// NOTE: attribute syntax is changed from [[attr]] to @attr at 2022/01/19; not yet supported on chrome98
// NOTE: from chrome99, [[block]] attribute should be removed
const blockAttr = navigator.userAgent?.match(/Chrome\/98/) ? "[[block]]" : "";
const workgroupSize = 64;
@bellbind
bellbind / deno.json
Last active March 17, 2022 10:03
[deno] wordle on console (use offcial data & refresh 24-hour)
{"fmt": {"options": {"lineWidth": 160, "indentWidth": 2, "singleQuote": false}}}
@bellbind
bellbind / wordle-answer-bookmarklet-src.js
Last active February 17, 2022 02:46
[deno] print wordle answer of today
void(fetch(document.querySelector("script[src^=main]").src).then(r=>r.text()).then(c=>JSON.parse(c.match(/(\[("[a-z]{5}",)*"[a-z]{5}"\])/)[1])).then(w=>alert(w[((new Date().setHours(0,0,0,0)-new Date("2021-6-19"))/864e5)%w.length])))
@bellbind
bellbind / json-words.js
Last active February 13, 2022 00:45
[deno] wordle on console
// deno run --allow-net json-words.js >> words.json
const url = "https://raw.githubusercontent.com/tabatkins/wordle-list/main/words";
const words = (await fetch(url).then(res => res.text())).split(/\n/);
console.log(JSON.stringify(words));
@bellbind
bellbind / index.html
Last active June 25, 2021 07:43
[browser] Time Place Player for YouTube video
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Time Place Player for YouTube video</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%2290%22 font-size=%2290%22>🎥</text></svg>"/>
<link
rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
@bellbind
bellbind / index.html
Last active April 4, 2022 05:08
[browser] Time Place marker Editor for video files
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Time Place Editor for Video files</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%2290%22 font-size=%2290%22>📌</text></svg>"/>
<script type="module" src="./main.js"></script>
<style>
#map {height: 40vh; width: 90vw;}
</style>
@bellbind
bellbind / async-array.js
Created June 22, 2020 07:57
[ECMAScript] array with async iterator
const Notifier = class {
constructor() {
this.waits = new Set();
}
get wait() {
let d = {};
const p = new Promise((f, r) => {
d.r = r; d.f = f;