add ballsg

3 files changed, 86 insertions, 52 deletions

diff --git a/env.js b/env.js
index d893933..47d002b 100644
--- a/env.js
+++ b/env.js
@@ -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 
diff --git a/index.html b/index.html
index 3131393..fef5e51 100644
--- a/index.html
+++ b/index.html
@@ -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 () {