{ 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); const zp = 2; const persp = [zp,0,0,0, 0,zp,0,0, 0,0,1,0, 0,0,-1,zp]; let ang=0, h=0, t=-12; 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 mPersp = multiply2(persp, modelView); //const mModel = multiply2(wMatrix, modelView); let vp = apply(vertex,mPersp) adjust_persp(zp,vp); return apply(vp, wMatrix); } function project_gaussiana(t){ const wMatrix = world_matrix(width/2, height/2, 300); const modelView = camera([t, 4*Math.E^(((-t)^2)/16), 1]); const mPersp = multiply2(persp, modelView); //const mModel = multiply2(wMatrix, modelView); let vp = apply(vertex,mPersp) adjust_persp(zp,vp); return apply(vp, wMatrix); } function project_polinomial(t){ const wMatrix = world_matrix(width/2, height/2, 300); const modelView = camera([t, ((((-t)^4)/162)+((2*(t)^2)/9)+(3)), 1]); const mPersp = multiply2(persp, modelView); //const mModel = multiply2(wMatrix, modelView); let vp = apply(vertex,mPersp) adjust_persp(zp,vp); return apply(vp, wMatrix); } function project_sinusoidal(t){ const wMatrix = world_matrix(width/2, height/2, 300); const modelView = camera([t,(3*Math.cos(2*t))+4,4]); const mPersp = multiply2(persp, modelView); //const mModel = multiply2(wMatrix, modelView); let vp = apply(vertex,mPersp) adjust_persp(zp,vp); return apply(vp, wMatrix); } function pintar(){ let flag = boton.value; requestAnimationFrame(pintar); if(flag){ ctx.clearRect(0, 0, width, height); draw(ctx, project_sinusoidal(t)); if(t<9){ t+=0.01; ang += 0.01; h += 0.01 } } }; btn2.onclick = () => { ctx.clearRect(0, 0, width, height); draw(ctx, project_sinusoidal(t)); if(t<9){ t+=0.01; ang += 0.01; h += 0.01 } }; draw(ctx, project_sinusoidal(t)); pintar(); return html`

${boton}${btn2}

${ctx.canvas}

`; }