aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorYaroslav <contact@yaroslavps.com>2018-12-15 23:42:13 +0300
committerYaroslav <contact@yaroslavps.com>2018-12-15 23:42:13 +0300
commit66daadd57eb6ec92a2c27c49ae8c9d515579c471 (patch)
treedcbf395036f737079ad62a99e9c12b704fc93fe4
parentd7c7aff5c362d4c734ce77ead22344fac4766877 (diff)
downloadcanvas-antics-66daadd57eb6ec92a2c27c49ae8c9d515579c471.tar.gz
canvas-antics-66daadd57eb6ec92a2c27c49ae8c9d515579c471.zip
color mode
-rw-r--r--starfield/stars.html3
-rw-r--r--starfield/stars.js35
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;