https://github.com/gregorykogan/mnemonic-pictures

NPM package for generating mnemonic pictures written in Rust
https://github.com/gregorykogan/mnemonic-pictures

canvas generative-art image mnemonic mnemonic-generator npm-package perlin-noise picture rust simplex-noise typescript wasm webassembly

Last synced: 1 day ago
JSON representation

NPM package for generating mnemonic pictures written in Rust

• Host: GitHub
• URL: https://github.com/gregorykogan/mnemonic-pictures
• Owner: GregoryKogan
• License: gpl-3.0
• Created: 2023-02-19T21:00:09.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-30T05:54:16.000Z (9 months ago)
• Last Synced: 2024-10-30T07:59:15.648Z (9 days ago)
• Topics: canvas, generative-art, image, mnemonic, mnemonic-generator, npm-package, perlin-noise, picture, rust, simplex-noise, typescript, wasm, webassembly
• Language: Rust
• Homepage: https://gregorykogan.github.io/mnemonic-pictures
• Size: 257 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# mnemonic-pictures

NPM package for generating mnemonic pictures written in Rust

![Rust](https://img.shields.io/badge/rust-%23000000.svg?style=for-the-badge&logo=rust&logoColor=white&color=CE412B)

![image](https://img.shields.io/badge/WebAssembly-654FF0?style=for-the-badge&logo=WebAssembly&logoColor=white)

![image](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)  

[![NPM](https://nodei.co/npm/@gregorykogan/mnemonic-pictures.png?compact=true)](https://nodei.co/npm/@gregorykogan/mnemonic-pictures/)

**Check out the [online demo](https://gregorykogan.github.io/mnemonic-pictures)**

Generate a unique picture for any given (number/string) seed



  



**Generation is presistent across devices and sessions**\

To verify this, you can enter 'Red Sky' seed at 195x130 resolution in the [online demo](https://gregorykogan.github.io/mnemonic-pictures)\

Resulting image should look like red sky



  



## Installation

NPM package: https://www.npmjs.com/package/@gregorykogan/mnemonic-pictures

**npm**

```shell

npm i @gregorykogan/mnemonic-pictures

```

**yarn**

```shell

yarn add @gregorykogan/mnemonic-pictures

```

## Setup

This package uses [WASM](https://webassembly.org/) which is not supported by default by most frontend tooling. 

You would need some 3rd party package to add WASM support. For example this is what you would need to do for [Vite](https://vitejs.dev/):

Add [vite-plugin-wasm](https://www.npmjs.com/package/vite-plugin-wasm) and [vite-plugin-top-level-await](https://www.npmjs.com/package/vite-plugin-top-level-await).

Configure it like this

```typescript

// vite.config.ts

import { defineConfig } from 'vite'

import wasm from "vite-plugin-wasm";

import topLevelAwait from "vite-plugin-top-level-await";

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [

    wasm(),

    topLevelAwait(),

  ],

  optimizeDeps: {

    exclude: [

      "@gregorykogan/mnemonic-pictures"

    ]

  }

})

```

## Usage

### Import

WASM module needs to be initialized before running. `init()` function is async and is module's default export

Import example **with** top-level await:

```typescript

import init, { init_console_errors } from '@gregorykogan/mnemonic-pictures';

await init();

init_console_errors();

// do whatever with the module

```

Import example **without** top-level await:

```typescript

import init, { init_console_errors } from '@gregorykogan/mnemonic-pictures';

let wasmLoaded = false;

init().then(() => {

  init_console_errors();

  wasmLoaded = true;

});

// ...

if (wasmLoaded) {

  // do whatever with the module

}

```

Here `init_console_errors()` is optional. It will log human readable traceback for wasm errors if they occur.

### Generation

HTML

```html

```

Script

```typescript

import { generate, generate_from_string } from '@gregorykogan/mnemonic-pictures';

// assuming wasm module is initialized

generate("display", BigInt(123456));  // generate from number seed

// or

generate_from_string("display", "my-seed");  // generate from string seed

```

Here the first argument is an `id` of the canvas html element and the second one is a generation seed.

Seed is used to configure starting state of pseudo random generator that is used for further image generation on all steps.

To get u64 number from string [SipHasher crate](https://crates.io/crates/siphasher) is used.

### Blurry canvas issue

Often canvases of small sizes (15 by 10 for example) are displayed blurry. To fix it add this line to your canvas CSS styling:

```CSS

#display {

  image-rendering: pixelated;

}

```

### Example

You can see full usage example [here](https://github.com/GregoryKogan/mnemonic-pictures/tree/main/example)