hide cursor on canva

.gitignore

@@ -2,3 +2,4 @@ app.wasm
 app.wat
 png2c
 penger.c
+hand.c

app.c

@@ -1,4 +1,5 @@
 #include "penger.c"
+#include "hand.c"
 
 #define GREEN 0xff00ff00
 #define RED 0xff0000ff
@@ -11,21 +12,49 @@ const unsigned int width = 800;
 const unsigned int height = 600;
 unsigned int BUFFER[width * height];
 
+// importer depuis js
 int get_scale(void);
+float random(void); // flemme de coder un algo random, je recup celui de js (Math.random)
+float sqrtf(float val); // pareil
 
 typedef struct v2 {
     float x, y;
 } v2;
 
-v2 penger_pos = {400, 300};
+// position du penger au milieu
+v2 penger_pos = {width/2, height/2};
+v2 velocity = {0, 0};
+v2 mouse = {0, 0};
 
-float random(void);
-
-int rand(int min, int max)
+v2 v2_diff(v2 vec1, v2 vec2)
 {
-    return min + random() * (max - min);
+    return (v2) {
+        .x = vec1.x - vec2.x,
+        .y = vec1.y - vec2.y,
+    };
+}
+v2 v2_normalize(v2 vec)
+{
+    v2 result = {0};
+    float length = sqrtf((vec.x*vec.x) + (vec.y*vec.y));
+
+    if (length > 0) {
+        float ilength = 1.0f/length;
+        result.x = vec.x*ilength;
+        result.y = vec.y*ilength;
+    }
+
+    return result;
+}
+v2 v2_scale(v2 vec, int scale)
+{
+    return (v2) {
+        .x = vec.x * scale,
+        .y = vec.y * scale,
+    };
 }
 
+// keyboard code definit par js
 typedef enum Key {
     SHIFT = 16,
     SPACE = 32,
@@ -50,46 +79,77 @@ void key_released(int key)
     keys[key] = 0;
 }
 
-v2 velocity = {0, 0};
-
-void reset_velocity(void)
+void set_velocity(float x, float y)
 {
-    velocity = (v2){0, 0};
+    velocity = (v2){x, y};
+}
+
+void set_mouse(float x, float y)
+{
+    mouse = (v2){x, y};
+}
+
+int rand(int min, int max)
+{
+    return min + random() * (max - min);
 }
 
 void rebondi(v2 *pos, int scale)
 {
+    float div = -1.5;
     if (pos->x - penger_width*scale/2 < 0) {
         pos->x = penger_width*scale/2;
-        velocity.x /= -1.5;
+        velocity.x /= div;
     }
     if (pos->y - penger_height*scale/2 < 0) {
         pos->y = penger_height*scale/2;
-        velocity.y /= -1.5;
+        velocity.y /= div;
     }
     if (pos->x + penger_width*scale/2 >= width) {
         pos->x = width - penger_width*scale/2;
-        velocity.x /= -1.5;
+        velocity.x /= div;
     }
     if (pos->y + penger_height*scale/2 >= height) {
         pos->y = height - penger_height*scale/2;
-        velocity.y /= -1.5;
+        velocity.y /= div;
     }
 }
 
+int collision(v2 point, int x, int y, int w, int h)
+{
+    return (point.x >= x && point.x < x + w &&
+            point.y >= y && point.y < y + h);
+}
+
 void init()
 {
 }
 
