he4et/browser-milje-2077
1
0
Fork 0
mirror of https://github.com/He4eT/browser-milje-2077.git synced 2026-05-04 17:07:24 +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>
<body>
<script>
// LCG using GCC's constants
/* LCG using GCC's constants */
// https://en.wikipedia.org/wiki/Linear_congruential_generator
const LCG = (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 matrix = Array(patternSize * 2).fill(null)
.map(() => Array(patternSize * 2).fill(0))
const matrix = Array(halfPatternSize * 2).fill(null)
.map(() => Array(halfPatternSize * 2).fill(0))
const put = (x, y, value) => {
const last = patternSize * 2 - 1
const last = halfPatternSize * 2 - 1
matrix[x][y] = value
matrix[y][x] = value
@ -48,8 +51,8 @@
matrix[last - x][last - y] = value
}
for (let i = 0; i < patternSize; i++) {
for (let j = 0; j < patternSize; j++) {
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 {
@ -60,6 +63,26 @@
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)
@ -83,52 +106,39 @@
return scaled
}
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
}
const matrixToCanvas = (matrix, size, scaleFactor) => {
const matrixToCanvas = (matrix, halfPatternSize, scaleFactor) => {
const flatMatrix = matrix.flat()
const canvasSize = halfPatternSize * 2
const canvas = getCanvas(size * scaleFactor)
const canvas = getCanvas(canvasSize * scaleFactor)
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++) {
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 (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
}
/* Main */
const gridSize = 3
const patternSize = 16
const halfPatternSize = 16
const scaleFactor = 16
const randomSeed = new Date()
const pattern = generatePattern(patternSize, gridSize, randomSeed)
const miljeCanvas = matrixToCanvas(pattern, patternSize * 2, scaleFactor)
const pattern = generatePattern(halfPatternSize, gridSize, randomSeed)
const miljeCanvas = matrixToCanvas(pattern, halfPatternSize, scaleFactor)
document.body.appendChild(miljeCanvas)
</script>
</body>