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.


controls

mark-making

• click and drag to make marks
• hold Z and move your cursor up/down to resize the brush
• hold 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 any combination of the above to change size, shape, and/or color at the same time
• hold C 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!

[knifex]

I'm back to report! o7
So, I havent been able to make it work with touch screen at all. Both on my phone (pixel) and ipad, trying to draw just pans the canva. Because of that, I wasnt really able to test anything else :(

Let me know if you can figure out a fix, I would rlly enjoy using the program on the go! But if it's too complicated no worries, you already did a gread job with it on desktop!

PS- the lil visual key u added to the post, berfect.

[hunterirving]

@knifex, I think I got it working! Not sure if you're using a stylus with your iPad or not (I don't have one of those to test with, so I just did my best guess at supporting that), but I was able to get it working on my iPhone 

Since non-stylus touch screens don't have hover capability, on mobile, you hold a modifier and then touch and drag up/down to change the size/shape/color. Drawing with one finger and panning/zooming with two both seem to be working (it kinda feels like fingerpainting!).

My next thought is to bundle it as a Progressive Web App so it can work offline and have a homescreen icon.

Thanks so much for testing things out! I'm really grateful for the feedback 

[knifex]

Hi I am back to report!
I've had some oddities

From what I understand, even if I am using my apple pencil™ it seems to use the same "controls" as a regular touch screen phone. Here are some extra notes, can provide plaintext on request

[hunterirving]

Thanks so much for testing it out, @knifex! I don't think I was supporting the hoverability of the Apple Pencil™ right, but I just pushed another attempt at making that work if you'd like to give it a try. And was it not working at all on Firefox?

I know some iPads/apple pencils don't support hover, so maybe that's a factor? My research says that the pencil needs to be 2nd gen or later, and the iPad needs to be M2-class or later (starting with the iPad Pro 11" (4th gen) / 12.9" (6th gen), October 2022). Does it give you an on-screen cursor when hovering in other apps/webpages? If so, then it's definitely not a hardware issue and just me failing to support hovering correctly

My thought is that users should be able to change the brush settings without making a mark, so on devices where cursor hover isn't available, changing brush settings and making marks are deliberately mutually exclusive (RIP rainbow lines).

iPad/Apple Pencil should be able to work though... I think we'll get there eventually. Worst case scenario, I have a friend visiting in a month or two who has an iPad/pencil I can test with. Thanks again for your updates! 

[juanp32]

things i did (im bad at making the frames consistent)

[hunterirving]

@juanp32, thanks for trying it out! i like those wobbly frames, i feel like it gives the artwork an alive/breathing feeling 

[bugwatcher]

really neat program, i thought it would be confusing at first especially without a ui, but i got the hang of it pretty quickly, i quite like the dragging to change brush size and the colorpicking method. i made a drawing of my sona and a little animation with it (i forgot how big the canvas actually was lol)


one thing i'd like to suggest is a way to duplicate frames for animating perhaps, otherwise it's really good for its concept :) i'll throw a link to this on my site later