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

actual YG colors

Browse source
This commit is contained in:
Shautvast 2024-09-09 14:50:33 +02:00
parent ca9a859e75
commit fb59e9aabc
1 changed files with 125 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/js/index.js
View file

@ -1,4 +1,4 @@
import '../css/app.css'; import "../css/app.css";
(function () { (function () {
let width = window.innerWidth, let width = window.innerWidth,
@ -11,7 +11,6 @@ import '../css/app.css';
num_clusters = 30; num_clusters = 30;
let cluster_x, cluster_y, cluster_size, cloud_counter; let cluster_x, cluster_y, cluster_size, cloud_counter;
const sky = document.getElementById("sky"); const sky = document.getElementById("sky");
sky.onclick = () => { sky.onclick = () => {
sky.requestFullscreen().then(); sky.requestFullscreen().then();
@ -21,8 +20,7 @@ import '../css/app.css';
size_factor = Math.random() * 1000 + 2000; size_factor = Math.random() * 1000 + 2000;
max_cloud_size = (width * height) / size_factor; max_cloud_size = (width * height) / size_factor;
arrange_clouds(); arrange_clouds();
} };
window.onresize = () => { window.onresize = () => {
width = window.innerWidth; width = window.innerWidth;
@ -37,19 +35,16 @@ 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 green_shift = Math.random() * 50 - 25;
// let red_shift = Math.random() * 50 - 25; newCloud.style.background = create_gradient(size);
// 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`;
// orange
newCloud.style.background = create_gradient(size, i);
newCloud.setAttribute("size", `${size}`); newCloud.setAttribute("size", `${size}`);
sky.appendChild(newCloud); sky.appendChild(newCloud);
} }
} };
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 = 0; i < num_clouds; i++) {
if (i % num_clouds_in_cluster === 0) { if (i % num_clouds_in_cluster === 0) {
cluster_x = 200 + Math.random() * width; cluster_x = 200 + Math.random() * width;
@ -61,20 +56,24 @@ import '../css/app.css';
cloud.style.left = `${cluster_x - max_cloud_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`; cloud.style.top = `${cluster_y - max_cloud_size / 2 + Math.random() * cluster_size}px`;
} }
} };
let step = function () { let step = function () {
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
let cloud_index = Math.floor(Math.random() * num_clouds); let cloud_index = Math.floor(Math.random() * num_clouds);
let cloud = get_cloud(cloud_index); 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() - Math.random()) * max_speed_x; x += (Math.random() - Math.random()) * max_speed_x;
y += (Math.random() - Math.random()) * max_speed_y; y += (Math.random() - Math.random()) * max_speed_y;
if ((x > width && y > height) || (x < -max_cloud_size && y < -max_cloud_size)) { if (
(x > width && y > height) ||
(x < -max_cloud_size && y < -max_cloud_size)
) {
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;
cluster_x = width + cluster_size + Math.random() * width; cluster_x = width + cluster_size + Math.random() * width;
cluster_y = height + cluster_size + Math.random() * height; cluster_y = height + cluster_size + Math.random() * height;
@ -83,8 +82,8 @@ 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`;
@ -94,7 +93,6 @@ import '../css/app.css';
//create radial gradient from orange to purple //create radial gradient from orange to purple
cloud.style.background = create_gradient(size, cloud.id); cloud.style.background = create_gradient(size, cloud.id);
} else { } else {
cloud.style.transition = "left 10s, top 10s"; cloud.style.transition = "left 10s, top 10s";
cloud.style.left = `${x}px`; cloud.style.left = `${x}px`;
@ -104,32 +102,30 @@ import '../css/app.css';
requestAnimationFrame(step); requestAnimationFrame(step);
}; };
let create_gradient = function (size, i) { let create_gradient = function (size) {
const shift = Math.random() * 80 - 40; const c1 = [247, 204, 71];
// yellow const c2 = [223, 28, 36];
if (i % 3 === 0) { const c3 = [75, 16, 142];
return `radial-gradient(circle ${size / 2}px, rgba(${200 - shift}, ${150}, 0, 1.0), rgba(0, 0, 0, 0.0)) no-repeat`; const shift = Math.random() * 2;
} let r, g, b;
// blue if (shift < 1) {
if (i % 4 === 1) { r = c1[0] + (c2[0] - c1[0]) * shift;
return `radial-gradient(circle ${size / 2}px, rgba(${100 + shift}, 0, ${200 + shift}, 1.0), rgba(0, 0, 0, 0.0)) no-repeat`; g = c1[1] + (c2[1] - c1[1]) * shift;
} b = c1[2] + (c2[2] - c1[2]) * shift;
// purple } else {
if (i % 4 === 2) { r = c2[0] + (c3[0] - c2[0]) * (shift - 1);
return `radial-gradient(circle ${size / 2}px, rgba(${61 + shift}, 1, ${88 + shift}, 1.0), rgba(0, 0, 0, 0.0)) no-repeat`; g = c2[1] + (c3[1] - c2[1]) * (shift - 1);
} b = c2[2] + (c3[2] - c2[2]) * (shift - 1);
// orange
if (i % 4 === 3) {
return `radial-gradient(circle ${size / 2}px, rgba(${200 + shift}, ${80 + shift}, 1, 1.0), rgba(0, 0, 0, 0.0)) no-repeat`;
}
} }
return `radial-gradient(circle ${size / 2}px, rgba(${r}, ${g}, ${b}, 1.0), rgba(0, 0, 0, 0.0)) no-repeat`;
};
let get_cloud = function (index) { let get_cloud = function (index) {
return document.getElementById(`${index}`); return document.getElementById(`${index}`);
} };
create_clouds(); create_clouds();
arrange_clouds(); arrange_clouds();
requestAnimationFrame(step); requestAnimationFrame(step);
})() })();