Public
Edited
Jul 24, 2024
Fork of Regl
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
SSVEPCanvas = DOM.canvas(width, (width * 9) / 16)
Insert cell
Insert cell
{
selectedBlockOption;

let canvas = document.getElementById("canvas-2"),
{ width, height } = canvas,
ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, width, height);

if (showLabel) {
blocks.map((d, i) => {
let { x1, y1, x2, y2, cx, cy, omega, phi, uid } = d;

ctx.font = "italic 16px Courier";
ctx.textAlign = "center";
ctx.fillStyle = "yellow";

ctx.textBaseline = "bottom";
ctx.fillText(`W: ${omega.toFixed(2)}`, cx * width, y1 * height);

ctx.textBaseline = "top";
ctx.fillText(`P: ${phi.toFixed(2)}`, cx * width, y2 * height);

ctx.font = "24px Bold";
ctx.textBaseline = "middle";
ctx.strokeStyle = "red";
ctx.fillStyle = color;
ctx.fillText(`${uid}`, cx * width, cy * height);
ctx.strokeText(`${uid}`, cx * width, cy * height);
});
}
}
Insert cell
framebuffer = {
let { width, height } = SSVEPCanvas,
data = Array(width * height * 4)
.fill(0)
.map(() => 0),
texture = regl.texture({
type: "float",
width,
height,
data
});

return regl.framebuffer({ color: texture, depthStencil: false });
}
Insert cell
tic = new Date().getTime() / 1000
Insert cell
getSeconds = () => {
let seconds = now / 1000;
seconds -= tic;
return seconds;
}
Insert cell
draw = regl({
frag: `
#define PI 3.1415926

precision mediump float;
uniform float seconds;

varying float vomega, vphi;

void main () {
// gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
float omega = vomega;
float phi = vphi;
gl_FragColor = vec4(vec3(cos(seconds*omega*2.0*PI + phi)*0.5+0.5), 1.0);
}`,
vert: `
precision mediump float;
attribute vec3 position;
attribute float omega, phi;
varying float vomega, vphi;
void main () {
vomega = omega;
vphi = phi;
// Linear (0, 1) -> (1, -1)
vec3 p = position;
p.y = 1.0 - p.y;
gl_Position = vec4(p * 2.0 - 1.0, 1.0);
}`,
attributes: {
position: model.positions,
omega: model.omegas,
phi: model.phis
},
uniforms: {
seconds: regl.prop("seconds")
},
elements: model.cells,
blend: {
enable: true,
func: {
srcRGB: "src alpha",
srcAlpha: 1,
dstRGB: "one minus src alpha",
dstAlpha: 1
},
equation: {
rgb: "add",
alpha: "add"
}
}
})
Insert cell
model = {
selectedBlock;

let cells = [],
positions = [],
omegas = [],
phis = [];

blocks.map((d) => {
let { x1, x2, y1, y2, omega, phi } = d;
positions.push([x1, y1, 0]);
positions.push([x1, y2, 0]);
positions.push([x2, y2, 0]);
positions.push([x2, y1, 0]);

for (let i = 0; i < 4; ++i) {
omegas.push(omega);
phis.push(phi);
}

let n = positions.length - 4;
cells.push([n, n + 1, n + 2]);
cells.push([n + 2, n + 3, n]);
});

return { cells, positions, omegas, phis };
}
Insert cell
Insert cell
Insert cell
Insert cell
blocks = {
let { nx, ny, width, height, minOmega, maxOmega } = layoutOption,
scaleCx = d3.scaleLinear().domain([-1, nx]).range([0, 1]),
scaleCy = d3.scaleLinear().domain([-1, ny]).range([0, 1]),
rndOmega = d3.randomUniform(minOmega, maxOmega),
rndPhi = d3.randomUniform(0, 2 * Math.PI),
uid = 1;

let blocks = [],
cx,
cy;

for (let i = 0; i < nx; ++i) {
for (let j = 0; j < ny; ++j) {
cx = scaleCx(i);
cy = scaleCy(j);
blocks.push({
uid,
cx: cx,
cy: cy,
x1: cx - width / 2,
y1: cy - height / 2,
x2: cx + width / 2,
y2: cy + height / 2,
omega: rndOmega(),
phi: rndPhi()
});
uid += 1;
}
}

return blocks;
}
Insert cell
blocks
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
bunny = (await import("https://cdn.skypack.dev/bunny@1.0.1")).default
Insert cell
normals = (await import("https://cdn.skypack.dev/angle-normals@1.0.0")).default
Insert cell
regl = (await import("https://cdn.skypack.dev/regl@2")).default({
canvas: SSVEPCanvas,
pixelRatio: 1.0,
extensions: ["oes_standard_derivatives", "oes_texture_float"],
attributes: { antialias: true }
})
Insert cell
reglCamera = (await import("https://cdn.skypack.dev/regl-camera@2.1.1")).default
Insert cell
statsMonitor = {
const stats = new Stats(),
{ dom } = stats;
dom.style.position = "relative";

return stats;
}
Insert cell
Stats = require("https://cdn.jsdelivr.net/npm/stats-js@1.0.1/build/stats.min.js")
Insert cell
d3 = require("d3")
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