Skip to content
Search Gists
Sign in Sign up

Instantly share code, notes, and snippets.

mattdesl / gmm.py
Last active March 30, 2026 14:37
color quantization using gaussian mixture model in OKLCH
import numpy as np
from PIL import Image
from sklearn.mixture import GaussianMixture
import matplotlib.pyplot as plt
import matplotlib.patches as patches
import ColorMath
IMAGE_PATH = "data/adirondack_chairs.png"
OUTPUT_PATH = "output/quant_oklch.png"
K = 10
function nextGaussianBoxMuller(mean = 0, standardDerivation = 1, rng = Math.random) {
return (
mean +
standardDerivation *
(Math.sqrt(-2.0 * Math.log(rng())) * Math.cos(TWO_PI * rng()))
);
}
mattdesl / main.js
Last active August 5, 2025 03:09
uform3 perf test
import {
Tensor,
TextEncoder,
TextProcessor,
ImageEncoder,
env,
} from "./uform-encoder.js";
import imageUrl from "../assets/images/monalisa.png";
const model = "fp32"; // "v3", "fp16" or "fp32"
mattdesl / decoder.js
Last active December 18, 2024 18:22
Filigree file encoder and decoder. MIT License, free to use.
/**
* A decoder for the Filigree file format, which are assets stored on IPFS.
* Since this code ended up on-chain, it is written in such a way as to compress well.
* @license MIT
* @author Matt DesLauriers (@mattdesl)
**/
export function decodeStream(buffer, headers, layer, cell) {
let dv = new DataView(buffer);
let byteOffset = 0;

Fast OKLab Gamut Mapping in JavaScript

Using OKLCH and sRGB. This also works for Display P3, however you'll have to pass the correct coefficients to the cusp & intersection utilities, and instead of using linear sRGB, you would convert to linear Display P3.

If you wish to support both sRGB and Display P3 gamut mapping, it is possible with a single function and a matrix parameter, as they both use the same coordinate range (0..1) and gamma transfer function.

import { OKLCH_to_linear_sRGB } from './convert.js';
import { rgb_in_gamut, linear_to_gamma } from './util.js';
import { find_cusp, find_gamut_intersection } from './oklab-cusp.js';
mattdesl / random.wgsl
Last active March 6, 2026 22:19
high quality deterministic PRNG in WebGPU & WGSL (xorshift128) - MIT licensed
// each pixel is assigned 4 random u32 values per frame
@group(0) @binding(1)
var<storage, read> rnd_state: array<u32>;
// the current state within this pixel
var<private> local_rnd_state:vec4u;
fn random_u32(state:ptr<private,vec4u>) -> u32 {
var st:vec4u = *state;
/* Algorithm "xor128" from p. 5 of Marsaglia, "Xorshift RNGs" */
mattdesl / bitmap-display-p3.js
Created June 30, 2024 17:19
Draw Uint8Array Display-P3 RGBA data to canvas
import {
ChunkType,
ColorType,
colorTypeToChannels,
encode,
encode_iCCP,
} from "png-tools";
import { deflate } from "pako";
mattdesl / drawRoundedSegment.js
Created June 5, 2024 09:02
drawRoundedSegment.js (MIT license)
/**
* Outlines a line segment (a, b) with rounded caps on either side, and the ability
* to adjust the ellipsoid-ness of the rounded caps to create a more 'stubby' edge.
*
* @license MIT
* @author Matt DesLauriers (@mattdesl)
*/
export default function drawRoundedSegment(a, b, lineWidth, capSegments = 32, ellipsoid = 1) {
let normX = b[0] - a[0];
mattdesl / example.js
Created May 22, 2024 08:24
quickly create a linear gradient in software in JS
const worker = new Worker(new URL("./gradient.js", import.meta.url), {
type: "module",
});
worker.postMessage({
// image options
width: 128,
height: 256,
channels: 4,
depth: 8
});
mattdesl / Home.tsx
Created April 25, 2024 16:52
wallet signature mechanism for Meridian book verification
import { ConnectButton } from '@rainbow-me/rainbowkit';
import type { NextPage } from 'next';
import { useSignMessage } from 'wagmi'
import Image from 'next/image';
import { verifyMessage } from 'ethers/lib/utils'
import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { createMessage } from '../tools/sign';
import Head from 'next/head';
import styles from '../styles/Home.module.css';
NewerOlder

AltStyle によって変換されたページ (->オリジナル) /