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

it's now an actual cloud simulation

Browse source
This commit is contained in:
Sander Hautvast 2020-12-03 16:09:52 +01:00
parent bce4ff7a92
commit 542a2d74dd
3 changed files with 106 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -1,11 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>sky</title> <title>sky</title>
<link rel="stylesheet" href="sky.css">
</head> </head>
<body> <body>
<canvas id="canvas"></canvas> <div id="sky"></div>
</body> </body>
<script type="application/ecmascript" src="sky.js"></script> <script type="application/ecmascript" src="sky.js"></script>
</html> </html>

15
sky.css Normal file
View file

@ -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;*/
}

101
sky.js
View file

@ -1,24 +1,99 @@
(function () { (function () {
const canvas = document.getElementById("canvas"); const num_clouds = 200,
canvas.width = window.innerWidth; max_cloud_size = 500,
canvas.height = window.innerHeight; max_speed_x = 50,
canvas.onclick = () => { max_speed_y = 30,
canvas.requestFullscreen().then(); 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 = () => { window.onresize = () => {
canvas.width = window.innerWidth; oldWidth = width;
canvas.height = window.innerHeight; oldHeight = height;
width = window.innerWidth;
height = window.innerHeight;
}; };
let start_timestamp = 0, angle = 0, let create_clouds = function () {
step = function (timestamp) { for (let i = 0; i < num_clouds; i++) {
angle = ((timestamp - start_timestamp) / 100) % 360; 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); requestAnimationFrame(step);
})() })()