Been speed coding some new stuff and showcasing some old stuff as shorts on youtube - here is a recent one:
Check out the rest here: https://www.youtube.com/@shapevent/shorts
Been speed coding some new stuff and showcasing some old stuff as shorts on youtube - here is a recent one:
Check out the rest here: https://www.youtube.com/@shapevent/shorts
I started making youtube shorts using a monaco-powered micro-editor I created called https://zapp.codes. Check them out here: https://www.youtube.com/@shapevent/shorts
I don’t think I ever mentioned https://snippet.zone here. It’s just another actionsnippet-like site I created a few years ago… I don’t update it all that frequently but it has many snippets mostly written in js.
recent fork of a snippet.zone that I used in a short…
Here’s a short showing something I did for genuary 2022…
Was just watching this funny video on Numberphile:
Here is the Surreal Numbers book on archive.org:
https://archive.org/stream/SurrealNumbers/Knuth-SurrealNumbers#page/n7
Got a kick out of the story around this stuff… When Knuth shows the notation for surreal numbers I suddenly remembered a weird program I’d written awhile back.
I had been out drawing in my sketchbook one sunday (almost 2 years ago) and found myself creating a tiny little system of symbols:
A few days later I speed coded a version of the system. Apparently I had posted a screenshot on FB while I was working on it:
See if you can figure out how it works. I’m sure the code could be cleaned up a bit…
While OVM has little/nothing to do with Surreal Numbers - I’m glad the video reminded me it…
Awhile back I thought it would be interesting to add some quick fake lighting to a personal project of mine - that for lack of a better description is a windows management system.
Here is a screenshot of the windows management system with lighting turned on:
Here is a video of me using the system:
I whipped up this prototype (don’t mind the jQuery)
There are really two keys that make this work. Getting the shadow in place and adjusting the gradient. All we really need is the angle and distance from a given `div` in relation to the “light”:
1 2 3 4 5 6 7 8 9 10 11 12 13 | let calcAng = function(x, y) { let lightPos = light.position() let dx = lightPos.left - x; let dy = lightPos.top - y; return -Math.atan2(dy, dx) / Math.PI * 180; }; let calcDist = function(x, y) { let lightPos = light.position() let dx = lightPos.left - x; let dy = lightPos.top - y; return Math.sqrt(dx * dx, dy * dy); }; |
Standard `atan2` and the pythagorean theorem get us this. Once we have those - we can use them to set our gradient and shadow values:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // warning (apparently this function is slightly speed coded) let calcShade = function(x, y) { let angle = calcAng(x, y); let dist = calcDist(x, y); let sx = dist * Math.cos(-angle * Math.PI / 180) * -1; let sy = dist * Math.sin(-angle * Math.PI / 180) * -1; sx = Math.min(20, Math.max(sx, -20)); sy = Math.min(20, Math.max(sy, -20)); let blur = Math.min(100, dist); let hBlur = Math.min(50, blur) * 0.5; // consider distance in the eq? return { bg: `-webkit-linear-gradient(${angle}deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.4) ${blur}%)`, shadow: `${sx}px ${sy}px ${hBlur}px rgba(0, 0, 0, 0.15)` }; }; |
There are more videos of the windows management system on my youtube channel. Here’s another from a much earlier version of the system.
Maybe I’ll post more about that in the future…