From 542a2d74ddd4831ebf9b66cf300bffb5ff97997b Mon Sep 17 00:00:00 2001 From: Sander Hautvast Date: Thu, 3 Dec 2020 16:09:52 +0100 Subject: [PATCH] it's now an actual cloud simulation --- index.html | 4 ++- sky.css | 15 ++++++++ sky.js | 101 ++++++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 106 insertions(+), 14 deletions(-) create mode 100644 sky.css diff --git a/index.html b/index.html index 0e57372..8fd35f5 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,13 @@ + sky + - +
\ No newline at end of file diff --git a/sky.css b/sky.css new file mode 100644 index 0000000..1c9e1c2 --- /dev/null +++ b/sky.css @@ -0,0 +1,15 @@ +body { + background: rgb(30, 66, 200); + overflow: hidden; +} + +#sky { + background: rgb(30, 66, 200); +} + +.cloud { + position: absolute; + background-size: 25px; + transition: left 5s, top 5s; + /*background: radial-gradient(circle 50px, rgba(255, 255, 255, 0.5), rgba(20, 56, 200, 0.0) 90%) no-repeat;*/ +} \ No newline at end of file diff --git a/sky.js b/sky.js index 1f05e21..d6ad985 100644 --- a/sky.js +++ b/sky.js @@ -1,24 +1,99 @@ (function () { - const canvas = document.getElementById("canvas"); - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - canvas.onclick = () => { - canvas.requestFullscreen().then(); + const num_clouds = 200, + max_cloud_size = 500, + max_speed_x = 50, + max_speed_y = 30, + num_clusters = 5; + let cluster_x, cluster_y, cluster_size, cloud_counter; + + + const sky = document.getElementById("sky"); + sky.width = window.innerWidth; + sky.height = window.innerHeight; + sky.onclick = () => { + sky.requestFullscreen().then(); }; + let width = window.innerWidth, + height = window.innerHeight; + let oldWidth = width, oldHeight = height; + window.onresize = () => { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; + oldWidth = width; + oldHeight = height; + width = window.innerWidth; + height = window.innerHeight; }; - let start_timestamp = 0, angle = 0, - step = function (timestamp) { - angle = ((timestamp - start_timestamp) / 100) % 360; + let create_clouds = function () { + for (let i = 0; i < num_clouds; i++) { + let newCloud = document.createElement("div"); + newCloud.setAttribute("id", "cloud-" + i); + newCloud.setAttribute("class", "cloud"); + const size = 200 + Math.random() * max_cloud_size; + newCloud.style.width = size + "px"; + newCloud.style.height = size + "px"; + newCloud.style.background = "radial-gradient(circle " + size / 2 + "px, rgba(255, 255, 255, " + Math.random() / 5 + "), rgba(20, 56, 200, 0.0)) no-repeat"; + newCloud.setAttribute("size", "" + size); + sky.appendChild(newCloud); + } + } - canvas.style.background = 'linear-gradient(' + angle + 'deg, white , rgb(20,56,200))'; + let arrange_clouds = function () { + for (let i = 0; i < num_clouds; i++) { + if (i % (Math.floor(num_clouds / num_clusters)) === 0) { + cluster_x = Math.random() * width; + cluster_y = Math.random() * height; + cluster_size = 400; + } - requestAnimationFrame(step); - }; + 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"; + } + 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 = get_cloud(Math.floor(Math.random() * num_clouds)); + let x = parseInt(cloud.style.left), y = parseInt(cloud.style.top); + + x -= Math.random() * max_speed_x; + y -= Math.random() * max_speed_y; + if (x < -max_cloud_size && y < -max_cloud_size) { + 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); + }; + + let get_cloud = function (index) { + return document.getElementById("cloud-" + index); + } + + create_clouds(); + arrange_clouds(); requestAnimationFrame(step); })() \ No newline at end of file