s452639/psi
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

grid class

Browse Source
This commit is contained in:
Marcin Czerniak 2021-03-07 21:33:32 +01:00
parent ec9950c094
commit 85f056394f
5 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
# Hide node dependencies directory
node_modules

44
src/grid.js Normal file
View File

@ -0,0 +1,44 @@
const Grid = function(canvas) {
let grid = [[]];
let ctx;
this.setCanvasSize = (canvas) => {
canvas.width = 2000;
canvas.height = 900;
}
this.processGrid = () => {
const fact = (a, value = 1) => Array(a).fill(value, 0, a);
const cartesian = (arr1, arr2) => arr1.map(a => (a && arr2) || fact(arr2.length, 0));
this.grid = cartesian(
[...fact(6), 0, ...fact(6), 0, ...fact(6)],
[...fact(1), 0, ...fact(2), 0, ...fact(2), 0, ...fact(1)]
);
}
this.drawGrid = () => {
for (let [x, line] of this.grid.entries()) {
for (let [y, shouldRender] of line.entries()) {
if (shouldRender) {
this.neonRect(x * 100, y * 100, 100, 100);
}
}
}
}
this.neonRect = (x, y, w, h) => {
this.ctx.globalCompositeOperation = 'lighter';
this.ctx.shadowColor = "#fff";
this.ctx.shadowBlur = 10;
this.ctx.strokeStyle= "#fff";
this.ctx.lineWidth = 5;
this.ctx.strokeRect(x, y, w, h);
}
this.ctx = canvas.getContext('2d');
this.setCanvasSize(canvas);
this.processGrid();
this.drawGrid();
}

19
src/index.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="grid.js"></script>
<script src="main.js"></script>
<title>Document</title>
</head>
<body>
<canvas id="canvas-grid"></canvas>
</body>
</html>

4
src/main.js Normal file
View File

@ -0,0 +1,4 @@
window.addEventListener('DOMContentLoaded', () => {
const gridCanvas = document.getElementById('canvas-grid');
const grid = new Grid(gridCanvas);
});

0
src/styles.css Normal file
View File