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

Rename test.html to demo.html

Browse source
This commit is contained in:
He4eT 2024-08-15 04:48:14 +02:00
commit da25d7a819
2 changed files with 18 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

18
pages/demo/demo.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TV off</title>
<style>
body, html {
margin: 0;
padding: 0;
background: gray;
}
</style>
</head>
<body>
<script src="../../content_scripts/milje.js"></script>
</body>
</html>

145
test.html
View file

@ -1,145 +0,0 @@
<!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 halfPatternSize = 16
const gridSize = 3
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>