From 96a2f405242147fbbeb32696ddaac1058d0d5c63 Mon Sep 17 00:00:00 2001 From: Greg Shuflin Date: Mon, 23 Oct 2023 02:28:47 -0700 Subject: [PATCH] Orbital-trails: copied code from project --- src/index.html | 1 + src/orbital-trails/app.js | 137 ++++++++++++++++++++++++++++++++++ src/orbital-trails/index.html | 22 ++++++ src/orbital-trails/style.css | 48 ++++++++++++ 4 files changed, 208 insertions(+) create mode 100644 src/orbital-trails/app.js create mode 100644 src/orbital-trails/index.html create mode 100644 src/orbital-trails/style.css diff --git a/src/index.html b/src/index.html index 83d0abf..1212c53 100644 --- a/src/index.html +++ b/src/index.html @@ -9,6 +9,7 @@ diff --git a/src/orbital-trails/app.js b/src/orbital-trails/app.js new file mode 100644 index 0000000..86fae93 --- /dev/null +++ b/src/orbital-trails/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/index.html b/src/orbital-trails/index.html new file mode 100644 index 0000000..309be03 --- /dev/null +++ b/src/orbital-trails/index.html @@ -0,0 +1,22 @@ + + + + + Orbital Trails + + + + +
+

Click and drag to make more!

+ + + + View Version 2 +
+ + + + + + diff --git a/src/orbital-trails/style.css b/src/orbital-trails/style.css new file mode 100644 index 0000000..c5bae06 --- /dev/null +++ b/src/orbital-trails/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; +}