diff options
| -rw-r--r-- | env.js | 128 | ||||
| -rw-r--r-- | index.html | 8 | ||||
| -rw-r--r-- | js/lib/app.js | 2 |
3 files changed, 86 insertions, 52 deletions
@@ -6,6 +6,7 @@ var environment = (function(){ var snap, dot_grid, polysynth var strided_wires = [], wires = [] var scale = [], root, tet, interval, duration + var use_grid = false var dot_color = "#333" var drawing = true @@ -46,7 +47,7 @@ var environment = (function(){ snap = new Snap (window.innerWidth, window.innerHeight - $("#controls").height()) dot_grid = new DotGrid () - dot_grid.load() + dot_grid.build() polysynth = new Tone.PolySynth(8, Tone.synth) polysynth.set({ @@ -58,48 +59,12 @@ var environment = (function(){ release: 0.1, } }) -// polysynth = new Tone.PolySynth(8, Tone.FMSynth) -// polysynth.set({ -// harmonicity:2, -// modulationIndex:3, -// detune:0, -// oscillator:{ -// type:"sine", -// }, -// envelope:{ -// attack:0.01, -// decay:0.01, -// sustain:1, -// release:0.2, -// }, -// moduation:{ -// type:"sawtooth", -// }, -// modulationEnvelope:{ -// attack:0.1, -// decay:0, -// sustain:1, -// release:0.2, -// } -// }) -// polysynth.set({ -// oscillator: { type: $("#waveform").val() }, -// envelope:{ -// attack: 0.01, -// decay: 2.5, -// sustain: 0.0, -// release: 0.1, -// } -// }) - var comp = new Tone.Compressor(-30, 3).toMaster() // var reverb = new Tone.Freeverb () // reverb.wet.value = 0.01 // polysynth.connect(reverb) // reverb.connect(comp) polysynth.connect(comp) - // environment.stride() - // environment.randomize() } environment.bind = function(){ $(window).focus(environment.focus) @@ -114,7 +79,9 @@ var environment = (function(){ $("#interval").on("input", environment.scale) $("#intervals").on("input", environment.set_intervals) $("#duration").on("input", environment.duration) - $("#use_scale").on("change", environment.use_scale) + $("#use_grid").on("change", environment.use_grid) + $("#add_ball").on("click", environment.add_ball) + $("#remove_ball").on("click", environment.remove_ball) if (is_mobile) { snap.node.addEventListener("touchstart", getFirstTouch( dot_grid.mousedown.bind(dot_grid) )) document.addEventListener("touchmove", getFirstTouch( environment.mousemove)) @@ -128,13 +95,21 @@ var environment = (function(){ $(window).on("mouseup", dot_grid.mouseup.bind(dot_grid)) } } + environment.add_ball = function(){ + new Ball ({ x: randint(window.innerWidth), y: randint(window.innerHeight) }) + } + environment.remove_ball = function(){ + var ball = balls.pop() + ball && ball.remove() + } environment.blur = function(){ last_p = null } environment.focus = function(){ + last_p = null } - environment.use_scale = function(){ - use_scale = $("#use_scale").get(0).checked + environment.use_grid = function(){ + use_grid = $("#use_grid").get(0).checked } environment.set_intervals = function(){ root = parseFloat( $("#root").val() ) @@ -216,12 +191,15 @@ var environment = (function(){ }) } else { - wires.forEach(function(wire){ - wire.intersect(p, environment.last_p) - }) + environment.intersect(p, environment.last_p) } environment.last_p = p } + environment.intersect = function(a,b){ + wires.forEach(function(wire){ + wire.intersect(a, b) + }) + } environment.stride = function(e){ var dx = parseFloat( $("#x").val() ) var dy = parseFloat( $("#y").val() ) @@ -327,8 +305,6 @@ var environment = (function(){ var pow = Math.floor(norm(index-1, 0, scale.length)) - 2 f *= Math.pow(interval, pow) // } - // console.log(index, f, pow) - // console.log(index, scale.length, pow, f) return f } @@ -363,7 +339,7 @@ var environment = (function(){ q.y = quantize(p.y - dx/2, dx) + dx/2 return q } - DotGrid.prototype.load = function(){ + DotGrid.prototype.build = function(){ var dots = this.dots var dx = dy = this.opt.dot_spacing var dot_radius = this.opt.dot_radius @@ -491,7 +467,7 @@ var environment = (function(){ } Wire.prototype.frequency = function(){ var f - if (use_scale) { + if (! use_grid) { f = environment.index_to_frequency( this.length / dot_grid.opt.dot_spacing - 1 ) // f = environment.quantize_frequency(f) } @@ -520,8 +496,64 @@ var environment = (function(){ wires.splice(wires.indexOf(this), 1) } } + + var balls = [] + function Ball (opt){ + opt = this.opt = defaults(opt, { + x: window.innerWidth/2, + y: window.innerHeight/2, + radius: 10, + }) + var theta = this.theta = randrange(0, Math.PI*2) + this.r = opt.radius + this.last_p = { x: opt.x, y: opt.y } + this.p = { x: opt.x, y: opt.y } + this.dp = { x: Math.cos(theta), y: Math.sin(theta) } + this.speed = 1 + this.dot = dot_grid.wire_group.circle(opt.x, opt.y, opt.radius).attr({ + fill: choice(palette), + }) + balls.push(this) + } + Ball.prototype.update = function(dt){ + var dx = this.dp.x * this.speed * dt + var dy = this.dp.y * this.speed * dt + this.last_p.x = this.p.x + this.last_p.y = this.p.y + this.p.x += dx + this.p.y += dy + var reflected = false + if (this.p.x < this.r) { + this.dp.x *= -1 + this.p.x = this.r + } + if (this.p.x > window.innerWidth - this.r) { + this.dp.x *= -1 + this.p.x = window.innerWidth - this.r + } + if (this.p.y < this.r) { + this.dp.y *= -1 + this.p.y = this.r + } + if (this.p.y > window.innerHeight - this.r) { + this.dp.y *= -1 + this.p.y = window.innerHeight - this.r + } + this.dot.attr({ + cx: this.p.x, + cy: this.p.y, + }) + environment.intersect(this.last_p, this.p) + } + Ball.prototype.remove = function(){ + balls.splice(balls.indexOf(this), 1) + this.dot.remove() + } - environment.update = function(t){ + environment.update = function(t, dt){ + balls.forEach(function(ball){ + ball.update(dt) + }) } var keys @@ -66,11 +66,13 @@ input[type=text] { width: 30px } <input id="duration" type="number" min="0" max="5000" step="50" value="1250"> <label for="intervals">intervals</label> <input id="intervals" type="text" value="1/1 9/8 5/4 4/3 3/2 5/3 15/8 2/1"> - <label for="use_scale">use scale</label> - <input id="use_scale" type="checkbox" checked> + <label for="use_grid">use grid</label> + <input id="use_grid" type="checkbox"> + <button id="add_ball">+ball</button> + <button id="remove_ball">-ball</button> + <button id="reset">reset</button> <div id="mobile_controls"> <button id="draw">drawing</button> - <button id="reset">reset</button> </div> </div> diff --git a/js/lib/app.js b/js/lib/app.js index 2138025..9c07de6 100644 --- a/js/lib/app.js +++ b/js/lib/app.js @@ -48,7 +48,7 @@ var app = (function() { t -= initial_t var dt = t - last_t last_t = t - environment.update(t) + environment.update(t, dt) } app.resize = function () { |