brooke/blocky-6502
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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 \ ffmpeg \
-i llamigos-orig.webm \ -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 \ -an \
-vcodec libvpx-vp9 \ -vcodec libvpx-vp9 \
-row-mt 1 \ -row-mt 1 \

65
index.html
View file

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