Purescript, Local First
{ return run(/* wgsl */`
#import prelude::{screen, time}
//==========================================================================================
// hashes (low quality, do NOT use in production)
//==========================================================================================
fn hash1(p: float2) -> float
{
let p2 = 50.0*fract( p*0.3183099 );
return fract( p2.x*p2.y*(p2.x+p2.y) );
}
fn noise(x: float2 ) -> float
{
let p = floor(x);
let w = fract(x);
let u = w * w * (3.0 - 2.0 * w);
let a = hash1(p+float2(0,0));
let b = hash1(p+float2(1,0));
let c = hash1(p+float2(0,1));
let d = hash1(p+float2(1,1));
return -1.0 + 2.0 * (a + (b-a) * u.x + (c-a) * u.y + (a - b - c + d) * u.x * u.y);
}
@compute @workgroup_size(16, 16)
fn main_image(@builtin(global_invocation_id) id: uint3) {
let screen_size = uint2(textureDimensions(screen));
if (id.x >= screen_size.x || id.y >= screen_size.y) { return; }
let fragCoord = float2(id.xy) + .5;
let resolution = float2(screen_size);
let p = fragCoord / resolution.x;
var ignore = time.elapsed / time.elapsed; // to avoid rewriting run without the time bindings.
var uv = p * float2(resolution.x / resolution.y, 1.) + ignore;
var f = noise( 8.0*uv );
textureStore(screen, int2(id.xy), float4(f, f, f, 1.));
}
`)
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
