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 12:59:40 +02:00
parent f0ed7a17d9
commit 22ce8823a3
2 changed files with 45 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/css/app.css
View file

@ -5,6 +5,8 @@ body {
}
#sky {
width: 100vw;
height: 100vh;
background: black;
/*background: #ff8f00;*/
/*background: black;*/
@ -16,12 +18,9 @@ body {
}
a{
position: absolute;
position: fixed;
right: 0;
bottom: 0;
color: red;
}
div{
width: 100vw;
height: 100vh;
font-family: pt sans, Helvetica, Arial, sans-serif;
}

89
src/js/index.js
View file

@ -1,8 +1,11 @@
import '../css/app.css';
(function () {
const num_clouds = 100,
max_cloud_size = 300,
let width = window.innerWidth,
height = window.innerHeight;
const num_clouds = 100;
let size_factor = Math.random() * 1000 + 2000,
max_cloud_size = (width * height) / size_factor,
max_speed_x = 50,
max_speed_y = 30,
num_clusters = 30;
@ -15,12 +18,11 @@ import '../css/app.css';
};
document.onkeypress = () => {
create_clouds();
size_factor = Math.random() * 1000 + 2000;
max_cloud_size = (width * height) / size_factor;
arrange_clouds();
}
let width = window.outerWidth,
height = window.outerHeight;
window.onresize = () => {
width = window.innerWidth;
@ -39,68 +41,57 @@ import '../css/app.css';
newCloud.style.background = `radial-gradient(circle ${size / 2}px, rgba(255, ${255 - green_shift}, 0, ${Math.random()}), rgba(0, 0, 0, 0.0)) no-repeat`;
newCloud.setAttribute("size", `${size}`);
sky.appendChild(newCloud);
if (i === 0) {
newCloud.style.top = "0";
newCloud.style.left = "0";
newCloud.style.width = `100vw`;
newCloud.style.height = `100vh`;
newCloud.setAttribute("size", `2000`);
// newCloud.style.background = `radial-gradient(circle 1000px, rgba(255, 0, 0, 0.0), rgba(255, 0, 0, 1.0)) no-repeat`;
}
}
}
let arrange_clouds = function () {
let num_clouds_in_cluster = (Math.floor(num_clouds / num_clusters));
for (let i = 1; i < num_clouds; i++) {
for (let i = 0; i < num_clouds; i++) {
if (i % num_clouds_in_cluster === 0) {
cluster_x = Math.random() * width;
cluster_y = Math.random() * height;
cluster_size = Math.random() * 50;
cluster_x = 100 + Math.random() * width;
cluster_y = 100 + Math.random() * height;
cluster_size = Math.random() * 150;
}
let cloud = get_cloud(i);
cloud.style.top = `${cluster_x - cluster_size / 2 + Math.random() * cluster_size}px`;
cloud.style.left = `${cluster_y - cluster_size / 2 + Math.random() * cluster_size}px`;
cloud.style.left = `${cluster_x - max_cloud_size / 2 + Math.random() * cluster_size}px`;
cloud.style.top = `${cluster_y - max_cloud_size / 2 + Math.random() * cluster_size}px`;
}
cluster_size = Math.random() * max_cloud_size;
cluster_x = width + cluster_size + Math.random() * width;
cluster_y = height + cluster_size + Math.random() * height;
}
let step = function () {
let cloud_index = Math.floor(Math.random() * num_clouds);
if (cloud_index > 1) {
let cloud = get_cloud(cloud_index);
let x = parseInt(cloud.style.left), y = parseInt(cloud.style.top);
x -= (Math.random() * max_speed_x - max_speed_x);
y -= (Math.random() * max_speed_y - max_speed_y);
if (x > width && y > height) {
cloud_counter += 1;
if (cloud_counter > (num_clouds / num_clusters)) {
cluster_size = Math.random() * max_cloud_size;
cluster_x = width + cluster_size + Math.random() * width;
cluster_y = height + cluster_size + Math.random() * height;
cloud_counter = 0;
}
let cloud = get_cloud(cloud_index);
let x = parseInt(cloud.style.left), y = parseInt(cloud.style.top);
cloud.style.transition = "none";
cloud.style.top = `${(cluster_x + Math.random() * cluster_size)}px`;
cloud.style.left = `${(cluster_y + Math.random() * cluster_size)}px`;
let size = parseInt(cloud.getAttribute("size")) + Math.random();
cloud.style.width = `${size}px`;
cloud.style.height = `${size}px`;
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`;
} else {
cloud.style.transition = "left 5s, top 5s";
cloud.style.left = `${x}px`;
cloud.style.top = `${y}px`;
x -= (Math.random() * max_speed_x - max_speed_x);
y -= (Math.random() * max_speed_y - max_speed_y);
if (x > width && y > height) {
cloud_counter += 1;
if (cloud_counter > (num_clouds / num_clusters)) {
cluster_size = Math.random() * max_cloud_size;
cluster_x = width + cluster_size + Math.random() * width;
cluster_y = height + cluster_size + Math.random() * height;
cloud_counter = 0;
}
cloud.style.transition = "none";
cloud.style.top = `${(cluster_x + Math.random() * cluster_size)}px`;
cloud.style.left = `${(cluster_y + Math.random() * cluster_size)}px`;
let size = parseInt(cloud.getAttribute("size")) + Math.random();
cloud.style.width = `${size}px`;
cloud.style.height = `${size}px`;
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`;
} else {
cloud.style.transition = "left 5s, top 5s";
cloud.style.left = `${x}px`;
cloud.style.top = `${y}px`;
}
requestAnimationFrame(step);
};