Animus · in-browser painting/animation tool

[hunterirving]

Hey everyone! 

I wanted to share an experimental paint program I've been working on called Animus.

My feeling is that modern digital art software can do a lot, but sometimes that means cluttering the UI with distracting elements that you might never use. So what if I took things in the opposite direction and had absolutely no UI elements beyond the canvas and the user's cursor?

I took inspiration from the chunky-pixel paint programs I used growing up, primarily MacPaint, MsPaint, Kid Pix, and Mario Paint. Mario Paint and Kid Pix especially expanded what an art tool could be for me. Compared to something like MsPaint, they're much more game-like, and full of surprises to discover (Jeffrey Alan Scudder's documentary Meeting Mr. Kid Pix informed a lot of the decisions I made for this project).

Recently though, I started thinking about reworking my paint program to create animations. So I added keyboard hotkeys for adding and removing frames, toggling onionskin mode, and starting/pausing playback. The end result is something that feels a little like Flipnote Studio on the Nintendo DS (a tool I logged 100s of hours on back in the day).

Pressing ⌘ + S exports your work as an animated GIF, which I've been using to make animated stickers to send to friends.

If you'd like to try it out, you can open it directly in your browser here, or get the source code here so you can use it offline (it's literally just 1 big HTML file).

Drawing tablet recommended, but mouse and keyboard works fine too. If you do give it a try, I'd love to see what you make with it! The controls will probably take some getting used to, but in my testing with friends they've all picked it up pretty quickly.[/font]


controls

mark-making

• click and drag to make marks
• hold shift (or Z) and move your cursor up/down to resize the brush
• hold ⌘ (or X) and move your cursor up/down to change the shape of the brush
• hold any of the R, G, and/or B keys and move your cursor up/down to change the Redness, Greenness, and/or Blueness of the active color
• hold option (or alt) and click anywhere to pick up the color underneath your brush
• pinch with two fingers to zoom in/out
• drag with two fingers to pan around the canvas

animation

• press A to add a new frame
• press D to delete the current frame
• press O to toggle onionskin
• press ← / → to step between frames
  • tap out a rhythm using the arrow keys to set the playback speed
  • the last-tapped direction sets the playback direction
• press space to toggle playback
  
  • you can continue painting while the canvas animates

importing / exporting

• hold ⌘ (or ctrl) and press S to save your painting as a .GIF file
• hold ⌘ (or ctrl) and press O to open an existing painting from your filesystem (will clear the current canvas)

[knifex]

OH THIS IS REALLY REALLY FUN
I didnt read the instructions at first and was longing for ctrl-z or at least an eraser, but turns out I can make my own eraser!

Your controls are wild, but they make sense. I am OBSCESSED with how you use the favicon for the current picked color, that's mindblowing.

I drew this guy with my mouse, I'll have to try again on with my ipad-keyboard combo!

[IndigoGolem]

Neat. Changing brush size seems to be broken, at least for me using LibreWolf browser on Linux Debian with KDE Plasma. I can't tell if changing brush shape works, because my brush is only one pixel.

It's fun that i can change the color while drawing a line. Reminds me of making things out of rainbow yarn.

[hunterirving]

I didnt read the instructions at first and was longing for ctrl-z or at least an eraser, but turns out I can make my own eraser!

Yeah!! One of my early testers asked "how do I erase"? The answer: just make your brush match the background color! :o)

I've definitely thought about adding an undo feature, but I feel like there's a theme of physicality/tactility to the program right now that I kind of like. There's no copy/paste to duplicate pixels across frames, which means you have to redraw everything from scratch, kind of like you're making a paper flipbook. To me, the color selection also feels kinda like mixing real life paint to get the color you want. Sometimes I'll make the brush into a big square and plop down some colors to make a "palette" to sample later. In this way, you as the user get to build your own DIY user interface. Definitely a concept I want to explore more!

Neat. Changing brush size seems to be broken, at least for me using LibreWolf browser on Linux Debian with KDE Plasma. I can't tell if changing brush shape works, because my brush is only one pixel.

It's fun that i can change the color while drawing a line. Reminds me of making things out of rainbow yarn.

The colored yarn effect is one of my favorite parts too! I'm always happy when people discover that. I actually didn't intend for it to be a feature at the start; it just kind of emerged from the rules interacting and I decided to keep it. You can do a similar thing with the brush size, at least... when the brush size modifier is working 

I did some research, and the issue seems to stem from LibreWolf's default security settings. This thread has some details on it. Apparently, disabling resistFingerprinting makes modifier keys work again (though I can understand why you might not want to do that).

I just pushed an update that lets you use the Z or X keys instead of shift or ⌘ (which wasn't working at all on Windows). Maybe the new hotkeys will work for you? Thanks for letting me know!

So far I've tested on:

• MacOS
• Firefox
• Zen (Firefox-based)
• Safari
• Chrome
• Windows
• Firefox
• Chrome

@knifex, I haven't done any testing on iPad yet, so I'm interested to hear how that goes!