![[fig-pacman.webp]] [[First Fig Digression]] ## What Fig is a drawing app that helps you focus on the _process_ of drawing without obsessing with the end result. **Check it out [here](https://fig.sonnet.io).** (works best with desktop and iPad) <marquee style='font-family: comic sans, Comic Sans MS'> or catch <a href='https://fig.sonnet.io?overachiever' target='_blank'>this link!</a> you marquee chasing maverick!</marquee> Here's how it works: in Fig, every pixel has a lifespan. Over time, all the pixels die and parts of your drawing will fade away. ![[fig-screenshot.webp]] Want to know how to build a graphics editor that is [[MISS – Make It Stupid, Simple|not capable]] of keeping pixels on the screen? Here is what I focussed on: - finding ways to make impermanence enjoyable - set the right expectations from the beginning (turns out things disappearing from the screen isn't a very peaceful and meditative experience) - quick or messy drawings still feel and look enjoyable - playfulness ^af5286 - make it accessible, make it feel like a toy - drawing itself (i.e. literally dragging the finger/pen on the screen) should _feel_ fun - balancing flexibility and a recognisable aesthetic - the tool is the medium, so make it highly customisable, even hackable - inspiration: game engines, my dad (a carpenter) making his own tools, [[Projects and apps I built for my own well-being#^35cfc4|Galician Carpentry]] ### What Fig is _not_ Fig is not a [[Sandboxes, Games, and Play|sandbox simulation app]] (e.g. [sandspiel.club](https://sandspiel.club)). It's a toy, but its primary use is _doodling_. In fact, I avoided researching sandboxes while I worked on Fig because they are just so much fun to play with and hack (cue: [💧 Top 9 Ways To Make Water](https://www.youtube.com/watch?v=2qfjJ-0ZeVM&t=316s)). ^e375d3 ## Features ### Pixel lifespan Every pixel will die after anywhere between 1-240s. You can control the lifespan of each brush stroke separately, or that of the entire drawing. It's up to you. <video src='https://res.cloudinary.com/dlve3inen/video/upload/v1714758193/fig-lifespan_bbwrwo.mp4' loop muted autoplay playsinline /> This does affect undo: if you bring it back to life, you'll get to watch it fade away immediately. I'm sorry — although necromancy is allowed, it is ineffective. ### Custom brushes There are three types of brushes: 1. normal → draw a (slightly noisy) rectangle 2. drawable → draw the shape of the brush on a 9x9 matrix 3. code → control your brush [tixy.land](https://tixy.land) style! <video src='https://res.cloudinary.com/dlve3inen/video/upload/v1714758595/fig-brushes_dpkfwb.mp4' controls muted autoplay poster='https://res.cloudinary.com/dlve3inen/image/upload/v1714758192/fig-brushes_kaod6d.png' playsinline /> **I've had so much fun with 2. and 3. so expect a more detailed write-up soon!** ### Materials and fills #### Materials Materials are simple: there's a wall and sand. Wall stays in the same place. Sand falls. <video data-rate="2" src='https://res.cloudinary.com/dlve3inen/video/upload/v1714758200/fig-wall-vs-sand_senjoq.mp4' controls autoplay muted playsinline /> There's no bucket fill, just a bucket of sand you can pour _into_ a shape: <video src='https://res.cloudinary.com/dlve3inen/video/upload/v1714758319/trimmed_sporij.mov' loop muted autoplay playsinline/> I played with sand instead of a standard flood fill because: - using sand is a bit harder than using a bucket fill ([[Constraints mean focus and the freedom to break them.]]) - it just _feels_ fun to use! (also, I wish I could come up with a sound effect for it) Under the hood, I'm using simple cellular automata and it's really tempting to make these rules more clever. But, I want to make sure that the process of drawing is itself fun and accessible (remember [[#What Fig is not]]). #### Fills You can select a single colour or a rainbow-like gradient. And if you change the material, the pixels shimmer a little bit: <video src='https://res.cloudinary.com/dlve3inen/video/upload/v1714758814/fig-shimmer_j04py5.mp4' loop autoplay muted playsinline/> ## Why I made it [[Second Fig Digression]] I wanted to make a new toy, and [[Second Fig Digression|a fig tree died]]. Also, [Coding Train](https://www.youtube.com/watch?v=L4u7Zy_b868&t=966s) released a new video about cellular automata at the beginning of this year. ## How I made it I built a quick and dirty prototype and kept using it almost every evening before falling asleep. I didn't force myself to stick to a routine: I played with it [when I felt like it](https://x.com/rafalpast/status/1771256689175445633). Dogfeeding is useful, but the _felt like it_ part even more so: most of the ideas implemented in the app come from those evening doodling sessions. ![[6C083E2E-F149-4249-877A-EAB439C13130_1_105_c.jpeg]] Related: [[2-2-2 Project Scoping Technique]], [[Share your unfinished, scrappy work]] ### Tech I'll try to keep this moderately low on tech, but feel free to [message me](mailto:[email protected]) if you're curious about the details. Here's a rough technical timeline: 1. Spike in p5.js 2. Move to React + Typescript when managing UI state in p5.js gets too messy 3. Add tests when I realise that I spend too much time debugging and catching missing grains of sand in the simulation 1. refactor, improve performance once we've had a test coverage ![[ascii-art-tests-fig.jpeg]] *Testing with ASCII art* Balancing prototyping and technical improvements is [[inherently risky and annoying in hindsight]]. I'm somewhat less annoyed about this one, but I'm not yet sure why. ## How I use Fig I play _in_ and _with_ it: 1. I doodle almost every evening 2. I treat it as a platform for testing smaller toy ideas 1\. is pretty self-explanatory. It's fun and the results border on trip visuals, but I've noticed that recently using Fig in the evening has replaced my regular drawing sessions. The result is that I have fewer drawings to share. That's probably not a good thing _for me_, but also a fairly isolated problem. <video muted controls playsinline src='https://res.cloudinary.com/dlve3inen/video/upload/v1714760659/mango-fig_qbxl4c.mov'/> 2\. is more interesting, because I'm starting to see how I could break and remix some of parts of Fig into different projects. This brings us to: ## Next steps ^8c282a ### Smaller improvements: - make it mobile friendly. I'm using Fig on my computer and tablet. It works really well with iPad + Apple Pencil, but the UI on mobile is too cluttered. - hide the lifespan. When you start the app you're presented with 2 modes: - default: start drawing and control the lifespan of each brush stroke - flow: you don't control the lifespan and you don't know how long the pixels will live for (I'm particularly excited about this one) - control the animated gradient fill colours ### Ideas to explore: #### A simple 3 colour pixel art editor inspired by this drawing: ![[ukiyo.png]] _by [Susan Kare](http://kare.com)_ ([context](https://www.behance.net/gallery/25434317/MacPaint-Ukiyo-e)) #### SSS A programmable SSS (Simple Silly Shader) graphics editor where both brushes and fill can be controlled using a simple JS snippet. #### A rhythm-based game I'm particularly excited about this one, but I'm still looking for a concise way of putting it into words. If you play with the code brushes in Fig, you'll notice that some of them oscillate: <video muted loop autoplay playsinline src='https://res.cloudinary.com/dlve3inen/video/upload/v1714764734/fig-oscillation_fpwuvc.mov' /> Now, imagine that this oscillation is synced with music (i.e. the shape and size of the brush follows the beat). Your goal is to trace the lines of a drawing while matching their stroke shape and size. The only way to match it perfectly is to draw in time with the music. In other words - by dancing with your fingers! ![[fig-mould.webp]] That's all for today. See you tomorrow!