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