Maxime Heckel writes about graphics and front-end work, including shaders, dithering, WebGPU, Three.js, and animation math.
HN commenters list it among well-designed personal sites, citing its interactive code snippets and maximalist style.
The major dithering algorithm that's missing from this list is blue-noise dithering. This is very similar to "ordered dithering"; you can think of ordered dithering as either thresholding the pixel values with a different threshold value on each pixel, following a regular pattern, or as adding a different offset value to each pixel, following a regular pattern, and thresholding the result with a constant threshold. Blue-noise dithering replaces the regular pattern with a random pattern that's been high-pass filtered. This has all the advantages of ordered dithering, in particular avoiding "crawling" patterns during animation, but avoids the repetitive patterns and line artifacts it introduces.
https://nelari.us/post/quick_and_dirty_dithering/ is the best quick introduction to the technique that I've seen. There's a more comprehensive introduction at https://momentsingraphics.de/BlueNoise.html. https://bartwronski.com/2016/10/30/dithering-part-three-real-world-2d-quantization-dithering/ also demonstrates it, comparing it to other dithering algorithms.
Ulichney introduced blue noise to dithering in 01988 as a refinement of "white-noise dithering", also known as "random dithering", where you just add white noise before thresholding: https://cv.ulichney.com/papers/1988-blue-noise.pdf. Ulichney's paper is also a pretty comprehensive overview of dithering algorithms at the time, and he also makes some interesting observations about high-pass prefiltering ("sharpening", for…
Well, the animation under "Basic usage" at https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-select highlights how the bar along the top changes based on what which button or control is selected. In turn, you can pick properties or events by name on the left (like "OnSelect" for when the button is clicked) and then type in a function that should run on the right, such as Notify(). You might think OnSelect is an odd name for an "OnClick" but it makes sense when you look at how many different types of controls could conceivably use "OnSelect" as a "primary action" of a control: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/controls/properties-core
By comparison, with React or ReactiveX, you can do very similar things, but by default, complications creep in because of how the language works. In JavaScript, for instance, you have to worry about binding "this" for example: https://reactjs.org/docs/faq-functions.html In ReactiveX, you have to think about how you're going to structure your code, and maybe even occasionally draw flow graphs.
I would also compare this to SwiftUI or Flutter, but more from the app layout perspective, where both platforms are much more mature than when they started. Here's an example comparing React and SwiftUI: https://blog.maximeheckel.com/posts/swiftui-as-react-developer One could imagine a meta-article that compares Power-Fx to SwiftUI to Flutter, etc. Actually ... I went hunting for how state works in…
I don't see what your child comment has to do with my parent comment.
- You brought up "OnSelect" and binding "this" in JS, but they don't seem related to picking one way to propagate state through a GUI (either "push", "pull" (signals and slots), pseudo-immediate-mode and state diffing (React), FRP, property binding, ReactiveX, or something else).
- https://blog.maximeheckel.com/posts/swiftui-as-react-developer does discuss state, but you brought it up in the context of app layout. App layout is another area with multiple choices, but it's more linked to visual design, and less to functional correctness (which is vulnerable to state-propagation bugs which I was talking about).
- Automated code updates, and test generation, are not related either.
Tasteful: https://colly.com/
Artsy: https://anhvn.com/
Simple yet elegant: https://www.lkhrs.com/ and https://arun.is/blog/
Maximalist: https://henry.codes/ and https://garden.bradwoods.io/ and https://blog.maximeheckel.com/
Old-school / indie web: https://ribo.zone/
Text mode / ASCII art: https://adelfaure.net/
Typography: http://davidcole.me/ and https://www.petemillspaugh.com/
I have more. You can keep rolling the dice on https://indieblog.page/random and eventually you'll stumble across some pretty sites. Usually the nicest ones are from frontend / design engineer types of people. EDIT - oh and the sites in the internet phone book! https://internetphonebook.net/ as well as browsing screenshots at https://personalsit.es/
I did the same like 2 weeks ago. In Rust. ^^
I'm still trying to improve it a little. https://git.ache.one/dither/tree/?h=%f0%9f%aa%b5
I didn't published it because it's hard to actually put dithered images on the web, you can't resize a dithered image. So on the web, you have to dither it on the fly. It's why, in the article, there is some artifacts in the images. I still need to learn about dithering.
Reference: https://sheep.horse/2022/12/pixel_accurate_atkinson_dithering_for_images_in_ht.html
Cool links about dithering: - https://beyondloom.com/blog/dither.html - https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web/
It is a common pattern in rendering. You achieve your desired results, but it is nowhere near realtime. You try to lower the sampling resolution which helps a lot with speed, but you end up with ugly visual artifacts. Introducing the blue noise in the right place helps with attenuating these sampling artifacts. Only usually you would sample the premade "blue noise" texture rather than using the shader to compute it.
This article does a good job of explaining how it helps in raymarching:
https://blog.maximeheckel.com/posts/real-time-cloudscapes-with-volumetric-raymarching/