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

tweaks later

Browse source
This commit is contained in:
Sander Hautvast 2021-04-09 16:48:41 +02:00
parent f12913376e
commit 9ab8827c27
3 changed files with 35 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/css/app.css
View file

@ -1,14 +1,22 @@
body { body {
background: #ff8f00; background: black;
/*background: #ff0000;*/
overflow: hidden; overflow: hidden;
} }
#sky { #sky {
/*background: red;*/ background: black;
background: #ff8f00; /*background: #ff8f00;*/
/*background: black;*/
} }
.cloud { .cloud {
position: absolute; position: absolute;
background-size: 25px; background-size: 25px;
}
a{
position: absolute;
right: 0;
color: red;
} }

2
src/index.html
View file

@ -7,7 +7,7 @@
</head> </head>
<body> <body>
<pre><code id="code"></code></pre> <pre><code id="code"></code></pre>
<!--<a class="right" href="https://github.com/shautvast/" target="_blank">https://github.com/shautvast</a>--> <a class="right" href="https://github.com/shautvast/redsky" target="_blank">https://github.com/shautvast/redsky</a>
<div id="sky"></div> <div id="sky"></div>
</body> </body>
</html> </html>

37
src/js/index.js
View file

@ -2,10 +2,10 @@ import '../css/app.css';
(function () { (function () {
const num_clouds = 100, const num_clouds = 100,
max_cloud_size = 500, max_cloud_size = 300,
max_speed_x = 50, max_speed_x = 50,
max_speed_y = 30, max_speed_y = 30,
num_clusters = 4; num_clusters = 40;
let cluster_x, cluster_y, cluster_size, cloud_counter; let cluster_x, cluster_y, cluster_size, cloud_counter;
@ -31,15 +31,24 @@ import '../css/app.css';
newCloud.style.width = `${size}px`; newCloud.style.width = `${size}px`;
newCloud.style.height = `${size}px`; newCloud.style.height = `${size}px`;
let diff = Math.random() * 255; let diff = Math.random() * 255;
newCloud.style.background = `radial-gradient(circle ${size / 2}px, rgba(255, ${255 - diff}, 0, ${Math.random()}), rgba(20, 56, 200, 0.0)) no-repeat`; newCloud.style.background = `radial-gradient(circle ${size / 2}px, rgba(255, ${255 - diff}, 0, ${Math.random()}), rgba(0, 0, 0, 0.0)) no-repeat`;
newCloud.setAttribute("size", `${size}`); newCloud.setAttribute("size", `${size}`);
sky.appendChild(newCloud); 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.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 arrange_clouds = function () {
let num_clouds_in_cluster = (Math.floor(num_clouds / num_clusters)); let num_clouds_in_cluster = (Math.floor(num_clouds / num_clusters));
for (let i = 0; i < num_clouds; i++) { for (let i = 1; i < num_clouds; i++) {
if (i % num_clouds_in_cluster === 0) { if (i % num_clouds_in_cluster === 0) {
cluster_x = Math.random() * width; cluster_x = Math.random() * width;
cluster_y = Math.random() * height; cluster_y = Math.random() * height;
@ -56,12 +65,12 @@ import '../css/app.css';
} }
let step = function () { let step = function () {
let cloud = get_cloud(Math.floor(Math.random() * num_clouds)); let cloud = get_cloud(1 + Math.floor(Math.random() * num_clouds));
let x = parseInt(cloud.style.left), y = parseInt(cloud.style.top); let x = parseInt(cloud.style.left), y = parseInt(cloud.style.top);
x -= (Math.random() * max_speed_x - max_speed_x); x -= (Math.random() * max_speed_x - max_speed_x);
y -= (Math.random() * max_speed_y - max_speed_y); y -= (Math.random() * max_speed_y - max_speed_y);
if (x < -max_cloud_size && y < -max_cloud_size) { if (x > width && y > height) {
cloud_counter += 1; cloud_counter += 1;
if (cloud_counter > (num_clouds / num_clusters)) { if (cloud_counter > (num_clouds / num_clusters)) {
cluster_size = Math.random() * max_cloud_size; cluster_size = Math.random() * max_cloud_size;
@ -72,18 +81,18 @@ import '../css/app.css';
cloud.style.transition = "none"; cloud.style.transition = "none";
cloud.style.top = (cluster_x + Math.random() * cluster_size) + "px"; cloud.style.top = `${(cluster_x + Math.random() * cluster_size)}px`;
cloud.style.left = (cluster_y + Math.random() * cluster_size) + "px"; cloud.style.left = `${(cluster_y + Math.random() * cluster_size)}px`;
let size = parseInt(cloud.getAttribute("size")) + Math.random(); let size = parseInt(cloud.getAttribute("size")) + Math.random();
cloud.style.width = size + "px"; cloud.style.width = `${size}px`;
cloud.style.height = size + "px"; cloud.style.height = `${size}px`;
cloud.setAttribute("size", "" + size); 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"; 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 { } else {
cloud.style.transition = "left 5s, top 5s"; cloud.style.transition = "left 5s, top 5s";
cloud.style.left = x + "px"; cloud.style.left = `${x}px`;
cloud.style.top = y + "px"; cloud.style.top = `${y}px`;
} }
requestAnimationFrame(step); requestAnimationFrame(step);
}; };