sander/redsky
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tweaks, bugfix

Browse source
This commit is contained in:
Sander Hautvast 2021-04-11 13:21:18 +02:00
parent 22ce8823a3
commit 7cd66d770a
1 changed files with 31 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/js/index.js
View file

@ -4,7 +4,7 @@ import '../css/app.css';
let width = window.innerWidth, let width = window.innerWidth,
height = window.innerHeight; height = window.innerHeight;
const num_clouds = 100; const num_clouds = 100;
let size_factor = Math.random() * 1000 + 2000, let size_factor = Math.random() * 1000 + 4500,
max_cloud_size = (width * height) / size_factor, max_cloud_size = (width * height) / size_factor,
max_speed_x = 50, max_speed_x = 50,
max_speed_y = 30, max_speed_y = 30,
@ -60,14 +60,15 @@ import '../css/app.css';
} }
let step = function () { let step = function () {
for (let i = 0; i < 10; i++) {
let cloud_index = Math.floor(Math.random() * num_clouds); let cloud_index = Math.floor(Math.random() * num_clouds);
let cloud = get_cloud(cloud_index); let cloud = get_cloud(cloud_index);
let x = parseInt(cloud.style.left), y = parseInt(cloud.style.top); let x = parseInt(cloud.style.left), y = parseInt(cloud.style.top);
x -= (Math.random() * max_speed_x - max_speed_x); x += (Math.random()-Math.random()) * max_speed_x;
y -= (Math.random() * max_speed_y - max_speed_y); y += (Math.random()-Math.random()) * max_speed_y;
if (x > width && y > height) { if ((x > width && y > height) || (x < -max_cloud_size && y< -max_cloud_size)) {
cloud_counter += 1; cloud_counter += 1;
if (cloud_counter > (num_clouds / num_clusters)) { if (cloud_counter > (num_clouds / num_clusters)) {
cluster_size = Math.random() * max_cloud_size; cluster_size = Math.random() * max_cloud_size;
@ -85,13 +86,14 @@ import '../css/app.css';
cloud.style.width = `${size}px`; cloud.style.width = `${size}px`;
cloud.style.height = `${size}px`; cloud.style.height = `${size}px`;
cloud.setAttribute("size", `${size}`); cloud.setAttribute("size", `${size}`);
cloud.style.background = `radial-gradient(circle ${size / 2}px, rgba(255, 255, 255, ${Math.random() / 5} ), rgba(20, 56, 200, 0.0)) no-repeat`; let green_shift = Math.random() * 250;
cloud.style.background = `radial-gradient(circle ${size / 2}px, rgba(255, ${255 - green_shift}, 0, ${Math.random()}), rgba(0, 0, 0, 0.0)) no-repeat`;
} else { } else {
cloud.style.transition = "left 5s, top 5s"; cloud.style.transition = "left 10s, top 10s";
cloud.style.left = `${x}px`; cloud.style.left = `${x}px`;
cloud.style.top = `${y}px`; cloud.style.top = `${y}px`;
} }
}
requestAnimationFrame(step); requestAnimationFrame(step);
}; };