Published
Edited
Aug 31, 2020
viewof vertices = html`<input value='80,10,0,160,10,0,160,60,0,200,200,0'></input>`
viewof matriz = html`<input value='1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1'></input>`
xx = html`
<div style="padding: 10px 10px;">
<button onclick="mover()">▶</button>
<button onclick="parar()">⏸</button>
</div>
<div>
<canvas id="myCanvas" width="640" height="480" style="border:1px solid #d3d3d3; margin: 10px;"></canvas>
</div>
<div>
Vertex array <input></input> <br>
Model Matrix <input value='1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1'></input>
</div>
`
flag = false
draw = (v) =>{
let P = v.length;
for(let i=0; i<P; i++){
ctx.beginPath();
let N = v[i].length;
ctx.moveTo(v[i][0], v[i][1]);
for(let j=3; j<N; j+=3){
ctx.lineTo(v[i][j], v[i][j+1]);
}
ctx.stroke();
}
}
mover = () => {this.flag = true;}
parar = () => {this.flag = false;}
transform = (v, m) => {
let P = v.length;
for(let i=0; i<P; i++){
let N = v[i].length;
for(let j=0; j<N; j+=3){
let xp = [0,0,0];
for(let k=0; k<3; k++){
xp[k] = dot4(v[i].slice(j,j+3),m.slice(k*4,k*4+4));
}
for(let k=0; k<3; k++) v[i][j+k] = xp[k]
}
}
}
dot4 = (v3, m4) => v3[0]*m4[0] +
v3[1]*m4[1] + v3[2]*m4[2] + m4[3];
function pintar(){
window.requestAnimationFrame(pintar);
if(flag){
transform(vertex, mv);
ctx.clearRect(0, 0, c.width, c.height)
draw(vertex);
}
}
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.
