aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorYaroslav <contact@yaroslavps.com>2018-12-15 19:56:13 +0300
committerYaroslav <contact@yaroslavps.com>2018-12-15 19:56:13 +0300
commitbaf92820c994a46a66a61cf0d2f2a3bc1ec07076 (patch)
tree35fe39aa4d3ac1c9f7e09a7eb9ffa5113b17b7cc
parent91ebe149046fae3b075f7ea5bfa7b1532c9bc7c5 (diff)
downloadcanvas-antics-baf92820c994a46a66a61cf0d2f2a3bc1ec07076.tar.gz
canvas-antics-baf92820c994a46a66a61cf0d2f2a3bc1ec07076.zip
starfield algorithm, css on snow/stars html
-rw-r--r--letitsnow/snow.html4
-rw-r--r--starfield/stars.html20
-rw-r--r--starfield/stars.js34
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);