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

Compare commits

base: sander:f0ed7a17d9471ba60bcb9e269efc5e20c84f3ee9
Branches Tags
sander:main
...
compare: sander:fb59e9aabcc429329a8a7dcd36941116db0990ea
Branches Tags
sander:main

10 commits
f0ed7a17d9 ... fb59e9aabc

Author SHA1 Message Date
Shautvast
fb59e9aabc actual YG colors 2024-09-09 14:50:33 +02:00
Sander Hautvast
ca9a859e75 little to the right 2022-12-09 16:33:16 +01:00
Sander Hautvast
4e49b25360 less green 2022-12-09 16:25:53 +01:00
Sander Hautvast
fa280df944 color adjustment and link to young gods 2022-12-09 15:57:51 +01:00
Sander Hautvast
62f209b6ae color adjustment 2022-12-09 15:51:50 +01:00
Sander Hautvast
029260939d cloud size 2022-12-09 15:42:16 +01:00
Sander Hautvast
9f73b39e87 cloud size 2022-12-09 15:37:47 +01:00
Sander Hautvast
dfc1eadafd colors 2022-12-09 15:30:32 +01:00
Sander Hautvast
7cd66d770a tweaks, bugfix 2021-04-11 13:21:18 +02:00
Sander Hautvast
22ce8823a3 tweaks, bugfix 2021-04-11 12:59:40 +02:00
5 changed files with 7948 additions and 448 deletions
Show stats Expand all files Collapse all files

1
README.md
View file

@ -1 +1,2 @@
tear up the red sky tear up the red sky
https://theyounggods.bandcamp.com/

8146
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

11
src/css/app.css
View file

@ -5,6 +5,8 @@ body {
} }
#sky { #sky {
width: 100vw;
height: 100vh;
background: black; background: black;
/*background: #ff8f00;*/ /*background: #ff8f00;*/
/*background: black;*/ /*background: black;*/
@ -16,12 +18,9 @@ body {
} }
a{ a{
position: absolute; position: fixed;
right: 0; right: 0;
bottom: 0;
color: red; color: red;
} font-family: pt sans, Helvetica, Arial, sans-serif;
div{
width: 100vw;
height: 100vh;
} }

2
src/index.html
View file

@ -6,7 +6,7 @@
<title>tearuptheredsky</title> <title>tearuptheredsky</title>
</head> </head>
<body> <body>
<a class="right" href="https://github.com/shautvast/redsky" target="_blank">https://github.com/shautvast/redsky</a> <a class="right" href="https://theyounggods.bandcamp.com/" target="_blank">https://github.com/shautvast/redsky</a>
<div id="sky"></div> <div id="sky"></div>
</body> </body>
</html> </html>

108
src/js/index.js
View file

@ -1,26 +1,26 @@
import '../css/app.css'; import "../css/app.css";
(function () { (function () {
const num_clouds = 100, let width = window.innerWidth,
max_cloud_size = 300, height = window.innerHeight;
const num_clouds = 200;
let size_factor = Math.random() * 1000 + 1500,
max_cloud_size = (width * height) / size_factor,
max_speed_x = 50, max_speed_x = 50,
max_speed_y = 30, max_speed_y = 30,
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();
}; };
document.onkeypress = () => { document.onkeypress = () => {
create_clouds(); size_factor = Math.random() * 1000 + 2000;
max_cloud_size = (width * height) / size_factor;
arrange_clouds(); arrange_clouds();
} };
let width = window.outerWidth,
height = window.outerHeight;
window.onresize = () => { window.onresize = () => {
width = window.innerWidth; width = window.innerWidth;
@ -30,55 +30,50 @@ import '../css/app.css';
let create_clouds = function () { let create_clouds = function () {
for (let i = 0; i < num_clouds; i++) { for (let i = 0; i < num_clouds; i++) {
let newCloud = document.createElement("div"); let newCloud = document.createElement("div");
newCloud.setAttribute("id", `cloud-${i}`); newCloud.setAttribute("id", `${i}`);
newCloud.setAttribute("class", "cloud"); newCloud.setAttribute("class", "cloud");
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() * 250;
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.style.background = create_gradient(size);
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 = `100vw`;
newCloud.style.height = `100vh`;
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 = 1; 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 = Math.random() * width; cluster_x = 200 + Math.random() * width;
cluster_y = Math.random() * height; cluster_y = 100 + Math.random() * height;
cluster_size = Math.random() * 50; cluster_size = Math.random() * 150;
} }
let cloud = get_cloud(i); let cloud = get_cloud(i);
cloud.style.top = `${cluster_x - cluster_size / 2 + Math.random() * cluster_size}px`; cloud.style.left = `${cluster_x - max_cloud_size / 2 + Math.random() * cluster_size}px`;
cloud.style.left = `${cluster_y - cluster_size / 2 + Math.random() * cluster_size}px`; cloud.style.top = `${cluster_y - max_cloud_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 step = function () {
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);
if (cloud_index > 1) {
let cloud = get_cloud(cloud_index);
let x = parseInt(cloud.style.left), y = parseInt(cloud.style.top);
x -= (Math.random() * max_speed_x - max_speed_x); let cloud = get_cloud(cloud_index);
y -= (Math.random() * max_speed_y - max_speed_y); let x = parseInt(cloud.style.left),
if (x > width && y > height) { y = parseInt(cloud.style.top);
x += (Math.random() - Math.random()) * max_speed_x;
y += (Math.random() - Math.random()) * max_speed_y;
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;
@ -87,16 +82,19 @@ 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`; // let green_shift = Math.random() * 250;
//create radial gradient from orange to purple
cloud.style.background = create_gradient(size, cloud.id);
} else { } else {
cloud.style.transition = "left 5s, top 5s"; cloud.style.transition = "left 10s, top 10s";
cloud.style.left = `${x}px`; cloud.style.left = `${x}px`;
cloud.style.top = `${y}px`; cloud.style.top = `${y}px`;
} }
@ -104,12 +102,30 @@ import '../css/app.css';
requestAnimationFrame(step); requestAnimationFrame(step);
}; };
let create_gradient = function (size) {
const c1 = [247, 204, 71];
const c2 = [223, 28, 36];
const c3 = [75, 16, 142];
const shift = Math.random() * 2;
let r, g, b;
if (shift < 1) {
r = c1[0] + (c2[0] - c1[0]) * shift;
g = c1[1] + (c2[1] - c1[1]) * shift;
b = c1[2] + (c2[2] - c1[2]) * shift;
} else {
r = c2[0] + (c3[0] - c2[0]) * (shift - 1);
g = c2[1] + (c3[1] - c2[1]) * (shift - 1);
b = c2[2] + (c3[2] - c2[2]) * (shift - 1);
}
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(`cloud-${index}`); return document.getElementById(`${index}`);
} };
create_clouds(); create_clouds();
arrange_clouds(); arrange_clouds();
requestAnimationFrame(step); requestAnimationFrame(step);
})() })();