Skip to content

Instantly share code, notes, and snippets.

@sunpig sunpig/plate6.html
Created Oct 24, 2017

Embed
What would you like to do?
<!doctype html>
<html>
<body>
<h1>Plate 6</h1>
<canvas id="plate6" style="border:1px solid black"></canvas>
<script>
(function(){
function setNewGrey (ctx) {
grey = Math.floor(150 + (Math.random() * 75));
ctx.strokeStyle = `rgba(${grey}, ${grey}, ${grey}, 1)`;
}
function drawDiagonal1 (ctx, i, j, boxSize) {
ctx.beginPath();
ctx.moveTo(i*boxSize, j*boxSize);
ctx.lineTo((i+1)*boxSize, (j+1)*boxSize);
ctx.stroke();
}
function drawDiagonal2 (ctx, i, j, boxSize) {
ctx.beginPath();
ctx.moveTo((i+1)*boxSize, j*boxSize);
ctx.lineTo(i*boxSize, (j+1)*boxSize);
ctx.stroke();
}
function drawDiagonal3 (ctx, i, j, boxSize) {
drawDiagonal1(ctx, i, j, boxSize);
drawDiagonal2(ctx, i, j, boxSize);
}
const rgbWhite = 'rgba(255, 255, 255, 1)';
const boxSize = 20;
const canvasSize = boxSize * 22;
const plate6 = document.getElementById('plate6');
const ctx = plate6.getContext('2d');
plate6.width = canvasSize;
plate6.height = canvasSize;
draw = function(ctx) {
ctx.fillStyle = rgbWhite;
ctx.fillRect(0, 0, canvasSize, canvasSize);
// Draw boxes
ctx.lineWidth = 1;
// Crisp line widths: https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540
setNewGrey(ctx);
ctx.strokeRect(
boxSize + 0.5,
boxSize + 0.5,
boxSize * 20,
boxSize * 20,
);
for (let i=1; i<20; i++) {
setNewGrey(ctx);
ctx.strokeRect(
boxSize + 0.5,
boxSize * (1 + i) + 0.5,
boxSize * 20,
0
);
setNewGrey(ctx);
ctx.strokeRect(
boxSize * (1 + i) + 0.5,
boxSize + 0.5,
0,
boxSize * 20
);
}
ctx.drawBoxContents = function() {
ctx.moveTo(boxSize * i)
ctx.strokeRect(
boxSize + 0.5,
boxSize * (1 + i) + 0.5,
boxSize * 20,
0
);
}
let lastStyle;
for (let i=1; i<21; i++) {
for (let j=1; j<21; j++) {
setNewGrey(ctx);
let style = Math.floor(Math.random() * 4);
// Build in an element of repetition
if (Math.random() < 0.5) {
style = lastStyle;
}
if (style == 1) {
drawDiagonal1(ctx, i, j, boxSize);
} else if (style == 2) {
drawDiagonal2(ctx, i, j, boxSize);
} else if (style == 3) {
drawDiagonal3(ctx, i, j, boxSize);
}
lastStyle = style;
}
}
}
draw(ctx);
plate6.addEventListener('click', () => draw(ctx));
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.