High-performance Javascript color gradient library powered by Rust + WebAssembly

Related tags

Command-line visualization nodejs color webassembly wasm rainbow colormap gradient
Overview

colorgrad-js

npm

High-performance Javascript color gradient library powered by Rust + WebAssembly.

Benchmarks

cd examples
npm install
node bench.js

Result

colorgrad-js x 3,948,162 ops/sec ±5.55% (72 runs sampled)
chroma-js x 1,150,657 ops/sec ±1.29% (91 runs sampled)
culori x 1,912,210 ops/sec ±1.93% (88 runs sampled)
d3-scale x 1,858,222 ops/sec ±0.14% (93 runs sampled)
tinygradient x 372,325 ops/sec ±2.13% (92 runs sampled)
color-interpolate x 939,965 ops/sec ±1.15% (92 runs sampled)
Fastest is colorgrad-js

Installation

npm i colorgrad-js

Usage

Node.js

import colorgrad from "colorgrad-js";

const grad = colorgrad.customGradient(["#C41189", "#00BFFF", "#FFD700"], null, "oklab", "catmull-rom");

// get the gradient domain min & max
console.log(grad.domain()); // [0, 1]

// get color at 0.75
console.log(grad.at(0.75).rgba8());

// get 100 colors evenly spaced accross gradient domain
console.log(grad.colors(100).map(c => c.hex()));

Bundler

import * as colorgrad from "colorgrad-js/bundler";

const grad = colorgrad.customGradient(["#C41189", "#00BFFF", "#FFD700"], null, "oklab", "catmull-rom");
console.log(grad.at(0.75).rgba8());
console.log(grad.colors(100).map(c => c.hex()));

Browser

<html>
<head>
<script type="module">

import init, * as colorgrad from "https://unpkg.com/[email protected]/web/colorgrad.js";

async function run() {
    await init();

    const grad = colorgrad.customGradient(["#C41189", "#00BFFF", "#FFD700"], null, "oklab", "catmull-rom");
    console.log(grad.at(0.75).rgba8());
    console.log(grad.colors(100).map(c => c.hex()));
}

run();

</script>
</head>
<body>
</body>
</html>

API

Custom Gradient

// colorgrad.customGradient(colors, position, blending_mode, interpolation_mode);

const g = colorgrad.customGradient(["deeppink", "gold", "seagreen"]);

const g = colorgrad.customGradient(["deeppink", "gold", "seagreen"], [0, 0.35, 1.0]);

const g = colorgrad.customGradient(["deeppink", "gold", "seagreen"], null, "oklab", "catmull-rom");

Preset Gradients

colorgrad.rainbow()
colorgrad.sinebow()
colorgrad.turbo()
colorgrad.cividis()
colorgrad.cubehelixDefault()
colorgrad.warm()
colorgrad.cool()
const g = colorgrad.rainbow();

console.log(g.at(0.5).hex());

Building

Requirements:

cd colorgrad-js
wasm-pack build --target nodejs

Similar Projects

You might also like...
Rust in Anger: high-performance web applications

Rust in Anger: Book demo This is the code repository that accompanies the Rust in Anger blog post. The following folders each come with their own buil

EqualTo 26 Apr 9, 2023
An extremely high performance logging system for clients (iOS, Android, Desktop), written in Rust.

Pinenut Log 中文文档 ・ English An extremely high performance logging system for clients (iOS, Android, Desktop), written in Rust. Overview Compression Pin

Tangent 4 Dec 1, 2023
High-performance and normalised trading interface capable of executing across many financial venues

High-performance and normalised trading interface capable of executing across many financial venues. Also provides a feature rich simulated exchange to assist with backtesting and dry-trading.

Barter 7 Dec 28, 2022
High-performance asynchronous computation framework for system simulation

Asynchronix A high-performance asynchronous computation framework for system simulation. What is this? Warning: this page is at the moment mostly addr

Asynchronics 7 Dec 7, 2022
High-performance, low-level framework for composing flexible web integrations

High-performance, low-level framework for composing flexible web integrations. Used mainly as a dependency of `barter-rs` project

Barter 8 Dec 28, 2022
High performance wlroots screen recording, featuring hardware encoding

wl-screenrec High performance wlroots based screen recorder. Uses dma-buf transfers to get surface, and uses the GPU to do both the pixel format conve

Russell Greene 32 Jan 21, 2023
The Amp programming language: a language designed for building high performance systems.

