// Continuously updates
regl({})(() =>
{
regl.clear({ color: [0.9, 0.9, 0.9, 1] });
drawMe();
}
)
drawMe = regl({
frag: `
precision mediump float;
varying vec3 vcolor;
varying vec2 uv;
uniform sampler2D redpanda;
void main () {
//gl_FragColor = vec4(vcolor,1.0);
gl_FragColor = texture2D(redpanda, uv);
}`,
vert: `
precision mediump float;
attribute vec2 position;
attribute vec3 color;
attribute vec2 a_uv;
varying vec3 vcolor;
varying vec2 uv;
uniform mat4 screen2unit;
void main () {
gl_PointSize = 5.0;
gl_Position = screen2unit * vec4(position,0.0,1.0);
uv = a_uv;
vcolor = color;
}`,
attributes: {
position: positions,
color: positions.map(() => [Math.random(), Math.random(), Math.random()]),
a_uv
// : [
// [region.x,region.y],[region.x+region.width,region.y],[region.x,region.y],
// [region.x+region.width,region.y],[region.x+region.width,region.y+region.height],[region.x,region.y+region.height],
// ],
// a_uv: vertices.map(() => [
// [region.x,region.y],
// [region.x,region.y+region.height],
// [region.x+region.width,region.y+region.height]]),
},
elements: triangles,
uniforms: {
screen2unit,
redpanda,
},
count: triangles.length * 3,
lineWidth: 1,
primitive: 'triangles',
})
screen2unit = m.invert44([],m.mat23to44([],m.viewport([],0,cwidth,0,cheight)))
cwidth = width
cheight = 500
data = [...new Array(1000)].map(() => [Math.random()*cwidth,Math.random()*cheight])
vertices=
// [
// [0,cheight],[cwidth/2,cheight],[cwidth,cheight],
// [0,0],[cwidth/2,0],[cwidth,0],
// ]
new pds({shape:[cwidth,cheight],minDistance:60,maxDistance:80,tries:10}).fill()
trianglesRaw = new Delaunator([].concat(...vertices)).triangles
positions = [...trianglesRaw].map(p=>vertices[p]);
a_uv = [].concat(...triangles.map(() => [
[region.x,region.y],
[region.x,region.y+region.height],
[region.x+region.width,region.y+region.height]
]))
triangles = {
const ret=[];
for (let i=0; i<trianglesRaw.length; i+=3)
ret.push([i,i+1,i+2]);//trianglesRaw.slice(i,i+3))
return ret;
//return [[0,3,4],[0,4,1],[1,4,5],[1,5,2]];
}
redpanda = regl.texture({data:await FileAttachment("redpanda.png").image(), wrapS:'mirror',wrapT:'mirror'});//wrapS:'repeat'
regl = (await import("https://cdn.skypack.dev/regl@2")).default({canvas})
pds = (await import("https://cdn.skypack.dev/poisson-disk-sampling@2.2.2")).default
m = import("https://cdn.skypack.dev/@thi.ng/matrices@0.6.34")
Delaunator = (await import("https://cdn.skypack.dev/delaunator@5.0.0")).default
import {croppr} from '@sanderevers/croppr'
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.
