brooke/blocky-6502
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
Brooke Vibber 2023-07-02 20:58:19 -07:00
parent eca94231f5
commit 8172650c8f
2 changed files with 42 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
generate.sh
View file

@ -1,6 +1,6 @@
ffmpeg \
-i llamigos-orig.webm \
-vf format=yuv444p,scale=80:150,setsar=1 \
-vf format=yuv444p,scale=80:150,pad=h=160:y=5,setsar=1 \
-an \
-vcodec libvpx-vp9 \
-row-mt 1 \

65
index.html
View file

@ -6,7 +6,7 @@
<style type="text/css">
.stretchy {
width:267px;
height: 150px;
height: 160px;
object-fit: fill;
image-rendering: pixelated;
}
@ -22,33 +22,31 @@
<h2>Work canvas</h2>
<div>
<canvas id="work" width="80" height="150" class="stretchy"></canvas>
<canvas id="work" width="80" height="160" class="stretchy"></canvas>
</div>
<script type="text/javascript">
let width = 80;
let height = 150;
let height = 160;
let blockWidth = 2;
let blockHeight = 8;
let widthBlocks = width / blockWidth;
let heightBlocks = height / blockHeight;
function fromSRGB(val) {
val /= 255;
if (val <= 0.04045) {
val /= 12.92;
} else {
val = ((val + 0.055) / 1.055) ** 2.4;
return val / 12.92;
}
val *= 255;
return val;
return ((val + 0.055) / 1.055) ** 2.4;
}
function toSRGB(val) {
val /= 255;
if (val <= 0.0031308) {
val *= 12.92;
} else {
val = (val * 1.055) ** (1.0 / 2.4) - 0.055;
return val * 12.92;
}
val *= 255;
return Math.round(val);
return (val * 1.055) ** (1.0 / 2.4) - 0.055;
}
function luma(r, g, b) {
@ -57,23 +55,42 @@
function update() {
let ctx = work.getContext('2d');
let pixels = new Uint8Array(width * height);
// Extract the luma
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 i = y * width + x;
let r = fromSRGB(data[i]);
let g = fromSRGB(data[i + 1]);
let b = fromSRGB(data[i + 2]);
let r = fromSRGB(data[i * 4] / 255);
let g = fromSRGB(data[i * 4 + 1] / 255);
let b = fromSRGB(data[i * 4 + 2] / 255);
let gray = luma(r, g, b);
let gray16 = Math.round(gray / 15) * 15;
let grayLinear = luma(r, g, b);
let gray = toSRGB(grayLinear);
let gray16 = Math.round(gray * 15);
pixels[i] = gray16;
}
}
data[i] = toSRGB(gray16);
data[i + 1] = toSRGB(gray16);
data[i + 2] = toSRGB(gray16);
let blocks = [];
for (let y = 0; y < height / blockHeight; y++) {
for (let x = 0; x < width / blockWidth; x++) {
let i = y * (width / blockWidth) + x;
}
}
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
let i = y * width + x;
let gray16 = pixels[i];
let gray256 = Math.round(gray16 * 255 / 15);
data[i * 4] = gray256;
data[i * 4 + 1] = gray256;
data[i * 4 + 2] = gray256;
}
}
ctx.putImageData(bits, 0, 0);