
Show HN: Triangul-Art – make pixel art but with triangles - maxwellito
http://maxwellito.github.io/triangulart/
======
maxwellito
It's very easy to create something nice with it.
[https://www.instagram.com/p/BDgZ_bQI-
hO/](https://www.instagram.com/p/BDgZ_bQI-hO/)

But this is a dummy basic editor. I know a looooot of features are missing.
Check the GitHub repo for more info.

------
birslip
Cool concept! It reminds my of Hexels:
[http://www.marmoset.co/hexels](http://www.marmoset.co/hexels)

~~~
maxwellito
That is sliiiiick! :)

------
cstuder
Nice surprise: That's the first time I saw an <input type="color" /> in
action.

------
Retr0spectrum
This was fun:
[https://i.imgur.com/rOZxLAz.png](https://i.imgur.com/rOZxLAz.png)

------
phkahler
There is something about this that makes certain kinds of things easier to
draw. And I'm not talking about isometrics. Not sure what it is...

~~~
ajuc
It's the constraints I think. They restrict search space to something more
maneagable, and make creating stuff much easier.

Same reason minecraft and lego are such inspiring tools.

~~~
semi-extrinsic
"The more constraints one imposes, the more one frees one's self." \- Igor
Stravinsky

------
llimllib
Related: [https://trixel.io/](https://trixel.io/)

------
imaginenore
Fails on mobile. You need to catch the tap events, not just mouse clicks.

------
AstroJetson
Thanks, that was a nice 20 min diversion for the morning!

------
paraknight
Reverting to pixel art:
[http://i.imgur.com/fEmDEjK.png](http://i.imgur.com/fEmDEjK.png)

------
chillitom
Very nice!

An option to choose a hexagon shaped canvas and have it repeatedly tiled would
be great for designing bathroom floors.

------
SagelyGuru
It would be better to allow higher level structures, such as hexagons of six
triangles each.

------
dahart
Pretty cool! Makes me feel a little like I'm drawing with Rubik's snakes. ;)

First time I somehow didn't notice the color picker, which is simple &
effective. Having a couple preset colors already there might not hurt though?

------
Razengan
Reminds me of the art style in Ridiculous Fishing.

[https://www.google.com/search?q=Ridiculous+Fishing&tbm=isch](https://www.google.com/search?q=Ridiculous+Fishing&tbm=isch)

------
LoSboccacc
it misses a easier way to share our creations

~~~
maxwellito
Unfortunately it's a bit difficult to have good sharing interaction from a
static webapp hosted on github. Plus, the SVG rendering on browser is not good
enough (you can see the sharpness) to export the drawing as a picture for
future sharing.

~~~
jbnicolai
Just serialize the state in the hashfragment of the URL ;)

~~~
maxwellito
Better find a good and efficient way to serialise it, otherwise it's gonna
reach the URL length limitation. :-O

But if you're up for it, please make a PR! :-D

~~~
jerf
A 24-bit color stored in base64 gets stored in 4 characters. Your default
20x30 map, multiplied by 4 bytes, is still just 2400 bytes. That fits in a
URL, quite comfortably, at least as far as browsers are concerned.

If you want to pack tighter, a palettized serialization would work fine here.
Since you don't have a gradient tool or anything else that can span colors,
you have a bound on the amount of information being put into the image by the
fact the human is only clicking so many times and can only put so much effort
into it.

Basically, store each 24-bit color at the beginning with a tight mapping (4
bytes each with a base64), put an end-marker on the palette set, store the map
size, then store the palette entry of each of the width x height triangles. If
the user uses less than 256 colors, the default 20x30 size you bring up will
end up as 4 times colors + 800 bytes, and that's before you do things like
bitpacking ("I see the palette only has 8 colors in it so I only need three
bits per cell") or any simple RLE you may be inclined to.

~~~
abecedarius
Example of a drawing tool of mine that lets you save/share via URL:
[http://wry.me/hacking/flake.html](http://wry.me/hacking/flake.html)

(I'd paste in the example of a Christmas tree a friend drew, except it's,
uh... a lot. But the source code might help as a starting point. The OP's URLs
wouldn't be as huge since it has a much coarser grid.)

------
karmakaze
Lite-Brite (1967)
[https://www.google.ca/search?q=lite+bright&tbm=isch](https://www.google.ca/search?q=lite+bright&tbm=isch)

------
pfd1986
Is there anything like this in 3D? I mean, hexagonal prisms instead of
hexagons/triangles/squares? I know magicaVoxel does, well, voxels....

------
amelius
What is the best way to draw an (xy-axis-aligned) rectangle with this?

And what is the word for xy-axis-aligned rectangle? :)

~~~
Franciscouzo
just axis-aligned rectangle

~~~
amelius
Yes, but in this case it is not clear where the axes run.

------
iamleppert
Is that color picker a built-in?

~~~
maxwellito
Yup. Depending on your operating system the UX is more or less good.

------
ninjakeyboard
I like it but it doesn't make me feel nostalgia like pixels :)

------
vkjv
I always wondered how Hashicorp designed their logos and now I know!

