Added loading from font files

Split animation base into Gfx

Author: calaldees

book/literacy.md

@@ -16,6 +16,7 @@ https://github.com/calaldees/teacherEducation/blob/acbc846eddf56268305380145fb6e
 Secret Literacy: David Dido (citation)
 
 Paper
+
 explicit
 
 Explain why you should do it one way over another
@@ -37,4 +38,11 @@ Passive voice considered harmful
 
 ---
 
-in Computing Programming language literacy is Computing Literacy - it's the language of computers - do you speak it?
+in Computing Programming language literacy is Computing Literacy - it's the language of computers - do you speak it?
+
+
+    * Data Volumetrics, Permutations
+    * Assignment, selection, iteration, set, dictionary, array, call stack depth, stack, queue, cache invalidation, proxy
+    * Time Complexity, Parallelisation, Race hazard, Overloading of mathematical operators, Order of precedence, Wall Time, Worst case time complexity, 
+
+same as / does the same thing | functionally equivalent

teachprogramming/static/language_reference/languages/javascript/javascript.js

@@ -525,6 +525,10 @@ function sort() {
 
 }
 
+function regex() {
+  // TODO
+}
+
 function assertion() {
   let name = "bob"
   let count = 3
@@ -597,6 +601,7 @@ function main() {
   split_strings();
   random_number();
   sort();
+  regex();
   assertion();
   http_request_json();
   debug();

teachprogramming/static/projects/game/animation_base.js

@@ -1,3 +1,47 @@
+class Gfx {
+    static load_image(url) {return new Promise((resolve, reject)=>{
+        const img = new Image()
+        img.onload = () => resolve(img)
+        img.onerror = (e) => console.error(`image load failed ${url}`, e)
+        img.src = url
+    })}
+    static drawLine(c, x1,y1,x2,y2,color='white',lineWidth=1) {
+        c.strokeStyle = color
+        c.lineWidth = lineWidth
+        c.beginPath()
+        c.moveTo(x1, y1)
+        c.lineTo(x2, y2)
+        c.stroke()
+    }
+    static subsurface(img, x, y, width, height) {
+        // TODO: consider using https://developer.mozilla.org/en-US/docs/Web/API/Window/createImageBitmap
+        const o = new OffscreenCanvas(width, height)
+        const c = o.getContext("2d")
+        c.drawImage(img, -x, -y)
+        return o.transferToImageBitmap()
+    }
+    static invert(img) {
+        const o1 = new OffscreenCanvas(img.width, img.height)
+        const c1 = o1.getContext("2d")
+        // Invert image (but destroys transparency)
+        c1.drawImage(img, 0, 0)
+        c1.globalCompositeOperation='difference'
+        c1.fillStyle='white'
+        c1.fillRect(0, 0, img.width, img.height)
+        // Mask
+        const o2 = new OffscreenCanvas(img.width, img.height)
+        const c2 = o2.getContext('2d')
+        c2.drawImage(img, 0, 0);
+        c2.globalCompositeOperation = 'source-in';
+        c2.fillStyle = 'black';
+        c2.fillRect(0, 0, img.width, img.height);
+        // Cut Mask out of Inverted image
+        c1.globalCompositeOperation = 'destination-in';
+        c1.drawImage(o2, 0, 0);
+        return o1.transferToImageBitmap()
+    }
+}
+
 function createFullScreenCanvasElement({width=480, height=270, background_color='black'}={}) {
     const body_style = `
         margin: 0;
@@ -38,7 +82,7 @@ function createAudioElement() {
     //play_audio = (url) => {this.audio.src = url}
 }
 
-export class CanvasAnimationBase {
+class CanvasAnimationBase {
     constructor(canvas=undefined, fps=60, canvas_attrs={background_color: 'black'}) {
         this.canvas = canvas || createFullScreenCanvasElement(canvas_attrs)
         this.context = this.canvas.getContext('2d', { alpha: true })
@@ -91,20 +135,8 @@ export class CanvasAnimationBase {
         }
     }
 
-    load_image = (name, url) => {
-        let resolve_image_loaded = undefined
-        const promise = new Promise((resolve, reject) => {
-            resolve_image_loaded = resolve
-        })
-        const images = this.images
-        images[name] = new Image()
-        images[name].onload = function() {
-            images[name] = this
-            resolve_image_loaded(this)
-        }
-        images[name].src = url
-        return promise
-    }
+    // TODO! In making this async, many of the earlier examples will not function and need reworking
+    async load_image(name, url) {this.images[name] = await Gfx.load_image(url)}
 
     run = (time) => {
         if (this.keys_pressed.has("Escape")) {this.setRunning(false)}
@@ -125,45 +157,7 @@ export class CanvasAnimationBase {
         throw new Error("Not Implemented Error")
     }
 
-    // Graphics Utils ----------------------------------------------------------
-
-    static drawLine(c, x1,y1,x2,y2,color='white',lineWidth=1) {
-        c.strokeStyle = color
-        c.lineWidth = lineWidth
-        c.beginPath()
-        c.moveTo(x1, y1)
-        c.lineTo(x2, y2)
-        c.stroke()
-    }
-
-    static subsurface(img, x, y, width, height) {
-        const o = new OffscreenCanvas(width, height)
-        const c = o.getContext("2d")
-        c.drawImage(img, -x, -y)
-        return o.transferToImageBitmap()
-    }
-
-    static invert(img) {
-        const o1 = new OffscreenCanvas(img.width, img.height)
-        const c1 = o1.getContext("2d")
-        // Invert image (but destroys transparency)
-        c1.drawImage(img, 0, 0)
-        c1.globalCompositeOperation='difference'
-        c1.fillStyle='white'
-        c1.fillRect(0, 0, img.width, img.height)
-
-        // Mask
-        const o2 = new OffscreenCanvas(img.width, img.height)
-        const c2 = o2.getContext('2d')
-        c2.drawImage(img, 0, 0);
-        c2.globalCompositeOperation = 'source-in';
-        c2.fillStyle = 'black';
-        c2.fillRect(0, 0, img.width, img.height);
+}
 
-        // Cut Mask out of Inverted image
-        c1.globalCompositeOperation = 'destination-in';
-        c1.drawImage(o2, 0, 0);
-        return o1.transferToImageBitmap()
-    }
 
-}
+export {Gfx, CanvasAnimationBase}

teachprogramming/static/projects/game/copter_test.py

@@ -1,4 +1,6 @@
 *.gif
 *.webp
+*.draw
+*.yaff
 animation_base_pygame.py
 animation_base.js

teachprogramming/static/projects/graphics/font/.gitignore

@@ -31,3 +31,10 @@ http.server: animation_base.js
 
 font.webp:
 	curl https://img.damieng.com/fonts/ch8-previews/Pristine.webp -o font.webp
+
+FONT_REPO:=https://raw.githubusercontent.com/robhagemans/hoard-of-bitfonts/refs/heads/master
+amstrad_cpc.draw:
+	curl -O ${FONT_REPO}/amstrad/amstrad_cpc.draw
+	curl -O ${FONT_REPO}/acorn/bbc/bbc_micro.yaff
+	curl -O ${FONT_REPO}/sinclair/zx-spectrum.yaff
+	curl -O ${FONT_REPO}/commodore/c64-c16-c128/c64.yaff

teachprogramming/static/projects/graphics/font/Makefile

@@ -0,0 +1,22 @@
+function* range(target, start=0, step=1) {for (let i=start ; i<target ; i+=step) {yield i}}
+function* enumerate(iterable) {let count = 0; for (let item of iterable) {yield [count++, item]}}
+function all(iterable) {for (let i of iterable) {if (!i) {return false}} return true}
+function* zip(...iterables) {
+    const iterators = [...iterables].map(iterable => iterable[Symbol.iterator]());
+    while (true) {
+        const iterable_items = iterators.map(iterator => iterator.next());
+        if (all(iterable_items.map(i => i.done))) {break;}
+        yield iterable_items.map(i => i.value);
+    }
+}
+function clear_object(o) {Object.keys(o).forEach(k => {delete o[k]})}
+async function fetch_text(path) {return await (await fetch(path)).text()}
+
+export {
+    range,
+    enumerate,
+    all,
+    zip,
+    clear_object,
+    fetch_text,
+}

teachprogramming/static/projects/graphics/font/core.js

@@ -0,0 +1,44 @@
+import { range, zip } from './core.js'
+import { Gfx } from './animation_base.js'
+
+// From Img --------------------------------------------------------------------
+
+export const SEQUENCE_DAMIENG = ` !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_£abcdefghijklmnopqrstuvwxyz{|}~©`.replace('\n','')
+
+export function cut_font_chars_from_img(img, char_seq, w=8, h=8) {
+    const [ww, hh] = [img.width, img.height]
+    return Object.fromEntries(
+        [...range(Math.min(Math.floor(ww/w)*Math.floor(hh/h),char_seq.length))].map((i)=>[
+            char_seq[i], Gfx.subsurface(img, (i*w)%ww, Math.floor((i*w)/ww)*h, w, h)
+        ])
+    )
+}
+
+// From text (yaff,draw) -------------------------------------------------------
+
+function* extract_font_text_chars(text, foreground='@', background='.', width=8, height=8) {
+    text = text.replaceAll(/\s/sg, '')
+    const REGEX_CHAR = new RegExp(String.raw`[${background}${foreground}]{${width*height}}`, "isg")
+    for (let match of text.matchAll(REGEX_CHAR)) {yield match[0]}
+}
+function* extract_unicode_sequence(text) {
+    const REGEX_UNICODE = new RegExp(String.raw`u\+([0123456789abcdef]+):`, "ig")
+    for (let match of text.matchAll(REGEX_UNICODE)) {
+        yield String.fromCharCode(parseInt('0x'+match[1],16))
+    }
+}
+function text_char_to_ImageData(char, foreground='@', width=8, height=8) {
+    const [WHITE_PIXEL, BLACK_PIXEL] = [[255,255,255,255],[0,0,0,0]]
+    const pixel_data = [...char].map(c=>c==foreground?WHITE_PIXEL:BLACK_PIXEL).flat()
+    return new ImageData(new Uint8ClampedArray(pixel_data), width, height)
+}
+export async function parse_font_unicode(data, char_seq=undefined) {
+    return Object.fromEntries(zip(
+        char_seq || extract_unicode_sequence(data),
+        await Promise.all(
+            [...extract_font_text_chars(data)]
+            .map(char=>text_char_to_ImageData(char))
+            .map(async (img_data)=>await createImageBitmap(img_data)),
+        )
+    ))
+}

teachprogramming/static/projects/graphics/font/font_loader.js

@@ -6,15 +6,9 @@
 </head>
 <body></body>
 <script type="module">
-import {CanvasAnimationBase} from './animation_base.js'
-
-function* range(target, start=0, step=1) {for (let i=start ; i<target ; i+=step) {yield i}}
-function* enumerate(iterable) {let count = 0; for (let item of iterable) {yield [count++, item]}}
-function clear_object(o) {Object.keys(o).forEach(k => {delete o[k]})}
-
-
-const SEQUENCE_DAMIENG = ` !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_£abcdefghijklmnopqrstuvwxyz{|}~©`
-
+import { enumerate, clear_object, fetch_text } from './core.js'
+import { CanvasAnimationBase, Gfx } from './animation_base.js'
+import { cut_font_chars_from_img, parse_font_unicode, SEQUENCE_DAMIENG } from './font_loader.js'
 
 class Surface {
     constructor(width, height) {
@@ -68,44 +62,42 @@
         this.b.c.drawImage(this.mask.o, 0, 0)
         this.b.c.restore()
     }
+    cut_and_draw(context) {
+        this.cut()
+        context.drawImage(this.a.o,0,0)
+        context.drawImage(this.b.o,0,0)
+    }
 }
 
+
 class Font {
-    constructor(img) {
-        this.font = this._load_font_advance(img)
+    constructor(font_char_img) {
+        this.font = font_char_img
         this.char_cache = {}
 
         this.background = new Surface(8, 8)
         const bc = this.background.c
         bc.fillStyle='green'
-        bc.fillRect(0, 0, img.width, img.height)
+        bc.fillRect(0, 0, bc.width, bc.height)
     }
 
     clear_cache() {
         clear_object(this.char_cache)
     }
 
-    _load_font_advance(img) {
-        const [w, h, seq] = [8, 8, SEQUENCE_DAMIENG]
-        const [ww, hh] = [img.width, img.height]
-        return Object.fromEntries(
-            [...range(Math.min(Math.floor(ww/w)*Math.floor(hh/h),seq.length))].map((i)=>[
-                seq[i], CanvasAnimationBase.subsurface(img, (i*w)%ww, Math.floor((i*w)/ww)*h, w, h)
-            ])
-        )
-    }
-
     render_mask_img(mask, img) {
         const s = new Surface(mask.width, mask.height)
+        s.c.save()
         s.c.drawImage(img, 0, 0)
         s.c.globalCompositeOperation = 'destination-in';
         s.c.drawImage(mask, 0, 0)
+        s.c.restore()
         return s.img
     }
 
     draw_char_mask(c, char, x, y) {
         let img
-        if (!(img = this.char_cache[char])) {
+        if (!(img = this.char_cache[char])) { // cache miss on font char
             img = this.render_mask_img(this.font[char], this.background.o)
             this.char_cache[char] = img
         }
@@ -129,7 +121,10 @@
     }
 
     async constructor_async() {
-        this.font = new Font(CanvasAnimationBase.invert(await this.load_image("font", "Babyteeth.webp")))
+        this.font = new Font(cut_font_chars_from_img(Gfx.invert(await Gfx.load_image("Babyteeth.webp")), SEQUENCE_DAMIENG))
+        this.font = new Font(await parse_font_unicode(await fetch_text('zx-spectrum.yaff')))
+        //this.font2 = parse_font_text(fetch('amstrad_cpc.draw'))
+        //this.font3 = parse_font_text(fetch('bbc_micro.yaff'))
     }
 
     model_inc(frame) {
@@ -140,7 +135,7 @@
         const bc = this.font.background.c
         bc.fillStyle='green'; bc.fillRect(0,0,8,8);
         let f = Math.abs(Math.floor(Math.sin(frame/64)*15))
-        CanvasAnimationBase.drawLine(bc,4+f%16,-4,-4,4+f%16,'#00FF00')
+        Gfx.drawLine(bc,4+f%16,-4,-4,4+f%16,'#00FF00')
 
         this.a.clear()
         this.font.draw_font(this.a.c, "Hello, What is this! OMG OMG", 20, 20)
@@ -153,16 +148,12 @@
         this.mix.mask.c.fillStyle = 'white'
         this.mix.mask.c.fillRect(0,0,frame%this.w,this.h)
 
-        this.mix.cut()
-
         this.clear()
-        context.drawImage(this.a.o,0,0)
-        context.drawImage(this.b.o,0,0)
-
-        CanvasAnimationBase.drawLine(context, frame%this.w,0,frame%this.w,this.h,'white',4)
-    }
+        this.mix.cut_and_draw(context)
 
 
+        Gfx.drawLine(context, frame%this.w,0,frame%this.w,this.h,'white',4)
+    }
 }
 
 const main = new FontCanvas()