diff --git a/src/orbital-trails/app.js b/src/orbital-trails/app.js index 2df1d66..dc1af5a 100644 --- a/src/orbital-trails/app.js +++ b/src/orbital-trails/app.js @@ -14,18 +14,6 @@ const center = { x: canvas.width / 2, y: canvas.height /2 }; console.log(center); function random(min, max) { - /* - if ( isArray( min ) ) { - return min[ ~~( M.random() * min.length ) ]; - } - */ - - /* - if (!isNumber( max )) { - max = min || 1, min = 0; - } - */ - return min + Math.random() * ( max - min ); } @@ -41,6 +29,9 @@ const options = { scale: 1.0, radius: 300, fadeout: 10, + centerLight: true, + lightAlpha: 5, + perfectRed: false, }; const Orb = function(x, y) { @@ -64,38 +55,52 @@ Orb.prototype.update = function() { this.y = this.radius * Math.sin( this.angle ); }; -Orb.prototype.render = function() { +Orb.prototype.render = function(timestamp) { this.update(); - //const radius = ( opt.jitterRadius === 0 ) ? this.radius : this.radius + random( -opt.jitterRadius, opt.jitterRadius ); - //radius = ( opt.jitterRadius != 0 && radius < 0 ) ? 0.001 : radius; const radius = this.radius; - // perfect-red - const style = "hsl(0, 100%, 50%)"; - //sketch.strokeStyle = 'hsla( ' + ( ( this.angle + 90 ) / ( PI / 180 ) + random( -opt.jitterHue, opt.jitterHue ) ) + ', 100%, 50%, ' + ( opt.orbitalAlpha / 100 ) + ' )'; + // perfect-red = 0 + const offset = timestamp / options.speed; + const hueAngle = (this.angle + 90) / (Math.PI / 180) + offset; + let style; + if (options.perfectRed) { + style = `hsl(0, 100%, 50%)`; + } else { + style = `hsl(${hueAngle}, 100%, 50%)`; + } ctx.strokeStyle = style; + ctx.lineWidth = this.size; ctx.beginPath(); - ctx.arc(0, 0, radius, this.lastAngle, this.angle + 0.001, false); + + const increment = 0.001; + let start; + let end; + if (options.speed >= 0) { + start = this.lastAngle; + end = this.angle + increment; + } else { + end = this.lastAngle; + start = this.angle + increment; + } + ctx.arc(0, 0, radius, start, end, false); ctx.stroke(); ctx.closePath(); + if (options.centerLight) { - /* - 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(); - */ + const alpha = options.lightAlpha / 100; + const style = `hsla(${hueAngle}, 100%, 70%, ${alpha}`; + ctx.lineWidth = .5; + ctx.strokeStyle = style; + ctx.beginPath(); + ctx.moveTo( 0, 0 ); + ctx.lineTo( this.x, this.y ); + ctx.stroke(); + } }; - const createOrb = (x, y) => { console.log(`Creating orb ${x}, ${y}`); state.orbs.push(new Orb(x, y)); @@ -121,7 +126,6 @@ const clear = () => { ctx.globalCompositeOperation = 'lighter'; } - const controls = new dat.GUI( { autoPlace: false } ) const container = document.querySelector("#controlPanel"); @@ -130,6 +134,9 @@ controls.add(state, "total" ).name( "Total Placed" ).listen(); controls.add(options, "speed" ).min(-300).max(300).step(10).name("Speed"); controls.add(options, "scale" ).min(0.5).max(5).step(0.1).name("Scale"); controls.add(options, "fadeout").min(0).max(100).step(1).name("Fadeout (/100)"); +controls.add(options, "centerLight" ).name("Toggle Light"); +controls.add(options, "lightAlpha" ).min(0).max(100).step(1).name("Light Alpha"); +controls.add(options, "perfectRed").name("Perfect Red"); container.appendChild(controls.domElement); @@ -142,11 +149,10 @@ const loop = (timestamp) => { ctx.translate(center.x, center.y); ctx.scale(scale, scale); state.orbs.forEach((orb) => { - orb.render(); + orb.render(timestamp); }); ctx.restore(); }; setup(); loop(); -