blocky-6502/index.html
2023-06-28 15:52:09 -07:00

97 lines
No EOL
2.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Block video encoding test</title>
<style type="text/css">
.stretchy {
width:267px;
height: 150px;
object-fit: fill;
image-rendering: pixelated;
}
</style>
</head>
<body>
<h1>Block video encoding test</h1>
<h2>Source video</h2>
<div>
<video id="source" src="llamigos.webm" class="stretchy" muted controls playsinline></video>
</div>
<h2>Work canvas</h2>
<div>
<canvas id="work" width="80" height="150" class="stretchy"></canvas>
</div>
<script type="text/javascript">
let width = 80;
let height = 150;
function fromSRGB(val) {
val /= 255;
if (val <= 0.04045) {
val /= 12.92;
} else {
val = ((val + 0.055) / 1.055) ** 2.4;
}
val *= 255;
return val;
}
function toSRGB(val) {
val /= 255;
if (val <= 0.0031308) {
val *= 12.92;
} else {
val = (val * 1.055) ** (1.0 / 2.4) - 0.055;
}
val *= 255;
return Math.round(val);
}
function luma(r, g, b) {
return r * 0.299 + g * 0.586 + b * 0.114;
}
function update() {
let ctx = work.getContext('2d');
ctx.drawImage(source, 0, 0);
let bits = ctx.getImageData(0, 0, width, height);
let data = bits.data;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
let i = (y * width + x) * 4;
let r = fromSRGB(data[i]);
let g = fromSRGB(data[i + 1]);
let b = fromSRGB(data[i + 2]);
let gray = luma(r, g, b);
let gray16 = Math.round(gray / 15) * 15;
data[i] = toSRGB(gray16);
data[i + 1] = toSRGB(gray16);
data[i + 2] = toSRGB(gray16);
}
}
ctx.putImageData(bits, 0, 0);
}
let timer = null;
source.addEventListener('playing', () => {
if (!timer) {
timer = setInterval(update, 1000 / 24);
}
update();
});
source.addEventListener('pause', () => {
if (timer) {
clearInterval(timer);
timer = null;
}
});
</script>
</body>
</html>