maxwellito / triangulart

Dummy graphic editor to make isometric illustrations

triangulart (v2 beta)

Dummy graphic editor to make isometric illustrations. It's like pixel art, but with triangles.

Try it on maxwellito.github.io/triangulart

This version is still on beta and not fully stable.

File format

On the v2, we are making things simpler, one unique file format : the SVG. On the first version the editable format was in JSON, and I think it was a bad design choice. Having one format make it easier for the final user.

Here are the details

<svg version="1.1" preserveAspectRatio="xMinYMin slice" width="930" height="520" viewBox="0 0 930 520">
    <!--{"isLandscape":true,"mapWidth":"31","mapHeight":20,"palette":["#11aaff","#ff0002","#c5ceda","#000000"]}-->
    <path d="M345 0 L330 26 L360 26 Z" fill="#000000" rel="22"></path>
    <path d="M345 0 L360 26 L375 0 Z" fill="#000000" rel="23"></path>
    <path d="M375 0 L360 26 L390 26 Z" fill="#000000" rel="24"></path>
    <path d="M375 0 L390 26 L405 0 Z" fill="#000000" rel="25"></path>
    ...
</svg>

The SVG first child node is a comment containing the JSON of the basic details of the artwork. It contains the orientation, width, height, and the palette. Then every path got the rel attribute to contain the triangle index.

for v2.1 (aka neverland)

• Auto save (but better, with little signal)
• Responsive layout (the menu and nav is clunky)
• Better care of error cases
• MASSIVE PERF ISSUES ON BIG WORKSPACE : MOVE TO CANVAS (and light the weight of triangulart class)
• Zoom in/out
• Clipboard!

triangulart's Issues

UX Improvement: Option to clear the canvas

It would be nice if I could start over the drawing from scratch without loosing my custom colors.
Currently I can achieve this if I use the eraser to erase the whole canvas, but this is time consuming. It would be nice to have an option for clearing the canvas with a single click.

Bug - "White" color swatch is invisible

Because the color swatches don't have a border, white is currently invisible...

Editor with white color added, but not selected...

Selected...

How about a faint border on the swatches so you can see very faint colors?

Feature request - Export white areas of drawing as 'transparent' in the SVG

Currently areas that you didn't draw on are exported as white triangles, which is annoying. Would be cool if only the areas you explicitly colored became part of the SVG.

In Illustrator...

UX improvement: Touch support

Add touch support for the canvas

UX Improvement: add eye dropper to color picker

When I use a custom color and do not add it manually to custom colors and would like to use it again, I have to set it again. It would be much easier if I could just use an eyedropper color picker tool to set the color again.
As an alternative it would be nice to save the last used custom colors automatically.

UX Improvement - Color triangles on "click"

Right now, you can only color a triangle if you're moving the mouse, so if you just click the triangle without also dragging the mouse a little bit, the triangle won't color.

Click and drag is nice for long lines / dense areas - but if your'e doing detailed work, a simple click to color would be very handy!

'fork me on github' link

Hi,

very cool!

I came here via http://us5.campaign-archive2.com/?u=ea228d7061e8bbfa8639666ad&id=d3da9804df&e=5d8607bb11

Maybe you could include a link to this repository on
http://maxwellito.github.io/triangulart/
?

Thanks,
Dirk

Bug - Safari does not support input[type=color]

Safari of 9.1 and older versions does not support inputs of color type – http://caniuse.com/#feat=input-color. So the color input looks this way

UX Improvement - Don't stop coloring if I mouse off of the triangles and come back.

If I'm coloring and accidentally mouse off of the canvas area and then come back it won't keep coloring (even if I haven't let go of the mouse button)

Like this...

UX Improvement: Add Pen button

Currently if I would like to switch back to the pen from the eraser, I have to click the color picker, which will open the color picker each time I would like to just get the pen back.

It would be nice to have a pen button next to the eraser to easily switch back to using the pen with the already set color.

Gallery?

I'd love to see a gallery of things that people are making with this. I think the isometric triangles are a cool constraint, and I'll bet people could make really clever art with it, but I just can't tell if that's true without any examples.

Feature: shade line segments

As a user, in order to create the appearance of 3 dimensional objects, I'd like to be able to add shading to line segments between triangles, which remain as part of the image when the outline is toggled off.

Feature request - Add an Eraser tool

Currently, after drawing some default black triangles, I have no way to 'erase' any part of the drawing unless I add a "white" color swatch and then paint over what I did.

It would be cool to have an eraser tool, or at least have black and white be default starting colors so I could easily draw and "white-erase" at least.