Initial commit
This commit is contained in:
commit
d632a1009d
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
@ -0,0 +1 @@
|
||||||
|
/node_modules/
|
7086
package-lock.json
generated
Normal file
7086
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
26
package.json
Normal file
26
package.json
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"name": "hex",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"start": "webpack-dev-server",
|
||||||
|
"build": "webpack --config webpack.config.js"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"p5": "^0.8.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"css-loader": "^2.1.1",
|
||||||
|
"html-webpack-plugin": "^3.2.0",
|
||||||
|
"node-sass": "^4.12.0",
|
||||||
|
"sass-loader": "^7.1.0",
|
||||||
|
"style-loader": "^0.23.1",
|
||||||
|
"webpack": "^4.33.0",
|
||||||
|
"webpack-cli": "^3.3.3",
|
||||||
|
"webpack-dev-server": "^3.7.1"
|
||||||
|
}
|
||||||
|
}
|
8
src/index.html
Normal file
8
src/index.html
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html>
|
27
src/index.js
Normal file
27
src/index.js
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
import p5 from 'p5';
|
||||||
|
|
||||||
|
import './index.scss';
|
||||||
|
|
||||||
|
function getRandomColorValue() {
|
||||||
|
return Math.floor(Math.random() * 256);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRandomX() {
|
||||||
|
return Math.floor(Math.random() * window.innerWidth);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRandomY() {
|
||||||
|
return Math.floor(Math.random() * window.innerHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
const instance = new p5(( sketch ) => {
|
||||||
|
sketch.setup = () => {
|
||||||
|
sketch.createCanvas(window.innerWidth, window.innerHeight);
|
||||||
|
};
|
||||||
|
|
||||||
|
sketch.draw = () => {
|
||||||
|
sketch.background(0);
|
||||||
|
sketch.fill(getRandomColorValue());
|
||||||
|
sketch.rect(getRandomX(),getRandomY(),50,50);
|
||||||
|
};
|
||||||
|
});
|
4
src/index.scss
Normal file
4
src/index.scss
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
36
webpack.config.js
Normal file
36
webpack.config.js
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: './src/index.js',
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
filename: 'bundle.js'
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.scss$/,
|
||||||
|
use: [
|
||||||
|
{ loader: "style-loader" },
|
||||||
|
{ loader: "css-loader" },
|
||||||
|
{
|
||||||
|
loader: "sass-loader",
|
||||||
|
options: {
|
||||||
|
includePaths: ["absolute/path/a", "absolute/path/b"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new HtmlWebpackPlugin({ template: './src/index.html' }),
|
||||||
|
],
|
||||||
|
devServer: {
|
||||||
|
contentBase: path.join(__dirname, 'dist'),
|
||||||
|
compress: true,
|
||||||
|
port: 8080,
|
||||||
|
hot: true,
|
||||||
|
}
|
||||||
|
};
|
Loading…
Reference in a new issue