PixelPatternMaster – create repeating pixel-art patterns interactively

[Update: new version! Spot the eyedropper pixel-art… http://dl.getdropbox.com/u/331606/pixelpatternmaster/index.html]

I always find it annoying that I can’t easily make those little repeating patterns that often make up the backgrounds of web pages or content boxes – I’m no PhotoShop user (in the cocaine sense) and Paint doesn’t cut it, ‘cos you can’t see the finished pattern.

So I made this, which I’ve named PixelPatternMaster. There are 3 boxes – the first you click on, the second you look at and the third you eventually right-click on to save your pattern.

The pattern saving makes use of the HTML Canvas elements’s built-in, right-click “Save Image As…” feature; if anyone has any suggestion of what to do with browsers that don’t support Canvas, I’d appreciate a comment.

[Note: it would be nice to move the linked-to page off Google Pages, so don’t rely on that URL too much. I would probably post here if I moved it…]



  1. Posted April 1, 2009 at 6:56 am | Permalink

    Looks good John. I hope you add colour btw.

    For non-canvas support, you could either use Flash or upload it to the server and save it using imagemagick. You can also experiment with data: URIs – see wolf 5K, but note that XBM format is not supported properly anymore.

  2. Posted April 1, 2009 at 8:23 am | Permalink

    Nice. There used to be something like this built into the original 1984 Mac’s.

    Niggles: It doesn’t work on Safari, and it would be cool if your instructions were repeated on the page.

  3. Posted April 1, 2009 at 1:56 pm | Permalink

    @jeremy Thanks, fixed that now. Was using event.originalTarget instead of just event.target

    @michael The new version has colour! 🙂 http://dl.getdropbox.com/u/331606/pixelpatternmaster/index.html I’ll look into your image-saving suggestions – turns out you can’t do “Save Image As…” on Safari either.

  4. Posted April 1, 2009 at 1:58 pm | Permalink

    @jayfresh thank you. It would be wonderful if you could click and drag to draw lines, as well….

  5. Nick Webb
    Posted April 1, 2009 at 4:16 pm | Permalink

    I second the request to click and drag to draw lines.

    How about making a pattern using it for this ere blog?

  6. Posted April 8, 2009 at 2:46 pm | Permalink

    Literally hilarious. Good work. Can you add options to alter the size of the grid? And the number of pixels represented by each block? Can you add new block shapes? have you seen this http://fontstruct.fontshop.com/ ?

  7. Posted April 14, 2009 at 12:28 pm | Permalink

    @joshua Thanks for the FontStruct link, that is a very cool thing. I like the idea of sharing your designs, would like to do that for my thing.

    Being able to change the size of the drawing grid would be useful, no? I was thinking too that I’d do a few different sizes of image box as well as the tiny one, that all updated when you edited, so you could download the image at various sizes. Maybe it’s better to just have one that you can set the size for, what do you think? I like constraining the size to handy dimensions – 2px by 2px, 4×4, 8×8, 16×16, etc.

    What new block shapes did you have in mind?

  8. Posted April 15, 2009 at 4:32 pm | Permalink

    Maybe you could try 2 sliders- one for the block/pixel size, one for the size of the output png… Or maybe 4 sliders- one each for the x and y on both sides….. So’s you can make rectangles too. That’d be handy.

    How about some gradient action?

  9. Posted April 16, 2009 at 9:34 am | Permalink

    Re: block shapes I reckon the fontstruct guys are going in an interesting direction. Maybe you could make a sub-palette with which you can design brush patterns? That way it’d be totally up to the user… Thoughts?