Created
October 24, 2017 16:52
-
-
Save sunpig/a881cb9e0217ea99f82940a47fb9afd6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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