diff options
| author | Yaroslav <contact@yaroslavps.com> | 2018-12-15 19:56:13 +0300 |
|---|---|---|
| committer | Yaroslav <contact@yaroslavps.com> | 2018-12-15 19:56:13 +0300 |
| commit | baf92820c994a46a66a61cf0d2f2a3bc1ec07076 (patch) | |
| tree | 35fe39aa4d3ac1c9f7e09a7eb9ffa5113b17b7cc | |
| parent | 91ebe149046fae3b075f7ea5bfa7b1532c9bc7c5 (diff) | |
| download | canvas-antics-baf92820c994a46a66a61cf0d2f2a3bc1ec07076.tar.gz canvas-antics-baf92820c994a46a66a61cf0d2f2a3bc1ec07076.zip | |
starfield algorithm, css on snow/stars html
| -rw-r--r-- | letitsnow/snow.html | 4 | ||||
| -rw-r--r-- | starfield/stars.html | 20 | ||||
| -rw-r--r-- | starfield/stars.js | 34 |
3 files changed, 38 insertions, 20 deletions
diff --git a/letitsnow/snow.html b/letitsnow/snow.html index 17f6672..0bb981f 100644 --- a/letitsnow/snow.html +++ b/letitsnow/snow.html @@ -37,6 +37,8 @@ html{ </script> </head> <body> - <canvas id="snow"></canvas> + <div class="canvas-container"> + <canvas id="snow"></canvas> + </div> </body> </html> diff --git a/starfield/stars.html b/starfield/stars.html index e763898..9cea324 100644 --- a/starfield/stars.html +++ b/starfield/stars.html @@ -18,10 +18,24 @@ html{ box-sizing: border-box; } -#stars{ +.canvas-container{ width: 100%; height: 100%; + position: absolute; + top: 0; + left: 0; + margin: 0; + padding: 0; + overflow: hidden; } + +#stars{ + position: absolute; + margin: 0; + padding: 0; + bottom: 0; +} + </style> <script> window.addEventListener("load", function(){ @@ -30,7 +44,9 @@ html{ </script> </head> <body> - <canvas id="stars"></canvas> + <div class="canvas-container"> + <canvas id="stars"></canvas> + </div> </body> </html> diff --git a/starfield/stars.js b/starfield/stars.js index 373b934..142e8c2 100644 --- a/starfield/stars.js +++ b/starfield/stars.js @@ -1,5 +1,5 @@ /* -Starfield JS v0.0.1 +Starfield JS v0.1.0 Copyright 2018 Yaroslav de la Peña Smirnov All rights reserved. @@ -36,6 +36,14 @@ function Particle(ix, iy, posz){ this.ix = ix; this.iy = iy; this.posz = posz; + + this.getX = function(cWidth){ + return this.ix / this.posz * cWidth/8 + cWidth/2; + } + + this.getY = function(cHeight){ + return this.iy / this.posz * cHeight/8 + cHeight/2; + } } function warpLaunch(options={}){ @@ -117,13 +125,9 @@ function warpLaunch(options={}){ function getNewParticle(){ // Randomly assign them the needed parameters - let halfWidth = canvas.width/2; - let halfHeight = canvas.height/2; - //let ix = getRandomPos(halfWidth/20); - //let iy = getRandomPos(halfHeight/20); - let ix = getRandomPos(5); - let iy = getRandomPos(5); - let posz = randomRange(50, 200); + let ix = getRandomPos(canvas.width/3); + let iy = getRandomPos(canvas.height/2); + let posz = randomRange(0, 200); return new Particle(ix, iy, posz); } @@ -137,14 +141,10 @@ function warpLaunch(options={}){ } function drawStar(particle){ - let scale = particle.posz/100; + let scale = (1 - particle.posz/200) * 1.5 + 0.25; let p = scale/2; - let halfWidth = canvas.width/2; - let halfHeight = canvas.height/2; - let posx = (particle.ix+halfWidth*particle.ix)*p; - let posy = (particle.iy+halfHeight*particle.iy)*p; ctx.globalAlpha = p; - ctx.translate(posx, posy); + ctx.translate(particle.getX(canvas.width), particle.getY(canvas.height)); ctx.scale(scale, scale); ctx.drawImage(starsprite, 0, 0); ctx.restore(); @@ -166,10 +166,10 @@ function warpLaunch(options={}){ ctx.clearRect(0, 0, canvas.width, canvas.height); for(let i = 0; i < max_particles; i++){ let particle = particles[i]; - particle.posz += delta*speed/1000; - if (particle.posz > 200){ + particle.posz -= delta*speed/1000; + if (particle.posz <= 0){ particle = getNewParticle(); - particle.posz = 50; + particle.posz = 200; particles[i] = particle; } drawStar(particle); |