he4et/browser-milje-2077
1
0
Fork 0
mirror of https://github.com/He4eT/browser-milje-2077.git synced 2026-05-05 01:17:25 +00:00
Code Issues Projects Releases Packages Wiki Activity

test.html: naming

Browse source
This commit is contained in:
He4eT 2024-08-15 01:39:21 +02:00
commit d3501cc361
1 changed files with 44 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

78
test.html
View file

@ -14,7 +14,8 @@
</head> </head>
<body> <body>
<script> <script>
// LCG using GCC's constants /* LCG using GCC's constants */
// https://en.wikipedia.org/wiki/Linear_congruential_generator // https://en.wikipedia.org/wiki/Linear_congruential_generator
const LCG = (seed) => { const LCG = (seed) => {
let state = seed let state = seed
@ -28,13 +29,15 @@
} }
} }
const generatePattern = (patternSize, gridSize, randomSeed) => { /* Pattern generation */
const generatePattern = (halfPatternSize, gridSize, randomSeed) => {
const random = LCG(randomSeed) const random = LCG(randomSeed)
const matrix = Array(patternSize * 2).fill(null) const matrix = Array(halfPatternSize * 2).fill(null)
.map(() => Array(patternSize * 2).fill(0)) .map(() => Array(halfPatternSize * 2).fill(0))
const put = (x, y, value) => { const put = (x, y, value) => {
const last = patternSize * 2 - 1 const last = halfPatternSize * 2 - 1
matrix[x][y] = value matrix[x][y] = value
matrix[y][x] = value matrix[y][x] = value
@ -48,8 +51,8 @@
matrix[last - x][last - y] = value matrix[last - x][last - y] = value
} }
for (let i = 0; i < patternSize; i++) { for (let i = 0; i < halfPatternSize; i++) {
for (let j = 0; j < patternSize; j++) { for (let j = 0; j < halfPatternSize; j++) {
if ((i % gridSize === 0) || (j % gridSize === 0)) { if ((i % gridSize === 0) || (j % gridSize === 0)) {
put(i, j, 1) put(i, j, 1)
} else { } else {
@ -60,6 +63,26 @@
return matrix return matrix
} }
/* Canvas */
const getCanvas = (size) => {
const canvas = document.createElement('canvas')
canvas.width = size
canvas.height = size
Object.entries({
'position': 'fixed',
'top': '0%',
'left': '50%',
'margin': '0 auto',
'transform': 'translateY(-50%) translateX(-50%) rotate(45deg)',
'filter': 'drop-shadow(0px 0px 10px rgba(60,60,60,0.5))',
'zIndex': '9999',
}).forEach(([key, value]) => { canvas.style[key] = value })
return canvas
}
// https://stackoverflow.com/questions/3448347/how-to-scale-an-imagedata-in-html-canvas // https://stackoverflow.com/questions/3448347/how-to-scale-an-imagedata-in-html-canvas
function scaleImageData(imageData, scale, ctx) { function scaleImageData(imageData, scale, ctx) {
const scaled = ctx.createImageData(imageData.width * scale, imageData.height * scale) const scaled = ctx.createImageData(imageData.width * scale, imageData.height * scale)
@ -83,52 +106,39 @@
return scaled return scaled
} }
const getCanvas = (size) => { const matrixToCanvas = (matrix, halfPatternSize, scaleFactor) => {
const canvas = document.createElement('canvas')
canvas.width = size
canvas.height = size
Object.entries({
'position': 'fixed',
'top': '0%',
'left': '50%',
'margin': '0 auto',
'transform': 'translateY(-50%) translateX(-50%) rotate(45deg)',
'filter': 'drop-shadow(0px 0px 10px rgba(60,60,60,0.5))',
'zIndex': '9999',
}).forEach(([key, value]) => { canvas.style[key] = value })
return canvas
}
const matrixToCanvas = (matrix, size, scaleFactor) => {
const flatMatrix = matrix.flat() const flatMatrix = matrix.flat()
const canvasSize = halfPatternSize * 2
const canvas = getCanvas(size * scaleFactor) const canvas = getCanvas(canvasSize * scaleFactor)
const ctx = canvas.getContext('2d') const ctx = canvas.getContext('2d')
const imageData = ctx.createImageData(size, size)
const imageData = ctx.createImageData(canvasSize, canvasSize)
for (let i = 0; i < flatMatrix.length; i++) { for (let i = 0; i < flatMatrix.length; i++) {
const value = flatMatrix[i] * 255 const value = flatMatrix[i] * 255
const index = i * 4 const index = i * 4
imageData.data[index + 0] = value // Red imageData.data[index + 0] = value // Red
imageData.data[index + 1] = value // Green imageData.data[index + 1] = value // Green
imageData.data[index + 2] = value // Blue imageData.data[index + 2] = value // Blue
imageData.data[index + 3] = value ? 255 : 0 // Alpha (fully opaque) imageData.data[index + 3] = value ? 255 : 0 // Alpha
} }
ctx.putImageData(scaleImageData(imageData, scaleFactor, ctx), 0, 0)
const scaledImageData = scaleImageData(imageData, scaleFactor, ctx)
ctx.putImageData(scaledImageData, 0, 0)
return canvas return canvas
} }
/* Main */
const gridSize = 3 const gridSize = 3
const patternSize = 16 const halfPatternSize = 16
const scaleFactor = 16 const scaleFactor = 16
const randomSeed = new Date() const randomSeed = new Date()
const pattern = generatePattern(patternSize, gridSize, randomSeed) const pattern = generatePattern(halfPatternSize, gridSize, randomSeed)
const miljeCanvas = matrixToCanvas(pattern, patternSize * 2, scaleFactor) const miljeCanvas = matrixToCanvas(pattern, halfPatternSize, scaleFactor)
document.body.appendChild(miljeCanvas) document.body.appendChild(miljeCanvas)
</script> </script>
</body> </body>