{ let value = false; const boton = html``; const btn2 = html``; const width=800, height=600; Object.defineProperty(boton, "value", {get() { return value; }}); boton.onclick = () => { if (!value) { value = true; boton.innerText = '⏸'; } else { value=false; boton.innerText = '▶'; } } const ctx = DOM.context2d(width, height); mesh.meshArray = []; mesh.meshArray.push(Geosphere(2,30,20)); let ang=0, h=0, t=-12; const zp = 3; const coor_per = [zp,0,0,0, 0,zp,0,0, 0,0,1,0, 0,0,-1,zp]; function project_cilinder(ang, h){ const modelView = camera([4.1*Math.sin(ang), 4*Math.cos(h), 4.1*Math.cos(ang)]); const perspective = perspect(30,4/4,0.1,10); const modelMatrix = multiply2(perspective,modelView); let vp = applyEsfera(modelMatrix); } /*function project_cilinder(ang, h){ const wMatrix = world_matrix(width/2, height/2, 40); const modelView = camera([4.1*Math.sin(ang), 4*Math.cos(h), 4.1*Math.cos(ang)]); const Perspective = multiply2(coor_per, modelView); let vp = apply(vertex,Perspective) ajustePers(zp,vp); return apply(vp, wMatrix); } function trayectoria_Gaussiana(t){ const wMatrix = world_matrix(width/2, height/2, 200); const modelView = camera([t, 4*Math.E^(((-t)^2)/16), 1]); const Perspective = multiply2(coor_per, modelView); let vp = apply(vertex,Perspective) ajustePers(zp,vp); return apply(vp, wMatrix); } function trayectoria_sinusoidal(t){ const wMatrix = world_matrix(width/2, height/2, 300); const modelView = camera([t,(3*Math.cos(2*t))+4,4]); const Perspective = multiply2(coor_per, modelView); let vp = apply(vertex,Perspective) ajustePers(zp,vp); return apply(vp, wMatrix); } function trayectoria_polinomial(t){ const wMatrix = world_matrix(width/2, height/2, 200); const modelView = camera([(((-t)^4/162)+((2*(t)^2)/9)+(3)),t, 1]); const Perspective = multiply2(coor_per, modelView); let vp = apply(vertex,Perspective) ajustePers(zp,vp); return apply(vp, wMatrix); }*/ /*function pintar(){ let flag = boton.value; requestAnimationFrame(pintar); if(flag){ ctx.clearRect(0, 0, width, height); draw(ctx, trayectoria_sinusoidal(t)); if(t<9){ t+=0.01; ang += 0.01; h += 0.01 } } };*/ function pintar(){ let flag = boton.value; requestAnimationFrame(pintar); if(flag){ ctx.clearRect(0, 0, width, height); project_cilinder(ang,h); meshDraw(ctx); ang += 0.01; h += 0.01 } }; /*btn2.onclick = () => { ctx.clearRect(0, 0, width, height); draw(ctx, trayectoria_sinusoidal(t)); if(t<9){ t+=0.01; ang += 0.01; h += 0.01 } }; draw(ctx, trayectoria_sinusoidal(t)); pintar(); return html`

${boton}${btn2}

${ctx.canvas}

`; }*/ btn2.onclick = () => { ctx.clearRect(0, 0, width, height); meshDraw(ctx); ang += 0.01; h += 0.01 }; project_cilinder(ang,h); meshDraw(ctx); pintar(); return html`

${boton}${btn2}

${ctx.canvas}

`; }