diff options
| -rw-r--r-- | starfield/README.md | 23 | ||||
| -rw-r--r-- | starfield/stars.html | 2 | ||||
| -rw-r--r-- | starfield/stars.js | 37 |
3 files changed, 39 insertions, 23 deletions
diff --git a/starfield/README.md b/starfield/README.md new file mode 100644 index 0000000..931c46e --- /dev/null +++ b/starfield/README.md @@ -0,0 +1,23 @@ +# Starfield # + +3D starfield simulation. Like the good old Windows screensaver, but in JS and improved. + +To start the animation, just call this function, and (optionally) pass some options to it to configure the animation to your liking. For it to work you should have a canvas object in your document with id #stars. + +```javascript +warpLaunch({ + 'max_particles': 500, + 'speed': 50, + 'step': 2, + 'interactive': true, + 'color': true, +}); +``` + +### What does each option mean ### + +* max_particles: The amount of stars that appear onscreen at one given moment +* speed: How fast stars move towards the screen +* step: If interactive mode is on, how much the speed changes when the mouse wheel is scrolled +* interactive: If enabled, allows to control the speed of the simulation with the scroll wheel +* color: Stars are colored instead of white if enabled diff --git a/starfield/stars.html b/starfield/stars.html index 1cc9f30..9c7d0f2 100644 --- a/starfield/stars.html +++ b/starfield/stars.html @@ -40,7 +40,7 @@ html{ <script> window.addEventListener("load", function(){ warpLaunch({ - 'max_particles': 1000, + 'max_particles': 1500, 'speed': 70, 'step': 10, 'interactive': true, diff --git a/starfield/stars.js b/starfield/stars.js index 0a47100..01628e3 100644 --- a/starfield/stars.js +++ b/starfield/stars.js @@ -1,5 +1,5 @@ /* -Starfield JS v0.2.0 +Starfield JS v1.0.0 Copyright 2018 Yaroslav de la Peña Smirnov All rights reserved. @@ -61,6 +61,7 @@ function warpLaunch(options={}){ options.hasOwnProperty('step') ? options['step'] : 2; var interactive = options['interactive']; var color = options['color']; + var ox, oy; var canvas = document.getElementById("stars"); if(!canvas){ @@ -70,9 +71,6 @@ function warpLaunch(options={}){ var container = canvas.parentNode; var ctx = canvas.getContext("2d"); - // The canvas where we will prerender our star - var starsprite = document.createElement("canvas"); - // This will be populated with all the 'particles' (i.e. stars) // on the canvas var particles = []; @@ -92,6 +90,16 @@ function warpLaunch(options={}){ // and accordingly resize the canvas, then reinitialize canvas.height = parseInt(container.offsetHeight); canvas.width = parseInt(container.offsetWidth); + ox = canvas.height/3; + oy = canvas.width/2; + if (canvas.width < canvas.height){ + ox = canvas.height/2; + oy = canvas.width/3; + } + if (canvas.width == canvas.height){ + ox = canvas.height/3; + oy = canvas.width/3; + } try{ window.cancelAnimationFrame(requestedFrame); } catch(e) {} ctx.imageSmoothingEnabled = false; @@ -101,30 +109,16 @@ function warpLaunch(options={}){ initParticles(); } - // Prerender our star to an offscreen canvas to improve performance - function prerender(){ - let sctx = starsprite.getContext("2d"); - sctx.imageSmoothingEnabled = false; - sctx.webkitImageSmoothingEnabled = false; - starsprite.width = 5; - starsprite.height = 5; - sctx.fillStyle = "rgb(255, 255, 255, 0.4)"; - sctx.fillRect(0, 2, 5, 1); - sctx.fillRect(2, 0, 1, 5); - sctx.fillStyle = "rgb(255, 255, 255, 0.5)"; - sctx.fillRect(1, 1, 3, 3); - } - function getRandomPos(n){ let i = randomRange(-n, n); - if (i == 0) return getRandomPos(); + if (i == 0) return 1; return i; } function getNewParticle(){ // Randomly assign them the needed parameters - let ix = getRandomPos(canvas.width/3); - let iy = getRandomPos(canvas.height/2); + let ix = getRandomPos(ox) + let iy = getRandomPos(oy); let posz = randomRange(0, 200); if (!color) return new Particle(ix, iy, posz, [255, 255, 255]); @@ -215,7 +209,6 @@ function warpLaunch(options={}){ console.log(speed); } - prerender(); resize(); if (interactive){ |