*note: I'm def just taking it easy and doing only a few
While The Horse in Motion is definitely the most well-known of Muybridge's motion studies, I thought it'd be fun to do an elephant to be a bit different and also because my mom likes them :-)
I benefited greatly from this YouTube tutorial by VĂĄclav KĆivĂĄnek on how to make moirĂ© animations with Illustrator.
After I pulled the data from NYC Open Data, I filtered out the ginkgo trees with QGIS. I then used this data to make the maps with OpenFreeMap and MapLibre. I thought it'd be more fun to start the map zoomed in enough for you to see distinct trees in a neighborhood, but since it might be a bit disorienting, I wanted to add a minimap. For that, I used this code from Bruno Babic with some minor adjustments. Whenever you reload the page, it picks a random starting point (from a handful that I preselected).
For the falling leaves, I adapted this code by Siddharth Nalwaya.
This page also uses the font Aegyptus (Nilus) by George Douros.
Because I make dataviz for work, I have a few charts I think about often, and one of them is the animated Sankey-esque diagram in this 2018 New York Times story. It's built using regl. I don't fully understand WebGL things as much as I'd like to, so I thought Weird Web October was a perfect excuse to poke around. :-)
I basically used this code from Adam Pearce, who made that original chart (thanks to Adam's 2018 chart diary for the behind-the-scenes!). I also referenced this code from Georgi Nikolov for help figuring out how to add emoji textures.
I still don't understand 100% how WebGL works, but today I learned a little bit more!
To make the favicon change on refresh, I also referenced this StackOverflow answer by Mathias Bynens. And actually, I should mention that I also use this snippet from Lea Verou via CSS-Tricks to easily make an emoji into a favicon. (I also do that for many other pages, including this index page you're on!)
Another excuse to play around with a library I've been wanting to try. This time it's Matter.js. I thought it'd be fun to try some rigid body collision for this theme! This time, I referenced the demo for sprites from the official docs and this code from CodePen user peralP.
For further material, I might try doing something like the concave SVG paths demo, but it requires a bit more setup. The collision detection on my page isn't perfect, but that's enough for today!
I wanted to play around with the question of what is worth optimizing.
The canvas interaction here is not the best, especially on touchscreens, but it'll do. You can't move your mouse too fast while drawing though. This page is building off the same canvas-drawing code I used for the scramble theme on day 3.
I've been sick, so it's been a while since my last WWO page! Maybe because I'm easing back into things, but this is my first page without any JavaScript.
For this one, I thought it'd be fun to try working with a Vietnamese poem, since I want to improve my Vietnamese. I asked my mom for a poem, and she came back with this one from BĂ Huyá»n Thanh Quan that she liked when she was young. My parents helped me translateâthank you, parents! According to them, this poem is about a speaker walking through a mountain pass that overlooks a valley and longing for a bygone kingdom.
I wanted to try using the <ruby> tag, which I learned about from the HTML Day Tokyo site. Because of that, I was a bit limited with how to chunk words and how much to reorder them. I opted for a more literal translation than an artful one. I think it was a fun exercise though, and the need for implicit English blocks really demonstrates how information-dense Vietnamese is.
This page uses the fonts Cormorant Garamond by Christian Thalmann and Aegyptus (Nilus) by George Douros.
This page and most others use ChiKareGo2 by Giles Booth. Other fonts and credits are listed in the details above^ for each page. Unless otherwise noted, images are my own. This project does not use generative AI for any code, text, or images. Here, I'm only coding with regular HTML, CSS, and vanilla JavaScriptâno frameworks, just getting back to basics :-)