aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--starfield/README.md23
-rw-r--r--starfield/stars.html2
-rw-r--r--starfield/stars.js37
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){