Era il febbraio 2019 quando le funzioni di trigonometria sono state approvate in una riunione del gruppo di lavoro CSS del World Wide Web Consortium (W3C). Ora i browser iniziano a supportare questa novità, permettendoci di utilizzare direttamente queste funzioni senza appesantire i progetti con librerie javascript e senza l'obbligo di ricorrere a preprocessori. Faremo un viaggio alla scoperta della trigonometria del CSS, con una panoramica sulle singole funzioni, sui browser che le supportano e le supporteranno a breve ed esempi concreti di utilizzo per il disegno di forme e animazioni.

1. Trip on trig
ALLA SCOPERTA DELLA TRIGONOMETRIA

2. ELEONORA ROCCHI
➔
➔
➔
➔
eleonora-rocchi

3. ★ Ripasso delle basi della trigonometria
★ Supporto da parte dei browser delle funzioni trigonometriche
★ Esempi concreti di utilizzo
Di che parliamo oggi?

4. Cos’è la trigonometria?
@Wikipedia

5. Concetti fondamentali: il triangolo

6. Concetti fondamentali: le misure
sin 𝜃 =
Opposto
Ipotenusa
Adiacente
Ipotenusa
Opposto
Adiacente
cos 𝜃 =
tg 𝜃 =

7. ●
●
Perché queste funzioni sono importanti?

8. ●
●

9. Concetti fondamentali: le misure
sin 𝜃 =
Opposto
Ipotenusa

10. sin 39° =
d
30
=
d
30
sin 39°
=
d
30
0,6293
= 0,6293 x
d 30
= 18,88
d
⇒
⇒
⇒
⇒

11. sec 𝜃 =
1
cos 𝜃
1
sin 𝜃
1
tg 𝜃
cosec 𝜃 =
cotg 𝜃 =
Altre funzioni

12. E con le inverse:
@Wikipedia
prendono un valore numerico come argomento e restituiscono l'angolo corrispondente.

13. Possiamo esprimere le funzioni trigonometriche
attraverso le relazioni
periodica definita per tutto l’insieme dei numeri reali

14. @Youmath

15. Ma che c’entra tutto ciò con il CSS?

17. Il gruppo di lavoro sul CSS del World Wide
Web Consortium (W3C) approva le funzioni
trigonometriche.
Ora i browser ci permettono di utilizzare
direttamente queste funzioni senza
appesantire i progetti con librerie javascript
e senza l'obbligo di ricorrere a
preprocessori.
Febbraio 2019

18. metodi semplici angoli
sincronizzare sequenze di animazione
Ma perchè?

23. ● calc() per fare calcoli
● min(), max() e clamp()
● sin(), cos(), tan(),
● asin(), acos(), atan() e atan2()

25. ● cos()
● sin()
● tan()

26. MDN Web Docs

28. ● cos()
● sin()
● tan()
● asin()
● acos()
● atan()
● atan2()
Casi d'uso di base secondo la documentazione MDN

29. ESEMPI

30. Trasferire gli oggetti su un percorso circolare attorno a un punto centrale
Adiacente = cos 𝜃 * Ipotenusa
Opposto = sin 𝜃 * Ipotenusa
Dati noti
Ipotenusa = raggio
𝜃 è l’angolo relativo al punto in oggetto

31. https://codepen.io/eleonorarocchi/pen/OJoqrVY

32. https://codepen.io/eleonorarocchi/pen/OJoqrVY

33. https://codepen.io/eleonorarocchi/pen/MWqxdZZ
Ruotare un oggetto attorno ad un punto

36. atan2()

38. https://codepen.io/eleonorarocchi/pen/dyqrXOz

41. https://codepen.io/eleonorarocchi/pen/qByNyWO

43. https://codepen.io/eleonorarocchi/pen/ExpZyPG

50. https://codepen.io/jh3y/pen/RwBoEVM

61. Compiti per casa

62. https://codepen.io/thebabydino/pen/wvybyMo
Nastro di Möbius

63. https://codepen.io/MackFitz/pen/JjaBpVw
Dodecaedro con facce a stella

64. https://codepen.io/MackFitz/pen/JjaBpVw

65. E tu che ci faresti?

66. Trip on trig
ALLA SCOPERTA DELLA TRIGONOMETRIA
https://joind.in/talk/20d33