https://github.com/peterhellberg/art

art is a Zig module used to build WebAssembly binaries rendering to a HTML canvas.
https://github.com/peterhellberg/art

canvas wasm

Last synced: 24 days ago
JSON representation

art is a Zig module used to build WebAssembly binaries rendering to a HTML canvas.

• Host: GitHub
• URL: https://github.com/peterhellberg/art
• Owner: peterhellberg
• License: other
• Created: 2024-10-07T10:07:27.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-12-11T11:42:06.000Z (26 days ago)
• Last Synced: 2024-12-11T12:29:01.496Z (26 days ago)
• Topics: canvas, wasm
• Language: Zig
• Homepage:
• Size: 7.81 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# art :art:

art is a [Zig](https://ziglang.org/) ⚡ module used to build

[WebAssembly](https://webassembly.org/) binaries rendering to a

[HTML canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).

> [!IMPORTANT]

> You might want to install the [art-init](https://github.com/peterhellberg/art-init) tool

> and use that instead of manually creating the files needed to use this library.

## Usage

You can have `zig build` retrieve the `art` module if you specify it as a dependency.

### Create a `build.zig.zon` that looks something like this:

```zig

.{

    .name = "art-canvas",

    .version = "0.0.0",

    .paths = .{""},

    .dependencies = .{

        .art = .{

            .url = "https://github.com/peterhellberg/art/archive/refs/tags/v0.0.1.tar.gz",

        },

    },

}

```

> [!NOTE]

> If you leave out the hash then `zig build` will tell you that it is missing the hash, and what it is.

> Another way to get the hash is to use `zig fetch`, this is probably how you _should_ do it :)

### Download `index.html` and `script.js` from `art-init`

```console

wget https://raw.githubusercontent.com/peterhellberg/art-init/refs/heads/main/content/index.html

wget https://raw.githubusercontent.com/peterhellberg/art-init/refs/heads/main/content/script.js

```

### Then you can add the module in your `build.zig` like this:

```zig

const std = @import("std");

const number_of_pages = 4;

pub fn build(b: *std.Build) void {

    const exe = b.addExecutable(.{

        .name = "art-canvas",

        .root_source_file = b.path("src/canvas.zig"),

        .target = b.resolveTargetQuery(.{

            .cpu_arch = .wasm32,

            .os_tag = .freestanding,

        }),

        .optimize = .ReleaseSmall,

        .strip = true,

    });

    exe.root_module.addImport("art", b.dependency("art", .{}).module("art"));

    exe.root_module.export_symbol_names = &[_][]const u8{

        "start",

        "update",

        "draw",

        "fps",

        "width",

        "height",

        "offset",

    };

    exe.entry = .disabled;

    exe.export_memory = true;

    exe.initial_memory = std.wasm.page_size * number_of_pages;

    exe.max_memory = std.wasm.page_size * number_of_pages;

    exe.stack_size = 512;

    b.installArtifact(exe);

}

```

### In your `src/canvas.zig` you should now be able to:

```zig

const art = @import("art");

var canvas: art.Canvas(16, 9) = .{};

export fn start() void {

    art.log("Hello from Zig!");

}

export fn update(pad: u32) void {

    _ = pad; // autofix

}

export fn draw() void {

    canvas.clear(.{ 0x7C, 0xAF, 0x3C, 0xFF });

}

export fn fps() usize {

    return 60;

}

export fn width() usize {

    return canvas.width;

}

export fn height() usize {

    return canvas.height;

}

export fn offset() [*]u8 {

    return canvas.offset();

}

```