Blog

WaveMaker is Memetic Arts’ free, web-based application for producing realtime Generative Art (aka Algorithmic Art or Computational Art). When Version 1.0 is released, its interaction format will follow the well-known “Explorer” pattern, in which the user can modify a set of parameters and see the results of the settings immediately applied to an on-screen object; for now you can vary the output by selecting from presets. WaveMaker’s visual output is unique in that the shapes it produces tend to resemble surreal, modernistic architecture, sculpture, or furniture, whereas other Generative Explorers that we’ve seen tend to either create end-to-end patterns or symmetrical, mandala-like objects.

In this series of posts, I’m going to explain how WaveMaker works, and how the various included parameters are used to control the rendering. I’m going to keep this at the “non-coder” level, so won’t be getting into implementation details, or what javascript commands do what; similarly, this is not a functional ‘how-to’ either, as basic operation is covered in the Help section on the Wavemaker site. The image above is typical of the images that WaveMaker produces, and will serve as our point of reference for this discussion.

WaveMaker’s basic premise is actually very simple. If you’re familiar with “String Art” (and I really do hate to make that comparison), then you’ve pretty much got it; if not, here’s a longer explanation. WaveMaker objects are determined by two curves, each of which are constructed by randomly-generating the coordinates of an path. We’re using the Raphael.js library for this, but that’s all I’ll say about it for now (since I promised to keep this non-techie). Here are the two paths used to construct our sample image:

Once these paths are generated — which only takes a fraction of a second — we “fill” the shape by connecting the two paths with a series of straight lines, each of which joins the same relative points on each path. This would be the “string art” part. So, in other words, for any point N on Path 1, we find the equivalent point N on Path 2, and draw a line connecting those two points. The two figures below show a “lo-res” rendering of our object, the points spread farther from each for illustrative purposes. The shapes are actually identical; I’ve simply “turned on” the control curves in the left-hand image to more clearly show how the lines connect from one to the other.

And it’s pretty much that simple. There are a handful of parameters that we can apply to vary the overall look of the object, and we’ll dive into those in the next post. I’ve included the final “hi-rez” version of the object with Control Curves “on” as reference; the only difference between this image and the ones above is that we’ve decreased the “spread” (or increased the resolution, depending on how you want to think of it), from 30 units to 1.

WaveMaker is a web-based application that uses code to create abstract art in realtime. You can use it for free at http://wavemaker.memeticarts.com