What is this? Notes are monthly posts of curated content, featuring articles, websites, exhibitions, projects, and personal experiences that I find worth sharing. Think of it as a blend of a newsletter, bookmarks, and a public journal.
Discover
Ants Sandbox by Mateusz Tomczyk
Mateusz Tomczyk has built an amazing simulation of ants behaviour running in the browser. Make sure to follow the tour at the beginning before playing with your own set of parameters.
Ants Sandbox A simple and completely useless simulation of ants colony for web browsers https://www.ants-sandbox.io/I really love this kind of project, it makes learning fun and I think this is what makes the web a great medium . Building this kind of simulations can also be quite hard and luckily the code is available on Github if you want to learn about ants AND how to code ants. Open source ✊
via @nicoptere
Read
The Study of Shaders with React Three Fiber, by Maxime Heckel
Maxime wrote about his experience discovering the use of shaders when using React Three Fiber. I’m not a huge fan of React (anymore!) but I’ve been following the active development of R3F. His post covers the basic of vertex and fragment shaders and is a great introduction for those who want to know more about them! It’s a useful read even if you want to dive into THREE.js without using React (which I would recommend for a start).
The Study of Shaders with React Three Fiber https://blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber/via @0xca0a
You should take more screenshots, by Alex Chan
When working on canvas based projects, I take a lot of screenshots as the end project is often a mix of what I was trying to achieve and some bugs/great surprises that comes along the way. I don’t do that often with front-end projects and I should! I did that on some previous projects, it’s really fun and fullfilling to get an idea of the whole process once something is done. Alex is right, I should take more screenshots!
You should take more screenshots https://alexwlchan.net/2022/screenshots/Drawings
I started working on a fragment shader simulating hand drawn squares by using 4 bezier curves for each square. I’m pretty happy with the results but Twitter killed it with the compression (as always!). I’m not sure signed distance fields are the way to go though. It’s gonna be pretty hard for the GPU to compute if I want to draw multiple squares at the same time (which is what I’m aiming for).
Loading Tweet...