artmaker

Maybe you want a wobbly Earthbound-style background for your HTML5 game jam game without much effort, or perhaps you just want a cool visual for your website. Either way, artmaker can help. Recently, I used it to add some style to this game prototype you can play in the browser here.

live example

The live example is also a good way to find cool patterns. By copying the seed (logged to the developer console) you can replicate the same pattern.

usage

You can use artmaker as a node module or directly in the browser.

with build tools

If you are familiar with npm, browserify and maybe TypeScript, the absolute best way to use this is to install it with npm install artmaker and import it like:

import ArtMaker from "./index";

with script tag

Of course, you can also simply include it as a script:

<script src="artmaker.min.js"></script>

For a complete example, see the file scriptexample.html.

general usage

You can add the canvas to the DOM and animate it with this:

const artMaker = new ArtMaker();
artMaker.animate();

This will add a canvas to the div with the id "art":

<div id="art"></div>

The new canvas will have an id of "artcanvas" so you can style it easily with CSS:

#artcanvas {
  width: 100%;
  border: 2px solid pink;
  /* this gives a nice crisp blocky effect when the canvas has a
  low resolution and is scaled up */
  image-rendering: pixelated;
}

You can pass in more arguments to the constructor to change the resolution and the ids of the elements. These are the defaults:

const artMaker = new ArtMaker(1920, 1080, "art", "artcanvas");

If you want to get the same pattern, you can seed the random generation by calling seed before animate. If you want to change the seed mid-animation, just call seed again. Calling it with no arguments will choose a random seed. They can be chained:

artMaker.seed("foo").animate();

If you have your own game loop, you don't have to call animate, and can just call draw in your game loop, passing in the current time in milliseconds:

// assuming your game is locked at 60
artMaker.draw(ticks * 60 * 1000);

You can override the color palette of the pattern with artMaker.setBackground([r, g, b]), artMaker.setForeground1([r, g, b]) and artMaker.setForeground2([r, g, b]). Note that many of the random effects do some form of color grading, so the colors you set might be completely different in the final image. The live demo is a good way to experiment with this; you can override colors with the controls in the top left.

Note that before 1.0, the generative algorithm might change, thus breaking seeds you might have saved from previous versions. If you save a shareable link from the live demo and try to visit it again after the algorithm has been updated, you'll be notified with an alert.

developing

npm run build will compile all the TypeScript into JavaScript and put it in dist. npm run bundle will bundle example.ts to create bundle.js which is used in index.html, which is the live example. To run this, you actually don't need a local server; you should be able to just open index.html with Chrome or Firefox directly. There are watch versions of these scripts: npm run buildwatch and npm run bundlewatch. To create the browser versions artmaker.js and artmaker.min.js, run npm run minify. These are the files included as the release.

final words

If you play with this library and find that you want some greater control over the output for practical purposes, maybe locked/unlocked framerate and timing options, let me know by creating an issue. If you happen to find a use for this weird project, let me know as well.

This project was started for a seminar on Generative Design taught by Gillian Smith. It also makes use two other libraries I wrote, merge-pass and postpre which were originally created to add post-processing effects to Charlie Robert's marching.js. I wouldn't have had the opportunity to create such a project without their guidance.