1 of 66

Trip on trig

ALLA SCOPERTA DELLA TRIGONOMETRIA

Faenza - 31 marzo 2023

2 of 66

ELEONORA ROCCHI

Team leader @ P-LAB S.r.l.

Web developer
Mobile developer
UX
.

eleonora-rocchi

3 of 66

Agenda

Ripasso delle basi della trigonometria
Supporto da parte dei browser delle funzioni trigonometriche
Esempi concreti di utilizzo

Di che parliamo oggi?

4 of 66

Facciamo un ripassino

Cos’è la trigonometria?

@Wikipedia

5 of 66

Facciamo un ripassino

Ipotenusa

Adiacente

Opposto

Concetti fondamentali: il triangolo

6 of 66

Facciamo un ripassino

Concetti fondamentali: le misure

Ipotenusa

Adiacente

Opposto

sin 𝜃 =

Opposto

Ipotenusa

Adiacente

Ipotenusa

Opposto

Adiacente

cos 𝜃 =

tg 𝜃 =

7 of 66

ci permettono di calcolare gli angoli quando conosciamo i lati
ci permettono calcolare i lati quando conosciamo gli angoli

Facciamo un ripassino

Perché queste funzioni sono importanti?

8 of 66

Ad esempio, usiamo la funzione seno per trovare “d” (la distanza della nave dal fondale)

Conosciamo:

l’angolo di 39° tra il cavo e il fondale
il cavo ha una lunghezza di 30 metri

Facciamo un ripassino

9 of 66

Facciamo un ripassino

Concetti fondamentali: le misure

Ipotenusa

Adiacente

Opposto

sin 𝜃 =

Opposto

Ipotenusa

10 of 66

Facciamo un ripassino

sin 39° =

d

30

=

d

30

sin 39°

=

d

30

0,6293

=

0,6293 x

d

30

=

18,88

d

⇒

11 of 66

Facciamo un ripassino

sec 𝜃 =

1

cos 𝜃

1

sin 𝜃

1

tg 𝜃

cosec 𝜃 =

cotg 𝜃 =

Altre funzioni

12 of 66

Facciamo un ripassino

E con le inverse:

@Wikipedia

prendono un valore numerico come argomento e restituiscono l'angolo corrispondente.

13 of 66

Facciamo un ripassino (quasi finito)

Possiamo esprimere le funzioni trigonometriche attraverso le relazioni

Ad esempio:

f(x): y=sen(x)

che è periodica e definita per tutto l’insieme dei numeri reali.

14 of 66

Facciamo un ripassino (quasi finito)

Attraverso l’analisi della funzione seno si ottiene una curva chiamata sinusoide.

@Youmath

15 of 66

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

16 of 66

17 of 66

CSS e trigonometria

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 of 66

CSS e trigonometria

Gli sviluppatori volevano metodi semplici per lavorare con gli angoli e per sincronizzare sequenze di animazione complesse senza dover scrivere codice JavaScript o utilizzare librerie di animazioni

Sin dalla revisione dei CSS con il rilascio di CSS3, gli sviluppatori Web si sono lentamente affidati ai CSS per fare sempre di più che colorare il testo e far aderire gli elementi alla parte superiore o inferiore di una pagina.

Ma perchè?

19 of 66

Supporto dei browser

20 of 66

Supporto dei browser

21 of 66

Supporto browser

22 of 66

Supporto browser

Chrome Platform Status

23 of 66

CSS e trigonometria

Nel CSS è possibile scrivere espressioni matematiche:

calc() per fare calcoli
min(), max() e clamp()

A queste funzioni si uniscono:

sin(), cos(), tan(),
asin(), acos(), atan() e atan2()

che sono definite nel CSS Values and Units Module Level 4 e sono disponibili sui principali browser.

24 of 66

Supporto browser

W3C

25 of 66

CSS e trigonometria

Le tre “funzioni trigonometriche” fondamentali sono:

cos()

restituisce il coseno di un angolo, che è un valore compreso tra -1 e 1

sin()

restituisce il seno di un angolo, che è un valore compreso tra -1 e 1

tan()

restituisce la tangente di un angolo, che è un valore compreso tra −∞ e +∞

a differenza delle funzioni JS, accettano come argomento sia gli angoli in gradi che in radianti!

26 of 66

MDN documentation

MDN Web Docs è un progetto collaborativo open source che documenta le tecnologie della piattaforma Web, inclusi CSS, HTML, JavaScript e Web API.

Fornisce anche un'ampia serie di risorse di apprendimento per sviluppatori e principianti.

27 of 66

Chrome Platform Status

28 of 66

MDN documentation

cos(): può essere utilizzato per mantenere le dimensioni di un box che ruota
sin(): può essere utilizzato per ridimensionare i box e come valore di durata dell'animazione
tan(): può essere utilizzata per disegnare parallelogrammi
asin(): può essere utilizzato per ruotare gli elementi
acos(): può essere utilizzato per ruotare gli elementi
atan(): può essere utilizzato per ruotare gli elementi
atan2(): può essere utilizzato per ruotare gli elementi

Casi d'uso di base secondo la documentazione MDN

29 of 66

ESEMPI

30 of 66

Esempio 0

Trasferire gli oggetti su un percorso circolare attorno a un punto centrale

Ogni punto viene spostato sugli assi X e Y,

calcolando le distanze

con cos() e sin() dell’angolo.

Adiacente

Opposto

Ipotenusa

Adiacente = cos 𝜃 * Ipotenusa

Opposto = sin 𝜃 * Ipotenusa

Dati noti

Ipotenusa = raggio

𝜃 è l’angolo relativo al punto in oggetto

31 of 66

Esempio 0

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

32 of 66

Esempio 0

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

33 of 66

Esempio 0 bis

https://codepen.io/eleonorarocchi/pen/MWqxdZZ

39 of 66

Esempio 1

40 of 66

Esempio 1

41 of 66

Esempio 2

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

42 of 66

Esempio 2

43 of 66

Nastro di Möbius

63 of 66

Esempio 10

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

Dodecaedro con facce a stella

64 of 66

Esempio 10

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

65 of 66

E tu che ci faresti?

66 of 66

Trip on trig

ALLA SCOPERTA DELLA TRIGONOMETRIA

https://joind.in/talk/20d33