Skip to content

Instantly share code, notes, and snippets.

@balaam

balaam/Terrible way to do apple ii glyphs

Last active September 16, 2022 14:59
Show Gist options
  • Save balaam/b03ee6ee46aaad3d0f65fd46a12ce129 to your computer and use it in GitHub Desktop.
Save balaam/b03ee6ee46aaad3d0f65fd46a12ce129 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Terrible way to do apple ii glyphs
<!DOCTYPE html>
<html>
<head>
<script>
glyphs = [
[], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], [], // padding
[0, 0, 0, 0, 0, 0, 0, 0], // , 32
[8, 8, 8, 8, 8, 0, 8, 0], // !, 33
[20, 20, 20, 0, 0, 0, 0, 0], // ", 34
[20, 20, 62, 20, 62, 20, 20, 0], // #, 35
[8, 30, 40, 28, 10, 60, 8, 0], // $, 36
[48, 50, 4, 8, 16, 38, 6, 0], // ', 37
[16, 40, 40, 16, 42, 36, 26, 0], // &, 38
[8, 8, 8, 0, 0, 0, 0, 0], // ', 39
[8, 16, 32, 32, 32, 16, 8, 0], // (, 40
[8, 4, 2, 2, 2, 4, 8, 0], // ), 41
[8, 42, 28, 8, 28, 42, 8, 0], // *, 42
[0, 8, 8, 62, 8, 8, 0, 0], // +, 43
[0, 0, 0, 0, 8, 8, 16, 0], // ,, 44
[0, 0, 0, 62, 0, 0, 0, 0], // -, 45
[0, 0, 0, 0, 0, 0, 8, 0], // ., 46
[0, 2, 4, 8, 16, 32, 0, 0], // /, 47
[28, 34, 38, 42, 50, 34, 28, 0], // 0, 48
[8, 24, 8, 8, 8, 8, 28, 0], // 1, 49
[28, 34, 2, 12, 16, 32, 62, 0], // 2, 50
[62, 2, 4, 12, 2, 34, 28, 0], // 3, 51
[4, 12, 20, 36, 62, 4, 4, 0], // 4, 52
[62, 32, 60, 2, 2, 34, 28, 0], // 5, 53
[14, 16, 32, 60, 34, 34, 28, 0], // 6, 54
[62, 2, 4, 8, 16, 16, 16, 0], // 7, 55
[28, 34, 34, 28, 34, 34, 28, 0], // 8, 56
[28, 34, 34, 30, 2, 4, 56, 0], // 9, 57
[0, 0, 8, 0, 8, 0, 0, 0], // :, 58
[0, 0, 8, 0, 8, 8, 16, 0], // ;, 59
[4, 8, 16, 32, 16, 8, 4, 0], // <, 60
[0, 0, 62, 0, 62, 0, 0, 0], // =, 61
[16, 8, 4, 2, 4, 8, 16, 0], // >, 62
[28, 34, 4, 8, 8, 0, 8, 0], // ?, 63
[28, 34, 42, 46, 44, 32, 30, 0], // @, 64
[8, 20, 34, 34, 62, 34, 34, 0], // A, 65
[60, 34, 34, 60, 34, 34, 60, 0], // B, 66
[28, 34, 32, 32, 32, 34, 28, 0], // C, 67
[60, 34, 34, 34, 34, 34, 60, 0], // D, 68
[62, 32, 32, 60, 32, 32, 62, 0], // E. 69
[62, 32, 32, 60, 32, 32, 32, 0], // F, 70
[30, 32, 32, 32, 38, 34, 30, 0], // G, 71
[34, 34, 34, 62, 34, 34, 34, 0], // H, 72
[28, 8, 8, 8, 8, 8, 28, 0], // I, 73
[2, 2, 2, 2, 2, 34, 28, 0], // J, 74
[34, 36, 40, 48, 40, 36, 34, 0], // K, 75
[32, 32, 32, 32, 32, 32, 62, 0], // L, 76
[34, 54, 42, 42, 34, 34, 34, 0], // M, 77
[34, 34, 50, 42, 38, 34, 34, 0], // N, 78
[28, 34, 34, 34, 34, 34, 28, 0], // O, 79
[60, 34, 34, 60, 32, 32, 32, 0], // P, 80
[28, 34, 34, 34, 42, 36, 26, 0], // Q, 81
[60, 34, 34, 60, 40, 36, 34, 0], // R, 82
[28, 34, 32, 28, 2, 34, 28, 0], // S, 83
[62, 8, 8, 8, 8, 8, 8, 0], // T, 84
[34, 34, 34, 34, 34, 34, 28, 0], // U, 85
[34, 34, 34, 34, 34, 20, 8, 0], // V, 86
[34, 34, 34, 42, 42, 54, 34, 0], // W, 87
[34, 34, 20, 8, 20, 34, 34, 0], // X, 88
[34, 34, 20, 8, 8, 8, 8, 0], // Y, 89
[62, 2, 4, 8, 16, 32, 62, 0], // Z, 90
[62, 48, 48, 48, 48, 48, 62, 0], // [, 91
[0, 32, 16, 8, 4, 2, 0, 0], // \, 92
[0, 62, 6, 6, 6, 6, 6, 62], // ], 93
[0, 0, 0, 8, 20, 34, 0, 0], // ^, 94
[0, 0, 0, 0, 0, 0, 0, 127], // _, 95
[0, 32, 16, 8, 0, 0, 0, 0], // `, 96
[0, 0, 28, 2, 30, 34, 30, 0], // a, 97
[32, 32, 60, 34, 34, 34, 60, 0], // b, 98
[0, 0, 30, 32, 32, 32, 30, 0], // c, 99
[2, 2, 30, 34, 34, 34, 30, 0], // d, 100
[0, 0, 28, 34, 62, 32, 30, 0], // e , 101
[12, 18, 16, 60, 16, 16, 16, 0], // f, 102
[0, 0, 28, 34, 34, 30, 2, 28], // g, 103
[32, 32, 60, 34, 34, 34, 34, 0], // h, 104
[8, 0, 24, 8, 8, 8, 28, 0], // i, 105
[4, 0, 12, 4, 4, 4, 36, 24], // j, 106
[32, 32, 34, 36, 56, 36, 34, 0], // k, 107
[24, 8, 8, 8, 8, 8, 28, 0], // l, 108
[0, 0, 54, 42, 42, 42, 34, 0], // m, 109
[0, 0, 60, 34, 34, 34, 34, 0], // n, 110
[0, 0, 28, 34, 34, 34, 28, 0], // o, 111
[0, 0, 60, 34, 34, 60, 32, 32], // p, 112
[0, 0, 30, 34, 34, 30, 2, 2], // q, 113
[0, 0, 46, 48, 32, 32, 32, 0], // r, 114
[0, 0, 30, 32, 28, 2, 60, 0], // s, 115
[0, 16, 60, 16, 16, 18, 12, 0], // t, 116
[0, 0, 34, 34, 34, 38, 26, 0], // u, 117
[0, 0, 34, 34, 34, 20, 8, 0], // v, 118
[0, 0, 34, 34, 42, 42, 54, 0], // w, 119
[0, 0, 34, 20, 8, 20, 34, 0], // x, 120
[0, 0, 34, 34, 34, 30, 2, 28], // y, 121
[0, 0, 62, 4, 8, 16, 62, 0], // z, 122
[14, 24, 24, 48, 24, 24, 14, 0], // {, 123
[8, 8, 8, 8, 8, 8, 8, 8], // |, 124
[56, 12, 12, 6, 12, 12, 56, 0], // }, 125
[26, 44, 0, 0, 0, 0, 0, 0], // ~, 126
[0, 42, 20, 42, 20, 42, 0, 0], // Checkboard character, 127, delete
]
var SCALE = 2
var GLYPH_W = 7
function isBitOn(number, index) {
return Boolean(number & (1 << index));
}
function drawGlyph(ctx, x, y, g) {
for(var i = 0; i < g.length; i++) {
for(var j = 0; j < GLYPH_W; j++) {
isBlack = isBitOn(g[i], GLYPH_W-j);
ctx.fillStyle = isBlack? 'black' : 'white';
ctx.fillRect(x + (j*SCALE), y + (i*SCALE), SCALE, SCALE);
}
}
}
function drawString(ctx, x, y, s) {
for (var i = 0; i < s.length; i++) {
drawGlyph(ctx, x + (GLYPH_W*i*SCALE), y, glyphs[s[i].charCodeAt(0)])
}
}
window.onload = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var g = glyphs[96]
var x = 20;
var y = 10;
drawString(ctx, x, y, "Hello World!")
// 7 x 8 - 1 byte per line, 64 bytes per character, 8 ints
document.getElementById('pasteArea').onpaste = function (event) {
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(JSON.stringify(items)); // will give you the mime types
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result); // data url!
document.getElementById("pastedImage").src = event.target.result;
var img = document.getElementById('pastedImage');
ctx.drawImage(img, 0, 0, img.width, img.height);
var glyphAsInt = []
for(var y = 0; y < img.height; y++) {
var binaryStr = []
for (var x = 0; x < img.width; x++) {
var pixelData = canvas.getContext('2d').getImageData(x, y, 1, 1).data;
var isBlack = (pixelData[0] == 0 && pixelData[1] == 0 && pixelData[2] == 0)
isBlack? binaryStr.push('0') : binaryStr.push('1');
}
glyphAsInt.push(parseInt(binaryStr.join(""), 2));
}
var gi = glyphAsInt.join(", ")
document.getElementById("text_output").value += `[${gi}]\n`
};
reader.readAsDataURL(blob);
}
}
}
</script>
</head>
<body>
<p>When the Apple II came out, a new mode had been added for 280×192 high-resolution graphics. 280*2 = 560, 192*2 = 384.</p>
<p>The Apple II font glyphs are 7×8. 14*16</p>
<canvas id="canvas" width="560" height="384" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<textarea id="pasteArea" placeholder="Paste Image Here"></textarea>
<textarea id="text_output"></textarea>
<img id="pastedImage"></img>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment