diff --git a/src/css/app.css b/src/css/app.css
index 6cc11be..9ca2c6b 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -19,4 +19,9 @@ a{
position: absolute;
right: 0;
color: red;
+}
+
+div{
+ width: 100vw;
+ height: 100vh;
}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 7ae76c0..863443c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,7 +6,6 @@
tearuptheredsky
-
https://github.com/shautvast/redsky
diff --git a/src/js/index.js b/src/js/index.js
index 3d474ed..4bac923 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -5,7 +5,7 @@ import '../css/app.css';
max_cloud_size = 300,
max_speed_x = 50,
max_speed_y = 30,
- num_clusters = 40;
+ num_clusters = 30;
let cluster_x, cluster_y, cluster_size, cloud_counter;
@@ -14,6 +14,11 @@ import '../css/app.css';
sky.requestFullscreen().then();
};
+ document.onkeypress = () => {
+ create_clouds();
+ arrange_clouds();
+ }
+
let width = window.outerWidth,
height = window.outerHeight;
@@ -30,20 +35,19 @@ import '../css/app.css';
const size = 200 + Math.random() * max_cloud_size;
newCloud.style.width = `${size}px`;
newCloud.style.height = `${size}px`;
- let diff = Math.random() * 255;
- newCloud.style.background = `radial-gradient(circle ${size / 2}px, rgba(255, ${255 - diff}, 0, ${Math.random()}), rgba(0, 0, 0, 0.0)) no-repeat`;
+ let green_shift = Math.random() * 250;
+ 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 = `${width}px`;
- newCloud.style.height = `${height}px`;
+ 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`;
+ // 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 () {
@@ -52,7 +56,7 @@ import '../css/app.css';
if (i % num_clouds_in_cluster === 0) {
cluster_x = Math.random() * width;
cluster_y = Math.random() * height;
- cluster_size = 40;
+ cluster_size = Math.random() * 50;
}
let cloud = get_cloud(i);
@@ -65,34 +69,37 @@ import '../css/app.css';
}
let step = function () {
- let cloud = get_cloud(1 + Math.floor(Math.random() * num_clouds));
- let x = parseInt(cloud.style.left), y = parseInt(cloud.style.top);
+ 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;
+ 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`;
}
-
- 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);
};