Computer Graphics & Visualization @ufrj.br
app = picogl.createApp(canvas)
.clearColor(0, 0, 0, 1)
.enable(picogl.DEPTH_TEST)
{
let [angleX,angleY] = [0,0];
let {mat4,vec3} = glmatrix;
let rotateMatrix = mat4.create();
let modelMatrix= mat4.create();
let refresh = () => {
drawCall.uniform("uModel", modelMatrix);
app.clear();
drawCall.draw()
}
let lastMouse;
canvas.onmousedown = (e) => {
lastMouse = [e.offsetX,e.offsetY];
}
let axis = vec3.create();
canvas.onmousemove = (e) => {
if (e.buttons) {
let mouse = [e.offsetX,e.offsetY];
axis[0] = mouse[1]-lastMouse[1];
axis[1] = mouse[0]-lastMouse[0];
let len = vec3.length(axis) || 1;
axis[0]/=len;
axis[1]/=len;
let angle = len*Math.PI/180/4;
mat4.fromRotation(rotateMatrix,angle,axis);
mat4.multiply(modelMatrix,rotateMatrix,modelMatrix);
refresh();
lastMouse = mouse;
}
}
for (let frame = 0; frame >=0; frame++) {
mat4.fromRotation(rotateMatrix,0.01,[1,0,0]);
mat4.multiply(modelMatrix,rotateMatrix,modelMatrix);
mat4.fromRotation(rotateMatrix,0.01,[0,1,0]);
mat4.multiply(modelMatrix,rotateMatrix,modelMatrix);
refresh();
yield frame;
}
}
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.
