Transparent images

[bradydowling]

Is there a way to make images with transparent elements or a transparent background?

[esimov]

@bradydowling what do you mean by transparent elements or transparent background? Can you give me an example? Eventual a sketch or something to understand it better.

[bradydowling]

Ya, for example, here's an image I created with primitive:

Note the transparent background. Primitive handles this by allowing the user to specify a background color, including the alpha. And in this next one, many of the shapes have only partial opacity.

[esimov]

I was thinking about the possible solutions, but one more thing I want to clarify: since this tool is based on the delaunay triangulation this means that the triangles are computed by calculating the average cell color. Because in certain cases we don't have an image with a fully opaque or transparent backround this means we need to detect the most dominant color as a background color and apply the desired color as a background.

Can you show me what you got and what is the desired effect?

[bradydowling]

Forgive me if I'm misunderstanding how this works but I'll give it my best shot.

Because in certain cases we don't have an image with a fully opaque or transparent background

Do you just mean the background could be semi-transparent (e.g. alpha of 0.5)? What if you allowed the user to manually specify the background color so detection doesn't need to happen? Then each triangle can be placed atop that background.

Can you show me what you got and what is the desired effect?

I believe you're looking for the source image for both of those images I produced above. This is it:

Then with that, I specified the base background color for the image that is produced.

[esimov]

I'll look into it to see if it's possible without major changes.

[esimov]

@bradydowling I've integrated the requested features. Please pull out the latest code and give it a try. As an example here is how it looks like. I have also updated the documentation.

[bradydowling]

Awesome! It looks like it's working with some images. This one doesn't seem to be working. Here's the image:

And here's the command I'm running as well as the output:

$ triangle -in originals/black-stroke-transparent-cropped.png -out black-stroke-triangle-app.png -bg=#00000000
Generating triangulated image... \
Generated in: 0.13s
Total number of 2 triangles generated out of 0 points
Saved on: black-stroke-triangle-app.png ✓

I get the same thing when passing -bg=#ffffff00 and the resulting image is purely transparent. I wonder if this is an issue specific to pure black.

[esimov]

I was searching for the reason, but haven't found yet, but definitely it's related to how the image is encoded, because if i'm re-saving in Photoshop then it's working. I'm still investigating.

[bradydowling]

Very interesting. I had tried a couple things troubleshooting but had considered that, good thought.

…

On Thu, Apr 16, 2020, 4:54 AM Endre Simo ***@***.***> wrote: I was searching for the reason, but haven't found yet, but definitely it's related to how the image is encoded, because if i'm re-saving in Photoshop then it's working. I'm still investigating. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABS4AU3TX2YHUVZ7ZRWMBQDRM3BULANCNFSM4MCJMIXQ> .

[esimov]

I've resolved the issue you reported. The reason was the swapped color channels: ABGR instead of RGBA. Please check it and let me know if it's working for you. I have also created a new release.

[bradydowling]

That looks more blobby than triangulated. I guess should just fix the source image I have and then rerun it to see if that will produce a nice image. After pulling it's producing the same thing that you shared above. I believe you can resolve this now, thank you for your work on it! 🙏

[esimov]

This has to do with the type of the underlying image and since it has an uniform single color the tool fills up the produced inner triangles with the same color. You can prove yourself if you are running the following command:

triangle -in ~/Desktop/79342830-a0ed0380-7efb-11ea-83a0-b4e6b8971864.png -out ~/Desktop/triangle.png -bg="#ff000000" -stroke=0 -wireframe=0 -gray=0 -sobel=5 -blur=4 -max=1500 -wireframe=2 -stroke=1

This is the output it generates:

[esimov]

If you don't mind I'll close this issue. You can reopen it at any time if that's the case.