Apple-2-SW/vnIIc
1
0
Fork 0
mirror of https://github.com/a2stuff/vnIIc.git synced 2024-09-27 00:55:25 +00:00
Code Issues Projects Releases Wiki Activity

add dither control

Browse Source
This commit is contained in:
Joshua Bell 2018-10-28 14:10:50 -07:00
parent 45302cc3a0
commit 3e2b6d5d1f
2 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@ -1,15 +1,26 @@
<!doctype html> <!doctype html>
<title>vnIIc</title> <title>vnIIc</title>
<link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet"> <link rel=icon hres="res/icon128.png">
<link rel=stylesheet href="https://fonts.googleapis.com/css?family=Audiowide">
<style> <style>
video, canvas { border: 2px dotted black; }
h1, h2, h3 { font-family: Audiowide; } h1, h2, h3 { font-family: Audiowide; }
h1 { font-size: 64px; margin: 0;} h1 { font-size: 64px; margin: 0;}
h2 { margin-bottom: 4px; }
p { margin-top: 4px; }
#quant { border: 8px gray ridge; padding: 10px; background-color: #202020; }
#title { background-color: #d0d0d0; height: 128px; margin: 20px 0; padding: 10px; } #title { background-color: #d0d0d0; height: 128px; margin: 20px 0; padding: 10px; }
body { font-family: sans-serif; margin: 0 20px;} body {
font-family: sans-serif;
margin: 0 auto;
width: 600px;
}
section { font-size: 80%; }
</style> </style>
<div id=title> <div id=title>
@ -27,11 +38,13 @@ Desktop streaming to an Apple II with Super Serial Card
<button id=start>Start Capturing</button> <button id=start>Start Capturing</button>
<button id=save>Save</button> <button id=save>Save</button>
<button id=bootstrap>Bootstrap</button> <button id=bootstrap>Bootstrap</button>
<input id=dither type=range min=0 max=100 value=90>
</div> </div>
<script src="server.js"></script> <script src="server.js"></script>
<section id=about>
<h2>About vnIIc</h2> <h2>About vnIIc</h2>
<p> <p>
The name "vnIIc" is a play on <a target=_blank The name "vnIIc" is a play on <a target=_blank
@ -56,4 +69,5 @@ Schmenk, David Schmidt and the rest of the <a target=_blank
href="https://groups.google.com/forum/#!forum/comp.sys.apple2.programmer">comp.sys.apple2.programmer</a> href="https://groups.google.com/forum/#!forum/comp.sys.apple2.programmer">comp.sys.apple2.programmer</a>
gang! gang!
</p> </p>
</section>
</div> </div>

26
server.js
View File

@ -1,5 +1,7 @@
const $ = document.querySelector.bind(document); const $ = document.querySelector.bind(document);
let dither_factor = 0.9;
const palette = [ const palette = [
/* Black1 */ [0x00, 0x00, 0x00], /* Black1 */ [0x00, 0x00, 0x00],
/* Green */ [0x2f, 0xbc, 0x1a], /* Green */ [0x2f, 0xbc, 0x1a],
@ -11,6 +13,11 @@ const palette = [
/* White2 */ [0xff, 0xff, 0xff] /* White2 */ [0xff, 0xff, 0xff]
]; ];
$('#dither').addEventListener('input', e => {
const input = e.target;
dither_factor = (input.value - input.min) / (input.max - input.min);
});
let hires_buffer = new Uint8Array(8192); let hires_buffer = new Uint8Array(8192);
// Save the last captured frame as a hires image file. // Save the last captured frame as a hires image file.
@ -26,7 +33,10 @@ $('#save').addEventListener('click', e => {
}); });
// Start capturing the desktop. // Start capturing the desktop.
let interval_id;
$('#start').addEventListener('click', async e => { $('#start').addEventListener('click', async e => {
clearInterval(interval_id);
try { try {
const mediaStream = await navigator.getDisplayMedia({video:true}); const mediaStream = await navigator.getDisplayMedia({video:true});
const vid = document.createElement('video'); const vid = document.createElement('video');
@ -44,7 +54,7 @@ $('#start').addEventListener('click', async e => {
const indexes = new Array(can.width * can.height); const indexes = new Array(can.width * can.height);
setInterval(() => { interval_id = setInterval(() => {
ctx.drawImage(vid, 0, 0, can.width, can.height); ctx.drawImage(vid, 0, 0, can.width, can.height);
const imagedata = ctx.getImageData(0, 0, can.width, can.height); const imagedata = ctx.getImageData(0, 0, can.width, can.height);
@ -57,7 +67,7 @@ $('#start').addEventListener('click', async e => {
}, 500); }, 500);
} catch (e) { } catch (e) {
console.warn(`Error: ${e.name} - ${e.message}`); alert('getDisplayMedia support or access denied');
} }
}); });
@ -119,9 +129,15 @@ function quantize(imagedata, indexes) {
const pi = palette[index]; const pi = palette[index];
// Calculate error // Calculate error
const err_r = data[i] - pi[0]; let err_r = (data[i] - pi[0]);
const err_g = data[i+1] - pi[1]; let err_g = (data[i+1] - pi[1]);
const err_b = data[i+2] - pi[2]; let err_b = (data[i+2] - pi[2]);
// Arbitrary damping factor to reduce noise at the cost of
// fidelity.
err_r *= dither_factor;
err_g *= dither_factor;
err_b *= dither_factor;
// Update pixel // Update pixel
data[i] = pi[0]; data[i] = pi[0];