This is a little project that shows an example of how to write some C code, compile with clang, load the wasm in javascript and then display an image created by the C code. It shows:
- How to compile into wasm from C
- How to export specific functions from C into Javascript
- How to mess with shared memory in Javascript
- An example of using
mallocwithout the standard library - Passing a buffer from Javascript to C
- Writing to a buffer in C and reading it in Javascript
- Taking a buffer and making an image
- Writing that image to a canvas
- Using requestAnimationFrame in javascript to repeatedly call into C
If you're looking for the next level of this kind of project, wefx does the same thing as this project, but adds basic draw_point and draw_line type functions (still using raw buffers no WebGL type calls).
The code is quite heavily commented, and should, hopefully, be self
explanatory. The start point is src/graphics.c and public/test.html and,
of course, the Makefile.
WARNING When running the app, the animation flashes a lot of colours rapidly. It may be seizure inducing I don't know. If you're prone to that kind of thing be cautious.
You'll need make installed (Mac and Linux no problem see brew or apt
or whatever). To compile you'll do:
make build
If you have python3 installed, you can run make serve and it'll build and
run a web server for you to play with on http://localhost:8000
Then use your favourite mini http server and serve up the public directory
(see make start for an example).
On windows, you'll have to do something else, but you should be able to
build with Visual Studio, install clang and port the Makefile.