From 22ce8823a362cc7f2b7e78029ed28f99316ba1fc Mon Sep 17 00:00:00 2001 From: Sander Hautvast Date: Sun, 11 Apr 2021 12:59:40 +0200 Subject: [PATCH] tweaks, bugfix --- src/css/app.css | 11 +++--- src/js/index.js | 89 ++++++++++++++++++++++--------------------------- 2 files changed, 45 insertions(+), 55 deletions(-) diff --git a/src/css/app.css b/src/css/app.css index 9ca2c6b..3a8866e 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -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; } \ No newline at end of file diff --git a/src/js/index.js b/src/js/index.js index 4bac923..a2900ab 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -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); };