{"id":15049348,"url":"https://github.com/robrohan/wefx","last_synced_at":"2025-06-21T10:05:30.615Z","repository":{"id":40456711,"uuid":"461787493","full_name":"robrohan/wefx","owner":"robrohan","description":"Basic WASM graphics package to draw to an HTML Canvas using C. In the style of the gfx library","archived":false,"fork":false,"pushed_at":"2025-01-01T00:33:04.000Z","size":574,"stargazers_count":33,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-21T10:03:58.046Z","etag":null,"topics":["baremetal","c99","canvas","clang","game","game-development","gfx","graphics","learning","teaching","wasm"],"latest_commit_sha":null,"homepage":"","language":"C","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/robrohan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["robrohan"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2022-02-21T09:21:55.000Z","updated_at":"2025-05-05T19:12:46.000Z","dependencies_parsed_at":"2022-08-09T21:01:09.059Z","dependency_job_id":"529df283-b0e2-4ac5-aee1-c21218df5641","html_url":"https://github.com/robrohan/wefx","commit_stats":null,"previous_names":[],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/robrohan/wefx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robrohan%2Fwefx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robrohan%2Fwefx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robrohan%2Fwefx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robrohan%2Fwefx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robrohan","download_url":"https://codeload.github.com/robrohan/wefx/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robrohan%2Fwefx/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261103180,"owners_count":23109928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["baremetal","c99","canvas","clang","game","game-development","gfx","graphics","learning","teaching","wasm"],"created_at":"2024-09-24T21:19:54.477Z","updated_at":"2025-06-21T10:05:25.600Z","avatar_url":"https://github.com/robrohan.png","language":"C","funding_links":["https://github.com/sponsors/robrohan"],"categories":[],"sub_categories":[],"readme":"# wefx\n\nWefx is a simple graphics library for drawing using C11, WASM \n([Web Assembly][webassembly]), and an [HTML canvas][htmlcanvas]. \nIt aims to serve a similar purpose as [gfx][gfx], but provide an introduction \nto using C and WASM. Wefx is meant to be a teaching / learning tool for C and \ngraphics. Wefx is not using OpenGL / WebGL or anything like that. It is doing \nvery basic pixel manipulation and has very simple functions to draw pixels and \nlines.\n\nYou can also download the \n[documentation](https://raw.githubusercontent.com/robrohan/wefx/main/docs/manual.pdf)\n\n![Screenshot](https://raw.githubusercontent.com/robrohan/wefx/main/docs/wefx_shot.png)\n\n## Quick Start\n\nIf you are using Ubuntu, you can run `make init` to install the correct \nversion of clang and tools. If you are on another system, you will have to \ninstall `clang` yourself. \n\nOnce installed, `make build` should compile `examples/example0.c` into WASM \n(if there are no errors). If successful, and if you have python installed, you \ncan run `make serve` to start a simple HTTP server and browse to \nhttp://localhost:8000 to view wasm output.\n\n## Using The Project\n\nThe flow of the project has two steps: the build step, and the serve step:\n\n```\n ⌈                    ⌉             ⌈                   ⌉\n | ./src + ./examples | ⭢  clang ⭢ | ./build/wefx.wasm |\n ⌊                    ⌋             ⌊                   ⌋\n                                             ⭣\n        _____________________________________/\n       /\n      ⭣\n ⌈          ⌉                  ⌈         ⌉    ⌈      ⌉\n | ./build/ | ⭢  web server ⭢ | browser | ⭢ | you! |\n ⌊          ⌋                  ⌊         ⌋    ⌊      ⌋\n```\n\nIn other words, you compile the C code into a WASM, and then serve the\n`build` directory using a web server. You can then open a web browser and\nvisit http://localhost:8000 to view the running C code.\n\nYou'll need the following programs installed:\n\n- clang\n- make (optional - MacOS and Linux)\n- (optional) python3\n\nOn MacOS or Linux these tools should be available already, or easily installed \nwith homebrew (`brew install`), or Apt (`apt install`), or your local package \nmanager.\n\n### Compiling\n\nTo understand what is happening (or if you do not want to use _make_), open\nthe _Makefile_ file and look at the _build_ task. There you can see how\n_clang_ is used.\n\nIf you have _make_ available, type:\n\n```{sh}\nmake build\n```\n\non the command line. This will, assuming there are no errors, create the\nfile `./build/wefx.wasm`. Once this builds you can serve your creation by\ndoing the following...\n\n### Serving\n\nThe gist of this is you need to serve the contents of the `/build`\ndirectory in a web server. You need to do this because the file that loads\nthe newly create `wasm` file ([index.html](./public/index.html) can only\nload the wasm file over http. You can not simply open the `index.html` file\ndirectly from your file system (this is just how wasm loading works).\n\nIf you try to open the `index.html` file directly you will get an error\nlike:\n\n\u003e Cross-Origin Request Blocked: The Same Origin Policy disallows reading the \n\u003e remote resource at file:///xxxxx/build/wefx.wasm. (Reason: CORS request not \n\u003e http).\n\nA basic http server comes with python3, and the make file will run that\nserver if you run:\n\n```{sh}\nmake serve\n```\n\nand the python3 web server will serve the files in the _build_ directory.\nYou can then use your favorite browser and browse to http://localhost:8000\nto see the compiled code.\n\n---\n\n**Note** `make serve` will both recompile your code and run the web server.\n\n---\n\nIf you already have a favorite server (for example I use\n[busboy](https://github.com/robrohan/busboy)), you can use that serve to serve \nthe `build` directory instead, and then run the `make build` command to replace\nthe wasm file as you play around.\n\nFor example in one shell I run:\n\n```{sh}\nbusyboy --root=./build\n```\n\nThen, after I make changes to the C code, I run\n\n```{sh}\nmake build\n```\n\nAnd then simply refresh the browser to see changes.\n\n### Writing Code\n\nIf just teaching / learning about graphics, you'll only need to edit the\n[./examples/example0.c](./examples/example0.c) file. There are two entry points \ninto that file:\n\n| Function | Usage |\n| ---------| -----|\n|init()| Called once at the start of the app|\n|main_loop(time)| Called every frame with time being time since app start|\n\nYou can also add your own entry files in the examples directory, and then pass \nthem to the build script using the _MAIN_ variable. For example:\n\n```{sh}\nmake build MAIN=examples/example1.c\n```\n\nThis will build the WASM file using `example1.c` as the entry point.\n\n### Getting Started\n\n#### API\n\nThe API calls try to emulate [gfx][gfx] as much as possible. Here are a few \ncurrently supported functions (see the documentation for a full reference):\n\n| Function | Does |\n| ---------| -----|\n|wefx_open(width, height, title) | Create a canvas on which to draw |\n|wefx_clear_color(red, green, blue) | Set the background color |\n|wefx_color(red, green, blue) | Set the drawing color |\n|wefx_point(x, y) | Draw a single point |\n|wefx_line(x1, y1, x2, y2) | Draw a line from (x1,y1) to (x2,y2) |\n|wefx_clear() | Clear the canvas using the background color |\n\n#### Coordinate System\n\nThe coordinate system in newer versions has changed to reflect most other \ndrawing styles. The system works thusly:\n\n```\n      +Y\n       |\n       |\n       |\n       |\n (0,0) +---------- +X\n\n```\n\nIn version 1 (or earlier) of the library, the positive Y was flipped:\n\n```\n (0,0) +---------- +X\n       |\n       |\n       |\n       |\n      +Y\n```\n\n### Windows OS\n\nI have not run this on Windows, but you should be able to build it with Visual\nStudio. You will have to install `clang` as an add on, and then setup the\nbuild flags to the ones shown in the `Makefile`.\n\n[gfx]: https://www3.nd.edu/~dthain/courses/cse20211/fall2013/gfx/\n[webassembly]: https://en.wikipedia.org/wiki/WebAssembly\n[htmlcanvas]: https://en.wikipedia.org/wiki/Canvas_element\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobrohan%2Fwefx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobrohan%2Fwefx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobrohan%2Fwefx/lists"}