I just reached 5000 followers on Twitter and this is a physical celebration of this milestone. All Twitter handles were drawn on paper, with a pen plotter robot for 4 hours 18 minutes. a V5 black pen on light 70x50cm paper. There are about 55000 letters and this is approximatively 200 meters of ink.
If you follow me on Twitter, you are very likely in this, will you spot yourself? Let me know on twitter. Good luck =)
(more zoomed photos at the end of the page)
This idea was planned for a few weeks already and it has been more challenging that I thought to draw text with a plotter. I ended up developing my own letters system (started in /plots/931 and improved in /plots/932).
It also took me many iterations to end up with the current fork of organized curves following the twitter logo. I had earlier iterations which only consisted of random grid packing. It is way more interesting to have organic curves and we can also pack more.
This work was simultaneously plotted on Twitch, Youtube and Twitter.
Important: Everything is open source permissive license except the assets
letters.svgthat are my own very ugly letters. They are "All Right Reserved", feel free to inspire from them but please make your own. Thanks!
That said, it's not too complex to draw letters in SVG and connect them together with code. The source code is linked on top of this page and is available on Github. This video is also explaining it with a quick code review.
To summarize this:
- We pull 5000 followers from Twitter API and cache it locally in
- We load
letters.svgto be able to draw word curves.
- We make an image
twitter5k.pngto contains the shape we want to see appearing.
- From that image, we use marching square and distance function to extract out isolines curves. We simplify them with Ramer–Douglas–Peucker algorithm to avoid local noise and remove small curves and we cut them in segments where there are sharp edges. This is important to avoid any unreadable word to happen.
- We iterate on these segments to make words following them, we equilibrate an equal padding between words for the general density. We also use a collision mask to bail out any word that would be too close to another one.