DEV Community

Cover image for Code Art — abstract artworks for your creations
Aleksei Berezkin
Aleksei Berezkin

Posted on

Code Art — abstract artworks for your creations

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.

Top comments (2)

Collapse
 
jawharkodadi profile image
Jawhar Kodadi

Hey there! I just came across your article, and I must say, I'm absolutely thrilled by your brilliant creation! 🎨 It's always so inspiring to see creators using technology to develop innovative solutions like this. I love how user-friendly the app is, and the range of customization options you've included is simply fantastic.

The fact that you've shared a detailed breakdown of how the app works with WebGL2 shows your passion and dedication to the project. I can't wait to give it a whirl for my own creations and explore the endless possibilities! Your work is truly inspiring, and I'm eager to see what other masterpieces you come up with in the future. Keep up the outstanding work, and thank you for sharing this gem with us! 🌟✨

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin

Hey Jawhar, I'm so happy you like it and find useful! Thank you so much for these very kind words. It's very rewarding to hear a feedback like this after putting a lot of efforts into a piece of a software.