Part 2: Basic Tips

Polish your art generator

Here are a few ideas to make your art generators more enjoyable for your visitors (and you!) to interact with:

Make your controls disappear and reappear

I like having the controls for my art generator disappear if the mouse doesn’t move for a few seconds. It's much nicer than having them visible all the time. Try prompting Claude with something along the lines of these instructions that Egg wrote: "There should be controls to change any important parameters, and the controls should disappear when the mouse hasn't moved for more than three seconds."

Adjust the range of your controls

When you're playing with your controls, you might find that some combinations of parameters are really interesting, while others may be boring or even downright ugly to your eyes. If your goal is to have controls that produce a high rate of interesting results, you may want to curate your parameters and set limits on which outputs are possible, by preventing the controls from eliciting variations that you don’t like as much.

If you're not sure of the exact numeric value that you’re aiming for, you can use percentages. For example, I might ask Claude to "restrict the range of the wave speed slider to the lower 40%." Claude almost always generates slider controls for me, so I don't see the exact values of my parameters most of the time, and this approach works for me.

If you find the right mix of variables and parameters, you may be able to achieve a satisfying range where the generator has lots of interesting sweet spots, while still leaving room for creativity and divergence. Different generative artists have different perspectives on how many restrictions to introduce, and ultimately, it's up to you to find the right balance. Egg prefers to keep their ranges wide:

Personally, I’d rather have a wider range of behavior with 5% of them being boring, than to try making sure that it never hits a boring spot, but in the process misses lots of wild interesting stuff.

Have some nice starting settings

Pick your favourite settings for the controls and prompt Claude to start there every time. This way, when your visitors start up your piece, it will already be in a really interesting state, which means that you can draw them in right away. It's a simple way to curate the user experience and show people the maximum potential of your creation, and it will inspire people to play around even further.

Save settings/load settings

This is currently aspirational for me, but I've thought about different ways of getting Claude to help me remember the parameters that I was using. I'd like to be able to save my settings and load them up again in a future session, without having to play with the controls every time. Kat Winter gave me the idea of having a function that generates a link that deploys a new version of the art generator, and makes the current parameters into the default settings for the new link.

Incorporate random behaviours

For this idea, I'll let Egg do the explaining.

If I were going to make this into a generative art piece personally, once I found the ranges of controls that I liked, I would set it up so that instead of controls, a) every time it reloaded those would start with random values (in the interesting range) and b) those values would quite slowly mutate over time so that as you continued to watch it, not only would it form interesting new patterns in the short run but it would move into new and different parts of the parameter space over the longer run.

If you want to try this idea, it shouldn’t be too difficult to prompt Claude to set up a random settings button, or have the values start out randomly each time that you refresh the page. Egg likes this approach for when they just want to sit back and watch a piece unfold by itself, knowing that it will always produce something new, like a screensaver. It's a great way to show lots of different types of outputs without requiring your visitors to constantly move around the controls, and to take them down paths that they may not have thought to explore on their own.

Adjust the animation speed

If your generative art mutates and changes shape over time, you can have Claude add a slider that controls the animation speed. That way, if you find something you really like, you can slow down or pause the animation, without it changing into something new as you try to refine it or capture it. This also allows your visitors to change the mood of what they're looking at. A rapidly moving generative piece might feel frenetic and seizure-inducing, whereas when it's slowed down, it might feel more meditative, gentle, and flowing.

Add a download button

Rather than take screenshots of the moments when a piece looks particularly gorgeous, I prefer to have Claude make a download button to save a still image to my computer.

In my experience, Claude usually sets up downloads so that the image is saved as a PNG file, which is a file format that can handle transparency, and makes it easier to do digital collage. You can also ask Claude to add a background so that the art shows up better on its own (and sometimes it makes that decision on its own). You can also try setting it up to download the file as an SVG instead of as a PNG, which would make it easier to edit it later on in a vector graphics program.

Make the code more efficient

I've found that my more elaborate art generators tend to get very computationally intensive, to the point where my computer will freeze up and they’re no longer pleasant to use.

If this happens to you, you can try asking Claude to make your code more efficient. Sometimes, this works!

You can also use "download website" and open the page directly on your computer, which seems to be more efficient than running the page off the Internet, although of course, you can’t websim-prompt further once you've downloaded the page.

Doe Sparkle has been downloading their pages, feeding them into ChatGPT-4o, and asking it to pinpoint all the parts of the code that can be offloaded to other JavaScript libraries. Then, one iteration at a time, they use websim to replace each section with a CDN-hosted library, which saves tokens and frees up space to add even more features to their generators. They said, "The amount of text that can be displayed as content is proportional to the amount of tokens that also need to be spent on CSS. If you offload the CSS to something like bootstrap, it leaves more tokens to put words on the visible page. It's the difference between having to dedicate tokens to dozens of lines of CSS syntax, versus a single line CDN link that has done 90% of the legwork for you." Other users have reported success with this method.

Name your page and URL

You can rename your websim page and give it a personalized URL to make it look more polished.

By default, every time a new page is created, websim generates a unique link that follows the format "websim.ai/c/[id]." You can use websim’s "bookmarks" to rename your page, as well as change your URL to the format "websim/@user/bookmark," so that it's more obviously linked to your user account. At present, websim only supports these two formats.

As a finer point, every time you generate a websim page, two different URLs get created: an external URL and an internal URL. The URL that I just described is the "real" external URL. You can enter it into any real-life Internet browser to go to your websim page, just like you would for a regular website. For example, take a look at this deep sea creature generator that I produced in collaboration with Egg.

Claude also generates an internal URL, which appears in the address bar of the websim browser. Internal URLs are not functional links, and they won't take you to your specific page if you enter them into a real browser – or even if you re-enter them into the websim browser, because anything that you put into the address bar is effectively a generative prompt to create a new websim page. Claude imagines these internal URLs as part of the story that it creates, just like it makes up webpage titles and the contents of a page; they're effectively part of the scenery. These URLs are also not necessarily unique; I've had Claude generate the same URL for me over and over again, or generate real URLs like anthropic.com. You can customize these URLs, provided that you can prompt Claude to do it. This can be particularly interesting in a narrative context, since you could actually make the URL a part of your generative art story. This might sound overwhelming to a beginner, but you can simply think of it as decorating your page. Sometimes it's as simple and low-stakes as that.

I like to ask Claude to invent a new URL for my existing art generators by using a prompt that Janus wrote for me: "beautiful! can you come up with some possible titles for this generator and also urls to host it at? be artistic! list the options below the generator and i'll click one of your links to 'deploy' it to the new url." This makes it so that Claude gives me the information that I want, but in a way that I can just click to take action. From there, I either pick an option from the list that Claude generated, or use the ideas as inspiration to come up with my own page title and URL.