The Indie Web
Twitter RSS
take my money
2.29.2020 art generative-art

A generated space for your browser and walls.

The Generated Space is a gallery of procedural and generative art which encompasses a wide variety of techniques and methods. It was created by the wonderful developer and artist Kjetil Golid.

In Kjetil’s own words:

It presents a wide range of different generative algorithms; from organic flow fields and particle systems to rigid fractals and grammar-based shapes. Some more serious than others.

The variety of generative art is really astounding, with creations taking inspiration from a wide range of diverse origins and sources.

From artists such as Jackson Pollock:

Engineer and Mathemetician Oliver Byrne:

Exploring different generative algorithms and ideas, like Cellular Automata:

As well as amazing studies of isometric forms and shapes, creating wonderfully complex structures:

How do I buy them?
code
2.26.2020 audio bitsnpieces

Beep beep bloop bloop - Listen to your webpage in action!

Debugging tools are better than ever, but some things still remain hidden to the un-observant eye… this small script is a delightful way to hear what webpages are doing behind the scenes.

Accurately named plink-plonk.js by developer Tom Hicks, this small snippet of JavaScript is a clever and simple way to create sounds from the browser whenever the webpage you’re on modifies itself in any way. (For single-page apps, this will be a lot!)

The script is activated by pasting it into your console (not always the best idea, if you can’t understand all the code). Here’s a quick video of it in action:

The simplicity of the script, is based in both the power of the Web Audio API and the Mutation Observer API.

So how does this work? Lets break it down!

Explain it to me
art
2.23.2020 generative-art plotter code open-source

Create your own art by tinkering with this machine's wacky controls.

A lot of generative artists show off their creations with some clever curation tools that allow you to make small adjustments. This project is a great expansion on that idea.

Tinkersynth is a generative art machine, in the literal sense, modeled after a synth. With the artwork on the left and a set of special tools on the right, you can tweak each slider to change different aspects of the art.

Tinkersynth encourages you to play with it and discover how each of the tools works—just like how you might learn how to use an actual synth for the first time. Each icon means something different, and you’ll need to play with each and every one before you feel ready to leave the page.

In the words of the creator, Joshua Comeau:

Tinkersynth prioritizes being delighted by unexpected effects rather than creating an intuitive, predictable tool.

If the joy of creating artwork isn’t enough, Tinkersynth is full of secrets and easter eggs that will keep you exploring. Each of the sliders and inputs is a delight to use. They all obey the law that every action has an equal and opposite reaction.

More about the artworks and code
resource
2.21.2020 art code open-source

This text editor is for the new world.

Are you looking for the next big adventure within the wild world of text editors? Something a little more exciting than your day-to-day, monospaced, “every time you press a key the letter appears” life?

Well, here it is: TEXTREME! The new frontier in text editor functionality. And the recipe is perfect…

  1. A pinch of pixelized 8-bit typography. (With Unicode support.)

  2. A splash of particle explosions, one for every letter you type.

  3. A swirling sensory explosion of thumps and thuds for every keypress — A laser zap for each new line.

  4. For every character you delete, send it flying off the editor like there’s no tomorrow.

  5. To see if you can type to a metronomic beat, a super quirky rhythm mode.

How is it built?
resource
2.21.2020 art generative glitch open-source

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

and

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?
code
2.18.2020 bitsnpieces

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?
take my money
2.15.2020 art

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
code
2.14.2020 microcode bot

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.
games
2.13.2020 itch

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?
games
2.13.2020 vue open-source

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?