Celtic Knot Generator – A HTML5 Canvas Experiment

Simple celtic knotI wanted to familiarize myself with the much-touted canvas element, so I used it to build an interactive celtic knot generator/editor. Give it a try.

Launch the celtic knot generator.

Note: Requires a fairly modern browser.

Instructions

When you first load up the knot generator, you will see a 10×10 grid filled with the default cross-hatch pattern. Click on one of the red or blue control nodes to select it. Then click on another node of the same color to make a cut between those nodes. Click the same nodes again to remove the cut. Note that you can only create horizontal and vertical cuts, not diagonal ones.

How to create a cut in the knot

Keep making more cuts to create your own celtic knot. Experiment with the cell size, string color and other settings. Once you’ve found a combination you like, you can download the resulting knot by clicking the “Download as PNG” button.

If you want to start over, click the “Reset pattern” button to go back to the default cross-hatch pattern. Alternatively, click “Randomize” to create a random symmetrical knot with the current settings.

Screenshots

A screenshot of the knot editor interface:

Celtic knot generator screenshot

A basic example knot:

Example knot

A more complex knot:

A more complex celtic knot

Setting the stroke color to white produces a different visual style:

Example knot

Browser Compatibility

Tested in:

  • Chrome 19
  • Opera 11.62
  • Firefox 11.0 (no HTML5 sliders)
  • Internet Explorer 9 (no HTML5 sliders)

Somewhat surprisingly, Firefox turned out to have better canvas rendering performance than Chrome. On my system, setting the grid size to 40×20 and quickly dragging the hue selector in the color picker produced noticeable lag in Chrome, but was perfectly smooth in Firefox. Of course, that’s hardly a scientific test.

Possible Improvements

  • Optimization.  Right now, the script is not optimized at all and can sometimes spike the CPU even on a relatively powerful system. It should be possible to improve the rendering speed considerably by, for example, caching and re-using identical image tiles instead of drawing the entire knot from scratch every time. Another thing you could do is limit how often the knot is regenerated when the user drags the size slider(s). Right now, dragging a slider can generate hundreds of image updates and cause massive lag.
  • Add the ability to save/load knot patterns and link to saved knots. Should  be easy enough – just stick the pattern data in the URL #anchor.
  • Add export to SVG.
  • Refactor the renderer. For example, the tile drawing functions could be made simpler by treating cell size as a constant and scaling-up to the actual size with canvasContext.scale().

Final Thoughts

Overall, the canvas element turned out to be rather pleasant to work with.  The API makes sense and is reasonably intuitive. It also reminds me of Processing, which I have used several times before. The MDN canvas tutorial was very helpful for learning the basics.

Credit goes to Yusuke Kamiyamane  for the color picker icon and Anton Lopyrev for the Java-based knot generator that served as an inspiration for the UI.

Related posts :

14 Responses to “Celtic Knot Generator – A HTML5 Canvas Experiment”

  1. Ozh says:

    Very cool 🙂

  2. Youri says:

    Nice. First click on Randomize and I got this somewhat eery picture of a face staring at me:
    hxxp://imageshack.us/photo/my-images/163/celticknotface.png/

    Freaky 🙂

  3. DennisS says:

    Great work! Really nice. I have been playing with Celtic knots lately and am carving one out of wood right now so this is a great resource

    One improvement suggestion would be to have it default to close border

  4. Stephen Yono says:

    Nice one. Cheers 🙂

  5. Oscelot says:

    I love this thing.. having one problem though. In both Safari and Chrome I can’t get it to go above 20×20. =(

  6. Jānis Elsts says:

    That’s because the canvas has a fixed size – 600×500 pixels – that can’t fit more than 16 or so cells.

    This has now been changed and larger sizes should work correctly.

  7. Roisin McNamara says:

    It works like a dream until you try to download.
    You only get about a quarter of the full image. .

  8. Jānis Elsts says:

    You’re probably hitting the 1000×1000 pixel size limit for downloads. It’s currently not possible to download images larger than that.

  9. Chris says:

    Brilliant bit of design – made up a nice pattern for a cane carving project – thanks!!

  10. CJ says:

    Great job on this generator. You explained everything well and made me want to try using HTML again (I haven’t used it since HTML 3).

    Also thank you for providing the link to the Canvas tutorial.

    Peace,
    Cat

  11. Mat says:

    Excellent app (from 2012!!)
    Thanks for sharing this 🙂

  12. Clyde says:

    Note: Can’t seem to generate anything beyond about 20 inches in height. It generates it on the screen, but in AI it’s cut off at the bottom around 21 inches when it should be 29.

  13. ollyrd says:

    I have been working with these for a while now but using pictures. Now can make my own, easy to use, I have sorted the printing side too. only one floor….. cant not make round knots. thank though.

  14. natalia says:

    this is awesome, I’m gonna try to make a similar one for circular patterns 🙂

Leave a Reply