https://github.com/guidoschmidt/zipper

Experimental ziglang image sequence collection server
https://github.com/guidoschmidt/zipper

creativecode p5 threejs tool tooling zig ziglang

Last synced: 1 day ago
JSON representation

Experimental ziglang image sequence collection server

• Host: GitHub
• URL: https://github.com/guidoschmidt/zipper
• Owner: guidoschmidt
• Created: 2023-01-26T09:41:51.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-16T21:38:06.000Z (30 days ago)
• Last Synced: 2024-10-18T21:33:47.332Z (28 days ago)
• Topics: creativecode, p5, threejs, tool, tooling, zig, ziglang
• Language: Zig
• Homepage:
• Size: 36.1 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# zipper

> zig REST api server to store image data requests, 

> e.g. for saving web canvas data

### Rationale

Working with [Web canvas

API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) it's often

tedious to export animations as movies right from the browser. Usually one ends

up using a screen recording software (OBS, Quicktime, ...) or the browsers

download feature (resulting in thousand of download prompts opening up).

This is a quick and dirty image request handler for storing images & image

sequences right from canvas API animations.

### Build & Run

```bash

git clone [email protected]:guidoschmidt/zipper.git

cd zipper

git submodule update --recursive --init

zig build

zig build run

```

### Sending image data from the browser

Add the following Javascript/Typescript code and call it from your animation loop:

```typescript

function saveCanvasToBackend(selector: string, sequence: string, frame: number) {

  const canvas: HTMLCanvasElement | null = document.querySelector(

    selector || "canvas"

  );

  if (canvas === null) {

    throw new Error(`No canvas element with ${selector} found`);

  }

  const dataUrl = canvas!

    .toDataURL("image/png")

    ?.replace("image/png", "image/octet-stream");

  const data = {

    imageData: dataUrl,

    foldername: `${sequence}`,

    filename: `${frame}`,

    ext: "png",

  };

  fetch("http://localhost:3000", {

    method: "POST",

    body: JSON.stringify(data),

  });

}

```

Implement any user interaction (button press, key press, etc) to set

`isRecording` to `true` and call `saveCanvasToBackend` in the animation loop function:

```Typescript

let frame = 0;

let isRecording = false;

function draw() {

  if (isRecording) {

    saveCanvasToBackend("canvas", "Sequence-1", frame);

    frame++;

  }

}

```

### TODO

- Error handling

- p5.js example

- three.js example