Version 2 of orbital trails

src/index.html

@@ -11,6 +11,7 @@
             <li> <a href="./konva-ball/index.html">Konva-ball</a>
             <li> <a href="./flow-fields/index.html">Flow-fields</a>
             <li> <a href="./orbital-trails-extern/index.html">Orbital Trails (theirs)</a>
+            <li> <a href="./orbital-trails-extern-2/index.html">Orbital Trails 2 (theirs)</a>
             <li> <a href="./orbital-trails/index.html">Orbital Trails (mine)</a>
         </ul>
     </body>

src/orbital-trails-extern-2/app.js

@@ -0,0 +1,152 @@
+var sketch = Sketch.create(),
+    center = {
+      x: sketch.width / 2,
+      y: sketch.height / 2
+    },
+    orbs = [],    
+    dt = 1,
+    opt = {
+      total: 0,
+      count: 100,
+      spacing: 2,
+      speed: 65,
+      scale: 1,
+      jitterRadius: 0,
+      jitterHue: 0,
+      clearAlpha: 10,
+      toggleOrbitals: true,
+      orbitalAlpha: 100,
+      toggleLight: true,      
+      lightAlpha: 5,
+      clear: function(){
+        sketch.clearRect( 0, 0, sketch.width, sketch.height ),
+        orbs.length = 0; 
+      }
+    };
+
+var Orb = function( x, y ){
+  var dx = ( x / opt.scale ) - ( center.x / opt.scale ),
+	    dy = ( y / opt.scale ) - ( center.y / opt.scale );
+  this.angle = atan2( dy, dx );
+  this.lastAngle = this.angle;
+	this.radius = sqrt( dx * dx + dy * dy );
+  this.size = ( this.radius / 300 ) + 1;
+	this.speed = ( random( 1, 10 ) / 300000 ) * ( this.radius ) + 0.015;
+};
+
+Orb.prototype.update = function(){  
+  this.lastAngle = this.angle;
+  this.angle += this.speed * ( opt.speed / 50 ) * dt;
+  this.x = this.radius * cos( this.angle );
+  this.y = this.radius * sin( this.angle );
+};
+
+Orb.prototype.render = function(){
+  if(opt.toggleOrbitals){
+    var radius = ( opt.jitterRadius === 0 ) ? this.radius : this.radius + random( -opt.jitterRadius, opt.jitterRadius );
+   radius = ( opt.jitterRadius != 0 && radius < 0 ) ? 0.001 : radius;
+    sketch.strokeStyle = 'hsla( ' + ( ( this.angle + 90 ) / ( PI / 180 ) + random( -opt.jitterHue, opt.jitterHue ) ) + ', 100%, 50%, ' + ( opt.orbitalAlpha / 100 ) + ' )';
+    sketch.lineWidth = this.size;			
+    sketch.beginPath();
+    if(opt.speed >= 0){
+      sketch.arc( 0, 0, radius, this.lastAngle, this.angle + 0.001, false );
+    } else {
+      sketch.arc( 0, 0, radius, this.angle, this.lastAngle + 0.001, false );
+    };
+    sketch.stroke();
+    sketch.closePath();
+  };
+  
+  if(opt.toggleLight){
+    sketch.lineWidth = .5;
+    sketch.strokeStyle = 'hsla( ' + ( ( this.angle + 90 ) / ( PI / 180 ) + random( -opt.jitterHue, opt.jitterHue ) ) + ', 100%, 70%, ' + ( opt.lightAlpha / 100 ) + ' )';
+    sketch.beginPath();
+    sketch.moveTo( 0, 0 );
+    sketch.lineTo( this.x, this.y );
+    sketch.stroke();
+  };
+};
+
+var createOrb = function( config ){
+  var x = ( config && config.x ) ? config.x : sketch.mouse.x,
+      y = ( config && config.y ) ? config.y : sketch.mouse.y;
+	orbs.push( new Orb( x, y ) );
+};
+
+var turnOnMove = function(){
+	sketch.mousemove = createOrb;	
+};
+
+var turnOffMove = function(){
+	sketch.mousemove = null;	
+};
+
+sketch.mousedown = function(){
+  createOrb();
+  turnOnMove();
+};
+
+sketch.mouseup = turnOffMove;
+
+sketch.resize = function(){
+  center.x = sketch.width / 2;
+  center.y = sketch.height / 2;
+  sketch.lineCap = 'round';
+};
+
+sketch.setup = function(){  
+  while( opt.count-- ){
+    createOrb( {
+      x: random( sketch.width / 2 - 300, sketch.width / 2 + 300 ), 
+      y: random( sketch.height / 2 - 300, sketch.height / 2 + 300 ) 
+    } );
+  };
+};
+
+sketch.clear = function(){
+  sketch.globalCompositeOperation = 'destination-out';
+  sketch.fillStyle = 'rgba( 0, 0, 0 , ' + ( opt.clearAlpha / 100 ) + ' )';
+	sketch.fillRect( 0, 0, sketch.width, sketch.height );
+  sketch.globalCompositeOperation = 'lighter';
+};
+
+sketch.update = function(){
+  dt = ( sketch.dt < 0.1 ) ? 0.1 : sketch.dt / 16;
+  dt = ( dt > 5 ) ? 5 : dt;
+  var i = orbs.length;
+  opt.total = i;
+  while( i-- ){ 
+    orbs[i].update();
+  }
+};
+
+sketch.draw = function(){
+  sketch.save();
+  sketch.translate( center.x, center.y );
+  sketch.scale( opt.scale, opt.scale );
+  var i = orbs.length;
+	while( i-- ){	
+    orbs[i].render();	
+  }
+  sketch.restore();
+};
+
+gui = new dat.GUI( { autoPlace: false } )
+gui.add( opt, 'total' ).name( 'Total Orbitals' ).listen();
+gui.add( opt, 'speed' ).min( -300 ).max( 300 ).step( 1 ).name( 'Speed' );
+gui.add( opt, 'scale' ).min( 0.5 ).max( 5 ).step( 0.001 ).name( 'Scale' );
+gui.add( opt, 'jitterRadius' ).min( 0 ).max( 5 ).step( 0.001 ).name( 'Radius Jitter' );
+gui.add( opt, 'jitterHue' ).min( 0 ).max( 90 ).step( 1 ).name( 'Hue Jitter' );
+gui.add( opt, 'clearAlpha' ).min( 0 ).max( 100 ).step( 1 ).name( 'Clear Alpha' );
+gui.add( opt, 'toggleOrbitals' ).name( 'Toggle Orbitals' )
+gui.add( opt, 'orbitalAlpha' ).min( 0 ).max( 100 ).step( 1 ).name( 'Orbital Alpha' );
+gui.add( opt, 'toggleLight' ).name( 'Toggle Light' );
+gui.add( opt, 'lightAlpha' ).min( 0 ).max( 100 ).step( 1 ).name( 'Light Alpha' );
+
+gui.add( opt, 'clear' ).name( 'Clear' );
+customContainer = document.getElementById( 'gui' );
+customContainer.appendChild(gui.domElement);
+  
+document.onselectstart = function(){
+  return false;
+};

src/orbital-trails-extern-2/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8"/>
+        <title>Orbital Trails</title>
+        <link href="style.css" rel="stylesheet" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
+        <script src="https://rawgithub.com/soulwire/sketch.js/master/js/sketch.min.js"></script>
+        <script type="module" src="app.js"></script>
+    </head>
+    <body>
+        <div id="gui"></div>
+    </body>
+</html>
+
+
+

src/orbital-trails-extern-2/style.css

@@ -0,0 +1,13 @@
+body {
+  background: #000;
+}
+
+canvas {  
+  display: block; 
+}
+
+#gui {
+  left: 0;
+  position: fixed;
+  top: 0;
+}