font_mask multi surface

Changed res of animation_base to be 1/4 of 1080p
Tweaks to the book bits

Author: calaldees

book/BarCamp2024.md

@@ -32,7 +32,7 @@ Preface: Computing Education Sux
       * > Introduction of new syllabus may be reason number of girls taking subject more than halved in eight years, academics say
 * Q: So what is important for young people?
   * The grand answer: Self actualization and altering the world though self action and building something
-  * The simple answer: Choose to build shit
+  * The simple answer: They choose to build shit
   * The refined anser: 'Authentic Participation'
 
 ### Qualifications vs Certification

book/citification.md

@@ -149,6 +149,8 @@ No Cirt, but made by big players
 
 Testing
 https://istqb.org/certifications/certified-tester-foundation-level-ctfl-v4-0/
+https://www.bcs.org/media/ilhdvwam/istqb-certified-tester-syllabus.pdf
+
 https://www.bcs.org/qualifications-and-certifications/certifications-for-professionals/software-testing-certifications/istqb-certified-tester-foundation-level/
 IEEE Computer Society https://www.computer.org/product/education/software-testing-course
 

book/olderLearners.md

@@ -0,0 +1,4 @@
+
+Is there an age that is too old?
+
+https://initcoder.com/posts/37-year-old-learning-cs/#notes

teachprogramming/static/projects/game/animation_base.js

