Module: points/effects

These are wgsl functions, not js functions. The function is enclosed in a js string constant, to be appended into the code to reference it in the string shader.

Source:: core/effects.js, line 1

Members

staticconstantblur9

Applies a blur to an image
based on https://github.com/Jam3/glsl-fast-gaussian-blur/blob/master/9.glsl

Source:: core/effects.js, line 346

Example

import { blur9 } from 'points/effects';

// wgsl string
${blur9}
let value = blur9(image, imageSampler, position, uv, resolution, direction);js

staticconstantclearAlpha

Takes a color and reduces its value but applied to the alpha channel.

Source:: core/effects.js, line 189

Example

import { clearAlpha } from 'points/effects';

// wgsl string
${clearAlpha}
let value = clearAlpha(color, 1.01);js

staticconstantclearMix

Takes a color and reduces its values by a level

Source:: core/effects.js, line 162

Example

import { clearMix } from 'points/effects';

// wgsl string
${clearMix}
let value = clearMix(color, 1.01);js

staticconstanteuclideanDistance String

Calculates the Euclidean Distance between colors.

Source:: core/effects.js, line 24

Example

import { euclideanDistance } from 'points/effects';

// wgsl string
${euclideanDistance}
let currentDistance = euclideanDistance(color, paletteColor);js

staticconstantgetClosestColorInPalette String

This assumes you have declared a palette in a variable or constant called getClosestColorInPalette_palette
Gets the closest color based on the distance parameter.

Source:: core/effects.js, line 60

Example

import { getClosestColorInPalette } from 'points/effects';

// wgsl string
${getClosestColorInPalette}

const numPaletteItems = 2;
const getClosestColorInPalette_palette = array<vec4f, numPaletteItems>(
 vec4(255./255., 69./255., 0., 1.),
 vec4(255./255., 168./255., 0, 1.),
);

let value = getClosestColorInPalette(rgba, numPaletteItems, distance);js

staticconstantgetColorsAround4Texture

From a given texture and its position, get top, botto, left and right color values

Source:: core/effects.js, line 243

Example

import { getColorsAround4Texture } from 'points/effects';

// wgsl string
${getColorsAround4Texture}
let value = getColorsAround4Texture(texture, position, distance);js

staticconstantgetColorsAroundTexture

From a given texture and its position, get the 9 color values around.

Source:: core/effects.js, line 214

Example

import { getColorsAroundTexture } from 'points/effects';

// wgsl string
${getColorsAroundTexture}
let value = getColorsAroundTexture(texture, position, distance);js

staticconstantorderedDithering

Applies Ordered Dithering to a color. Best with the colors of an image texture.
This requires orderedDithering_threshold_map to be imported or create your own version of it.

Source:: core/effects.js, line 123

Example

import { orderedDithering, orderedDithering_threshold_map } from 'points/effects';

// wgsl string
${orderedDithering}
${orderedDithering_threshold_map}
let color = texturePosition(image, imageSampler, vec2(0.), uvr, false);
let value = orderedDithering(color, depth, dims, uvr);js

staticconstantorderedDithering_threshold_map

To be used with orderedDithering.
You can use this or create yours.

Source:: core/effects.js, line 92

staticconstantsoften4

Softens a color based on list of colors around it or any list of 4 colors.

Source:: core/effects.js, line 279

Example

import { soften4 } from 'points/effects';

// wgsl string
${soften4}
let value = soften4(color, colorsAround,  colorPower);js

staticconstantsoften8

Softens a color based on list of colors around it or any list of 8 colors.

Source:: core/effects.js, line 306

Example

import { soften8 } from 'points/effects';

// wgsl string
${soften8}
let value = soften8(color, colorsA);js