initial commit
This commit is contained in:
Sander Hautvast
commit
019c292efc
9 changed files with 5930 additions and 0 deletions
18
.eslintrc.js
Normal file
18
.eslintrc.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
module.exports = {
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es6": true
|
||||
},
|
||||
"extends": "eslint:recommended",
|
||||
"globals": {
|
||||
"Atomics": "readonly",
|
||||
"SharedArrayBuffer": "readonly"
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2018,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }]
|
||||
}
|
||||
};
|
||||
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.idea/
|
||||
*.iml
|
||||
.DS_Store
|
||||
dist/
|
||||
node_modules/
|
||||
1
README.md
Normal file
1
README.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
tear up the red sky
|
||||
5696
package-lock.json
generated
Normal file
5696
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
33
package.json
Normal file
33
package.json
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"name": "rothkomaker",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"private": "true",
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"watch": "webpack --watch",
|
||||
"start": "webpack serve --open --host 0.0.0.0 --port 8080"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/shautvast/matrepl.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/shautvast/matrepl/issues"
|
||||
},
|
||||
"homepage": "https://github.com/shautvast/matrepl#readme",
|
||||
"devDependencies": {
|
||||
"css-loader": "^5.0.2",
|
||||
"eslint": "^7.20.0",
|
||||
"eslint-loader": "^4.0.2",
|
||||
"eslint-plugin-cypress": "^2.11.2",
|
||||
"file-loader": "^6.2.0",
|
||||
"html-webpack-plugin": "^5.2.0",
|
||||
"style-loader": "^2.0.0",
|
||||
"webpack": "^5.22.0",
|
||||
"webpack-cli": "^4.5.0",
|
||||
"webpack-dev-server": "^3.11.2"
|
||||
}
|
||||
}
|
||||
14
src/css/app.css
Normal file
14
src/css/app.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
body {
|
||||
background: #ff8f00;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#sky {
|
||||
/*background: red;*/
|
||||
background: #ff8f00;
|
||||
}
|
||||
|
||||
.cloud {
|
||||
position: absolute;
|
||||
background-size: 25px;
|
||||
}
|
||||
13
src/index.html
Normal file
13
src/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8">
|
||||
<title>RothkoMaker</title>
|
||||
</head>
|
||||
<body>
|
||||
<pre><code id="code"></code></pre>
|
||||
<!--<a class="right" href="https://github.com/shautvast/" target="_blank">https://github.com/shautvast</a>-->
|
||||
<div id="sky"></div>
|
||||
</body>
|
||||
</html>
|
||||
99
src/js/index.js
Normal file
99
src/js/index.js
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import '../css/app.css';
|
||||
|
||||
(function () {
|
||||
const num_clouds = 100,
|
||||
max_cloud_size = 500,
|
||||
max_speed_x = 50,
|
||||
max_speed_y = 30,
|
||||
num_clusters = 4;
|
||||
let cluster_x, cluster_y, cluster_size, cloud_counter;
|
||||
|
||||
|
||||
const sky = document.getElementById("sky");
|
||||
sky.onclick = () => {
|
||||
sky.requestFullscreen().then();
|
||||
};
|
||||
|
||||
let width = window.outerWidth,
|
||||
height = window.outerHeight;
|
||||
|
||||
window.onresize = () => {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
};
|
||||
|
||||
let create_clouds = function () {
|
||||
for (let i = 0; i < num_clouds; i++) {
|
||||
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`;
|
||||
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.setAttribute("size", `${size}`);
|
||||
sky.appendChild(newCloud);
|
||||
}
|
||||
}
|
||||
|
||||
let arrange_clouds = function () {
|
||||
let num_clouds_in_cluster = (Math.floor(num_clouds / num_clusters));
|
||||
for (let i = 0; i < num_clouds; i++) {
|
||||
if (i % num_clouds_in_cluster === 0) {
|
||||
cluster_x = Math.random() * width;
|
||||
cluster_y = Math.random() * height;
|
||||
cluster_size = 40;
|
||||
}
|
||||
|
||||
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 - max_speed_x);
|
||||
y -= (Math.random() * max_speed_y - 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);
|
||||
})()
|
||||
51
webpack.config.js
Normal file
51
webpack.config.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
const path = require('path');
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
|
||||
module.exports = {
|
||||
mode: 'development',
|
||||
entry: './src/js/index.js',
|
||||
|
||||
output: {
|
||||
filename: 'bundle.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'eslint-loader',
|
||||
options: {
|
||||
emitError: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(png|svg|jpg|gif)$/,
|
||||
use: [
|
||||
'file-loader',
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(woff|woff2|eot|ttf|otf)$/,
|
||||
use: [
|
||||
'file-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
hash: true,
|
||||
template: './src/index.html',
|
||||
filename: 'index.html'
|
||||
})
|
||||
]
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue