Earlier this week I saw tixy on my Twitter feed.
It’s an interactive graphic, composed of a grid of circles, that you can customise with your own “tixy” function. The graphic evolves over time using this function.
The name is something like an acronym, as the function takes four arguments:
- t - time since the function last changed, constantly increasing
- i - index of the circle in the grid
- x - x-coordinate of the circle
- y - y-coordinate of the circle.
I had a lot of fun playing with this so I decided to reverse engineer and build my own tixy, looking at the original code as little as possible.
Creating a basic drawing, no animation
I’ve never used the HTML5 Canvas API before so now seemed as good a time as any.
What I needed was a square grid, with an equal number of circles on each side. After digging through a few examples and documentation, I came up with this:
Animating the grid
To add some animations I added a function,
document.tixy, that I could repeatedly call.
And hurrah, it works!
I added a
<textarea> that would read and update the
document.tixy function, and could experiment with it a bit more, but that’s left as an exercise for the reader :)
November is National Blog Posting Month, or NaBloPoMo. I’ll be endeavouring to write one blog post per day in the month of November 2020 - some short and sweet, others long and boring.