A language designed for building high performance systems. Platform Support x86_64-pc-windows ✅ x86_64-unknown-linux ⚠️ untested x86_64-unknown-darwin

The Amp Programming Language 5 Mar 17, 2023
Local-first high performance codebase index engine designed for AI

CodeIndex CodeIndex is a local-first high performance codebase index engine designed for AI. It helps your LLM understand the structure and semantics

Jipiti AI 9 Aug 30, 2023
A high-performance web-based geospatial visualization tool with an emphasis LEO satellites and lunar missions.

A high-performance web-based geospatial visualization tool with an emphasis LEO satellites and lunar missions. Written in Rust to target WebGPU, with WebGL2 backwards compatibility.

Shane B. 5 Dec 20, 2023
Comments
  • TextEncoder is not a constructor

    TextEncoder is not a constructor

    I'm getting an error just importing this module, any ideas?

    Uncaught TypeError: TextEncoder is not a constructor

    This is what I did.

    npm init -y
npm install @mazznoer/colorgrad
npm install --save-dev parcel

    I made an index.html that pulled in an index.js

    --index.html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <title>Colorgrad</title>

    <script src="index.js" type="module" />
  </head>
  <body>
    Colorgrad
  </body>
</html>

    --index.js

    import colorgrad from "@mazznoer/colorgrad";

    Then I added a script in package.json

    ...
  "scripts": {
    "dev:watch": "parcel index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

    Then npm run dev:watch and when I open the browser http://localhost:1234/ I get the error above in the console. Any ideas?

    opened by larksoftware 3
Owner
Nor Khasyatillah
Nor Khasyatillah
GitHub https://mazznoer.github.io/colorgrad-js/
🚀 JavaScript driver for ScyllaDB, harnessing Rust's power through napi-rs for top performance. Pre-release stage. 🧪🔧

?? JavaScript driver for ScyllaDB. Pre-release stage. ???? ⚠️ Disclaimer ⚠️ This repository and the associated npm package are currently in a ?? pre-r

Daniel Boll 16 Oct 21, 2023
🐚+🦞 Ultra-portable Rust game engine suited for offline 2D games powered by WebAssembly

pagurus ?? + ?? Ultra-portable Rust game engine suited for offline 2D games powered by WebAssembly. Examples Snake Traditional snake game: examples/sn

Takeru Ohta 20 Mar 7, 2023
A high-performance Rust library designed to seamlessly integrate with the Discord API.

Rucord - Rust Library for Discord API Interactions Note: This library is currently under development and is not yet recommended for production use. Ov

Coders' Collab 4 Feb 26, 2023
Schemars is a high-performance Python serialization library, leveraging Rust and PyO3 for efficient handling of complex objects

Schemars Introduction Schemars is a Python package, written in Rust and leveraging PyO3, designed for efficient and flexible serialization of Python c

Michael Gendy 7 Nov 21, 2023
A modern high-performance open source file analysis library for automating localization tasks

?? Filecount Filecount is a modern high-performance open source file analysis library for automating localization tasks. It enables you to add file an

Babblebase 4 Nov 11, 2022
A high-performance WebSocket integration library for streaming public market data. Used as a key dependency of the `barter-rs` project.

Barter-Data A high-performance WebSocket integration library for streaming public market data from leading cryptocurrency exchanges - batteries includ

Barter 23 Feb 3, 2023
A dead simple ANSI terminal color painting library for Rust.

yansi A dead simple ANSI terminal color painting library for Rust. use yansi::Paint; print!("{} light, {} light!", Paint::green("Green"), Paint::red(

Sergio Benitez 169 Dec 25, 2022
Rust library to convert RGB 24-bit colors into ANSI 256 (8-bit) color codes with zero dependencies and at compile-time.

rgb2ansi256 rgb2ansi256 is a small Rust library to convert RGB 24-bit colors into ANSI 256 (8-bit) color codes with zero dependencies and const fn. Th

Linda_pp 7 Nov 17, 2022
An abstract, safe, and concise color conversion library for rust nightly This requires the feature adt_const_params

colortypes A type safe color conversion library This crate provides many methods for converting between color types. Everything is implemented abstrac

Jacob 13 Dec 7, 2022
Tiny color conversion library for TUI application builders

Definition of ANSI, RGB and HSL color types and all the conversions between them. There are many other color conversion crates. This one may be useful

Canop 8 Dec 15, 2022