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