IC Iron Canvas Hibob555556/IronCanvas

Rust + WebAssembly geometry

Iron Canvas

A browser-based cube transform demo where Rust owns the geometry, WebAssembly exposes the runtime API, and JavaScript only handles canvas rendering.

Vertices

0 degrees 
Loading WASM...

Version history

v0.4.1 Orbit cube

Vertex visibility controls make the Rust-owned cube buffer easier to inspect while orbiting.

v0.4.1

Orbit cube

Adds a hidden-vertex toggle for switching the coordinate readout between visible vertices and the full vertex buffer.

v0.4.0

Orbit cube

Adds solid cube faces and a drag camera so the cube can be inspected from every angle.

v0.3.2

Shaded cube

Improves 45-degree readability with a steadier canvas camera and camera-depth face ordering.

v0.3.1

Axis-only rotation

Removes the whole-cube shortcut, keeps explicit X, Y, and Z rotation controls, and stabilizes rotation framing.

v0.3.0

Shaded cube foundation

Adds Rust-owned face vertices, colored face rendering, axis guides, and X, Y, and Z rotation controls.

v0.2.0

Wire cube

Replaces the flat rectangle outline with 12 cube edge pairs and a projected 3D view.

v0.1.0

Rectangle rotation

Starts with the original Rust vertex buffer, WASM pointer reads, and clockwise Z-axis rotation.

Project logic

One source of truth, rendered through WASM

The cube starts as a single Rust vertex array made from explicit edge pairs. The browser reads those vertices from WebAssembly memory, projects them to canvas, and requests transforms through exported Rust functions.

Geometry

Rust owns the math

Rotation happens in Rust through X, Y, and Z axis transforms using the cube center as the pivot.

Boundary

WASM exposes a small API

JavaScript calls exported functions for reset, rotation, vertex count, and memory pointers. It never duplicates the transform formulas.

Rendering

Canvas is a view layer

The canvas projects 3D world coordinates to pixels, marks the original top edge, and prints the current vertex buffer for inspection.

Implementation

How a click becomes a transform

The interaction is intentionally simple, which makes the data flow easy to inspect from UI event to Rust memory mutation.

  1. Select an angle. The UI passes either `45` or `90` into the selected version's runtime.
  2. Rotate in Rust. Rust iterates over the current edge and face buffers, then applies the selected X, Y, or Z axis transform.
  3. Read the updated buffer. JavaScript reads the same WASM memory as `Float32Array` views.
  4. Redraw the canvas. The browser projects the updated coordinates to pixels and refreshes the output panel.

Quality

Tested like a tiny production app

Rust tests

Unit and integration tests verify bounds, cube edge geometry, clockwise rotation, center stability, and repeated rotations.

Web/WASM tests

Node tests instantiate the compiled WASM module, validate exports, rotate the runtime buffer, and confirm negative zero is hidden.

CI/CD

GitHub Actions run formatting and the full test suite, then build the static `web/` artifact for GitHub Pages deployment.