cameraBuffer = () => {
let cameraParams = Object.assign({
center: [0, 3.5, 0],
theta: theta, //(3.0 * Math.PI) / 4.0,
phi: phi, //Math.PI / 6.0,
distance: 20.0,
damping: 0,
noScroll: true,
renderOnDirty: true
});
const camera = reglCamera(regl, cameraParams);
return [camera];
}
camera = {
let cameraParams = Object.assign({
center: [0, 3.5, 0],
theta: theta, //(3.0 * Math.PI) / 4.0,
phi: phi, //Math.PI / 6.0,
distance: 20.0,
damping: 0,
noScroll: true,
renderOnDirty: true
});
const camera = reglCamera(regl, cameraParams);
return camera;
}
{
// value1;
colorController;
updateParameters();
cameraBuffer()[0](function () {
regl.clear({ color: [0, 0.1, 0.26, 1] });
drawBunny()();
});
}
{
// value1;
now;
if (!paused && timer.elapsed() > 20) {
timer.update();
updateParameters();
cameraBuffer()[0](function () {
regl.clear({ color: [0, 0.1, 0.26, 1] });
drawBunny()();
});
}
}
// {
// function loop() {
// updateParameters();
// cameraBuffer()[0](function () {
// regl.clear({ color: [0, 0.1, 0.26, 1] });
// drawBunny()();
// });
// requestAnimationFrame(loop);
// }
// loop();
// }
// Continuously updates
// regl.frame(() => {
// updateParameters();
// camera(function () {
// regl.clear({ color: [0, 0.1, 0.26, 1] });
// drawBunny()();
// });
// })
// camera = (await require("https://bundle.run/regl-camera@2.1.1"))(regl, {
// center: [0, 3.5, 0],
// theta: (3.0 * Math.PI) / 4.0,
// phi: Math.PI / 6.0,
// distance: 20.0,
// damping: 0,
// noScroll: true,
// renderOnDirty: true
// })
drawBunny = () =>
regl({
frag: `
precision mediump float;
varying vec3 vnormal;
void main () {
gl_FragColor = vec4(abs(vnormal), 1.0);
}`,
vert: `
precision mediump float;
uniform mat4 projection, view;
attribute vec3 position, normal;
varying vec3 vnormal;
void main () {
vnormal = normal;
gl_Position = projection * view * vec4(position, 1.0);
}`,
attributes: {
position: bunny.positions,
normal: color() //normals(bunny.cells, bunny.positions)
},
elements: bunny.cells
})
paused = {
button1;
return !this;
}
color()
color = () => {
// value1;
const c = normals(bunny.cells, bunny.positions);
for (let i = 0; i < c.length; i++) {
let p = bunny.positions[i];
let t = 0;
for (let j = 0; j < n; j++) {
t +=
cs2[j] *
sigmoid((p[0] - cs1[j][3]) / (ext[1][0] - ext[0][0])) *
cs1[j][0];
t +=
cs2[j] *
sigmoid((p[1] - cs1[j][4]) / (ext[1][1] - ext[0][1])) *
cs1[j][1];
t +=
cs2[j] *
sigmoid((p[2] - cs1[j][5]) / (ext[1][2] - ext[0][2])) *
cs1[j][2];
}
c[i][0] = sigmoid(t);
c[i][1] /= 2;
c[i][2] /= 2;
}
const e = d3.extent(c);
// const tScale = d3.scaleLinear().domain([e[0][0], e[1][0]]).range([0, 1]);
// return c.map((t) => {
// const { r, g, b } = d3.color(colorScale(tScale(t[0])));
// return [r / 255, g / 255, b / 255];
// });
return c.map((x) => [
// x[0],
0.2 + 0.7 * ((x[0] - e[0][0]) / (e[1][0] - e[0][0])) ** 2,
x[1],
x[2]
]);
}
viewof color1 = Inputs.color({ label: "Favorite color 1", value: "#4682b4" })
viewof color2 = Inputs.color({label: "Favorite color 2", value: "#a03322"})
d3.color(colorScale(0.5))
colorScale = d3.interpolateHsl(color1, color2)
n = 10
cs2 = {
reload1;
const cs2 = [];
for (let i = 0; i < n * 2; i++) {
cs2.push(rnd());
}
return cs2;
}
cs1 = {
reload1;
const cs1 = [];
for (let i = 0; i < n * 2; i++) {
let cs = [];
for (let j = 0; j < 6; j++) {
cs.push(rnd());
}
cs1.push(cs);
}
return cs1;
}
ext = d3.extent(bunny.positions)
updateParameters = () => {
for (let i = 0; i < n; i++) {
cs2[i] += cs2[n + i] * 0.2;
if (Math.abs(cs2[i]) > 1) {
cs2[n + i] *= -1;
cs2[i] += cs2[n + i] * 0.2;
}
}
for (let i = 0; i < n; i++) {
for (let j = 0; j < 6; j++) {
cs1[i][j] += cs1[n + i][j] * 0.2;
let M = 1,
m = -1;
if (j > 3) {
M = ext[1][j - 3];
m = ext[0][j - 3];
}
if (cs1[i][j] > M || cs1[i][j] < m) {
cs1[n + i][j] *= -1;
cs1[i][j] += cs1[n + i][j] * 0.2;
}
}
}
// console.log("Parameters Updated");
}
rnd = () => Math.random() - 0.5
sigmoid = (x) => Math.exp(x) / (1 + Math.exp(x))
d3.extent(bunny.positions)
bunny.positions
normals(bunny.cells, bunny.positions)
bunny = require('https://bundle.run/bunny@1.0.1')
normals = require('https://bundle.run/angle-normals@1.0.0')
reglCamera = require("https://bundle.run/regl-camera@2.1.1")
regl = (await require("regl"))({ canvas })
d3 = require("d3")
// Imported from https://observablehq.com/@ellemenno/toc-with-nesting
toc = (title = "Table of Contents", selector = "h1,h2,h3") => {
return Generators.observe((notify) => {
let old = [];
const level = (h) => parseInt(h.tagName[1], 10);
const observed = () => {
const now = Array.from(document.querySelectorAll(selector));
if (!(now.length !== old.length || now.some((h, i) => h !== old[i])))
return;
const header = title && title.length > 0 ? `<b>${title}</b>` : "";
const list = (old = now).map((h) =>
Object.assign(
html`${"<ul>".repeat(level(h) - 1)}<li><a href=#${h.id}>${DOM.text(
h.textContent
)}`,
{ onclick: (e) => (e.preventDefault(), h.scrollIntoView()) }
)
);
notify(html`${header}<ul>${list}`);
};
observed();
const observer = new MutationObserver(observed);
observer.observe(document.body, { childList: true, subtree: true });
return () => observer.disconnect();
});
}
// Imported from https://observablehq.com/@listenzcc/cosh-surface-in-regl
timer = (() => {
const timer = Object.create({ t: new Date() });
timer.elapsed = () => {
const t = new Date();
return t - timer.t;
};
timer.update = () => {
timer.t = new Date();
};
return timer;
})()
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.
