From 72bd6c93cd255371e9f520e0d2242b82aa996f24 Mon Sep 17 00:00:00 2001 From: andrew mahon Date: Fri, 29 Oct 2010 19:50:05 -0400 Subject: [PATCH 1/3] started work on some WebWorker driven particles - ended up being super slow and unstable... --- css/tc.app.css | 3 + scripts/tc.app.particle.context.canvas.js | 38 +++- scripts/tc.app.particle.context.js | 171 +++++++--------- scripts/tc.app.particle.context.js.bak | 185 ++++++++++++++++++ scripts/tc.app.particle.context.worker.js | 101 +++++----- scripts/tc.app.particle.panel.js | 35 ++-- scripts/tc.app.particle.particle.js | 31 +-- scripts/tc.app.particle.particle.js.bak | 225 ++++++++++++++++++++++ scripts/tc.app.particle.worker.js | 9 - 9 files changed, 598 insertions(+), 200 deletions(-) create mode 100644 scripts/tc.app.particle.context.js.bak create mode 100644 scripts/tc.app.particle.particle.js.bak delete mode 100644 scripts/tc.app.particle.worker.js diff --git a/css/tc.app.css b/css/tc.app.css index c5fa1ec..67c4299 100644 --- a/css/tc.app.css +++ b/css/tc.app.css @@ -3,6 +3,9 @@ body { font-family:Helvetica,Arial,sans-serif;overflow:hidden; font-size:13px; a{ color:#6198bf; } a:visited{ color:#6198bf; } +canvas { visibility: hidden; position:absolute; + top:0px;left:0px; } + .tag { background-image:url('../images/tag5.2.png');background-repeat:no-repeat;color:transparent; position:absolute; top:-10px; left:150px; width:219px;height:100px;z-index:100; } diff --git a/scripts/tc.app.particle.context.canvas.js b/scripts/tc.app.particle.context.canvas.js index ca6bc54..7069329 100644 --- a/scripts/tc.app.particle.context.canvas.js +++ b/scripts/tc.app.particle.context.canvas.js @@ -5,30 +5,50 @@ if(!tc){ var tc = {}; } if(!tc.particle.context){ tc.particle.context = {}; } tc.particle.context.canvas = function(app,dom,options){ - var _me; + var _me, buffers, drawingBuffer; _me = dom; - this.options = app.Y.merge({ + _me.options = app.Y.merge({ },options); - this.initialize = function(){ tc.util.log('tc.particle.context.canvas.initialize'); - _me.canvas = _me._node.getContext('2d'); - _me.bounds = this.options.bounds; + drawingBuffer = 0; + buffers = dom.getElementsByTagName('canvas')._nodes; + + _me.swap_buffers(); + _me.bounds = _me.options.bounds; return _me; } - _me.draw_particles = function(particles,func){ + _me.draw_particles = function(particles,func,callback){ var i; - _me.canvas.clearRect(0,0,_me.bounds.max_x,_me.bounds.max_y); + _me.context.clearRect(0,0,_me.bounds.max_x,_me.bounds.max_y); for(i = 0; i < particles.length; i++){ - _me.particles[i].draw(_me.context,this.frame); if(app.Y.Lang.isFunction(func)){ - func(particle,_me.canvas); + func.call(_me,particles[i]); } } + _me.swap_buffers(); + if(callback){ + callback(); + } + } + + _me.draw_particle = function(particle,func){ + var i; + //_me.context.clearRect(0,0,_me.bounds.max_x,_me.bounds.max_y); + if(app.Y.Lang.isFunction(func)){ + func.call(_me,particle); + } + } + + _me.swap_buffers = function(){ + buffers[1-drawingBuffer].style.visibility='hidden'; + buffers[drawingBuffer].style.visibility='visible'; + drawingBuffer = 1 - drawingBuffer; + _me.context = buffers[drawingBuffer].getContext('2d'); } return this.initialize(); diff --git a/scripts/tc.app.particle.context.js b/scripts/tc.app.particle.context.js index 12e64fd..4313c7e 100644 --- a/scripts/tc.app.particle.context.js +++ b/scripts/tc.app.particle.context.js @@ -8,17 +8,16 @@ if(!tc){ var tc = {}; } var _me; _me = dom; - this.options = app.Y.merge({ - framerate:30, - version:0, - gravity:0, - bounds: { - min_x: 0, - max_x: 1000, - min_y: 0, - max_y: 1000 - }, - labels:true + _me.options = app.Y.merge({ + draw:function(particle){ + this.context.fillStyle = _me.fill = "rgba("+tc.util.getRGBFromHex('r','000000')+","+tc.util.getRGBFromHex('g','000000')+","+tc.util.getRGBFromHex('b','000000')+",0.50)"; + this.context.fillRect( + particle.pos[0], + particle.pos[1], + particle.radius*2, + particle.radius*2 + ); + } },options); this.templates = { @@ -27,17 +26,6 @@ if(!tc){ var tc = {}; } this.initialize = function(){ tc.util.log('tc.particle.context.initialize'); - _me.forces = []; - _me.particles = []; - _me.labels = []; - _me.frame = 0; - _me.stopped = true; - _me.paused = false; - _me.timer = null; - _me.mouse_pos = null; - _me.mouse_down_pos = null; - _me.context = _me._node.getContext('2d'); - _me.bounds = this.options.bounds; //WebWorker!!!! if(Worker){ @@ -48,29 +36,42 @@ if(!tc){ var tc = {}; } }; } else { tc.util.log("No WebWorker Available"); - _me.worker = new tc.particle.context.worker(); + _me.worker = new tc.particle.context.worker(app); + app.on('workerEvent') } - _me.canvas = new tc.particle.context.canvas(app,dom,options); + _me.canvas = new tc.particle.context.canvas(app,dom,_me.options); _me.worker.postMessage({ - action:'start', - data:{ - options:{ - - } - } + action:'init', + data:{} }); + _me.updateBounds(); + return _me; } _me.workerMessageHandler = function(d){ if(d.action){ switch(d.action){ + case 'particleAdded': + tc.util.log('Particle Added'); + break; + case 'forceAdded': + tc.util.log('Force Added'); + break; case 'particlesUpdated': - //_me.canvas.draw_particles(d.data.particles,func); - //console.log(d.data); + _me.canvas.draw_particles(d.data.particles,_me.options.draw,function(){ + + _me.worker.postMessage({ + action:'update' + }); + + }); + break; + case 'particleUpdated': + //_me.canvas.draw_particle(d.data.particle,_me.options.draw); break; } } @@ -78,12 +79,20 @@ if(!tc){ var tc = {}; } _me.updateBounds = function(){ tc.util.log('tc.particle.context[_me.updateBounds]'); - _me.bounds = { - min_x: 0, - max_x: _me.get('winWidth'), - min_y: 0, - max_y: _me.get('winHeight') - }; + + _me.worker.postMessage({ + action:'setOption', + data:{ + name:'bounds', + value:{ + min_x: 0, + max_x: _me.get('winWidth'), + min_y: 0, + max_y: _me.get('winHeight') + } + } + }); + } _me.add_particle = function(particle){ @@ -92,91 +101,41 @@ if(!tc){ var tc = {}; } _me.worker.postMessage({ action:'addParticle', data:{ - particle:"ABC" + particle:particle } }); - _me.particles.push(particle); - return _me.particles[_me.particles.length-1]; } - _me.add_global_force = function(pos, strength, radius){ - tc.util.log('tc.particle.context[_me.add_global_force]'); - var force; - if(pos.x && pos.y){ - force = { - pos:Vector.create([pos.x,pos.y]), - strength:strength, - radius:radius - }; - _me.forces.push(force); - return _me.forces[_me.forces.length-1]; - } - } - - _me.update = function(){ - //tc.util.log('tc.particle.context[_me.update]'); - _me.frame++; - if(!_me.stopped){ - for(i = 0; i < _me.particles.length; i++){ - _me.particles[i]['reset_forces'](); - _me.particles[i]['add_forces'](_me.forces); - _me.particles[i]['bounce_off_walls'](_me.bounds); - _me.particles[i]['handle_anchor'](); - //_me.particles[i]['collide_with_particles'](_me.particles,i); - _me.particles[i]['add_damping'](); - _me.particles[i]['update'](); + _me.add_force = function(force){ + tc.util.log('tc.particle.context[_me.add_force]'); + + _me.worker.postMessage({ + action:'addForce', + data:{ + force:force } - } - _me.mouse_down_pos = null; - _draw(); - } - - _me.isPaused = function(){ - tc.util.log('tc.particle.context[_me.isPaused]'); - return _paused; + }); + } _me.start = function(){ tc.util.log('tc.particle.context[_me.start]'); - _me.paused = false; - _me.mouse_pos = null; - _me.mouse_down_pos = null; - if(_me.stopped){ - _me.stopped = false; - _me.worker.postMessage({ - action:'play', - data:{ - - } - }); - _me.timer = app.Y.later(1000/30,_me,_me.update,{},true); - } - } - - _me.pause = function(){ - tc.util.log('tc.particle.context[_me.pause]'); - _me.paused = true; + + _me.worker.postMessage({ + action:'start', + data:{} + }); + } _me.stop = function(){ tc.util.log('tc.particle.context[_me.stop]'); - _me.stopped = true; + _me.worker.postMessage({ action:'stop', - data:{ - - } + data:{} }); - _me.timer.cancel(); - } - - function _draw(){ - //tc.util.log('tc.particle.context[_me.draw]'); - _me.context.clearRect(0,0,_me.bounds.max_x,_me.bounds.max_y); - for(var i = 0; i < _me.particles.length; i++){ - _me.particles[i].draw(_me.context,this.frame); - } } return this.initialize(); diff --git a/scripts/tc.app.particle.context.js.bak b/scripts/tc.app.particle.context.js.bak new file mode 100644 index 0000000..12e64fd --- /dev/null +++ b/scripts/tc.app.particle.context.js.bak @@ -0,0 +1,185 @@ +if(!tc){ var tc = {}; } + +(function(tc) { + if(!tc.particle){ tc.particle = {}; } + + + tc.particle.context = function(app,dom,options){ + var _me; + _me = dom; + + this.options = app.Y.merge({ + framerate:30, + version:0, + gravity:0, + bounds: { + min_x: 0, + max_x: 1000, + min_y: 0, + max_y: 1000 + }, + labels:true + },options); + + this.templates = { + label: "

" + } + + this.initialize = function(){ + tc.util.log('tc.particle.context.initialize'); + _me.forces = []; + _me.particles = []; + _me.labels = []; + _me.frame = 0; + _me.stopped = true; + _me.paused = false; + _me.timer = null; + _me.mouse_pos = null; + _me.mouse_down_pos = null; + _me.context = _me._node.getContext('2d'); + _me.bounds = this.options.bounds; + + //WebWorker!!!! + if(Worker){ + tc.util.log("Starting WebWorker"); + _me.worker = new Worker('scripts/tc.app.particle.context.worker.js'); + _me.worker.onmessage = function(e){ + _me.workerMessageHandler(e.data); + }; + } else { + tc.util.log("No WebWorker Available"); + _me.worker = new tc.particle.context.worker(); + } + + _me.canvas = new tc.particle.context.canvas(app,dom,options); + + _me.worker.postMessage({ + action:'start', + data:{ + options:{ + + } + } + }); + + return _me; + } + + _me.workerMessageHandler = function(d){ + if(d.action){ + switch(d.action){ + case 'particlesUpdated': + //_me.canvas.draw_particles(d.data.particles,func); + //console.log(d.data); + break; + } + } + } + + _me.updateBounds = function(){ + tc.util.log('tc.particle.context[_me.updateBounds]'); + _me.bounds = { + min_x: 0, + max_x: _me.get('winWidth'), + min_y: 0, + max_y: _me.get('winHeight') + }; + } + + _me.add_particle = function(particle){ + //tc.util.log('tc.particle.context[_me.add_particle]'); + + _me.worker.postMessage({ + action:'addParticle', + data:{ + particle:"ABC" + } + }); + + _me.particles.push(particle); + return _me.particles[_me.particles.length-1]; + } + + _me.add_global_force = function(pos, strength, radius){ + tc.util.log('tc.particle.context[_me.add_global_force]'); + var force; + if(pos.x && pos.y){ + force = { + pos:Vector.create([pos.x,pos.y]), + strength:strength, + radius:radius + }; + _me.forces.push(force); + return _me.forces[_me.forces.length-1]; + } + } + + _me.update = function(){ + //tc.util.log('tc.particle.context[_me.update]'); + _me.frame++; + if(!_me.stopped){ + for(i = 0; i < _me.particles.length; i++){ + _me.particles[i]['reset_forces'](); + _me.particles[i]['add_forces'](_me.forces); + _me.particles[i]['bounce_off_walls'](_me.bounds); + _me.particles[i]['handle_anchor'](); + //_me.particles[i]['collide_with_particles'](_me.particles,i); + _me.particles[i]['add_damping'](); + _me.particles[i]['update'](); + } + } + _me.mouse_down_pos = null; + _draw(); + } + + _me.isPaused = function(){ + tc.util.log('tc.particle.context[_me.isPaused]'); + return _paused; + } + + _me.start = function(){ + tc.util.log('tc.particle.context[_me.start]'); + _me.paused = false; + _me.mouse_pos = null; + _me.mouse_down_pos = null; + if(_me.stopped){ + _me.stopped = false; + _me.worker.postMessage({ + action:'play', + data:{ + + } + }); + _me.timer = app.Y.later(1000/30,_me,_me.update,{},true); + } + } + + _me.pause = function(){ + tc.util.log('tc.particle.context[_me.pause]'); + _me.paused = true; + } + + _me.stop = function(){ + tc.util.log('tc.particle.context[_me.stop]'); + _me.stopped = true; + _me.worker.postMessage({ + action:'stop', + data:{ + + } + }); + _me.timer.cancel(); + } + + function _draw(){ + //tc.util.log('tc.particle.context[_me.draw]'); + _me.context.clearRect(0,0,_me.bounds.max_x,_me.bounds.max_y); + for(var i = 0; i < _me.particles.length; i++){ + _me.particles[i].draw(_me.context,this.frame); + } + } + + return this.initialize(); + } + +})(tc); \ No newline at end of file diff --git a/scripts/tc.app.particle.context.worker.js b/scripts/tc.app.particle.context.worker.js index cd6b88c..fdf52f0 100644 --- a/scripts/tc.app.particle.context.worker.js +++ b/scripts/tc.app.particle.context.worker.js @@ -1,25 +1,20 @@ if(!tc){ var tc = {}; } -if(Worker){ +if(typeof Worker != undefined){ var worker; + if(typeof importScripts != 'undefined'){ + importScripts('lib/includes.sylvester.src.js'); + importScripts('tc.app.particle.particle.js'); + } } else { var onmessage; - function postMessage(msg){ - console.log("POST"); - console.log(msg); - } } onmessage = function(e){ if(e.data && e.data.action){ switch(e.data.action){ - case 'start': - if(e.data.data.options){ - worker = new tc.particle.context.worker(e.data.data.options); - } else { - worker = new tc.particle.context.worker({}); - } - postMessage('WebWorker STARTED'); + case 'init': + worker = new tc.particle.context.worker(); break; case 'setOption': worker.set_option(e.data.data.name,e.data.data.value); @@ -27,7 +22,13 @@ onmessage = function(e){ case 'addParticle': worker.add_particle(e.data.data.particle); break; - case 'play': + case 'addForce': + worker.add_force(e.data.data.force); + break; + case 'update': + worker.update(); + break; + case 'start': worker.start(); break; case 'stop': @@ -41,7 +42,7 @@ onmessage = function(e){ if(!tc.particle){ tc.particle = {}; } if(!tc.particle.context){ tc.particle.context = {}; } - tc.particle.context.worker = function(){ + tc.particle.context.worker = function(app){ var _me, interval; _me = this; @@ -64,9 +65,16 @@ onmessage = function(e){ this.initialize = function(){ //tc.util.log('tc.particle.context.initialize'); - _me.forces = []; + _me.forces = {}; _me.particles = []; - _me.timer = null; + _me.particles.get = function(){ + var i,arr; + arr = []; + for(i = 0; i < this.length; i++){ + arr.push(this[i].get()); + } + return arr; + } return _me; } @@ -83,7 +91,8 @@ onmessage = function(e){ if(interval){ clearInterval(interval); } - interval = setInterval(_me.update,1000/30); + //interval = setInterval(_me.update,1000/60); + _me.update(); } _me.stop = function(){ @@ -94,48 +103,44 @@ onmessage = function(e){ } _me.add_particle = function(particle){ - //tc.util.log('tc.particle.context[_me.add_particle]'); - _me.particles.push(particle); - if(_me.worker){ - particle.worker(_me.worker); - } - postMessage('Particle Added'); - return _me.particles[_me.particles.length-1]; + var p; + p = new tc.particle.particle(particle); + + _me.particles.push(p); + + postMessage({ + message:'particleAdded' + }); + } - _me.add_global_force = function(pos, strength, radius){ - //tc.util.log('tc.particle.context[_me.add_global_force]'); - var force; - if(pos.x && pos.y){ - force = { - pos:Vector.create([pos.x,pos.y]), - strength:strength, - radius:radius - }; - _me.forces.push(force); - return _me.forces[_me.forces.length-1]; - } + _me.add_force = function(force){ + force.pos = Vector.create([force.pos.x,force.pos.y]); + _me.forces[force.id] = force; + + postMessage({ + message:'forceAdded', + forceId:force.id + }); } _me.update = function(){ //tc.util.log('tc.particle.context[_me.update]'); _me.frame++; - if(!_me.stopped){ - for(i = 0; i < _me.particles.length; i++){ - //_me.particles[i]['reset_forces'](); - //_me.particles[i]['add_forces'](_me.forces); - //_me.particles[i]['bounce_off_walls'](_me.bounds); - //_me.particles[i]['handle_anchor'](); - //_me.particles[i]['collide_with_particles'](_me.particles,i); - //_me.particles[i]['add_damping'](); - //_me.particles[i]['update'](); - } + for(i = 0; i < _me.particles.length; i++){ + _me.particles[i]['reset_forces'](); + _me.particles[i]['add_forces'](_me.forces); + //_me.particles[i]['bounce_off_walls'](_me.bounds); + _me.particles[i]['handle_anchor'](); + //_me.particles[i]['collide_with_particles'](_me.particles,i); + _me.particles[i]['add_damping'](); + _me.particles[i]['update'](); } - _me.mouse_down_pos = null; + postMessage({ action:'particlesUpdated', data:{ - particles:_me.particles + particles:_me.particles.get() } }); } diff --git a/scripts/tc.app.particle.panel.js b/scripts/tc.app.particle.panel.js index 956ce7f..548361e 100644 --- a/scripts/tc.app.particle.panel.js +++ b/scripts/tc.app.particle.panel.js @@ -7,7 +7,10 @@ if(!tc){ var tc = {}; } var _me, _domRef, _context, mouseforce; _me = this; - this.template = ""; + this.template = "
\ + \ + \ +
"; this.initialize = function(){ tc.util.log('particle.panel.initialize'); @@ -18,13 +21,13 @@ if(!tc){ var tc = {}; } this.add_squares = function(arr){ var i; for(i = 0; i < arr.length; i++){ - if(arr[i].s < 4){ return; } + if(arr[i].s < 3){ return; } (function(sq){ var i, j, ax, ay; ax = ( 200 + sq.x ); ay = ( sq.y ); - _context.add_particle(new tc.particle.particle(app,{ + _context.add_particle({ pos:{ x:tc.util.rand(0,_domRef.get('winWidth')), y:tc.util.rand(0,_domRef.get('winHeight')) @@ -34,17 +37,8 @@ if(!tc){ var tc = {}; } anchor:{ x:ax, y:ay - }, - draw:function(context,frame){ - context.fillStyle = this.fill; - context.fillRect( - this.pos.elements[0], - this.pos.elements[1], - this.options.radius*2, - this.options.radius*2 - ); } - })); + }); })(arr[i]); } } @@ -55,6 +49,8 @@ if(!tc){ var tc = {}; } if(!selector){ selector = app.selector; } app.Y.one(selector).append(_me.template); _domRef = app.Y.one("#particle-panel"); + _domRef.getElementsByTagName('canvas').set("width",_domRef.get('winWidth')); + _domRef.getElementsByTagName('canvas').set("height",_domRef.get('winHeight')); _domRef.set("width",_domRef.get('winWidth')); _domRef.set("height",_domRef.get('winHeight')); @@ -74,7 +70,15 @@ if(!tc){ var tc = {}; } }); _context.start(); - mouseforce = _context.add_global_force({x:500,y:500},-3,200); + _context.add_force({ + id:'mouseforce', + pos:{ + x:500, + y:500 + }, + strength:-3, + radius:200 + }); return _me; @@ -85,7 +89,6 @@ if(!tc){ var tc = {}; } for(j = 0; j < 15; j++){ ax = ( (_domRef.get('winWidth')/2-100) + (i * 12) ); ay = ( (_domRef.get('winHeight')/2-100) + (j * 12) ); - _context.add_particle(new tc.particle.particle(app,{ pos:{ x:tc.util.rand(0,_domRef.get('winWidth')), @@ -110,6 +113,8 @@ if(!tc){ var tc = {}; } } })(); + + return _me; } diff --git a/scripts/tc.app.particle.particle.js b/scripts/tc.app.particle.particle.js index 836b457..3e75bc1 100644 --- a/scripts/tc.app.particle.particle.js +++ b/scripts/tc.app.particle.particle.js @@ -3,7 +3,7 @@ if(!tc){ var tc = {}; } (function(tc) { if(!tc.particle){ tc.particle = {}; } - tc.particle.particle = function(app,options){ + tc.particle.particle = function(options){ var _me, o; _me = this; @@ -11,7 +11,7 @@ if(!tc){ var tc = {}; } vel, frc; - this.options = app.Y.merge({ + _me.options = { pos:{x:0,y:0}, vel:{x:0,y:0}, frc:{x:0,y:0}, @@ -29,7 +29,14 @@ if(!tc){ var tc = {}; } opacity:0.50, attraction_coefficient: 1.0, data:{} - },options); + }; + + (function(){ + var i; + for(i in options){ + _me.options[i] = options[i]; + } + })(); o = this.options; @@ -42,11 +49,6 @@ if(!tc){ var tc = {}; } _me.anchor = Vector.create([o.anchor.x,o.anchor.y]); } _me.hovered = false; - if(_me.options.opacity < 1.0){ - _me.fill = "rgba("+tc.util.getRGBFromHex('r',o.color)+","+tc.util.getRGBFromHex('g',o.color)+","+tc.util.getRGBFromHex('b',o.color)+","+o.opacity+")" - } else { - _me.fill = "#"+o.color - } } _me.worker = function(new_worker){ @@ -102,8 +104,8 @@ if(!tc){ var tc = {}; } } _me.add_forces = function(forces){ - var distance, length, pct, normal_distance; - for(var i = 0; i < forces.length; i++){ + var i,distance, length, pct, normal_distance; + for(i in forces){ distance = _me.pos.subtract(forces[i].pos); length = Math.sqrt(distance.dot(distance)); if(length < forces[i].radius){ @@ -214,10 +216,13 @@ if(!tc){ var tc = {}; } last_pos = _me.pos; } - _me.draw = function(context){ - if(app.Y.Lang.isFunction(this.options.draw)){ - this.options.draw.call(_me,context); + _me.get = function(){ + var me; + me = { + pos:[_me.pos.elements[0],_me.pos.elements[1]], + radius:o.radius } + return me; } return this.initialize(); diff --git a/scripts/tc.app.particle.particle.js.bak b/scripts/tc.app.particle.particle.js.bak new file mode 100644 index 0000000..836b457 --- /dev/null +++ b/scripts/tc.app.particle.particle.js.bak @@ -0,0 +1,225 @@ +if(!tc){ var tc = {}; } + +(function(tc) { + if(!tc.particle){ tc.particle = {}; } + + tc.particle.particle = function(app,options){ + var _me, o; + _me = this; + + var pos,last_pos, + vel, + frc; + + this.options = app.Y.merge({ + pos:{x:0,y:0}, + vel:{x:0,y:0}, + frc:{x:0,y:0}, + anchored:false, + anchor:{x:0,y:0}, + damping:0.95, + radius:5, + draw:function(context){ + context.beginPath(); + context.arc(this.pos.elements[0], this.pos.elements[1], this.o.radius, 0, (2*Math.PI), false); + context.fill(); + context.closePath(); + }, + color:"000000", + opacity:0.50, + attraction_coefficient: 1.0, + data:{} + },options); + + o = this.options; + + this.initialize = function(){ + _me.pos = Vector.create([o.pos.x, o.pos.y]); + last_pos = Vector.create([o.pos.x, o.pos.y]); + vel = Vector.create([o.vel.x, o.vel.y]); + frc = Vector.create([o.frc.x, o.frc.y]); + if(o.anchored && o.anchor){ + _me.anchor = Vector.create([o.anchor.x,o.anchor.y]); + } + _me.hovered = false; + if(_me.options.opacity < 1.0){ + _me.fill = "rgba("+tc.util.getRGBFromHex('r',o.color)+","+tc.util.getRGBFromHex('g',o.color)+","+tc.util.getRGBFromHex('b',o.color)+","+o.opacity+")" + } else { + _me.fill = "#"+o.color + } + } + + _me.worker = function(new_worker){ + if(new_worker){ + _me.worker = new_worker; + } else { + return _me.worker; + } + } + + _me.name = function(new_name){ + if(new_name){ + _me.options.name = new_name; + } else { + return _me.options.name; + } + } + + _me.pos = function(new_pos){ + if(new_pos){ + _me.pos = new_pos; + } else { + return _me.pos; + } + } + + _me.vel = function(new_vel){ + if(new_vel){ + vel = new_vel; + } else { + return vel; + } + } + + _me.frc = function(new_frc){ + if(new_frc){ + frc = new_frc; + } else { + return frc; + } + } + + _me.radius = function(new_radius){ + if(new_radius){ + _me.options.radius = new_radius; + } else { + return _me.options.radius; + } + } + + _me.reset_forces = function(){ + frc.setElements([0, 0]); + } + + _me.add_forces = function(forces){ + var distance, length, pct, normal_distance; + for(var i = 0; i < forces.length; i++){ + distance = _me.pos.subtract(forces[i].pos); + length = Math.sqrt(distance.dot(distance)); + if(length < forces[i].radius){ + pct = 1 - (length / forces[i].radius); + normal_distance = distance.multiply(1/length); + frc.elements[0] = frc.elements[0] - normal_distance.elements[0] * + forces[i].strength * pct * o.attraction_coefficient; + frc.elements[1] = frc.elements[1] - normal_distance.elements[1] * + forces[i].strength * pct * o.attraction_coefficient; + } + } + } + + _me.handle_anchor = function(){ + if(!_me.anchor){ return; } + var distance, length, pct, normal_distance; + distance = _me.pos.subtract(_me.anchor); + length = Math.sqrt(distance.dot(distance)); + pct = 1.0 - (length / 1000); + normal_distance = distance.multiply(1/length); + frc.elements[0] = frc.elements[0] - normal_distance.elements[0] * 2 * pct; + frc.elements[1] = frc.elements[1] - normal_distance.elements[1] * 2 * pct; + } + + _me.collide_with_particles = function(particles,j){ + for(var i = 0; i < particles.length; i++){ + if(i != j){ + var distance = _me.pos.subtract(particles[i].pos()) + var length = Math.sqrt(distance.dot(distance)) + if(length < (o.radius + particles[i].radius())+2){ + var pct = 1 - (length / (o.radius + particles[i].radius() + 2)) + var normal_distance = distance.multiply((1/(length/4))) + frc.elements[0] = frc.elements[0] - normal_distance.elements[0] * -0.7// * pct + frc.elements[1] = frc.elements[1] - normal_distance.elements[1] * -0.7// * pct + } + } + } + } + + _me.stop = function(){ + frc.setElements([0, 0]) + vel.setElements([0, 0]) + } + + _me.add_damping = function(){ + vel = vel.multiply(_me.options.damping); + } + + _me.contains_vector = function(_mp){ + var distance = _me.pos.subtract(_mp) + var length = Math.sqrt(distance.dot(distance)) + if(length < o.radius){ + return true + } else { + return false + } + } + + _me.no_hover = function(){ + + } + + _me.hover = function(){ + vel = vel.multiply(0) + } + + _me.click = function(){ + + } + + _me.bounce_off_walls = function(bounds){ + var b_did_i_collide; + b_did_i_collide = false; + + if(_me.pos.elements[0] < bounds.min_x + o.radius){ + _me.pos.elements[0] = o.radius; + b_did_i_collide = true; + vel.elements[0] = vel.elements[0] * -1.0; + }else if(_me.pos.elements[0] > bounds.max_x - o.radius){ + _me.pos.elements[0] = bounds.max_x - o.radius; + b_did_i_collide = true; + vel.elements[0] = vel.elements[0] * -1.0; + } + + if(_me.pos.elements[1] < bounds.min_y + o.radius){ + _me.pos.elements[1] = o.radius; + b_did_i_collide = true; + vel.elements[1] = vel.elements[1] * -1.0; + }else if(_me.pos.elements[1] > bounds.max_y - o.radius){ + _me.pos.elements[1] = bounds.max_y - o.radius; + b_did_i_collide = true; + vel.elements[1] = vel.elements[1] * -1.0; + } + + if(b_did_i_collide){ + vel = vel.multiply(0.3); + } + } + + _me.update = function(){ + if(_me.hovered){ + vel = vel.add(frc.multiply(0.6)); + } else { + vel = vel.add(frc); + } + + _me.pos = _me.pos.add(vel).multiply(0.5).add(last_pos.multiply(0.5)); + last_pos = _me.pos; + } + + _me.draw = function(context){ + if(app.Y.Lang.isFunction(this.options.draw)){ + this.options.draw.call(_me,context); + } + } + + return this.initialize(); + } +})(tc); diff --git a/scripts/tc.app.particle.worker.js b/scripts/tc.app.particle.worker.js deleted file mode 100644 index ac4af8f..0000000 --- a/scripts/tc.app.particle.worker.js +++ /dev/null @@ -1,9 +0,0 @@ - - -onmessage = function(e) { - switch(e.data.action){ - case 'applyForces': - - } - //print(e); -} \ No newline at end of file From 8f4df212f82cd2853117db10ee6536910775311e Mon Sep 17 00:00:00 2001 From: andrew mahon Date: Fri, 29 Oct 2010 19:57:36 -0400 Subject: [PATCH 2/3] removed some backup files --- scripts/tc.app.particle.context.js.bak | 185 ------------------- scripts/tc.app.particle.particle.js.bak | 225 ------------------------ 2 files changed, 410 deletions(-) delete mode 100644 scripts/tc.app.particle.context.js.bak delete mode 100644 scripts/tc.app.particle.particle.js.bak diff --git a/scripts/tc.app.particle.context.js.bak b/scripts/tc.app.particle.context.js.bak deleted file mode 100644 index 12e64fd..0000000 --- a/scripts/tc.app.particle.context.js.bak +++ /dev/null @@ -1,185 +0,0 @@ -if(!tc){ var tc = {}; } - -(function(tc) { - if(!tc.particle){ tc.particle = {}; } - - - tc.particle.context = function(app,dom,options){ - var _me; - _me = dom; - - this.options = app.Y.merge({ - framerate:30, - version:0, - gravity:0, - bounds: { - min_x: 0, - max_x: 1000, - min_y: 0, - max_y: 1000 - }, - labels:true - },options); - - this.templates = { - label: "

" - } - - this.initialize = function(){ - tc.util.log('tc.particle.context.initialize'); - _me.forces = []; - _me.particles = []; - _me.labels = []; - _me.frame = 0; - _me.stopped = true; - _me.paused = false; - _me.timer = null; - _me.mouse_pos = null; - _me.mouse_down_pos = null; - _me.context = _me._node.getContext('2d'); - _me.bounds = this.options.bounds; - - //WebWorker!!!! - if(Worker){ - tc.util.log("Starting WebWorker"); - _me.worker = new Worker('scripts/tc.app.particle.context.worker.js'); - _me.worker.onmessage = function(e){ - _me.workerMessageHandler(e.data); - }; - } else { - tc.util.log("No WebWorker Available"); - _me.worker = new tc.particle.context.worker(); - } - - _me.canvas = new tc.particle.context.canvas(app,dom,options); - - _me.worker.postMessage({ - action:'start', - data:{ - options:{ - - } - } - }); - - return _me; - } - - _me.workerMessageHandler = function(d){ - if(d.action){ - switch(d.action){ - case 'particlesUpdated': - //_me.canvas.draw_particles(d.data.particles,func); - //console.log(d.data); - break; - } - } - } - - _me.updateBounds = function(){ - tc.util.log('tc.particle.context[_me.updateBounds]'); - _me.bounds = { - min_x: 0, - max_x: _me.get('winWidth'), - min_y: 0, - max_y: _me.get('winHeight') - }; - } - - _me.add_particle = function(particle){ - //tc.util.log('tc.particle.context[_me.add_particle]'); - - _me.worker.postMessage({ - action:'addParticle', - data:{ - particle:"ABC" - } - }); - - _me.particles.push(particle); - return _me.particles[_me.particles.length-1]; - } - - _me.add_global_force = function(pos, strength, radius){ - tc.util.log('tc.particle.context[_me.add_global_force]'); - var force; - if(pos.x && pos.y){ - force = { - pos:Vector.create([pos.x,pos.y]), - strength:strength, - radius:radius - }; - _me.forces.push(force); - return _me.forces[_me.forces.length-1]; - } - } - - _me.update = function(){ - //tc.util.log('tc.particle.context[_me.update]'); - _me.frame++; - if(!_me.stopped){ - for(i = 0; i < _me.particles.length; i++){ - _me.particles[i]['reset_forces'](); - _me.particles[i]['add_forces'](_me.forces); - _me.particles[i]['bounce_off_walls'](_me.bounds); - _me.particles[i]['handle_anchor'](); - //_me.particles[i]['collide_with_particles'](_me.particles,i); - _me.particles[i]['add_damping'](); - _me.particles[i]['update'](); - } - } - _me.mouse_down_pos = null; - _draw(); - } - - _me.isPaused = function(){ - tc.util.log('tc.particle.context[_me.isPaused]'); - return _paused; - } - - _me.start = function(){ - tc.util.log('tc.particle.context[_me.start]'); - _me.paused = false; - _me.mouse_pos = null; - _me.mouse_down_pos = null; - if(_me.stopped){ - _me.stopped = false; - _me.worker.postMessage({ - action:'play', - data:{ - - } - }); - _me.timer = app.Y.later(1000/30,_me,_me.update,{},true); - } - } - - _me.pause = function(){ - tc.util.log('tc.particle.context[_me.pause]'); - _me.paused = true; - } - - _me.stop = function(){ - tc.util.log('tc.particle.context[_me.stop]'); - _me.stopped = true; - _me.worker.postMessage({ - action:'stop', - data:{ - - } - }); - _me.timer.cancel(); - } - - function _draw(){ - //tc.util.log('tc.particle.context[_me.draw]'); - _me.context.clearRect(0,0,_me.bounds.max_x,_me.bounds.max_y); - for(var i = 0; i < _me.particles.length; i++){ - _me.particles[i].draw(_me.context,this.frame); - } - } - - return this.initialize(); - } - -})(tc); \ No newline at end of file diff --git a/scripts/tc.app.particle.particle.js.bak b/scripts/tc.app.particle.particle.js.bak deleted file mode 100644 index 836b457..0000000 --- a/scripts/tc.app.particle.particle.js.bak +++ /dev/null @@ -1,225 +0,0 @@ -if(!tc){ var tc = {}; } - -(function(tc) { - if(!tc.particle){ tc.particle = {}; } - - tc.particle.particle = function(app,options){ - var _me, o; - _me = this; - - var pos,last_pos, - vel, - frc; - - this.options = app.Y.merge({ - pos:{x:0,y:0}, - vel:{x:0,y:0}, - frc:{x:0,y:0}, - anchored:false, - anchor:{x:0,y:0}, - damping:0.95, - radius:5, - draw:function(context){ - context.beginPath(); - context.arc(this.pos.elements[0], this.pos.elements[1], this.o.radius, 0, (2*Math.PI), false); - context.fill(); - context.closePath(); - }, - color:"000000", - opacity:0.50, - attraction_coefficient: 1.0, - data:{} - },options); - - o = this.options; - - this.initialize = function(){ - _me.pos = Vector.create([o.pos.x, o.pos.y]); - last_pos = Vector.create([o.pos.x, o.pos.y]); - vel = Vector.create([o.vel.x, o.vel.y]); - frc = Vector.create([o.frc.x, o.frc.y]); - if(o.anchored && o.anchor){ - _me.anchor = Vector.create([o.anchor.x,o.anchor.y]); - } - _me.hovered = false; - if(_me.options.opacity < 1.0){ - _me.fill = "rgba("+tc.util.getRGBFromHex('r',o.color)+","+tc.util.getRGBFromHex('g',o.color)+","+tc.util.getRGBFromHex('b',o.color)+","+o.opacity+")" - } else { - _me.fill = "#"+o.color - } - } - - _me.worker = function(new_worker){ - if(new_worker){ - _me.worker = new_worker; - } else { - return _me.worker; - } - } - - _me.name = function(new_name){ - if(new_name){ - _me.options.name = new_name; - } else { - return _me.options.name; - } - } - - _me.pos = function(new_pos){ - if(new_pos){ - _me.pos = new_pos; - } else { - return _me.pos; - } - } - - _me.vel = function(new_vel){ - if(new_vel){ - vel = new_vel; - } else { - return vel; - } - } - - _me.frc = function(new_frc){ - if(new_frc){ - frc = new_frc; - } else { - return frc; - } - } - - _me.radius = function(new_radius){ - if(new_radius){ - _me.options.radius = new_radius; - } else { - return _me.options.radius; - } - } - - _me.reset_forces = function(){ - frc.setElements([0, 0]); - } - - _me.add_forces = function(forces){ - var distance, length, pct, normal_distance; - for(var i = 0; i < forces.length; i++){ - distance = _me.pos.subtract(forces[i].pos); - length = Math.sqrt(distance.dot(distance)); - if(length < forces[i].radius){ - pct = 1 - (length / forces[i].radius); - normal_distance = distance.multiply(1/length); - frc.elements[0] = frc.elements[0] - normal_distance.elements[0] * - forces[i].strength * pct * o.attraction_coefficient; - frc.elements[1] = frc.elements[1] - normal_distance.elements[1] * - forces[i].strength * pct * o.attraction_coefficient; - } - } - } - - _me.handle_anchor = function(){ - if(!_me.anchor){ return; } - var distance, length, pct, normal_distance; - distance = _me.pos.subtract(_me.anchor); - length = Math.sqrt(distance.dot(distance)); - pct = 1.0 - (length / 1000); - normal_distance = distance.multiply(1/length); - frc.elements[0] = frc.elements[0] - normal_distance.elements[0] * 2 * pct; - frc.elements[1] = frc.elements[1] - normal_distance.elements[1] * 2 * pct; - } - - _me.collide_with_particles = function(particles,j){ - for(var i = 0; i < particles.length; i++){ - if(i != j){ - var distance = _me.pos.subtract(particles[i].pos()) - var length = Math.sqrt(distance.dot(distance)) - if(length < (o.radius + particles[i].radius())+2){ - var pct = 1 - (length / (o.radius + particles[i].radius() + 2)) - var normal_distance = distance.multiply((1/(length/4))) - frc.elements[0] = frc.elements[0] - normal_distance.elements[0] * -0.7// * pct - frc.elements[1] = frc.elements[1] - normal_distance.elements[1] * -0.7// * pct - } - } - } - } - - _me.stop = function(){ - frc.setElements([0, 0]) - vel.setElements([0, 0]) - } - - _me.add_damping = function(){ - vel = vel.multiply(_me.options.damping); - } - - _me.contains_vector = function(_mp){ - var distance = _me.pos.subtract(_mp) - var length = Math.sqrt(distance.dot(distance)) - if(length < o.radius){ - return true - } else { - return false - } - } - - _me.no_hover = function(){ - - } - - _me.hover = function(){ - vel = vel.multiply(0) - } - - _me.click = function(){ - - } - - _me.bounce_off_walls = function(bounds){ - var b_did_i_collide; - b_did_i_collide = false; - - if(_me.pos.elements[0] < bounds.min_x + o.radius){ - _me.pos.elements[0] = o.radius; - b_did_i_collide = true; - vel.elements[0] = vel.elements[0] * -1.0; - }else if(_me.pos.elements[0] > bounds.max_x - o.radius){ - _me.pos.elements[0] = bounds.max_x - o.radius; - b_did_i_collide = true; - vel.elements[0] = vel.elements[0] * -1.0; - } - - if(_me.pos.elements[1] < bounds.min_y + o.radius){ - _me.pos.elements[1] = o.radius; - b_did_i_collide = true; - vel.elements[1] = vel.elements[1] * -1.0; - }else if(_me.pos.elements[1] > bounds.max_y - o.radius){ - _me.pos.elements[1] = bounds.max_y - o.radius; - b_did_i_collide = true; - vel.elements[1] = vel.elements[1] * -1.0; - } - - if(b_did_i_collide){ - vel = vel.multiply(0.3); - } - } - - _me.update = function(){ - if(_me.hovered){ - vel = vel.add(frc.multiply(0.6)); - } else { - vel = vel.add(frc); - } - - _me.pos = _me.pos.add(vel).multiply(0.5).add(last_pos.multiply(0.5)); - last_pos = _me.pos; - } - - _me.draw = function(context){ - if(app.Y.Lang.isFunction(this.options.draw)){ - this.options.draw.call(_me,context); - } - } - - return this.initialize(); - } -})(tc); From 5ac04ac238202fb540657e00474a571d7fe0f643 Mon Sep 17 00:00:00 2001 From: andrew mahon Date: Fri, 29 Oct 2010 20:11:52 -0400 Subject: [PATCH 3/3] resolved some outstanding conflicts --- scripts/tc.app.particle.context.js | 40 +---------------------------- scripts/tc.app.particle.panel.js | 4 --- scripts/tc.app.particle.particle.js | 5 ---- 3 files changed, 1 insertion(+), 48 deletions(-) diff --git a/scripts/tc.app.particle.context.js b/scripts/tc.app.particle.context.js index 3ccb641..e7c6a72 100644 --- a/scripts/tc.app.particle.context.js +++ b/scripts/tc.app.particle.context.js @@ -27,7 +27,6 @@ if(!tc){ var tc = {}; } this.initialize = function(){ tc.util.log('tc.particle.context.initialize'); -<<<<<<< HEAD //WebWorker!!!! if(Worker){ tc.util.log("Starting WebWorker"); @@ -78,11 +77,6 @@ if(!tc){ var tc = {}; } } } -======= - return _me; - } - ->>>>>>> 8f8c78ecd909ceca79bfa0a54d6760fbabaa07d3 _me.updateBounds = function(){ tc.util.log('tc.particle.context[_me.updateBounds]'); @@ -103,7 +97,6 @@ if(!tc){ var tc = {}; } _me.add_particle = function(particle){ //tc.util.log('tc.particle.context[_me.add_particle]'); -<<<<<<< HEAD _me.worker.postMessage({ action:'addParticle', @@ -112,10 +105,6 @@ if(!tc){ var tc = {}; } } }); -======= - _me.particles.push(particle); - return _me.particles[_me.particles.length-1]; ->>>>>>> 8f8c78ecd909ceca79bfa0a54d6760fbabaa07d3 } _me.add_force = function(force){ @@ -132,49 +121,22 @@ if(!tc){ var tc = {}; } _me.start = function(){ tc.util.log('tc.particle.context[_me.start]'); -<<<<<<< HEAD _me.worker.postMessage({ action:'start', data:{} }); -======= - _me.paused = false; - _me.mouse_pos = null; - _me.mouse_down_pos = null; - if(_me.stopped){ - _me.stopped = false; - _me.timer = app.Y.later(1000/30,_me,_me.update,{},true); - } - } - - _me.pause = function(){ - tc.util.log('tc.particle.context[_me.pause]'); - _me.paused = true; ->>>>>>> 8f8c78ecd909ceca79bfa0a54d6760fbabaa07d3 } _me.stop = function(){ tc.util.log('tc.particle.context[_me.stop]'); -<<<<<<< HEAD _me.worker.postMessage({ action:'stop', data:{} }); -======= - _me.stopped = true; - _me.timer.cancel(); - } - - function _draw(){ - //tc.util.log('tc.particle.context[_me.draw]'); - _me.context.clearRect(0,0,_me.bounds.max_x,_me.bounds.max_y); - for(var i = 0; i < _me.particles.length; i++){ - _me.particles[i].draw(_me.context,this.frame); - } ->>>>>>> 8f8c78ecd909ceca79bfa0a54d6760fbabaa07d3 + } return this.initialize(); diff --git a/scripts/tc.app.particle.panel.js b/scripts/tc.app.particle.panel.js index 9e95d77..548361e 100644 --- a/scripts/tc.app.particle.panel.js +++ b/scripts/tc.app.particle.panel.js @@ -70,7 +70,6 @@ if(!tc){ var tc = {}; } }); _context.start(); -<<<<<<< HEAD _context.add_force({ id:'mouseforce', pos:{ @@ -80,9 +79,6 @@ if(!tc){ var tc = {}; } strength:-3, radius:200 }); -======= - mouseforce = _context.add_global_force({x:500,y:500},-6,150); ->>>>>>> 8f8c78ecd909ceca79bfa0a54d6760fbabaa07d3 return _me; diff --git a/scripts/tc.app.particle.particle.js b/scripts/tc.app.particle.particle.js index 37c3ad3..48d169c 100644 --- a/scripts/tc.app.particle.particle.js +++ b/scripts/tc.app.particle.particle.js @@ -3,13 +3,8 @@ if(!tc){ var tc = {}; } (function(tc) { if(!tc.particle){ tc.particle = {}; } -<<<<<<< HEAD tc.particle.particle = function(options){ - var _me, o; -======= - tc.particle.particle = function(app,options){ var _me, o, damping; ->>>>>>> 8f8c78ecd909ceca79bfa0a54d6760fbabaa07d3 _me = this; var pos,last_pos,