Trigonometría Bella

LimaJS 25 Sep 2020

Transcript

1. Trigonometría Bella @lupomontero - LimaJS 25 Sep 2020 😷
2. @Laboratoriala @LimaJSorg @node_lima @lupomontero @mozillaperu
4. Comencemos por la demo...
5. Ahora sí, veamos un poco de JavaScript
6. Preparando el escenario
7. const createCanvas = (width = 500) => { const canvas = Object.assign( document.createElement('canvas'), { width, height: width }, ); // ... return canvas; };
8. const createCanvas = (width = 500) => { const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = width; // ... return canvas; };
9. El motor de la animación
10. const createCanvas = (width = 500) => { const canvas = Object.assign( document.createElement('canvas'), { width, height: width }, ); const update = (angle = 0) => { // Dibujar frame!! window.requestAnimationFrame(() => update(angle < 359 ? angle + 1 : 0)); }; update(); return canvas; };
11. Definamos el origen
12. const createCanvas = (width = 500) => { const canvas = Object.assign( document.createElement('canvas'), { width, height: width }, ); const radius = width / 2; const center = { x: radius, y: radius }; const update = (angle = 0) => { // Dibujar frame!! window.requestAnimationFrame(() => update(angle < 359 ? angle + 1 : 0)); }; update(); return canvas; };
13. Calculamos la posición del punto en la circunferencia para un ángulo dado
14. const update = (angle = 0) => { const radians = angle * Math.PI / 180; const pointOnCircle = { x: center.x + Math.cos(radians) * radius, y: center.y + Math.sin(radians) * radius, }; // Dibujar frame!! window.requestAnimationFrame(() => update(angle < 359 ? angle + 1 : 0)); };
15. Dibujando líneas
16. const drawLine = (ctx, fromX, fromY, toX, toY) => { ctx.beginPath(); ctx.moveTo(fromX, fromY); ctx.lineTo(toX, toY); ctx.stroke(); };
17. Dibujando círculos
18. const drawCircle = (ctx, x, y, radius, color, stroke = true) => { ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI); if (stroke) { ctx.stroke(); } if (color) { ctx.fillStyle = color; ctx.fill(); } };
19. Conclusiones
20. Conclusiones • Explorar • Jugar • Aprender • Búsqueda de belleza y simplicidad
21. Links / Bibliografía • Demo • Código fuente • Beautiful Trigonometry - Numberphile • https://www.geogebra.org/m/S2W46Thv • https://en.wikipedia.org/wiki/Trammel_of_Archimedes • https://ee.stanford.edu/~hellman/playground/hyperspheres/radians.html • https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
22. Fin