Added examples

.gitignore

@@ -0,0 +1,3 @@
+*~
+*#
+.DS_STORE

examples/async.js

@@ -0,0 +1,95 @@
+
+/*
+    
+    This example demonstrates one technique for creating asynchronous generators - ones that, for
+    various reasons including performance, might not be able to produce an image in a single frame.
+
+    Here we render a single circle at a regular interval until the desired number of circles have 
+    rendered before firing the `done` callback passed to the `generate` method. We also ensure that 
+    all queued tasks from the last call to `generate` are cleared so as to ensure to memory or 
+    visual leak occurs.
+
+*/
+
+var Generator = (function() {
+
+    var canvas = document.createElement( 'canvas' )
+    var context = canvas.getContext( '2d' )
+    var counter = 0
+    var interval = -1
+
+    var settings = {
+
+        numCircles: {
+            type: 'number',
+            range: [ 20, 250 ],
+            value: 100,
+            step: 1
+        }
+    }
+
+    function addCircle() {
+
+        // remember to use `stuvio.random` to keep it deterministic!
+
+        var width = context.canvas.width
+        var height = context.canvas.height
+        var radius = Math.min( width, height ) * stuvio.random.float( 0.01, 0.1 )
+        var offset = Math.min( width, height ) * stuvio.random.float( 0.5 ) - radius
+        var angle = stuvio.random.float( 0, Math.PI * 2 )
+
+        var x = ( width / 2 ) + Math.cos( angle ) * offset
+        var y = ( height / 2 ) + Math.sin( angle ) * offset
+
+        var hue = Math.round( stuvio.random.float( 360 ) )
+        var sat = Math.round( stuvio.random.float( 30, 100 ) )
+        var lum = Math.round( stuvio.random.float( 30, 90 ) )
+
+        context.beginPath()
+        context.arc( x, y, radius, 0, Math.PI * 2 )
+        context.fillStyle = 'hsla(' + hue + ',' + sat + '%,' + lum + '%,0.8)'
+        context.fill()
+    }
+
+    return {
+
+        context: context,
+
+        settings: settings,
+
+        initialize: function( done ) {
+
+            done()
+        },
+
+        generate: function( done ) {
+
+            clearInterval( interval )
+
+            context.fillStyle = '#ddd'
+            context.fillRect( 0, 0, context.canvas.width, context.canvas.height )
+
+            counter = 0
+
+            interval = setInterval( function() {
+
+                if ( counter++ < settings.numCircles.value ) {
+
+                    addCircle()
+
+                } else {
+
+                    clearInterval( interval )
+                    done()
+                }
+
+            }, 10 )
+        },
+
+        destroy: function( done ) {
+
+            done()
+        }
+    }
+
+})();

examples/canvas.js

@@ -0,0 +1,41 @@
+
+var Generator = (function() {
+
+    var canvas = document.createElement( 'canvas' )
+    var context = canvas.getContext( '2d' )
+
+    var settings = {
+
+        backgroundColor: {
+            type: 'color',
+            label: 'Background Color',
+            value: '#d9ebee'
+        }
+    }
+
+    return {
+
+        context: context,
+
+        settings: settings,
+
+        initialize: function( done ) {
+
+            done()
+        },
+
+        generate: function( done ) {
+
+            context.fillStyle = settings.backgroundColor.value
+            context.fillRect( 0, 0, canvas.width, canvas.height )
+
+            done()
+        },
+
+        destroy: function( done ) {
+
+            done()
+        }
+    }
+
+})();

examples/random.js

@@ -0,0 +1,87 @@
+
+/*
+
+    This example demonstrates how to use randomness in your generators. Because we must ensure that 
+    an image is reproducible, when using random numbers they must be generated by a _deterministic_ 
+    pseudo-random number generator, rather than `Math.random`. For this, we provide you with 
+    `studio.random`, which is documented in the [sandbox readme](https://github.com/stuvio/sandbox)
+
+    When a generator is initialized in the Stuvio environment, it is assigned a `seed` value and 
+    before each call to `generate` the pseudo-random number generator powering `stuvio.random` is 
+    reset to this seed value. You are of course free to override this value by creating a setting 
+    for your own seed value, as is show here. Be sure however to use this value to set the seed of 
+    `studio.random`, inside your `generate` method and before you actually generate any numbers.
+
+*/
+
+var Generator = (function() {
+
+    var canvas = document.createElement( 'canvas' )
+    var context = canvas.getContext( '2d' )
+
+    var settings = {
+
+        seed: {
+            type: 'number',
+            range: [ 0, 1000 ],
+            value: 12,
+            step: 1
+        },
+
+        lines: {
+            type: 'number',
+            range: [ 5, 20 ],
+            value: 10,
+            step: 1
+        }
+    }
+
+    return {
+
+        context: context,
+
+        settings: settings,
+
+        initialize: function( done ) {
+
+            done()
+        },
+
+        generate: function( done ) {
+
+            // override the current stuvio seed with the settings seed
+            stuvio.random.seed = settings.seed.value
+
+            context.globalAlpha = 1.0
+            context.fillStyle = '#323f4c'
+            context.fillRect( 0, 0, canvas.width, canvas.height )
+
+            for ( var i = 0, n = settings.lines.value; i < n; i++ ) {
+
+                context.beginPath()
+
+                context.moveTo(
+                    canvas.width * stuvio.random.float( 0.05, 0.95 ),
+                    canvas.height * stuvio.random.float( 0.05, 0.95 )
+                )
+
+                context.lineTo(
+                    canvas.width * stuvio.random.float( 0.05, 0.95 ),
+                    canvas.height * stuvio.random.float( 0.05, 0.95 )
+                )
+
+                context.lineWidth = canvas.width * stuvio.random.float( 0.02, 0.1 )
+                context.globalAlpha = stuvio.random.float( 0.1, 0.9 )
+                context.strokeStyle = '#fff'
+                context.lineCap = 'round'
+                context.stroke()
+            }
+        },
+
+        destroy: function( done ) {
+
+            done()
+        }
+    }
+
+})();

