{"id":20333327,"url":"https://github.com/daneelsan/zig-wefx","last_synced_at":"2025-04-11T21:33:49.078Z","repository":{"id":48065371,"uuid":"488048515","full_name":"daneelsan/zig-wefx","owner":"daneelsan","description":"WEFX is a simple graphics drawing package using Zig, WASM, and an HTML canvas.","archived":false,"fork":false,"pushed_at":"2025-03-08T02:59:20.000Z","size":693,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T17:46:59.426Z","etag":null,"topics":["gfx","html5-canvas","javascript","wasm","zig"],"latest_commit_sha":null,"homepage":"","language":"Zig","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daneelsan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2022-05-03T01:56:32.000Z","updated_at":"2025-03-08T02:59:24.000Z","dependencies_parsed_at":"2024-02-06T00:47:19.165Z","dependency_job_id":null,"html_url":"https://github.com/daneelsan/zig-wefx","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daneelsan%2Fzig-wefx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daneelsan%2Fzig-wefx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daneelsan%2Fzig-wefx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daneelsan%2Fzig-wefx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daneelsan","download_url":"https://codeload.github.com/daneelsan/zig-wefx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248483485,"owners_count":21111459,"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":["gfx","html5-canvas","javascript","wasm","zig"],"created_at":"2024-11-14T20:30:47.166Z","updated_at":"2025-04-11T21:33:49.070Z","avatar_url":"https://github.com/daneelsan.png","language":"Zig","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WEFX\n\nWEFX is a simple graphics drawing package using Zig, WASM, and an HTML canvas.\n\nSee it live at: https://daneelsan.github.io/zig-wefx/\n\n![example1](./example1.gif)\n\nThis is a port of the original implementation written in C found in https://github.com/robrohan/wefx.\n\nThe library aims to serve a similar purpose to [gfx](https://www3.nd.edu/~dthain/courses/cse20211/fall2013/gfx/), in that it is simple and easy to learn. However, instead of having a [X11](https://en.wikipedia.org/wiki/X_Window_System) backend like the gfx library has, WEFX is meant to be compiled into a WASM module where the backend will be both Javascript and HTML5 canvas.\n\n## API\n\nThe WEFX package can be found in the [wefx/WEFX.zig](./wefx/WEFX.zig) file.\nWEFX.zig defines a struct with the following fields:\n\n| Field                          | Description                                                                   |\n| ------------------------------ | ----------------------------------------------------------------------------- |\n| `allocator: std.mem.Allocator` | allocates memory for the screen and buffer                                    |\n| `width: u32`                   | the maximum value of the x coordinate                                         |\n| `height: u32`                  | the maximum value of the y coordinate                                         |\n| `foreground_color: u32`        | the color used when drawing points, lines, etc.                               |\n| `background_color: u32`        | the color used when clearing the screen                                       |\n| `buffer: []u32`                | a slice of pixels which will be modified when drawing points, lines, etc.     |\n| `screen: []u32`                | a slice of pixels which will be filled from the buffer when flush() is called |\n\nAnd the following methods:\n| Method | Description | GFX |\n| ------ | ----------- | ----|\n| `wefx.open(width: u32, height: u32)` | allocates memory for both the screen and buffer slices | `wefx_open(width, height, title)` |\n| `wefx.clearColor(r: u8, g: u8, b: u8)` | change the current background color | `wefx_clear_color(r, g, b)` |\n| `wefx.clear()` | clear the graphics screen to the background color | `wefx_clear()` |\n| `wefx.color(r: u8, g: u8, b: u8)` | change the current drawing (foreground) color | `wefx_color(r, g, b)` |\n| `wefx.point(x: u32, y: u32)` | draw a point at (x,y) | `wefx_point(x, y)` |\n| `wefx.line(x1: u32, y1: u32, x2: u32, y2: u32)` | draw a line from (x1,y1) to (x2,y2) | `wefx_line(x1, y1, x2, y2)` |\n| `wefx.circle(x: u32, y: u32, r: u32)` | draw a circle centered in (x,y) with radius r | |\n| `wefx.flush()` | flush all previous output to the screen | `wefx_flush()` |\n\nWEFX.zig also exports some functions/symbols that are meant to be used in the JS side:\n| Export | Description |\n| ------ | ----------- |\n| `wefx_xsize(wefx: *WEFX)` | returns the width of the screen |\n| `wefx_ysize(wefx: *WEFX)` | returns the height of the screen |\n| `wefx_screen_offset(wefx: *WEFX)` | returns the pointer to the screen slice (an offset in the WASM memory) |\n| `wefx_flush(wefx: *WEFX)` | calls wefx.flush() to fill the pixels in the screen |\n\n## Writing an App\n\nTo write an app, the user will have to define two callbacks in a .zig file:\n| Callback | Description |\n| ------ | ----------- |\n| `export fn init() ?*WEFX` | called once at the start of the app (should return a pointer to a WEFX instance) |\n| `export fn main_loop(time: f32) void` | called every frame with time being time since app start |\n\nThese callbacks will be called from the [script.js](./docs/script.js) file.\n\n## Build\n\nThe latest `zig`` version this project has been built in is:\n```shell\n$ zig version\n0.14.0\n```\n\nThere are some examples in the examples/ directory.\n\nThe [build.zig](./build.zig) file by default builds the example1.zig file:\n\n```shell\n$ zig build --verbose\n```\n\nThe output binary is called `wefx-example.wasm` and is stored in the `zig-out/lib/` directory:\n\n```shell\n$ ls zig-out/bin/*.wasm\nzig-out/bin/wefx-example.wasm\n```\n\nFinally, copy it into the `docs/` directory so that the `script.js` file can load it:\n```shell\n$ cp zig-out/bin/wefx-example.wasm docs/wefx-example.wasm\n```\t\n\nThe user can simply modify the contents of the [example1.zig](./examples/example1.zig) file, or write a new file and modify the build.zig file to build it.\n\n## TODO\n\nThe WEFX package should also handle events, i.e. mouse clicks and keyboard presses.\n\n## Resources\n\n-   https://github.com/robrohan/wefx\n-   https://www3.nd.edu/~dthain/courses/cse20211/fall2013/gfx/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaneelsan%2Fzig-wefx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaneelsan%2Fzig-wefx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaneelsan%2Fzig-wefx/lists"}