From 9dfc176978bc12f4c02533972e6098d1cbbb7bfb Mon Sep 17 00:00:00 2001 From: mehbark Date: Sun, 29 Mar 2026 23:42:32 -0400 Subject: [PATCH] spout: s17 --- site-src/spout/index.html | 79 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 76 insertions(+), 3 deletions(-) diff --git a/site-src/spout/index.html b/site-src/spout/index.html index 590e50d..a99a773 100644 --- a/site-src/spout/index.html +++ b/site-src/spout/index.html @@ -82,19 +82,80 @@ h2 { window.onhashchange = hl_ref; Number.prototype.map = function(a,b,c,d){return c+(d-c)*((this-a)/(b-a))}; + + /** + * @type (s: number, ids: string) => Element[] + */ let elems = (s, ids) => ids.split(" ").map(i => document.getElementById(`s${s}-${i}`)); + window.onload = () => { hl_ref(); let [s9lhs, s9rhs] = elems(9, "lhs rhs"); const params = new URLSearchParams(window.location.search); params.get("s9-lhs") && (s9lhs.value = params.get("s9-lhs")); params.get("s9-rhs") && (s9rhs.value = params.get("s9-rhs")); + + s17(); }; + + function s17() { + let [canvas, lhs, rhs, button] = elems(17, "canvas lhs rhs button"); + const params = new URLSearchParams(window.location.search); + params.get("s17-lhs") && (lhs.value = params.get("s17-lhs")); + params.get("s17-rhs") && (rhs.value = params.get("s17-rhs")); + + /** + * @type CanvasRenderingContext2D + */ + let ctx = canvas.getContext("2d"); + let width = ctx.canvas.width; + let height = ctx.canvas.height; + ctx.fillStyle = "#76a6e4"; + + const update = () => { + ctx.clearRect(0, 0, width, height); + + const f = eval(`(x, y) => {with (Math) {return (${lhs.value}) - (${rhs.value})}}`); + + for (let x = 0; x < width; x++) { + for (let y = 0; y < width; y++) { + let pos_count = 0; + + for (const dx of [-0.5, 0.5]) { + for (const dy of [-0.5, 0.5]) { + const diff = f((x + dx).map(0, width, -4, 4), (y + dy).map(0, height, 4, -4)); + diff > 0 && pos_count++; + } + } + + if (pos_count == 1 || pos_count == 2) { + ctx.fillRect(x, y, 1, 1); + } + } + } + }; + + button.onclick = update; + + update(); + }

spout: reverse-chron html pieces by mehbark

+
+

# graphing with sign-changes

+

I had somehow never heard of this canonical graphing technique until watching this video about a 3d graphing calculator in minecraft

+

just look at the signs of the difference between the left and right sides of the equation at four points for each pixel. then fill the pixel if not every sample has the same sign

+ + + += + + +
+

# binary search over the integers (todo)

@@ -170,7 +231,7 @@ h2 { background-position: 2cm -0.3cm; background-repeat: no-repeat; color: #2c2c2c; - //padding: 0.5cm 1cm; + /* padding: 0.5cm 1cm; */ font-family: "Charter", charter, serif; outline: 0.2cm solid black; filter: blur(0.25px); @@ -238,6 +299,7 @@ fair warning: especially with larger batch sizes, this is liable to freeze up th 
 3.
1 digits in batches of

gotta say, it's really sweet working with native generators. not really necessary here, but elegant. bigints were the real hero, i almost discarded the idea before i remembered js had them :P @@ -290,6 +353,7 @@ bigints were the real hero, i almost discarded the idea before i remembered js h i hope i can do it!
best guess: idk

i did it! not super efficiently, but it was fun. the slider goes up to 12, which is really pushing it, so exercise caution

@@ -326,6 +391,7 @@ best.innerText = inside * 4; and i'd like to implement my favorite approach here


in batches of

current best guess: 0/0 * 4 = idk

this is thoroughly ingrained in my brain, but i hope it's still fairly intuitive for others. @@ -367,6 +434,7 @@ i like how the boundary becomes more clear with more samples, it makes the accur that might be here! in ! th efuture


= samples2

okay dang this looks freaking great. hue is based on angle, look at the code! i love this

i have decided that instead of making it more accurate, i will leave it at this place of looking very cool @@ -445,6 +514,7 @@ that might be here! in ! th efuture

winning? no. moves?

# i may be stupid

-

i realized something when talking about s7: i may be stupid. -first of all, it's worth understanding that s7 is actually my third go at this technique, +

i realized something when talking about s6: i may be stupid. +first of all, it's worth understanding that s6 is actually my third go at this technique, the first time was on about:blank in canvas, and the second time was in picotron.