mondri-on

This is a drawing tool for making visual art in the style of Piet Mondrian.

You start with a rectangle, then split it up into smaller sub-rectangles, and color them.

Basics:

There are three modes:

• Split (to split rectangles)
• Fill (to color rectangles)
• Copy Color (to sample color from a rectangle)

In "split" mode, click on rectangles to break them in two. You can split either vertically or horizontally. Lines show how the rectangles are divided.

In "fill" mode, click a rectangle to color it in. You can effectively "erase" a color by setting the fill opacity to 0, then filling the rectangle again.

There's a settings pane on the right to switch between modes, change colors, etc. You can change the color for all lines and the background color of the canvas at any time.

In "copy color" mode, click on a rectangle to copy its color. The tool will automatically switch to "fill" mode, ready to fill using color of the area that you just clicked. (Note: this will also copy the opacity of that color, so clicking on a "blank" rectangle will set the color to be 100% transparent.)

Advanced use:

You can hold the "shift" key while in "split" mode to lock the split line on one axis. This makes it easier to split a continuous line across multiple rectangles. While the axis is locked, you can also drag the mouse to split continuously (instead of having to keep clicking for each new region). You can easily create a grid this way.

You can also drag the mouse while in "fill" mode to color continuously, rather than clicking for each new region.

Hotkeys:

Z - toggle between fill mode and split mode.

X - toggle between splitting horizontally & vertically (only applies to split mode)

C - enter "copy color" mode (like the eyedropper in photoshop)

Shift - lock axis of "split" line (only applies to split mode)

~ - toggle line visibility

Caveats:

This was made in ~7 hours out of a visual debug tool for some BSP code I wrote. Most of the "polish" is courtesy of Svelte's default project and TweakPane's lovely default theming.

Credits:

Svelte - https://svelte.dev/

TweakPane - https://cocopon.github.io/tweakpane/

Piet Mondrian - https://en.wikipedia.org/wiki/Piet_Mondrian