starfield ok

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){