@absulit/points
Version:
A Generative Art library made in WebGPU
164 lines (154 loc) • 6.82 kB
JavaScript
/* @ts-self-types="./effects.d.ts" */
const euclideanDistance=`
fn euclideanDistance(color:vec4f, distanceColor:vec4f) -> f32{
return sqrt(
pow(color.r - distanceColor.r, 2.) +
pow(color.g - distanceColor.g, 2.) +
pow(color.b - distanceColor.b, 2.)
);
}
`;const getClosestColorInPalette=`
${euclideanDistance}
fn getClosestColorInPalette(color:vec4f, numPaletteItems:u32, distance:f32) -> vec4f {
// numPaletteItems = 5
// getClosestColorInPalette_palette = array< vec4f, 5 /* numPaletteItems */>(
// vec4(0),
// vec4(0,1,0,1),
// vec4(1,0,0,1),
// vec4(0,0,1,1),
// vec4(1,1,1,1),
// );
//var distance = .5;
var local_distance = distance;
var selectedColor = vec4(0.);
for(var i = 0u; i < numPaletteItems; i++){
let paletteColor = getClosestColorInPalette_palette[i];
let currentDistance = euclideanDistance(color, paletteColor);
if(currentDistance < local_distance){
selectedColor = paletteColor;
local_distance = currentDistance;
}
}
return selectedColor;
}
`;const orderedDithering_threshold_map=`
const orderedDithering_threshold_map = array<f32,16>(
1, 9, 3, 11,
13, 5, 15, 7,
4, 12, 2, 10,
16, 8, 14, 6
);
`;const orderedDithering=`
fn orderedDithering(color:vec4f, depth:f32, dims:vec2<u32>, uv:vec2f) -> vec4f {
// const orderedDithering_threshold_map = array<f32,16>(
// 1, 9, 3, 11,
// 13, 5, 15, 7,
// 4, 12, 2, 10,
// 16, 8, 14, 6
// );
let t = orderedDithering_threshold_map[ i32( (uv.x % 4.) + (uv.y % 4. * f32(dims.x))) ];
var r = (color.r + t / depth);
if(r < 1){r = 0;}
var g = (color.g + t / depth);
if(g < 1){g = 0;}
var b = (color.b + t / depth);
if(b < 1){b = 0;}
let ditheredImage = vec4(
r * depth,
g * depth,
b * depth,
1,
);
return ditheredImage;
}
`;const clearMix=`
//const clearMixlevel = 1.81;//1.01
fn clearMix(color:vec4f, level:f32) -> vec4f {
let rr = color.r / level;
let gr = color.g / level;
let br = color.b / level;
var ar = color.a / level;
if(ar <= .09){
ar = 0.;
}
return vec4f(rr, gr, br, ar);
}
`;const clearAlpha=`
// level 2.
fn clearAlpha(currentColor:vec4f, level:f32) -> vec4f{
var ar = currentColor.a / level;
if(ar <= .09){
ar = 0.;
}
return vec4f(currentColor.rgb, ar);
}
`;const getColorsAroundTexture=`
fn getColorsAroundTexture(texture:texture_2d<f32>, position: vec2<i32>, distance: i32) -> array< vec4f, 8 > {
return array< vec4f,8 >(
textureLoad(texture, vec2<i32>( position.x-distance, position.y-distance ), 0).rgba,
textureLoad(texture, vec2<i32>( position.x, position.y-distance ), 0).rgba,
textureLoad(texture, vec2<i32>( position.x+distance, position.y-distance ), 0).rgba,
textureLoad(texture, vec2<i32>( position.x-distance, position.y ), 0).rgba,
textureLoad(texture, vec2<i32>( position.x+distance, position.y ), 0).rgba,
textureLoad(texture, vec2<i32>( position.x-distance, position.y+distance ), 0).rgba,
textureLoad(texture, vec2<i32>( position.x, position.y+distance ), 0).rgba,
textureLoad(texture, vec2<i32>( position.x+distance, position.y+distance ), 0).rgba,
);
}
`;const getColorsAround4Texture=`
fn getColorsAround4Texture(texture:texture_2d<f32>, position: vec2<i32>, distance: i32) -> array< vec4f, 4 > {
return array< vec4f, 4 >(
//textureLoad(texture, vec2<i32>( position.x-distance, position.y-distance ), 0).rgba,
textureLoad(texture, vec2<i32>( position.x, position.y-distance ), 0).rgba,
//textureLoad(texture, vec2<i32>( position.x+distance, position.y-distance ), 0).rgba,
textureLoad(texture, vec2<i32>( position.x-distance, position.y ), 0).rgba,
textureLoad(texture, vec2<i32>( position.x+distance, position.y ), 0).rgba,
//textureLoad(texture, vec2<i32>( position.x-distance, position.y+distance ), 0).rgba,
//textureLoad(texture, vec2<i32>( position.x, position.y+distance ), 0).rgba,
textureLoad(texture, vec2<i32>( position.x+distance, position.y+distance ), 0).rgba,
);
}
`;const soften4=`
fn soften4(color:vec4f, colorsAround:array<vec4f, 4>, colorPower:f32) -> vec4f {
var newColor:vec4f = color;
for (var indexColors = 0u; indexColors < 4u; indexColors++) {
var colorAround = colorsAround[indexColors];
colorAround = (color + colorAround * colorPower) / (colorPower + 1.);
newColor += colorAround;
}
return newColor * .2;
}
`;const soften8=`
fn soften8(color:vec4f, colorsAround:array<vec4f, 8>, colorPower:f32) -> vec4f {
var newColor:vec4f = color;
for (var indexColors = 0u; indexColors < 8u; indexColors++) {
var colorAround = colorsAround[indexColors];
// colorAround.r = (color.r + colorAround.r * colorPower) / (colorPower + 1.);
// colorAround.g = (color.g + colorAround.g * colorPower) / (colorPower + 1.);
// colorAround.b = (color.b + colorAround.b * colorPower) / (colorPower + 1.);
// colorAround.a = (color.a + colorAround.a * colorPower) / (colorPower + 1.);
colorAround = (color + colorAround * colorPower) / (colorPower + 1.);
newColor += colorAround;
}
return newColor * .2;
}
`;const blur9=`
fn blur9(image: texture_2d<f32>, imageSampler:sampler, position:vec2f, uv:vec2f, resolution: vec2f, direction: vec2f) -> vec4f {
var color = vec4(0.0);
let off1 = vec2(1.3846153846) * direction;
let off2 = vec2(3.2307692308) * direction;
color += texturePosition(image, imageSampler, position, uv, true) * 0.2270270270;
color += texturePosition(image, imageSampler, position, uv + (off1 / resolution), true) * 0.3162162162;
color += texturePosition(image, imageSampler, position, uv - (off1 / resolution), true) * 0.3162162162;
color += texturePosition(image, imageSampler, position, uv + (off2 / resolution), true) * 0.0702702703;
color += texturePosition(image, imageSampler, position, uv - (off2 / resolution), true) * 0.0702702703;
return color;
}
`;const wireframe=`
fn wireframe(color:vec4f, fillColor:vec4f, thickness:f32, barycentrics:vec3f) -> vec4f {
// Distance to nearest edge
let edgeDist = min(min(barycentrics.x, barycentrics.y), barycentrics.z);
let width = fwidth(edgeDist); // approximate derivative per pixel
return mix(fillColor, color, step(edgeDist, width * thickness));
}
`;export{blur9,clearAlpha,clearMix,euclideanDistance,getClosestColorInPalette,getColorsAround4Texture,getColorsAroundTexture,orderedDithering,orderedDithering_threshold_map,soften4,soften8,wireframe};