DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Generative art, flow fields, and books
Welcoming Sloth
Welcoming Sloth

Posted on

Generative art, flow fields, and books

Backstory

A few weeks ago, while working on ReadShape, I was faced with a not very surprising issue. Some books don't have covers. Never did, never will.

How is this possible? Well, when you walk into a book store of course all the books will have covers, even if just to keep all the paper together. But we live in the digital age, where anyone can publish a book without a publisher and in some cases without using proper grammar. In such cases you will often times encounter books without a cover.

This creates a somewhat unique problem. Of course, you can go with a simple solution and just display a cover-not-found.jpeg, but that's not over-engineered enough.

This led me down the colorful & artsy path of generative art.

What is generative art?

Essentially, generative art is art which was generated by a machine using an algorithm.

The cool thing about it is that it can output wildly different results each time it's ran.

Examples

This is some generative art from Tyler Hobbs titled "Fidenza". Each a different invocation of the same algorithm.

Fidenza


Here is a different algorithm from Kjetil Golid titled "Tilework".

Tilework

Flow fields

As could be seen from the examples, there's a fair bit of variance in output that each algorithm can produce.

In many cases the algorithm needs to produce some amount of overall uniformity. The Fidenza output would not look nearly as good if each line would go in a new direction randomly.

To have this overall uniformity often times something called a "flow field" (also known as "vector field") is used. Essentially what it does is it creates a grid where each vector contains a direction.

It is more easy to understand with the following picture.

Vector field

Now that each point sets you going in some direction you simply pick a point and follow the arrows for N steps.

Following the vector field

Generating a flow field is something I won't go into, but if you're curious about learning more have a look at this post from Tyler Hobbs.

Book covers

Now, back to why we're going down this rabbit hole in the first place β€” books.

Generative art seems to be just the thing I'm looking for. However, something that still has to be kept in mind is that for my use case, given the same inputs, I always want to return the same output. This is simply so that I could save on my S3 bill and generate these covers on the fly.

This means a few things β€” no random values, no unnecessary dependencies, and it has to be fast.

What I ended up doing was creating a murmur hash based on the input arguments, because murmur is fast and always returns a uint32 value. Perfect for doing probability-based decisions, creating rgb values, and good enough for creating a flow field.

If you're interested in viewing the source code, have a look here: https://github.com/ReadShape/covers

Here are is an example of the outcome

ReadShape Covers

It's simple, fast, and contains a good amount of variety. You can play around with it here.

Conclusion

I hope you learned something new today, and hopefully you'll be able to see these covers in action soon on ReadShape.

You're also welcome to contribute to the GitHub repository.

β€” T

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!