-void go(float dt)
+void draw(float dt)
 {
     int scale = get_scale();
 
+    // position du penger en haut a gauche de l'image
+    v2 penger_origin = {0};
+    penger_origin.x = penger_pos.x - penger_width*scale/2;
+    penger_origin.y = penger_pos.y - penger_height*scale/2;
+
+    // jump
     if (keys[SPACE]) {
         velocity.y += velocity.y < 0 ? -10 : 10;
         velocity.x += rand(-10, 10);
     }
 
+    // mouse push
+    if (collision(mouse, penger_origin.x, penger_origin.y, penger_width*scale, penger_height*scale)) {
+        v2 force = v2_diff(penger_pos, mouse);
+        force = v2_normalize(force);
+        force = v2_scale(force, 5);
+        velocity.x += force.x;
+        velocity.y += force.y;
+    }
+
+    // update pos avec velocity si pas de touche presser
     if (!keys[ARROW_UP] && !keys[ARROW_DOWN]) {
         velocity.y += GRAVITY * dt;
         penger_pos.y += velocity.y;
@@ -98,6 +158,7 @@ void go(float dt)
         penger_pos.x += velocity.x;
     }
 
+    // movement
     float speed = 10.0f;
     if ((keys[ARROW_UP] || keys[ARROW_DOWN]) && (keys[ARROW_LEFT] || keys[ARROW_RIGHT]))
         speed = 6.324f; // sqrt(speed) * 2 with speed = 10
@@ -117,19 +178,16 @@ void go(float dt)
     if (keys[ARROW_UP])
         penger_pos.y -= speed;
 
+    // background
     for (int i = 0; i < width * height; i++)
         BUFFER[i] = GREEN;
 
-
     rebondi(&penger_pos, scale);
 
-    v2 penger_origin = {0};
-    penger_origin.x = penger_pos.x - penger_width*scale/2;
-    penger_origin.y = penger_pos.y - penger_height*scale/2;
-
+    // dessine le penger sur le canva
     for (int y = 0; y < penger_height; y++) {
         for (int i = 0; i < penger_width; i++) {
-            if (penger_img[y][i] <= 0x00FFFFFF)
+            if (penger_img[y][i] <= 0x00FFFFFF) // pixel transparant
                 continue;
             for (int s1 = 0; s1 < scale; s1++) {
                 for (int s2 = 0; s2 < scale; s2++) {
@@ -142,4 +200,17 @@ void go(float dt)
             }
         }
     }
+
+    // draw hand
+    for (int y = 0; y < hand_height; y++) {
+        for (int x = 0; x < hand_width; x++) {
+            if (hand_img[y][x] <= 0x00FFFFFF) // pixel transparant
+                continue;
+            int idx_x = x + mouse.x;
+            int idx_y = y + mouse.y;
+            if (idx_x < 0 || idx_x >= width || idx_y < 0 || idx_y >= height)
+                continue;
+            BUFFER[idx_y*width + idx_x] = hand_img[y][x];
+        }
+    }
 }

build.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-export_sym="init go key_pressed key_released reset_velocity BUFFER width height"
+export_sym="init draw key_pressed key_released set_velocity set_mouse BUFFER width height"
 export_cmd=""
 for e in $export_sym; do
     export_cmd="$export_cmd -Wl,--export=$e";
@@ -8,17 +8,18 @@ done;
 
 if [[ "$1" == "" ]]; then
     f='app'
-    e='app.c'
+    a='app.c'
 else
     f=$(echo $1 | sed "s/\..*$//g")
-    e=$1
+    a=$1
 fi
 
 set -xe
 
 clang png2c.c -o png2c -lm
 ./png2c "penger.png" > penger.c
+./png2c "hand.png" > hand.c
 
-clang -O2 --target=wasm32 -fno-builtin -nostdlib --no-standard-libraries -Wl,--no-entry $export_cmd -Wl,--allow-undefined -o $f.wasm $e
+clang -O2 --target=wasm32 -fno-builtin -nostdlib --no-standard-libraries -Wl,--no-entry $export_cmd -Wl,--allow-undefined -o $f.wasm $a
 
 wasm2wat $f.wasm > $f.wat

index.html

@@ -2,6 +2,11 @@
 <html>
     <head>
         <script src="load.js"></script>
+        <style>
+            #demo-canvas:hover {
+                cursor: none
+            };
+        </style>
     </head>
     <body>
         <canvas id="demo-canvas"></canvas>
@@ -11,7 +16,8 @@
         <button id='scaling'>scale + 1</button>
         <button id='reset'>reset velocity</button>
         <br>
-        <p>press arrow key to move</p>
-        <p>press space key to jump</p>
+        <p>Press arrow key to move</p>
+        <p>Press space key to jump</p>
+        <p>Penger is afraid of your stinky hand</p>
     </body>
 </html>

load.js

@@ -1,12 +1,23 @@
 var scale = 7;
 
 var global_instance;