@@ -1,4 +1,4 @@
-function createFullScreenCanvasElement({width=640, height=360, background_color='black'}={}) {
+function createFullScreenCanvasElement({width=480, height=270, background_color='black'}={}) {
     const body_style = `
         margin: 0;
         height: 100%;

teachprogramming/static/projects/game/animation_base_pygame.py

@@ -15,7 +15,7 @@ def install(name):
 
 
 class PygameBase():
-    def __init__(self, title="pg", resolution=(320,180), fps=60, color_background='black'):
+    def __init__(self, title="pg", resolution=(480,270), fps=60, color_background='black'):
         pygame.init()
         pygame.display.set_caption(title)
         self.screen = pygame.display.set_mode(resolution, pygame.SCALED | pygame.RESIZABLE)

teachprogramming/static/projects/game/animation_base_skia.js

@@ -2,6 +2,6 @@
 
 import {Canvas} from 'skia-canvas'
 
-let canvas = new Canvas(400, 400)
+let canvas = new Canvas(480, 270)
 let ctx = canvas.getContext("2d")
 let {width, height} = canvas

teachprogramming/static/projects/graphics/font/Makefile

@@ -22,7 +22,7 @@ _venv:
 	python3 -m venv _venv
 	_venv/bin/pip install pygame
 run_pygame_font: _venv animation_base_pygame.py
-	_venv/bin/python3 pygame_font.py
+	_venv/bin/python3 font_pygame.py
 
 animation_base.js:
 	ln -s ../../game/animation_base.js animation_base.js

teachprogramming/static/projects/graphics/font/font.html

@@ -17,17 +17,17 @@
 
 class Font extends CanvasAnimationBase {
     constructor() {
-        super(undefined, 60, {background_color: 'black', width: 320, height: 180})
+        super(undefined, 60, {background_color: 'black', width: 480, height: 270})
         this.random_ys = [...range(10)].map((i)=>Math.floor(Math.random()*this.h))  // ver: list_scroll_x
     }
 
     async constructor_async() {
-        this.font = this.load_font_advance(this.invert(await this.load_image("font", "font.webp")))
+        this.font = this.load_font_advance(CanvasAnimationBase.invert(await this.load_image("font", "font.webp")))
     }
 
     load_font = (img) => Object.fromEntries(
         [...range(Math.floor(img.width/8))].map((i)=>[
-            String.fromCharCode(i), this.subsurface(img, i*8, 0, 8, 8)
+            String.fromCharCode(i), CanvasAnimationBase.subsurface(img, i*8, 0, 8, 8)
         ])
     )
 
@@ -36,7 +36,7 @@
         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], this.subsurface(img, (i*w)%ww, Math.floor((i*w)/ww)*h, w, h)
+                seq[i], CanvasAnimationBase.subsurface(img, (i*w)%ww, Math.floor((i*w)/ww)*h, w, h)
             ])
         )
     }

teachprogramming/static/projects/graphics/font/font_mask.html

@@ -18,15 +18,58 @@
 
 class Surface {
     constructor(width, height) {
-        this._o = new OffscreenCanvas(width, height)
-        this._c = this._o.getContext("2d")
+        if (!(Number.isInteger(width) && Number.isInteger(height))) {debugger}
+        console.assert(Number.isInteger(width) && Number.isInteger(height), "Surface must have int width/height")
+        this.o = new OffscreenCanvas(width, height)
+        this._c = this.o.getContext("2d")
         this._img = undefined
     }
+    get w() {return this.o.width}
+    get h() {return this.o.height}
     get c() {this._img = undefined; return this._c}
-    get img() {return this._img || (this._img = this._o.transferToImageBitmap())}
+    get img() {return this._img || (this._img = this.o.transferToImageBitmap())}
+    clear() {this.c.clearRect(0, 0, this.w, this.h)}
+    static isDimensionMatch(a, b) {return a.w==b.w && a.h==b.h}
+    static fromCanvas(canvas) {
+        const s = new Surface(canvas.width, canvas.height)
+        s.c.drawImage(canvas,0,0)
+        return s
+    }
 }
 
 
+class SurfaceMix {
+    /*
+    Mix two Surfaces
+       A       B     Mask   Output
+    |-----| |-----| |-----| |-----|
+    | a   | | b   | |OOOO/| | a  /|
+    |     | |     | |OOO/ | |   / |
+    |     |+|     |+|OO/  |=|  /  |
+    |     | |     | |O/   | | /   |
+    |   a | |   b | |/    | |/  b |
+    |-----| |-----| |-----| |-----|
+    A & B are mutated/modified/cut so they can be drawn to create the Output
+    */
+    constructor(surface_a, surface_b, mask) {
+        this.a = surface_a
+        this.b = surface_b
+        this.mask = mask || new Surface(this.a.w, this.a.h)
+        console.assert(Surface.isDimensionMatch(this.a, this.b), "Surfaces should match dimension")
+        console.assert(Surface.isDimensionMatch(this.a, this.mask), "Mask should match Surface dimension")
+    }
+    cut() {
+        this.a.c.save()
+        this.a.c.globalCompositeOperation = 'destination-in';
+        this.a.c.drawImage(this.mask.o, 0, 0)
+        this.a.c.restore()
+        this.b.c.save()
+        this.b.c.globalCompositeOperation = 'destination-out';
+        this.b.c.drawImage(this.mask.o, 0, 0)
+        this.b.c.restore()
+    }
+}
+
 class Font {
     constructor(img) {
         this.font = this._load_font_advance(img)
@@ -63,7 +106,7 @@
     draw_char_mask(c, char, x, y) {
         let img
         if (!(img = this.char_cache[char])) {
-            img = this.render_mask_img(this.font[char], this.background.img)
+            img = this.render_mask_img(this.font[char], this.background.o)
             this.char_cache[char] = img
         }
         c.drawImage(img, x, y)
@@ -79,25 +122,44 @@
 
 class FontCanvas extends CanvasAnimationBase {
     constructor() {
-        super(undefined, 60, {background_color: 'black', width: 320, height: 180})
+        super(undefined, 60, {background_color: 'black', width: 480, height: 270})
+        this.a = Surface.fromCanvas(this.canvas)
+        this.b = Surface.fromCanvas(this.canvas)
+        this.mix = new SurfaceMix(this.a, this.b)
     }
 
     async constructor_async() {
-        this.font = new Font(CanvasAnimationBase.invert(await this.load_image("font", "font.webp")))
+        this.font = new Font(CanvasAnimationBase.invert(await this.load_image("font", "Babyteeth.webp")))
     }
 
     model_inc(frame) {
     }
     draw(context, frame) {
+
         this.font.clear_cache()
         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)*16))
+        let f = Math.abs(Math.floor(Math.sin(frame/64)*15))
         CanvasAnimationBase.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)
+
+        this.b.clear()
+        this.b.c.fillStyle='grey'
+        this.b.c.fillRect(0,0,this.b.w,this.b.h)
+
+        this.mix.mask.clear()
+        this.mix.mask.c.fillStyle = 'white'
+        this.mix.mask.c.fillRect(0,0,frame%this.w,this.h)
+
+        this.mix.cut()
+
         this.clear()
-        const c = context
-        this.font.draw_font(c, "Hello, What is this! OMG OMG", 20, 20)
+        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)
     }
 
 

teachprogramming/static/projects/mini/byteDecode.md

@@ -8,4 +8,9 @@ tt = """
 065 115 032 116 104 101 032 119 111 114 108 100 032 105 115 032 115 101 116 032 111 110 032 102 105 114 101 013 010 119 104 105 108 101 032 112 114 101 112 097 114 105 110 103 032 102 111 114 032 116 104 105 115 032 102 105 103 104 116 013 010 073 110 032 116 104 101 032 100 097 114 107 032 097 032 115 112 101 108 108 119 097 114 101 032 114 105 115 101 013 010 077 097 100 101 032 111 102 032 049 046 052 052 032 109 101 103 097 098 121 116 101 115 013 010 013 010 073 110 032 097 032 102 108 111 112 112 121 032 100 105 115 107 032 102 105 116 115 032 116 105 103 104 116 013 010 087 105 116 104 032 097 032 099 114 097 099 107 116 114 111 032 112 097 099 107 101 100 032 105 110 115 105 100 101 013 010 077 101 103 097 116 114 097 105 110 101 114 115 032 116 111 032 098 111 111 115 116 032 121 111 117 114 032 109 105 103 104 116 013 010 071 111 116 116 097 032 116 114 121 032 098 101 102 111 114 101 032 121 111 117 032 102 105 103 104 116 013 010 013 010 078 111 119 032 097 103 097 105 110 032 097 110 111 116 104 101 114 032 116 105 109 101 013 010 070 111 108 108 111 119 032 109 101 032 097 108 111 110 103 032 116 104 101 115 101 032 114 104 121 109 101 115 013 010 073 102 032 121 111 117 032 119 097 110 116 032 116 111 032 103 101 116 032 116 104 105 115 032 112 114 105 122 101 013 010 072 105 100 100 101 110 032 105 110 032 098 101 116 119 101 101 110 032 116 104 101 115 101 032 108 105 110 101 115 013 010 013 010 077 097 107 101 032 097 032 115 117 109 032 111 102 032 097 108 108 032 116 104 111 115 101 032 098 121 116 101 115 013 010 084 114 097 115 104 032 116 104 101 032 111 100 100 115 032 097 110 100 032 109 097 107 101 032 105 116 032 116 105 103 104 116 013 010 084 117 114 110 032 116 111 032 065 083 067 073 073 032 099 111 100 101 032 097 110 100 032 119 114 105 116 101 013 010 065 108 108 032 116 104 111 115 101 032 110 117 109 098 101 114 115 032 111 118 101 114 032 097 032 108 105 110 101 013 010 013 010 078 111 119 032 106 117 115 116 032 107 101 101 112 032 116 104 097 116 032 105 110 032 121 111 117 114 032 109 105 110 100 013 010 067 114 097 099 107 032 116 104 101 032 099 111 100 101 032 098 101 108 111 119 032 116 104 101 115 101 032 108 105 110 101 115 013 010 085 115 101 032 116 104 101 032 099 111 100 101 119 111 114 100 032 121 111 117 032 119 105 108 108 032 102 105 110 100 013 010 084 111 032 114 101 100 101 101 109 032 116 104 101 032 098 111 110 117 115 032 112 114 105 122 101 013 010 013 010 069 110 106 111 121 032 070 108 111 112 112 121 032 068 105 115 107 032 079 118 101 114 100 114 105 118 101 033
 """
 print(bytes(map(int, filter(None, map(lambda i: i.strip().lstrip('0'), tt.split(" "))))).decode('utf8'))
-```
+```
+
+https://www.razor.co.uk/careers/vacancies/senior-python-engineer-with-ai
+
+data = '5f4dcc3b5aa765d61d8327deb882cf99'
+bytes.fromhex(data).decode('utf-8')