Interactive sketches in the browser made with p5.js inspired by The Coding Train. Each sketch is an exploration in some area of math, computer science, and physics.
Link to project: https://atklenner.github.io/sketches/
Tech used: HTML, CSS, TypeScript, p5.js, Vite, Astro, Pico.CSS
There are two parts to this project. The new-sketch directory was made using the vanilla JS template provided by Vite. It is a playground I use for making a new sketch using p5. Once I am finished with the new sketch it moves to the astro directory and becomes a new page. The final website is built using astro and hosted using GitHub pages. The CSS styling comes from Pico.CSS
Sketches are inspired by topics like Cellular Automata, Lorenz Systems, or Perlin Noise.
When I add more sketches in the future I would like to add tags to the individual sketches to let people browse similar sketches more easily. Also I haven't made the site mobile friendly yet because I'm not sure how I want it to look.
I used this project to try out using Astro to build a content rich website, it's a pretty slick tool that I would use again. I also learned how to use bash scripts to make adding pages to Astro easy which will reduce the overhead in the future when I want to make more sketches.
Take a look at these couple examples that I have in my own portfolio:
Uniform Resource Locator Extender: https://github.com/atklenner/uniform-resource-locator-extender-3000-extreme-edition
Homepage: https://github.com/atklenner/homepage
Bouncing DVD Logo: https://github.com/atklenner/BouncingDVDLogo