refacto

app.c

@@ -11,21 +11,19 @@ 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)
 
 typedef struct v2 {
     float x, y;
 } v2;
 
-v2 penger_pos = {400, 300};
+// position du penger au milieu
-
+v2 penger_pos = {width/2, height/2};
-float random(void);
+v2 velocity = {0, 0};
-
-int rand(int min, int max)
-{
-    return min + random() * (max - min);
-}
 
+// keyboard code definit par js
 typedef enum Key {
     SHIFT = 16,
     SPACE = 32,
@@ -50,30 +48,34 @@ void key_released(int key)
     keys[key] = 0;
 }
 
-v2 velocity = {0, 0};
-
 void set_velocity(float x, float y)
 {
     velocity = (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;
     }
 }
 
@@ -81,15 +83,17 @@ void init()
 {
 }
 
-void go(float dt)
+void draw(float dt)
 {
     int scale = get_scale();
 
+    // jump
     if (keys[SPACE]) {
         velocity.y += velocity.y < 0 ? -10 : 10;
         velocity.x += rand(-10, 10);
     }
 
+    // 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 +102,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 +122,21 @@ 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);
 
+    // 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;
 
+    // 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++) {

build.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-export_sym="init go key_pressed key_released set_velocity BUFFER width height"
+export_sym="init draw key_pressed key_released set_velocity BUFFER width height"
 export_cmd=""
 for e in $export_sym; do
     export_cmd="$export_cmd -Wl,--export=$e";
@@ -8,10 +8,10 @@ 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
@@ -19,6 +19,6 @@ set -xe
 clang png2c.c -o png2c -lm
 ./png2c "penger.png" > penger.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

load.js

@@ -1,6 +1,16 @@
 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");
@@ -17,10 +27,13 @@ window.onload = () => {
         scale_p.innerText = "scale: " + scale;
     }
     reset_but.onclick = () => {
-        global_instance.exports.set_velocity(0, 0);
+        wasm_function('set_velocity')(0, 0);
     }
 };
 
+(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 +47,27 @@ 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,
         'get_scale': () => {return scale},
     })
 });
 
-global_instance = instance;
-
 const memory = new Uint32Array(instance.exports.memory.buffer);
 
-const width = memory[instance.exports.width.value / 4];
+global_instance = instance;
-const height = memory[instance.exports.height.value / 4];
+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 +80,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

@@ -19,9 +19,11 @@ int main(int argc, const char *argv[])
         return 1;
     }
 
-    printf("int penger_height = %d;\n", height);
+    int file_name_len = strlen(img_path) - strlen(".png");
-    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("    ");