From cef99812c98a5af259adde8dc7348d617cf53b7e Mon Sep 17 00:00:00 2001 From: Greg Shuflin Date: Mon, 23 Oct 2023 02:44:39 -0700 Subject: [PATCH] Start preparing to clone orbital-trails --- src/index.html | 3 +- src/orbital-trails-extern/app.js | 137 +++++++++++++++++++++++++++ src/orbital-trails-extern/index.html | 22 +++++ src/orbital-trails-extern/style.css | 48 ++++++++++ src/orbital-trails/app.js | 137 --------------------------- src/orbital-trails/index.html | 2 +- src/orbital-trails/style.css | 6 +- 7 files changed, 213 insertions(+), 142 deletions(-) create mode 100644 src/orbital-trails-extern/app.js create mode 100644 src/orbital-trails-extern/index.html create mode 100644 src/orbital-trails-extern/style.css diff --git a/src/index.html b/src/index.html index 1212c53..5305603 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,8 @@ diff --git a/src/orbital-trails-extern/app.js b/src/orbital-trails-extern/app.js new file mode 100644 index 0000000..86fae93 --- /dev/null +++ b/src/orbital-trails-extern/app.js @@ -0,0 +1,137 @@ +window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}(); + +document.onselectstart = function() { + return false; +}; +var c = document.getElementById('c'); +var ctx = c.getContext('2d'); +var dpr = window.devicePixelRatio; +var cw = window.innerWidth; +var ch = window.innerHeight; +c.width = cw * dpr; +c.height = ch * dpr; +ctx.scale(dpr, dpr); +var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);} +ctx.lineCap = 'round'; +var orbs = []; +var orbCount = 30; +var radius; + +var trailCB = document.getElementById('trail'); +var trail = trailCB.checked; +var clearer = document.getElementById('clear'); + +function createOrb(mx,my){ + var dx = (cw/2) - mx; + var dy = (ch/2) - my; + var dist = Math.sqrt(dx * dx + dy * dy); + var angle = Math.atan2(dy, dx); + orbs.push({ + x: mx, + y: my, + lastX: mx, + lastY: my, + hue: 0, + colorAngle: 0, + angle: angle + Math.PI/2, + //size: .5+dist/250, + size: rand(1,3)/2, + centerX: cw/2, + centerY: ch/2, + radius: dist, + speed: (rand(5,10)/1000)*(dist/750)+.015, + alpha: 1 - Math.abs(dist)/cw, + draw: function() { + ctx.strokeStyle = 'hsla('+this.colorAngle+',100%,50%,1)'; + ctx.lineWidth = this.size; + ctx.beginPath(); + ctx.moveTo(this.lastX, this.lastY); + ctx.lineTo(this.x, this.y); + ctx.stroke(); + }, + update: function(){ + var mx = this.x; + var my = this.y; + this.lastX = this.x; + this.lastY = this.y; + var x1 = cw/2; + var y1 = ch/2; + var x2 = mx; + var y2 = my; + var rise = y1-y2; + var run = x1-x2; + var slope = -(rise/run); + var radian = Math.atan(slope); + var angleH = Math.floor(radian*(180/Math.PI)); + if(x2 < x1 && y2 < y1){angleH += 180;} + if(x2 < x1 && y2 > y1){angleH += 180;} + if(x2 > x1 && y2 > y1){angleH += 360;} + if(y2 < y1 && slope =='-Infinity'){angleH = 90;} + if(y2 > y1 && slope =='Infinity'){angleH = 270;} + if(x2 < x1 && slope =='0'){angleH = 180;} + if(isNaN(angleH)){angleH = 0;} + + this.colorAngle = angleH; + this.x = this.centerX + Math.sin(this.angle*-1) * this.radius; + this.y = this.centerY + Math.cos(this.angle*-1) * this.radius; + this.angle += this.speed; + + } + }); +} + +function orbGo(e){ + var mx = e.pageX - c.offsetLeft; + var my = e.pageY - c.offsetTop; + createOrb(mx,my); +} + +function turnOnMove(){ + c.addEventListener('mousemove', orbGo, false); +} + +function turnOffMove(){ + c.removeEventListener('mousemove', orbGo, false); +} + +function toggleTrails(){ + trail = trailCB.checked; +} + +function clear(){ + orbs = []; +} + +c.addEventListener('mousedown', orbGo, false); +c.addEventListener('mousedown', turnOnMove, false); +c.addEventListener('mouseup', turnOffMove, false); +trailCB.addEventListener('change', toggleTrails, false); +clearer.addEventListener('click', clear, false); + +var count = 100; +while(count--){ + createOrb(cw/2, ch/2+(count*2)); +} + +var loop = function(){ + window.requestAnimFrame(loop); + if(trail){ + ctx.fillStyle = 'rgba(0,0,0,.1)'; + ctx.fillRect(0,0,cw,ch); + } else { + ctx.clearRect(0,0,cw,ch); + } + var i = orbs.length; + while(i--){ + var orb = orbs[i]; + var updateCount = 3; + while(updateCount--){ + orb.update(); + orb.draw(ctx); + } + + } +} + +loop(); + diff --git a/src/orbital-trails-extern/index.html b/src/orbital-trails-extern/index.html new file mode 100644 index 0000000..309be03 --- /dev/null +++ b/src/orbital-trails-extern/index.html @@ -0,0 +1,22 @@ + + + + + Orbital Trails + + + + +
+

Click and drag to make more!

+ + + + View Version 2 +
+ + + + + + diff --git a/src/orbital-trails-extern/style.css b/src/orbital-trails-extern/style.css new file mode 100644 index 0000000..c5bae06 --- /dev/null +++ b/src/orbital-trails-extern/style.css @@ -0,0 +1,48 @@ +body { + background: #000; + color: #aaa; + font: 100%/20px helvetica, arial, sans-serif; +} + +canvas { + display: block; + height: 100%; + left: 0; + margin: 0; + padding: 0; + position: absolute; + top: 0; + width: 100% +} + +#control-panel { + background: rgba(0,0,0,.75); + border: 1px solid #333; + left: 20px; + padding: 10px 15px; + position: absolute; + top: 20px; + z-index: 2; +} + +p { + font-size: 12px; + margin: 0 0 5px; +} + +label { + font-size: 12px; + font-weight: bold; +} + +button { + display: block; + margin: 10px 0 5px; +} + +a { + border-bottom: 1px dotted #444; + color: #fff; + font-size: 12px; + text-decoration: none; +} diff --git a/src/orbital-trails/app.js b/src/orbital-trails/app.js index 86fae93..e69de29 100644 --- a/src/orbital-trails/app.js +++ b/src/orbital-trails/app.js @@ -1,137 +0,0 @@ -window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}(); - -document.onselectstart = function() { - return false; -}; -var c = document.getElementById('c'); -var ctx = c.getContext('2d'); -var dpr = window.devicePixelRatio; -var cw = window.innerWidth; -var ch = window.innerHeight; -c.width = cw * dpr; -c.height = ch * dpr; -ctx.scale(dpr, dpr); -var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);} -ctx.lineCap = 'round'; -var orbs = []; -var orbCount = 30; -var radius; - -var trailCB = document.getElementById('trail'); -var trail = trailCB.checked; -var clearer = document.getElementById('clear'); - -function createOrb(mx,my){ - var dx = (cw/2) - mx; - var dy = (ch/2) - my; - var dist = Math.sqrt(dx * dx + dy * dy); - var angle = Math.atan2(dy, dx); - orbs.push({ - x: mx, - y: my, - lastX: mx, - lastY: my, - hue: 0, - colorAngle: 0, - angle: angle + Math.PI/2, - //size: .5+dist/250, - size: rand(1,3)/2, - centerX: cw/2, - centerY: ch/2, - radius: dist, - speed: (rand(5,10)/1000)*(dist/750)+.015, - alpha: 1 - Math.abs(dist)/cw, - draw: function() { - ctx.strokeStyle = 'hsla('+this.colorAngle+',100%,50%,1)'; - ctx.lineWidth = this.size; - ctx.beginPath(); - ctx.moveTo(this.lastX, this.lastY); - ctx.lineTo(this.x, this.y); - ctx.stroke(); - }, - update: function(){ - var mx = this.x; - var my = this.y; - this.lastX = this.x; - this.lastY = this.y; - var x1 = cw/2; - var y1 = ch/2; - var x2 = mx; - var y2 = my; - var rise = y1-y2; - var run = x1-x2; - var slope = -(rise/run); - var radian = Math.atan(slope); - var angleH = Math.floor(radian*(180/Math.PI)); - if(x2 < x1 && y2 < y1){angleH += 180;} - if(x2 < x1 && y2 > y1){angleH += 180;} - if(x2 > x1 && y2 > y1){angleH += 360;} - if(y2 < y1 && slope =='-Infinity'){angleH = 90;} - if(y2 > y1 && slope =='Infinity'){angleH = 270;} - if(x2 < x1 && slope =='0'){angleH = 180;} - if(isNaN(angleH)){angleH = 0;} - - this.colorAngle = angleH; - this.x = this.centerX + Math.sin(this.angle*-1) * this.radius; - this.y = this.centerY + Math.cos(this.angle*-1) * this.radius; - this.angle += this.speed; - - } - }); -} - -function orbGo(e){ - var mx = e.pageX - c.offsetLeft; - var my = e.pageY - c.offsetTop; - createOrb(mx,my); -} - -function turnOnMove(){ - c.addEventListener('mousemove', orbGo, false); -} - -function turnOffMove(){ - c.removeEventListener('mousemove', orbGo, false); -} - -function toggleTrails(){ - trail = trailCB.checked; -} - -function clear(){ - orbs = []; -} - -c.addEventListener('mousedown', orbGo, false); -c.addEventListener('mousedown', turnOnMove, false); -c.addEventListener('mouseup', turnOffMove, false); -trailCB.addEventListener('change', toggleTrails, false); -clearer.addEventListener('click', clear, false); - -var count = 100; -while(count--){ - createOrb(cw/2, ch/2+(count*2)); -} - -var loop = function(){ - window.requestAnimFrame(loop); - if(trail){ - ctx.fillStyle = 'rgba(0,0,0,.1)'; - ctx.fillRect(0,0,cw,ch); - } else { - ctx.clearRect(0,0,cw,ch); - } - var i = orbs.length; - while(i--){ - var orb = orbs[i]; - var updateCount = 3; - while(updateCount--){ - orb.update(); - orb.draw(ctx); - } - - } -} - -loop(); - diff --git a/src/orbital-trails/index.html b/src/orbital-trails/index.html index 309be03..772137f 100644 --- a/src/orbital-trails/index.html +++ b/src/orbital-trails/index.html @@ -14,7 +14,7 @@ View Version 2 - + diff --git a/src/orbital-trails/style.css b/src/orbital-trails/style.css index c5bae06..a291b9a 100644 --- a/src/orbital-trails/style.css +++ b/src/orbital-trails/style.css @@ -1,6 +1,6 @@ body { - background: #000; - color: #aaa; + background: #000000; + color: #bbbbbb; font: 100%/20px helvetica, arial, sans-serif; } @@ -19,7 +19,7 @@ canvas { background: rgba(0,0,0,.75); border: 1px solid #333; left: 20px; - padding: 10px 15px; + padding: 15px 15px; position: absolute; top: 20px; z-index: 2;