Public
Edited
May 12
simpleCubeCanvas = {
let projection = glm.mat4.create();
let model = glm.mat4.create();
let view = glm.mat4.create();
let canvas = createWebGLCanvas(width,400,gl=>{
let rev = revolutionGeometry(gl);
glm.mat4.lookAt(view,[0,0,10],[0,0,0],[0,1,0]);
glm.mat4.perspective(projection,(45*Math.PI)/180,width/400,0.1,100);
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0.2,0.2,0.2,1.0);
return () => {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
rev({model, view, projection});
}
});
canvas.updateView = (x,y,z) => {
glm.mat4.lookAt(view,[x,y,z],[0,0,0],[0,1,0]);
};
viewHandler(canvas, canvas.updateView);
return canvas;
}
position = nuvemPontos(molaConica())
function nuvemPontos(f,m,n) {
m = m || 500;
n = n || 500;
let pontos = new Float32Array(m*n*3);
let k = 0;
for(let i = 0; i < m; i++) {
let u = i / (m-1);
for(let j = 0; j < n; j++) {
let v = j / (n-1);
let [x, y, z] = f(u,v);
pontos[k++] = x;
pontos[k++] = y;
pontos[k++] = z;
}
}
return pontos;
}
function torus(r) {
r = r || 2;
let d = 4;
return (u,v) => {
let theta = 2*u*Math.PI;
let phi = 2*v*Math.PI;
let x = (r * Math.cos(theta) + d) * Math.cos(phi);
let y = (r * Math.sin(theta));
let z = (r * Math.cos(theta) + d) * Math.sin(phi);
return [ x, y, z ];
}
}
function esfera(r) {
r = r || 2;
return (u,v) => {
let theta = u*Math.PI-(Math.PI/2);
let phi = 2*v*Math.PI;
let x = r * Math.cos(theta) * Math.cos(phi);
let y = r * Math.sin(theta);
let z = r * Math.cos(theta) * Math.sin(phi);
return [ x, y, z ];
}
}
function paraboloide() {
return (u,v) => {
let theta = 2 * Math.PI * v;
let x = u * Math.cos(theta);
let y = Math.pow(u, 2);
let z = u * Math.sin(theta);
return [x, y, z];
}
}
function molaCilindrica(r, h, voltas) {
r = r || 2; // Raio da mola
h = h || 6; // Altura da mola
voltas = voltas || 80;
return (u, v) => {
let phi = 2 * Math.PI * voltas * v;
let x = r * Math.cos(phi);
let y = r * Math.sin(phi);
let z = v * h; // Altura ao longo da mola
return [x, y, z];
};
}
function molaConica(r1 = 2, r2 = 0.5, h = 5, voltas = 5) {
return (u, v) => {
let t = u; // u de 0 a 1 representa o avanço ao longo da mola
let angulo = 2 * Math.PI * voltas * t;
// Raio cônico interpolado de r1 a r2
let raio = r1 * (1 - t) + r2 * t;
// Coordenadas do fio central da mola
let x = raio * Math.cos(angulo);
let y = h * t;
let z = raio * Math.sin(angulo);
return [x, y, z];
};
}
function revolutionGeometry(gl) {
const prog = createProgram(gl, [
[ gl.VERTEX_SHADER, vertexShader ],
[ gl.FRAGMENT_SHADER, fragmentShader ]
]);
let a_position = gl.getAttribLocation(prog,"a_position");
let vao = gl.createVertexArray()
gl.bindVertexArray(vao)
gl.enableVertexAttribArray(a_position);
let position_vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,position_vbo);
gl.bufferData(gl.ARRAY_BUFFER,position,gl.STATIC_DRAW);
gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, 0, 0);
return (uniforms) => {
gl.bindVertexArray(vao);
gl.useProgram(prog);
gl.uniformMatrix4fv(gl.getUniformLocation(prog,"model"),false,uniforms.model);
gl.uniformMatrix4fv(gl.getUniformLocation(prog,"view"),false,uniforms.view);
gl.uniformMatrix4fv(gl.getUniformLocation(prog,"projection"),false,uniforms.projection);
gl.drawArrays(gl.POINTS,0,position.length/3);
}
}
function createWebGLCanvas(width, height, drawFactory) {
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const gl = canvas.getContext("webgl2");
if (!gl) throw new Error("WebGL unsupported");
const draw = drawFactory(gl);
const f = () => {
draw();
window.requestAnimationFrame(f);
};
window.requestAnimationFrame(f);
return canvas;
}
glm = import("gl-matrix")
import {viewHandler} from "@rmauro/webgl-util-viewhandler"
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.