+var global_memory;
+
+function wasm_variable(name)
+{
+    return global_memory[global_instance.exports[name].value / 4];
+}
+function wasm_function(name)
+{
+    return global_instance.exports[name];
+}
 
 window.onload = () => {
     var scale_but = document.getElementById("scaling");
     var descale_but = document.getElementById("descaling");
     var scale_p = document.getElementById("scale");
     var reset_but = document.getElementById("reset");
+    var canvas = document.getElementById("demo-canvas");
     scale_p.innerText = "scale: " + scale;
     scale_but.onclick = () => {
         scale++;
@@ -17,10 +28,17 @@ window.onload = () => {
         scale_p.innerText = "scale: " + scale;
     }
     reset_but.onclick = () => {
-        global_instance.exports.reset_velocity();
+        wasm_function('set_velocity')(0, 0);
+    }
+    canvas.onmousemove = (e) => {
+        var r = canvas.getBoundingClientRect();
+        wasm_function('set_mouse')(e.clientX - r.x, e.clientY - r.y);
     }
 };
 
+(async() => {
+
+// jsp, je l'ai pris de la: https://github.com/tsoding/olive.c
 function make_environment(...envs) {
     return new Proxy(envs, {
         get(target, prop, receiver) {
@@ -34,26 +52,28 @@ function make_environment(...envs) {
     });
 }
 
-(async() => {
-
 const { instance } = await WebAssembly.instantiateStreaming(fetch("./app.wasm"), {
     "env": make_environment({
+        // importer les fonctions dans le wasm
         'random': Math.random,
+        'sqrtf': Math.sqrt,
         'get_scale': () => {return scale},
     })
 });
 
-global_instance = instance;
-
 const memory = new Uint32Array(instance.exports.memory.buffer);
 
-const width = memory[instance.exports.width.value / 4];
-const height = memory[instance.exports.height.value / 4];
+global_instance = instance;
+global_memory = memory;
+
+const width = wasm_variable('width');
+const height = wasm_variable('height');
 
 const canvas = document.getElementById("demo-canvas");
 canvas.width = width;
 canvas.height = height;
 
+// recup image de la memoire du wasm
 const buffer_address = instance.exports.BUFFER.value;
 const image = new ImageData(
     new Uint8ClampedArray(
@@ -66,30 +86,30 @@ const image = new ImageData(
 
 const ctx = canvas.getContext("2d");
 
-instance.exports.init();
+wasm_function('init')();
 
 let prev = null;
 function first(timestamp) {
     prev = timestamp;
-    instance.exports.go(0.16);
+    wasm_function('draw')(0.16);
     window.requestAnimationFrame(loop);
 }
 function loop(timestamp) {
     const dt = timestamp - prev;
     prev = timestamp;
 
-    instance.exports.go(dt/1000);
+    wasm_function('draw')(dt/1000);
     ctx.putImageData(image, 0, 0);
     window.requestAnimationFrame(loop);
 }
 window.requestAnimationFrame(first);
 
 addEventListener('keydown', (e) => {
-    instance.exports.key_pressed(e.keyCode);
+    wasm_function('key_pressed')(e.keyCode);
 });
 
 addEventListener('keyup', (e) => {
-    instance.exports.key_released(e.keyCode);
+    wasm_function('key_released')(e.keyCode);
 });
 
 })()

png2c.c

@@ -18,15 +18,17 @@ int main(int argc, const char *argv[])
         fprintf(stderr, "ERROR: n components is not 4\n");
         return 1;
     }
+
+    int file_name_len = strlen(img_path) - strlen(".png");
     
-    printf("int penger_height = %d;\n", height);
-    printf("int penger_width = %d;\n", width);
-    printf("unsigned int penger_img[%d][%d] = {\n", height, width);
+    printf("int %.*s_height = %d;\n", file_name_len, img_path, height);
+    printf("int %.*s_width = %d;\n", file_name_len, img_path, width);
+    printf("unsigned int %.*s_img[%d][%d] = {\n", file_name_len, img_path, height, width);
 
     for (int y = 0; y < height; y++) {
         printf("    ");
         for (int i = 0; i < width; i++) {
-            printf("0x%08X,", data[y*height + i]);
+            printf("0x%08X,", data[y*width + i]);
         }
         printf("\n");
     }