Published
Edited
Jun 5, 2020
Importers
function createREGLInstance () {
const w = 512;
const h = 512;
const container = document.createElement('div');
container.style.position = "relative";
container.style.width = w + 'px';
container.style.height = h + 'px';
const glCanvas = document.createElement('canvas');
glCanvas.style.position = "absolute";
glCanvas.style.top = 0
glCanvas.style.left = 0;
glCanvas.style.width = '100%';
glCanvas.style.height = '100%';
glCanvas.style.zIndex = 1;
glCanvas.width = w;
glCanvas.height = h;
const topCanvas = document.createElement('canvas');
topCanvas.style.position = "absolute";
topCanvas.style.top = 0
topCanvas.style.left = 0;
topCanvas.style.width = '100%';
topCanvas.style.height = '100%';
topCanvas.style.zIndex = 2;
topCanvas.width = w;
topCanvas.height = h;
container.appendChild(glCanvas);
container.appendChild(topCanvas);
const regl = createREGL(
Object.assign({canvas: glCanvas, extensions: 'OES_texture_float'}))
regl.canvas = glCanvas;
regl.topCanvas = topCanvas;
regl.container = container;
return regl
}
handlers = {
regl.topCanvas.onpointerdown = pointerdown
regl.topCanvas.onpointerup = pointerup
regl.topCanvas.onpointerout = pointerout
regl.topCanvas.ontouchstart = touchstart
}
pointerdown = e => {
e.preventDefault()
mutable wave_position = getCursorPosition(regl.topCanvas, e);
mutable playing = true;
mutable holdOnFirstFrame = true;
// attach pointermove handler
regl.topCanvas.onpointermove = pointermove;
}
pointerup = e => {
e.preventDefault()
mutable holdOnFirstFrame = false;
clear_2d_canvas(regl.topCanvas)
regl.topCanvas.onpointermove = null;
}
pointermove = e => {
e.preventDefault()
let cursor_position = getCursorPosition(regl.topCanvas, e);
let min_distance = 0.025;
if (distance(mutable wave_position, cursor_position) > min_distance) {
mutable wave_angle = angle(mutable wave_position, cursor_position);
draw_line(regl.topCanvas, mutable wave_position, cursor_position);
}
}
pointerout = e => {
if (regl.topCanvas.onpointermove) {
mutable holdOnFirstFrame = false;
clear_2d_canvas(regl.topCanvas)
regl.topCanvas.onpointermove = null;
}
}
function getCursorPosition(canvas, event) {
const rect = canvas.getBoundingClientRect()
let x = (event.clientX - rect.left) / canvas.width;
let y = 1.0 - (event.clientY - rect.top) / canvas.height;
return [x, y]
}
touchstart = e => {
e.preventDefault()
}
function draw_line(canvas, p_a, p_b) {
p_a = convert_to_canvas_coordinates(canvas, p_a)
p_b = convert_to_canvas_coordinates(canvas, p_b)
let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height); // erase previous line
ctx.setLineDash([5, 3]);/*dashes are 5px and spaces are 3px*/
ctx.beginPath();
ctx.moveTo(p_a[0],p_a[1]);
ctx.lineTo(p_b[0],p_b[1]);
ctx.strokeStyle = 'rgb(255, 255, 255)';
ctx.stroke();
}
{
playToggle;
mutable playing = !mutable playing;
}
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.
