mirror of
https://github.com/He4eT/browser-milje-2077.git
synced 2026-05-04 17:07:24 +00:00
145 lines
4.9 KiB
HTML
145 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Salfetka</title>
|
|
<style>
|
|
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: gray;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
/* LCG using GCC's constants */
|
|
|
|
// https://en.wikipedia.org/wiki/Linear_congruential_generator
|
|
const LCG = (seed) => {
|
|
let state = seed
|
|
const m = 0x80000000 // 2**31
|
|
const a = 1103515245
|
|
const c = 12345
|
|
|
|
return () => {
|
|
state = (a * state + c) % m
|
|
return state / (m - 1)
|
|
}
|
|
}
|
|
|
|
/* Pattern generation */
|
|
|
|
const generatePattern = (halfPatternSize, gridSize, randomSeed) => {
|
|
const random = LCG(randomSeed)
|
|
const matrix = Array(halfPatternSize * 2).fill(null)
|
|
.map(() => Array(halfPatternSize * 2).fill(0))
|
|
|
|
const put = (x, y, value) => {
|
|
const last = halfPatternSize * 2 - 1
|
|
matrix[x][y] = value
|
|
matrix[y][x] = value
|
|
|
|
matrix[x][last - y] = value
|
|
matrix[last - y][x] = value
|
|
|
|
matrix[last - x][y] = value
|
|
matrix[y][last - x] = value
|
|
|
|
matrix[last - y][last - x] = value
|
|
matrix[last - x][last - y] = value
|
|
}
|
|
|
|
for (let i = 0; i < halfPatternSize; i++) {
|
|
for (let j = 0; j < halfPatternSize; j++) {
|
|
if ((i % gridSize === 0) || (j % gridSize === 0)) {
|
|
put(i, j, 1)
|
|
} else {
|
|
put(i, j, Number(random() > 0.5))
|
|
}
|
|
}
|
|
}
|
|
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
|
|
function scaleImageData(imageData, scale, ctx) {
|
|
const scaled = ctx.createImageData(imageData.width * scale, imageData.height * scale)
|
|
const subLine = ctx.createImageData(scale, 1).data
|
|
for (let row = 0; row < imageData.height; row++) {
|
|
for (let col = 0; col < imageData.width; col++) {
|
|
const sourcePixel = imageData.data.subarray(
|
|
(row * imageData.width + col) * 4,
|
|
(row * imageData.width + col) * 4 + 4)
|
|
for (let x = 0; x < scale; x++) {
|
|
subLine.set(sourcePixel, x * 4)
|
|
}
|
|
for (let y = 0; y < scale; y++) {
|
|
const destRow = row * scale + y
|
|
const destCol = col * scale
|
|
scaled.data.set(subLine, (destRow * scaled.width + destCol) * 4)
|
|
}
|
|
}
|
|
}
|
|
|
|
return scaled
|
|
}
|
|
|
|
const matrixToCanvas = (matrix, halfPatternSize, scaleFactor) => {
|
|
const flatMatrix = matrix.flat()
|
|
const canvasSize = halfPatternSize * 2
|
|
|
|
const canvas = getCanvas(canvasSize * scaleFactor)
|
|
const ctx = canvas.getContext('2d')
|
|
|
|
const imageData = ctx.createImageData(canvasSize, canvasSize)
|
|
for (let i = 0; i < flatMatrix.length; i++) {
|
|
const value = flatMatrix[i] * 255
|
|
const index = i * 4
|
|
imageData.data[index + 0] = value // Red
|
|
imageData.data[index + 1] = value // Green
|
|
imageData.data[index + 2] = value // Blue
|
|
imageData.data[index + 3] = value ? 255 : 0 // Alpha
|
|
}
|
|
|
|
const scaledImageData = scaleImageData(imageData, scaleFactor, ctx)
|
|
ctx.putImageData(scaledImageData, 0, 0)
|
|
|
|
return canvas
|
|
}
|
|
|
|
/* Main */
|
|
|
|
const gridSize = 3
|
|
const halfPatternSize = 16
|
|
const scaleFactor = 16
|
|
const randomSeed = new Date()
|
|
|
|
const pattern = generatePattern(halfPatternSize, gridSize, randomSeed)
|
|
const miljeCanvas = matrixToCanvas(pattern, halfPatternSize, scaleFactor)
|
|
|
|
document.body.appendChild(miljeCanvas)
|
|
</script>
|
|
</body>
|
|
</html>
|