diff options
Diffstat (limited to 'python')
| -rw-r--r-- | python/examples/futureHouse/waveViz.html | 5 | ||||
| -rw-r--r-- | python/examples/futureHouse/waveViz.js | 167 |
2 files changed, 93 insertions, 79 deletions
diff --git a/python/examples/futureHouse/waveViz.html b/python/examples/futureHouse/waveViz.html index b63b638..d85a47d 100644 --- a/python/examples/futureHouse/waveViz.html +++ b/python/examples/futureHouse/waveViz.html @@ -4,7 +4,10 @@ <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="waveViz.js"></script> -<canvas id="canvas"></canvas> +<div id="canvasDiv"> + <canvas id="canvas"></canvas> +</div> + <label>maxPulseLength (0-4096)</label> diff --git a/python/examples/futureHouse/waveViz.js b/python/examples/futureHouse/waveViz.js index 9ef0bed..f9920e9 100644 --- a/python/examples/futureHouse/waveViz.js +++ b/python/examples/futureHouse/waveViz.js @@ -6,20 +6,24 @@ */ - $(function() { +$(function () { - var ctx = canvas.getContext('2d'); - var w, h; - canvas.width = w = window.innerWidth * 0.9; - canvas.height = h = window.innerHeight * 0.9; + var ctx = canvas.getContext('2d'); + var w, h; - var osc1 = new osc(400, 100, 0.05); - var horizon = h * 0.2; // the bigger this gets, the lower the wave offsets - var count = 100; // 40 - var step = 10; //Math.ceil(w / count); - var buffer = new ArrayBuffer(count * 4); - var points = new Float32Array(buffer); + canvas.width = w = window.innerWidth * 0.9; + canvas.height = h = window.innerHeight * 0.9; + + var zeroHeight = h * 0.85; + var zeroWidth = w * 0.85; + + var osc1 = new osc(100, 0, 0.05); + var horizon = h * 0.8; // the bigger this gets, the lower the wave offsets + var count = 100; // 40 + var step = 10; //Math.ceil(w / count); + var buffer = new ArrayBuffer(count * 4); + var points = new Float32Array(buffer); // Change wave amplitude //osc1.max = 450; @@ -28,101 +32,108 @@ // Change wait time //osc1.speed = 0.2 - function fill() { - for (var i = 0; i < count; i++) { - points[i] = mixer(osc1); - } - } + function fill() { + for (var i = 0; i < count; i++) { + points[i] = mixer(osc1); + } + } + + ctx.lineWidth = 5; + ctx.strokeStyle = '#ffffff'; + ctx.fillStyle = 'rgb(50, 50, 80)'; - ctx.lineWidth = 5; - ctx.strokeStyle = '#ffffff'; - ctx.fillStyle = 'rgb(50, 50, 80)'; + function loop() { - function loop() { + var i; - var i; + /// move points to the left + for (i = 0; i < count - 1; i++) { + points[i] = points[i + 1]; + } - /// move points to the left - for (i = 0; i < count - 1; i++) { - points[i] = points[i + 1]; - } + /// get a new point + points[count - 1] = mixer(osc1) //, osc2, osc3); - /// get a new point - points[count - 1] = mixer(osc1) //, osc2, osc3); + //ctx.clearRect(0, 0, w, h); + ctx.fillRect(0, 0, w, h); - //ctx.clearRect(0, 0, w, h); - ctx.fillRect(0, 0, w, h); + /// render wave + ctx.beginPath(); + ctx.moveTo(0, points[0]); - /// render wave - ctx.beginPath(); - ctx.moveTo(0, points[0]); + for (i = 1; i < count; i++) { + ctx.lineTo(i * step, points[i]); + } - for (i = 1; i < count; i++) { - ctx.lineTo(i * step, points[i]); - } + ctx.strokeStyle = '#ffffff'; + ctx.stroke(); - ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(10, h - 10); + ctx.lineTo(w, h - 10); + ctx.strokeStyle = '#ff0000'; + ctx.stroke(); - requestAnimationFrame(loop); - } + requestAnimationFrame(loop); + } - loop(); + loop(); /// oscillator object - function osc(maxx, minn, spd) { + function osc(maxx, minn, spd) { - this.max = maxx; - this.min = minn; - this.speed = spd; + this.max = maxx; + this.min = minn; + this.speed = spd; - var me = this, - a = 0, - max = getMax(), - min = getMin(); + var me = this, + a = 0, + max = getMax(), + min = getMin(); - this.getAmp = function () { + this.getAmp = function () { - a += this.speed; + a += this.speed; - if (a >= 2.0) { - a = 0; - } + if (a >= 2.0) { + a = 0; + } - //return max * Math.sin(a * Math.PI); - return a < 1 ? max : min; - } + //return max * Math.sin(a * Math.PI); + return a < 1 ? min : max; + } - function getMax() { - return me.max; - } + function getMax() { + return me.max; + } - function getMin() { - return me.min; - } + function getMin() { + return me.min; + } - return this; - } + return this; + } - function mixer(osc) { + function mixer(osc) { - var d = arguments.length, - i = d, - sum = 0; + var d = arguments.length, + i = d, + sum = 0; - if (d < 1) return 0; + if (d < 1) return 0; - while (i--) sum += arguments[i].getAmp(); + while (i--) sum += arguments[i].getAmp(); - console.log("1: " + osc.getAmp()); - console.log("2: " + sum); - console.log("3: " + d + horizon); - console.log("4: " + horizon); +// console.log("1: " + osc.getAmp()); +// console.log("2: " + sum); +// console.log("3: " + d + horizon); +// console.log("4: " + horizon); - // return osc.getAmp() + horizon; - return sum / d + horizon; - //return arguments[i].getAmp() + horizon; + // return osc.getAmp() + horizon; + return sum / d + horizon; + //return arguments[i].getAmp() + horizon; - } - } + } + } )
\ No newline at end of file |