Published
Edited
Jan 7, 2022
Fork of Regl
1 fork
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Continuously updates
regl({})(() =>
{
regl.clear({ color: [0.9, 0.9, 0.9, 1] });
drawMe();
}
)
Insert cell
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: vertices,
color: vertices.map(() => [Math.random(), Math.random(), Math.random()]),
a_uv: triangles.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',
})
Insert cell
Insert cell
screen2unit = m.invert44([],m.mat23to44([],m.viewport([],0,cwidth,0,cheight)))
Insert cell
cwidth = width
Insert cell
cheight = 500
Insert cell
data = [...new Array(1000)].map(() => [Math.random()*cwidth,Math.random()*cheight])
Insert cell
vertices= new pds({shape:[cwidth,cheight],minDistance:20,maxDistance:30,tries:10}).fill()
Insert cell
trianglesRaw = new Delaunator([].concat(...vertices)).triangles
Insert cell
triangles = {
const ret=[];
for (let i=0; i<trianglesRaw.length; i+=3)
ret.push(trianglesRaw.slice(i,i+3))
return ret;
}
Insert cell
redpanda = regl.texture({data:await FileAttachment("redpanda.png").image(), wrapS:'repeat'});
Insert cell
Insert cell
regl = (await import("https://cdn.skypack.dev/regl@2")).default({canvas})
Insert cell
pds = (await import("https://cdn.skypack.dev/poisson-disk-sampling@2.2.2")).default
Insert cell
m = import("https://cdn.skypack.dev/@thi.ng/matrices@0.6.34")
Insert cell
Delaunator = (await import("https://cdn.skypack.dev/delaunator@5.0.0")).default
Insert cell
import {croppr} from '@sanderevers/croppr'
Insert cell

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.
Learn more