ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM 6.2.0 Launches with Noise and CreateJS 1.0.0 support – #HTML #Canvas #JavaScript #ZIMjs


ZIM 6.2.0 at http://zimjs.com has launched with a new Noise() class for making generative art with OpenSimplex noise (similar to Simplex Noise and Perlin Noise).  Also, there is a new Tile() class for easy tiling with reflecting options.  See the Doc Updates for details.

Click to try the Noise Examples mini-site.  You can use sliders and dials to control aspects of the art.  Please also note the custom interface created with ZIM components.  There is also a Bubbling Video here: Noise & Generative Art




var noise = new Noise();
loop(100, function(i) {
   zog(noise.simplex1D(i)); // farther apart   
loop(100, function(i) {
   zog(noise.simplex1D(i/100); // closer together

Each of these will give us 100 values of noise from -1 to 1.  The noise numbers will  be farther apart in the first case and closer together in the second case.  Simplex noise is based on equations where the numbers are related rather than just random.  At larger steps – for instance a step of 1, the numbers appear random but at smaller steps you can see that the numbers advance in a sequence – although sometimes this sequence moves rapidly towards other sequences where it will slow down again, etc.  If we plot the input value, i, across the x axis and the result of the noise.simplex1D() along the y axis, then we get mountains and valleys like the image below:



In each case, we multiply the simplex1D() value by 100 to see a larger result than -1 to 1.  The box of the graph is 200×200 and we have moved the plotting to the vertical middle.  You can see that what appears to be noise at steps of 1 for the plot on the left, is actually a wiggly curve when we “zoom in” by 100 at for the plot on the right.

EXTRA DIMENSIONS: this wiggle feature extends into 2D, 3D, 4D, etc.  In each case, we get back a single noise value from -1 to 1 when we pass in 2 values, 3 values and 4 values.  For example., if we pass in an x and y to the simplex2D(x, y) then we get back a value that we can use for the color of the pixel or for the height of a terrain, etc.  The relative change of this value depends on the difference between our input values.  We still plot our x and y with a difference of 1 pixel but we divide the x and y by a factor (like 100 that we used in the previous example) and pass these values to the simplex2D().  This will have an effect somewhat like zooming in on a 2D noise pattern or smoothing a 3D terrain.



ANIMATION: you can animate any dimension by adding another dimension to the noise methods.  For instance, to animate the lines created with simplex1D() you use simplex2D() and change the value of the second parameter in a Ticker or with zim.animate().  Use small differences like .001 in a Ticker to animate slow change or use larger differences like .01 for faster change.  To animate the noise patterns above, use simplex3D() and animate the last parameter.

SMOOTHING: create a blob effect from noise by using a threshold.  For instance, everything below .5 is back and the rest is white.  This will look jagged around the edges so we can apply smoothing.  Basically, we use two thresholds where everything below the first is black and above the second is white.  This is also termed clamping.    Then we blend the color between the thresholds.  The blend between is not a linear blend (although it could be) but rather looks better if we apply easing where it slowly leaves black then quickly heads to white and slowly eases in to white.  There is a common function called smoothStep() used in gaming and other code libraries – and now in ZIM 6.2.0. that clamps two sides and eases between the two.  This function returns a value from 0 – 1 even if your min and max or input are not between 0 and 1.

var f = 30; // f can be considered the frequency
var value = smoothStep(.3, .35, (noise.simplex3D(x/f, y/f, j)+1)/2)*255;

Above we are adjusting the noise result to be between 0 and 1 and then clamping at .3 and .35.  This will make most of the numbers be .35 and less be .3 and then a small range between .3 and .35.  The smoothStep returns these normalized between 0 and 1.  So all the .3 values are 0 and all the .35 values are 1.  Finally we multiply by 255 and we apply this to all the colors of the pixel making some shade of grey – mostly white in this case.



Above are two examples where we have applied smoothStep() to the 2D noise we had earlier where we have “zoomed” in on the noise pattern by dividing x and y by 30 in this case.  We then take the 0-255 value that was drawing the pixels and apply smoothStep to it and clamp at values that are more towards white in the first case and more towards black in the second case.  What that does, is turn more shades black in the first case and more shades white in the second case.  In the first case we have a difference of 10 for a sharper change and in the second case we have a difference of 30 for a more gradual transition.  Note, in this case, we applied smoothStep to the value between 0 and 255 whereas in the equation in the text of the post we applied smoothStep to the noise between 0 and 1.  In each case, we need to multiply the result by 255 because smoothStep results in a number between 0 and 1.

DRAWING: we can draw into a zim Shape or we can use results to place objects or we can draw pixels into a Bitmap.  This latter option is new to ZIM 6.2.0 where we have added an imageData property to a Bitmap and a drawImageData() method to actually change the Bitmap when you have completed setting the data.  The imageData property is a single array that represents each pixel’s red, green, blue and alpha value in the Bitmap.  So there are four elements of the array for each pixel.  A 10×10 Bitmap will have an imageData array that is a length of 400.  Each value is between 0 and 255.  See the simple3 or blobs example.


CreateJS has just launched its version 1.  This has support for WebGL through the StageGL stage.  ZIM has supported the StageGL stage since the NEXT version of CreateJS which had been in the works for the last few years.  See the StageGL Bubbling Video for examples and advice.  Congrats to the CreateJS team on the official launch!


ZIM at http://zimjs.com is an open source JavaScript Framework for the HTML Canvas. You code in a text editor and view the code in a Browser. You can make visually rich games, apps, art and sites. ZIM is powered by the wonderful CreateJS with many thanks to their team!

The ZIM site features the following sections:

  • LEARN tutorials on how to start and code in ZIM
  • CODE ZIM Frame template and code context
  • DOCS the objects and commands all defined
  • NEWS latest features and articles
  • ABOUT features, applications, archives, reviews, etc.
  • EXAMPLES sample projects created in ZIM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


This entry was posted on September 17, 2017 by in interactive media, javascript, launch and tagged , , , , , , , , , , , .


%d bloggers like this: