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

tweaks

Browse source
This commit is contained in:
Sander Hautvast 2021-04-09 17:49:05 +02:00
parent 9ab8827c27
commit f0ed7a17d9
3 changed files with 46 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/css/app.css
View file

@ -20,3 +20,8 @@ a{
right: 0; right: 0;
color: red; color: red;
} }
div{
width: 100vw;
height: 100vh;
}

1
src/index.html
View file

@ -6,7 +6,6 @@
<title>tearuptheredsky</title> <title>tearuptheredsky</title>
</head> </head>
<body> <body>
<pre><code id="code"></code></pre>
<a class="right" href="https://github.com/shautvast/redsky" target="_blank">https://github.com/shautvast/redsky</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>

25
src/js/index.js
View file

@ -5,7 +5,7 @@ import '../css/app.css';
max_cloud_size = 300, max_cloud_size = 300,
max_speed_x = 50, max_speed_x = 50,
max_speed_y = 30, max_speed_y = 30,
num_clusters = 40; num_clusters = 30;
let cluster_x, cluster_y, cluster_size, cloud_counter; let cluster_x, cluster_y, cluster_size, cloud_counter;
@ -14,6 +14,11 @@ import '../css/app.css';
sky.requestFullscreen().then(); sky.requestFullscreen().then();
}; };
document.onkeypress = () => {
create_clouds();
arrange_clouds();
}
let width = window.outerWidth, let width = window.outerWidth,
height = window.outerHeight; height = window.outerHeight;
@ -30,20 +35,19 @@ import '../css/app.css';
const size = 200 + Math.random() * max_cloud_size; const size = 200 + Math.random() * max_cloud_size;
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 green_shift = Math.random() * 250;
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.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}`); newCloud.setAttribute("size", `${size}`);
sky.appendChild(newCloud); sky.appendChild(newCloud);
if (i === 0) { if (i === 0) {
newCloud.style.top = "0"; newCloud.style.top = "0";
newCloud.style.left = "0"; newCloud.style.left = "0";
newCloud.style.width = `${width}px`; newCloud.style.width = `100vw`;
newCloud.style.height = `${height}px`; newCloud.style.height = `100vh`;
newCloud.setAttribute("size", `2000`); 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 () { let arrange_clouds = function () {
@ -52,7 +56,7 @@ import '../css/app.css';
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;
cluster_size = 40; cluster_size = Math.random() * 50;
} }
let cloud = get_cloud(i); let cloud = get_cloud(i);
@ -65,7 +69,9 @@ import '../css/app.css';
} }
let step = function () { let step = function () {
let cloud = get_cloud(1 + Math.floor(Math.random() * num_clouds)); 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); 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);
@ -94,6 +100,7 @@ import '../css/app.css';
cloud.style.left = `${x}px`; cloud.style.left = `${x}px`;
cloud.style.top = `${y}px`; cloud.style.top = `${y}px`;
} }
}
requestAnimationFrame(step); requestAnimationFrame(step);
}; };