examples/types.js

@@ -0,0 +1,164 @@
+
+/*
+    
+    This is the kitchen sink example, showing all of the current input types
+
+*/
+
+var Generator = (function() {
+
+    var canvas = document.createElement( 'canvas' )
+    var context = canvas.getContext( '2d' )
+
+    var settings = {
+
+        exampleColor: {
+            type: 'color',
+            label: 'Color',
+            description: 'Example color input',
+            value: '#4DECB4'
+        },
+
+        exampleImage: {
+            type: 'image',
+            label: 'Image',
+            description: 'Example image input',
+            value: new Image()
+        },
+
+        exampleNumber: {
+            type: 'number',
+            label: 'Number',
+            description: 'Example number input',
+            range: [ 0.1, 1.0 ],
+            value: 0.5,
+            step: 0.01
+        },
+
+        exampleRange: {
+            type: 'number',
+            label: 'Range',
+            description: 'Example range input',
+            range: [ 0.0, 1.0 ],
+            value: [ 0.1, 0.9 ],
+            step: 0.01
+        },
+
+        exampleBoolean: {
+            type: 'boolean',
+            label: 'Boolean',
+            description: 'Example boolean input',
+            value: true
+        },
+
+        exampleAudio: {
+            type: 'audio',
+            label: 'Audio',
+            description: 'Example audio input',
+            interval: 1 / 20,   // interval (in seconds) between samples (1 / samplesPerSecond)
+            duration: [ 1, 3 ], // min / max duration in seconds
+            bands: 64,          // number of bands per sample
+            value: null
+        }
+    }
+
+    return {
+
+        context: context,
+
+        settings: settings,
+
+        initialize: function( done ) {
+
+            // load assets before declaring the generator ready...
+            settings.exampleImage.value.src = 'assets/logo.png'
+            settings.exampleImage.value.onload = done
+        },
+
+        generate: function( done ) {
+
+            // use color
+
+            context.fillStyle = settings.exampleColor.value
+            context.fillRect( 0, 0, canvas.width, canvas.height )
+
+            // use audio and range
+
+            var audioData = settings.exampleAudio.value
+
+            if ( audioData && audioData.length ) {
+
+                var slices = audioData.length
+                var bands = settings.exampleAudio.bands
+
+                var xMin = canvas.width * settings.exampleRange.value[0]
+                var xMax = canvas.width * settings.exampleRange.value[1]
+
+                var yStep = canvas.height / ( audioData.length + 1 )
+                var xStep = ( xMax - xMin ) / bands
+
+                var slice, band, data
+
+                context.save()
+                context.translate( xMin, 0 )
+                context.beginPath()
+
+                for ( slice = 0; slice < slices; slice++ ) {
+
+                    data = audioData[ slice ]
+
+                    context.translate( 0, yStep )
+
+                    for ( band = 0; band < bands; band++ ) {
+
+                        if ( band === 0 ) {
+
+                            context.moveTo( band * xStep, ( data[ band ] / 255 ) * yStep * -2.0 )
+
+                        } else {
+
+                            context.lineTo( band * xStep, ( data[ band ] / 255 ) * yStep * -2.0 )
+                        }
+
+                    }
+                }
+
+                context.strokeStyle = '#111'
+                context.lineWidth = 1
+                context.lineJoin = 'round'
+                context.lineCap = 'round'
+                context.stroke()
+                context.restore()
+            }
+
+            // use image, number and boolean
+
+            if ( settings.exampleBoolean.value ) {
+
+                var texture = settings.exampleImage.value
+                var aspect = texture.height / texture.width
+                var sideA = Math.min( canvas.width, canvas.height )
+                var sideB = Math.max( texture.width, texture.height )
+                var scale = settings.exampleNumber.value * ( sideA / sideB )
+
+                context.save()
+                context.translate( canvas.width / 2, canvas.height / 2 )
+                context.scale( scale, scale )
+                context.translate( texture.width / -2, texture.height / -2 )
+                context.drawImage( texture, 0, 0 )
+                context.restore()
+            }
+
+
+            // all present and correct
+
+            done()
+        },
+
+        destroy: function( done ) {
+
+            done()
+        }
+    }
+
+})();