Code Art — abstract artworks for your creations

Aleksei Berezkin - Oct 25 '22 - - Dev Community

Have you ever searched internet to find a cover for your post? I did! Artists created quite a few of beautiful images, but whenever I see a nice pic I may wish slightly different color, or font, or angle, or some other effect...

Is it possible to make a software generating artworks? Yes, and here is it!

https://code-art.pictures/

Usage

  • Just open the app, or click “↻” — and you get new artwork
  • Do you need the file? No problem, click “Download” button and you have it
  • Do you want tweaking the image? There's a comprehensive menu under “Options” button. You may change size, font, color, angle and much other effects.

How does it work?

Glad you asked. Here's the repo. The app is powered by WebGL2 which I learned from WebGL2 Fundamentals. Just like any other WebGL app, much of its work is the scene data preparation which consists of several steps:

  • Rasterize textures
  • Generate several sets of scene parameters (font, angle, scroll position etc)
  • Estimate the expected pic fill ratio for each params set. I experimented a lot, and found out the more text visible on pic, the better it looks
  • Of generated params set, pick one yielding the greatest fill ratio
  • Compute scene vertices
  • Upload the data to GPU, and render the scene

To render UI I use Svelte. To parse JS files I use Acorn JS running in Web Worker.

Can I use images in my posts?

Of course! Please don't remove watermarks though, or give explicit credit near the image, thank you.

Have anything to say?

You are welcome. Feel free to write a comment or file an issue.

. . . . . . . . . . . . . . . . . . . . .