Skip to content

Instantly share code, notes, and snippets.

@Fintan
Last active December 28, 2015 19:59
Show Gist options
  • Save Fintan/7553737 to your computer and use it in GitHub Desktop.
Save Fintan/7553737 to your computer and use it in GitHub Desktop.
code to generate this graphic http://www.flickr.com/photos/finty/10906891175/ Uses Pixi.js and Traer physics
define(function (require) {
'use strict';
var _ = require('underscore');
var PIXI = require('pixi');
var toxi = require('toxi');
var TColor = toxi.color.TColor;
var Line = function(physics, points, origin) {
this.init(physics, points, origin);
};
// constructor
Line.prototype = Object.create( PIXI.Graphics.prototype );
_.extend(Line.prototype, {
init: function(physics, points, origin) {
PIXI.Graphics.call(this);
this.colour = 0xFFFFFF;
this.thickness = 1;
this.physics = physics;
this.points = points; // An arraylist for all the particles
this.origin = origin;
this.draw();
},
draw: function() {
//this.beginFill(this.colour);
this.lineStyle(this.thickness, this.colour);
this.iter = this.points.iterator();
var pt = this.iter.next();
if(pt) {
this.moveTo(pt.position.x, pt.position.y);
}
while(this.iter.hasNext()) {
var pt = this.iter.next();
this.lineTo(pt.position.x, pt.position.y);
}
this.endFill();
}
});
return Line;
});
define(function (require) {
'use strict';
var ParticleSystem = require('traer/ParticleSystem');
var PIXI = require('pixi');
var ArrayList = require('vendor/processing/Objects/ArrayList');
var Line = require('./Line');
var PMath = require('utils/PMath');
var PhysicsTest = function() {};
PhysicsTest.prototype = {
setup: function() {
this.physics = new ParticleSystem();
this.circleCentre = this.physics.makeParticle(0.3, this.gameWidth/2, this.gameHeight/2);
this.makeParticles();
this.line = new Line(this.physics, this.points, {x: this.gameWidth/2, y: this.gameHeight/2 });
this.gameStage.addChild(this.line);
this.line.alpha = 0.1;
},
makeParticles: function() {
var twoPi = Math.PI * 2;
var incre = twoPi/40;
var radius = 200;
var middle = this.gameHeight/2;
var centre = this.gameWidth/2;
this.points = new ArrayList();
for(var radian=0; radian<=twoPi; radian+=incre) {
var x = centre + radius * Math.sin(radian);
var y = middle + radius * Math.cos(radian);
var p = this.physics.makeParticle(0.1, x, y);
this.physics.makeAttraction(p, this.circleCentre, PMath.random(50000, 500000), 500);
this.points.add(p);
}
},
update: function() {
this.physics.tick();
this.line.draw();
}
};
return PhysicsTest;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment