Generative placeholder images for your next project!

When I think of placeholder images, I will always think of the forever wonderful placekitten and placepuppy. This project though, adds a beautiful piece of randomness, art, and joy that we’ve come to know and love from generative art.

Generative Placeholders has an artistic and nerdy flair with the added perk that your placeholders will be extra unique!

The project offers a wide range of great generative and mathematical art. It has also gone above and beyond to include some wonderful color palettes, provided by the lovely nice color palettes node module.

For example:

Generative Artwork 1


Generative Artwork 2

If you’re concerned that all your images will look the same, fear not! There’s an extra URL parameter (img=X) where X is the specific seed you would like to use for each individual image.

What's happening behind the scenes?

Always judge a book by its cover, bits'n'pieces.

Last week I completed a small weekend project called Always Judge a Book by its Cover. Rather write about it, I thought it would be fun to go over some of the neater pieces of tech that have gone into it and break them down into small examples.

The first, and perhaps the most obvious, is the goop effect that sits on the header and in between each of the books (alternating from white to a light grey). This is created using JS and a canvas element. (Although CSS Houdini could be a good option in the future.)

You can have a look at the code above… Ultimately, it’s a fairly simple effect that definitely looks a little more complex than its actual code.

The second little flair, which was a fun one to make, is the 3D CSS book.

The book gets its 3D effect from the CSS transform property. I used the transform-style: preserve-3d; property to really give it that semi-realistic feel. The pages are just divs with box shadows and rounded corners. And then to top it all off, an image of the cover is used on the front and back.

The inline padding-top stops the image from jumping as it loads. There are lots of thoughts on how to patch up this annoying part of loading images on the web, but I chose to stick with this old faithful method.

And the third tidbit?

What color is your name?

Synesthesia is a condition where certain senses overlap. For example, you could smell colors, or see sounds!

Bernadette Sheridan has a type of synesthesia whereby letters and numbers appear as colors within her brain (grapheme-color synesthesia). She has created a lovely map of those colors so we can experience it as well.

What Color Is Your Name? allows you to type in your name and see the colors that it produces. It’s a wonderfully simple idea grounded in Bernadette’s reality.

You may be surprised by what you find. For me, I’m a long combination of blues, with a yellow flair right at the end. You can play around with random names on the site, or browse the project’s Twitter account and see everyone sharing their colors!

The project has done a fantastic job of raising awareness of the condition, and to boot, allows you buy a beautiful, clean print of whichever word you choose. Which can make for a wonderful and unique gift, as well as a perpetual talking point!

Color me interested

Run your tweet on a virtual 8-bit computer.

This is a true gem in the realm of microcode. BBC Micro Bot is an amazing tweet-bot, with a simple premise. Just @ mention it in a tweet with some BASIC code, and it will reply with an animated rendering of the result.

This project is fairly fresh, but already yielding fantastic results. I love the many ways such a small amount of code can result in something so beautiful and animated.

For the tweets below, you can see both the code and the outcome. I’ve tried to identify and link out to the theory or idea behind the code if I can spot it easily.

With all creative code… playing around with it is an incredible opportunity to learn while exploring your creative side! Remix, resend, and create something new! If you’ve got something you’re proud of, edit this post on GitHub to share it!

Here, we have Sierpiński’s Triangle. It’s amazing how much complexity can be pulled from recursive code!

This is a great instance of a beautiful and beloved staple in the world of generative code:

10 PRINT CHR$(205.5+RND(1)); : GOTO 10
The randomization of two characters shows so much complexity and beauty!

Random triangle generation, colors, and fills. Really such simple code that still sucks you into the screen!

It’s projects like this that really show how powerful visual code can be!

More please.

It hurts to play, but you'll keep on coming back.

This game appeals to me on one big and mighty level… I like a game that makes me suffer.

It will shoot a deep painful ache right into your human existence, one jump at a time.

The appropriately named Leg Breaker is a game for Mac, Linux, and Windows… a platformer, like so many before it. The catch being, in each level, you can only jump twice.

When you jump, your leg breaks. When you jump again… well, your other leg breaks. At that point, you’re left crawling upon the ground in a stumbling mess. Which you may actually want, depending on the puzzle.

Show me how it goes?

Are you the best, that's ever been, like no one was before?

At this point in our lives Pokémon is, and will always be, one of the best-selling and most popular games in existance… but everyone’s attention fades with time. Still, a huge community of people continue to stick with the game and follow it through its many stages.

For me, I fell off in the last few years… BUT, that doesn’t make this amazing quiz, Pokémon Master, any less interesting and fun.

The idea is simple. If you’ve ever played the beloved “WHO’S THAT POKÉMON” game, well then you know all the rules. See the Pokémon. Guess the Pokémon. There’s added complexity in that, although the Pokémon isn’t shaded as a silhouette, it could literally be any Pokémon ever — not just the easy to guess ones.

And the tech?