A web-based sketchpad I made to practice JavaScript DOM manipulation.
Live preview: https://ronliu.github.io/sketch/
What I learned:
- affecting HTML and CSS using DOM methods and selectors
- working with arrow functions and callbacks
- event handling + event objects
This was inspired by the MS-Paint-like visuals in the announcement video for Porter Robinson's Nurture album (https://www.youtube.com/watch?v=tcKAdFEQ_JU) and I wanted to make something that recreated a similar effect. The "pixels" are bigger than I'd like but making the pixels smaller led to issues with the canvas taking too long to load and pixels not detecting mouseover events. I'm also not sure how to properly handle users resizing their browser windows after the canvas has already loaded. While I still have a lot to learn, I'm happy with how this turned out and I had fun making a few drawings with it!