<div style='display: flex; align-items: center'>
<div>${canvas}</div>
<div id='plotArea' style='margin: 5px'></div>
</div>
// Continuously updates
regl.frame(() => {
camera(function () {
regl.clear({ color: [0, 0.1, 0.26, 1] });
drawBunny();
let { view, projection } = camera,
t = performance.now() * 0.0001;
if (randomCameraUpToggle) {
camera.up[0] = noiseGen.noise3D(1, 20, t);
camera.up[1] = noiseGen.noise3D(10, 2, t);
camera.up[3] = noiseGen.noise3D(100, 2, t);
}
// console.log(view, projection);
computeNewPositions().map((d) => pointsPositionArray.push(d));
plot();
});
})
canvas = DOM.canvas(400, 400)
plot()
plot = () => {
let plt;
plt = Plot.plot({
// aspectRatio: 1.0,
width: 600,
height: 400,
grid: true,
x: { nice: true },
y: { nice: true },
color: { legend: true, scheme: "Dark2" },
marks: [
Plot.dot(pointsPositionArray, {
x: "x",
y: "y",
stroke: "name",
opacity: 0.5
})
]
});
document.getElementById("plotArea").innerHTML = "";
document.getElementById("plotArea").appendChild(plt);
return plt;
}
data = pointsPositionArray
data
Type Table, then Shift-Enter. Ctrl-space for more options.
pointsPositionArray = []
computeNewPositions()
computeNewPositions = () => {
const { view, projection } = camera,
pnt1 = { x: 1, y: 0, z: 0, w: 1 },
pnt2 = { x: 1, y: 1, z: 0, w: 1 },
pnt3 = { x: 0, y: 1, z: 0, w: 1 },
p1 = convert(projection, convert(view, pnt1)),
p2 = convert(projection, convert(view, pnt2)),
p3 = convert(projection, convert(view, pnt3)),
__________________________ = 0;
return [
Object.assign(p1, { name: "p1" }),
Object.assign(p2, { name: "p2" }),
Object.assign(p3, { name: "p3" })
];
}
convert = (mat4x4, pnt) => {
var x, y, z, w, offset;
function dot(offset) {
return (
mat4x4[offset * 4 + 0] * pnt.x +
mat4x4[offset * 4 + 1] * pnt.y +
mat4x4[offset * 4 + 2] * pnt.z +
mat4x4[offset * 4 + 3] * pnt.w
);
}
x = dot(0);
y = dot(1);
z = dot(2);
w = dot(3);
return { x, y, z, w };
}
camera.view
camera.projection
camera = reglCamera(regl, {
element: regl._gl.canvas,
center: [0, 0, 0],
theta: (3.0 * Math.PI) / 4.0,
phi: Math.PI / 6.0,
// up: [1, 0.5, 0],
up: [1, 1, 0],
distance: 5.0,
damping: 0,
// boolean flag to prevent mouse wheel from scrolling the whole window. Default is false.
noScroll: true,
renderOnDirty: true
})
drawBunny = regl({
frag: `
precision mediump float;
varying vec3 vcolor;
void main () {
gl_FragColor = vec4(vcolor * 0.75 + 0.25, 1.0);
}`,
vert: `
precision mediump float;
uniform mat4 projection, view;
attribute vec3 position;
varying vec3 vcolor;
void main () {
vcolor = vec3(position);
gl_Position = projection * view * vec4(position, 1.0);
}`,
attributes: {
position: model.positions
},
elements: model.cells
})
model = triangle
triangle = {
let positions, cells;
positions = [
[0, 0, 0],
[1, 0, 0],
[1, 1, 0],
[0, 1, 0]
];
cells = [
[0, 1, 2],
[0, 2, 3]
];
return { positions, cells };
}
bunny = (await import("https://cdn.skypack.dev/bunny@1.0.1")).default
normals = (await import("https://cdn.skypack.dev/angle-normals@1.0.0")).default
regl = (await import("https://cdn.skypack.dev/regl@2")).default({canvas})
reglCamera = (await import("https://cdn.skypack.dev/regl-camera@2.1.1")).default
noiseGen.noise3D(1, 2, performance.now())
noiseGen = new simplexNoise(performance.now())
simplexNoise = require("simplex-noise@2.4.0")
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.
