40 lines
1.2 KiB
JavaScript
40 lines
1.2 KiB
JavaScript
const sketch = p => {
|
|
const backgroundColor = p.color(255);
|
|
const gridColor = p.color(180);
|
|
|
|
p.setup = () => {
|
|
const sketchContainer = document.querySelector('#sketch');
|
|
const canvasWidth = parseFloat(getComputedStyle(sketchContainer).width);
|
|
let canvas = p.createCanvas(canvasWidth, canvasWidth);
|
|
canvas.canvas.removeAttribute('style');
|
|
sketchContainer.appendChild(canvas.canvas);
|
|
|
|
p.pixelDensity(p.displayDensity());
|
|
p.angleMode(p.DEGREES);
|
|
};
|
|
|
|
p.draw = () => {
|
|
p.background(backgroundColor);
|
|
p.strokeWeight(1 / p.displayDensity());
|
|
p.stroke(gridColor);
|
|
|
|
const canvasHeight = p.height;
|
|
const canvasBase = canvasHeight * p.tan(30);
|
|
const gridHeight = p.height / 16.0;
|
|
const skip = 2 * gridHeight * p.tan(30);
|
|
|
|
for (let i = gridHeight; i < canvasHeight; i += gridHeight) {
|
|
p.line(0, i, p.width, i);
|
|
}
|
|
|
|
for (let b = -p.width; b < p.width; b += skip) {
|
|
p.line(b, 0, b + canvasBase, p.height);
|
|
}
|
|
|
|
for (let b = -p.width; b < p.width; b += skip) {
|
|
p.line(b, p.height, b + canvasBase, 0);
|
|
}
|
|
};
|
|
};
|
|
|
|
new p5(sketch, 'sketch');
|