diff options
| -rw-r--r-- | starfield/stars.html | 3 | ||||
| -rw-r--r-- | starfield/stars.js | 35 |
2 files changed, 30 insertions, 8 deletions
diff --git a/starfield/stars.html b/starfield/stars.html index 6d63653..1cc9f30 100644 --- a/starfield/stars.html +++ b/starfield/stars.html @@ -40,10 +40,11 @@ html{ <script> window.addEventListener("load", function(){ warpLaunch({ - 'max_particles': 1500, + 'max_particles': 1000, 'speed': 70, 'step': 10, 'interactive': true, + 'color': true, }); }); </script> diff --git a/starfield/stars.js b/starfield/stars.js index 38a7a4a..0a47100 100644 --- a/starfield/stars.js +++ b/starfield/stars.js @@ -34,10 +34,11 @@ POSSIBILITY OF SUCH DAMAGE. // ix and iy are the x,y coordinates in 'space', posz is how // far away from the screen the particle/star is -function Particle(ix, iy, posz){ +function Particle(ix, iy, posz, rgb){ this.ix = ix; this.iy = iy; this.posz = posz; + this.rgb = rgb; // getX and getY get the projected coordinates, that is the real x, y // coordinate on 'screen' rather than 'space' @@ -59,6 +60,7 @@ function warpLaunch(options={}){ var step = options.hasOwnProperty('step') ? options['step'] : 2; var interactive = options['interactive']; + var color = options['color']; var canvas = document.getElementById("stars"); if(!canvas){ @@ -124,7 +126,18 @@ function warpLaunch(options={}){ let ix = getRandomPos(canvas.width/3); let iy = getRandomPos(canvas.height/2); let posz = randomRange(0, 200); - return new Particle(ix, iy, posz); + if (!color) + return new Particle(ix, iy, posz, [255, 255, 255]); + let b = randomRange(178, 255); + if (b >= 180){ + let r = randomRange(100, b-50); + let g = randomRange(100, b-20); + return new Particle(ix, iy, posz, [r, g, b]); + } + b = randomRange(0, 150); + let r = randomRange(180, 255); + let g = randomRange(20, r-50); + return new Particle(ix, iy, posz, [r, g, b]); } // Init all the stars, and place them randomly on screen @@ -139,14 +152,21 @@ function warpLaunch(options={}){ requestedFrame = window.requestAnimationFrame(nextFrame); } - // Function to draw prerender star to the onscreen canvas function drawStar(particle){ - let scale = (1 - particle.posz/200) * 1.5 + 0.25; - let p = scale/2; - ctx.globalAlpha = p; + let alpha = (1 - particle.posz/200) + 0.1; + let scale = alpha*2 + ctx.globalAlpha = alpha; ctx.translate(particle.getX(canvas.width), particle.getY(canvas.height)); ctx.scale(scale, scale); - ctx.drawImage(starsprite, 0, 0); + ctx.fillStyle = "rgba("+particle.rgb[0]+ + ", "+particle.rgb[1]+ + ", "+particle.rgb[2]+", 0.8)"; + ctx.fillRect(0, 2, 5, 1); + ctx.fillRect(2, 0, 1, 5); + ctx.fillStyle = "rgba("+particle.rgb[0]+ + ", "+particle.rgb[1]+ + ", "+particle.rgb[2]+", 0.5)"; + ctx.fillRect(1, 1, 3, 3); ctx.restore(); ctx.save(); } @@ -181,6 +201,7 @@ function warpLaunch(options={}){ } function updateSpeed(e){ + // If mouse wheel scrolls up, increase speed, if down, decrease let new_speed = e.deltaY > 0 ? speed - step : speed + step; if (new_speed > 250){ speed = 250; |