Usare seno, coseno e resto 3

[mikb89]

Usare seno, coseno e resto
Versione 1.0

1. Introduzione

Per: RPG Maker XP/VX/VX Ace, RPG Maker 2000/2003 con patch.
Autore: mikb89.
Descrizione: Per chi programma minigiochi o crea da sé menu e HUD, queste funzioni tornano molto utili ma sono poco conosciute.

Tramite seno e coseno si possono ottenere movimenti particolari come oscillazioni o rotazioni. Menu ad anello, HUD circolari, foglie che cadono si creano tramite questi.

Il resto è utilizzatissimo per limitare un valore entro un certo campo, tipo nelle voci di un menu o per conoscere singole cifre di un numero (es. solo le decine), nel caso si vogliano mostrare valori in menu/bs ad eventi in cui i numeri sono dentro picture.

Con questo tutorial imparerete a fare tutte queste cose.
Ultima modifica: 29/02/2012.

2. Tutorial

sin cos %

.Introduzione

Senza una conoscenza approfondita di matematica e trigonometria, per uno scripter autodidatta è difficile pensare
di andare ad usare queste tre funzioni che, invece, risultano utilissime una volta apprese.
Questo tutorial fornirà una base da cui partire.

.Setup
L'idea che dovremo avere è di una variabile che si va incrementando di una quantità unitaria. Io userò 0.1.
Creare la variabile è semplice:

@var = 0

E poi, per incrementarla ad ogni update:

@var += 0.1

Questa qui NON è LA tecnica, è solo quella che userò qui per spiegare queste funzioni.

.Seno
Il seno, in trigonometria, è una funzione che, dato un numero, ne fa risultare un altro compreso tra -1 e 1.
La sintassi matematica del seno è sin(x), dove x è il numero. Come vedete, ci sono le parentesi come se fosse una
funzione di programmazione. In RGSS(1,2,3,x), però, la sintassi è diversa:

risultato = Math::sin(@var)

in quanto la funzione fa parte del modulo Math.
Questo codice andrà messo nell'update, sotto l'incremento di @var scritto poc'anzi.

Nella figura la x sotto è la nostra @var che aumenta e il grafico mostra il valore restituito da sin a seconda del
cambiamento di questa.
Immaginatevi di essere piatti e di vedere questa figura perpendicolarmente dal punto di inizio di x verso la
direzione in cui va la freccia. Immaginate che non ci siano le linee già disegnate ma che sia un punto a seguirne
il movimento.
Il risultato di sin, che è quello che vedreste, è un movimento oscillante!
Questa cosa ovviamente non è utile solo se vogliamo fare un pendolo, vedremo infatti un esempio molto diffuso
subito dopo la breve spiegazione del coseno.

.Coseno
Il coseno funziona allo stesso modo del seno, solo, a valori 'spostati'.
Cioè, se il seno di 0 è 0, il coseno di 0 è 1.
I valori risultanti però spaziano nello stesso campo, fra -1 e 1.
Il risultato visivo è quindi lo stesso.

Nello stesso punto il valore sarà diverso da quello dato dal seno, ma l'andamento del punto osservato sarà sempre
oscillante.
Allora, a che serve conoscerli entrambi?

.Movimento circolare
L'esempio che avevo anticipato prima è il cerchio, o almeno il movimento necessario per crearlo.
Vi faccio un esempio pratico dettoci da un professore di fisica.
Ficcatevi un disco nel dito.
Poggiateci un oggetto sopra e alzate il dito in modo che il disco stia all'altezza dell'occhio.
Dovrete vedere il disco come una linea o quasi.
Fatelo girare e seguite l'oggetto con l'occhio.
Il movimento dell'oggetto è quello della funzione seno! (O coseno, vabé)
Guardando però il disco dall'alto, il movimento dell'oggetto è in realtà circolare.
Per ottenere questo, semplicemente assegniamo le coordinate ottenute dal risultato dato dallo stesso valore una
volta con seno e una volta con coseno. Codice:

@sprite.y = Math::sin(@var)
@sprite.x = Math::cos(@var)

Ovviamente @sprite dovrà essere prima creata e disegnata, poi aggiornata e, alla fine, cancellata.

@sprite = Sprite.new
@sprite.bitmap = Bitmap.new(30,30)
@sprite.bitmap.fill_rect(0,0,30,30,Color.new(255,255,255))

va messo all'inizio,

@sprite.update

dentro l'update, mentre:

@sprite.bitmap.dispose
@sprite.dispose

alla fine.
Questo è il codice di un quadrato che gira.
Voi però non lo vedrete.
Come abbiamo detto, i valori risultanti vanno da -1 a 1 e, in questo esempio sono anche non inclusi.
Per non inclusi intendo dire che il risultato ci si avvicina al limite, ma non lo raggiunge.
Immaginateli come -0.999999999999 e 0.999999999999, solo, con un numero di 9 infinito.
In programmazione il numero di 9 non è infinito ma dipende dal tipo di variabile che si usa, ma questi son altri
discorsi.
Quindi, come intero, visto che i pixel sono proprio interi, il risultato sarà sempre 0. O 1 a seconda
dell'arrotondamento.
È quindi necessario moltiplicare il risultato in base allo spazio fra cui vogliamo far muovere l'oggetto.
Mettiamo che vogliamo farlo muovere di 100 pixel, dobbiamo moltiplicare per 50. Otterremo un movimento fra -50 e
50.
In questo modo girerà però attorno al bordo superiore sinistro della finestra. Possiamo spostarlo sommando dei
valori al risulato della funzione. Per metterlo ad esempio al centro dello schermo, per esempio lo schermo del VX:

@sprite.y = 416/2 + Math::sin(@var)*50
@sprite.x = 544/2 + Math::cos(@var)*50

Non sarà perfettamente centrato perché le coordinate si riferiscono all'angolo superiore sinistro dell'oggetto e
non al suo centro, si può rimediare con:

@sprite.ox = @sprite.oy = 30/2

per fare in modo che il punto di riferimento non sia 0 (ovvero l'angolo) ma il centro. La metà di 30 in quanto 30 è
la grandezza che abbiamo definito prima.
Volendo fare gli sboroni, possiamo anche cambiare l'angolazione del quadrato mentre gira.

@sprite.angle = -@var*360/(2*Math::PI)

Non si può passare direttamente @var perché l'angolo va da 0 a 360 mentre i valori che prendono le funzioni
sinusoidali hanno 2 volte pi greco come gamma di valori. Che corrisponde a Math::PI, mi pare chiaro.
Il meno va messo perché il giro è al contrario. I valori matematici litigano con quelli informatici perché nella
prima le y vanno dal basso verso l'alto mentre nella seconda è al contrario. Vabè.

.Resto
Il resto è più semplice e lo trovate spesso usato negli script.
Quello che rappresenta il resto lo sanno tutti. Divido 10 per 4. Mi viene 2,5. Se lo faccio col metodo di divisione
imparato alle elementari, ottengo 2 come risultato intero e un resto di 2.
La particolarità del resto è che non può superare il divisore. Il 4, in questo caso. Faccio esempi numerici.
8/4 = 2, resto 0
9/4 = 2, resto 1
10/4 = 2, resto 2
11/4 = 2, resto 3
12/4 = 3, resto 0
Sarà così all'infinito. 0, 1, 2 e 3.
Se vogliamo limitare un valore a un numero basta quindi valutare il resto.
In rpg maker viene ad esempio usato nelle pagine di equip, status, skill quando premendo PagUp si passa all'eroe
successivo.

  def next_actor
	@actor_index += 1
	@actor_index %= $game_party.members.size
	$scene = Scene_Skill.new(@actor_index)
  end

Per ottenere il resto si usa %. O %= per settare. Con questo codice l'@actor_index non potrà indicare un eroe che
non è nel gruppo in quanto è limitato dalla dimensione di questo (in inglese members = membri [del gruppo], size =
dimensione).
Si poteva di certo mettere una condizione. Se @actor_index è maggiore di x allora impostalo a zero.
Oltre a non essere elegante, questa cosa funziona solo con incremento unitario.
Mettiamo che il party comprenda 3 elementi.
@actor_index è 2 (visto che parte da zero, indica il terzo elemento).
Se @actor_index venisse incrementato di 2, non dovrebbe essere impostato a 0, come fa la condizione, ma dovrebbe
andare a 1.
Con il resto il valore viene impostato correttamente.

Il resto si può usare anche dagli eventi, nel settaggio variabile.
Utilissimo ad esempio per indicare valori numerici via picture.
Come fate a mostrare 973 utilizzando 10 picture che contengono i signoli numeri da 0 a 9?
973%10 = 3
E avete il primo numero. Lo sottraete, dividete per 10 e avrete 97.
97%10 = 7
E così per tutti i numeri.
Poi tramite condizione potete mostrare la picture a seconda del numero.
Probabilmente troverete spiegazioni più approfondite su questa parte in un tutorial per bs ad eventi che, direi,
non è questo qui.

.Conclusione
Non avevo intenzione di creare un testo così lungo e, vedendolo mentre lo scrivevo, ho pensato di togliere la parte
sul resto. Però visto che non è troppo lunga e aggiungendola non cambia di molto il risultato finale l'ho lasciata.
Spero questo tutorial vi sia utile, che si faccia capire e che sia di vostro gradimento.

.Allegati
Ho incluso uno script dimostrativo che funziona su XP, VX e Ace. All'interno c'è scritto come farlo partire.

Spoiler

#chiamate $scene = Scene_TutSinCosMod.new per far partire il tutto (XP, VX)
#chiamate SceneManager.call(Scene_TutSinCosMod) per VX Ace
#per il VX Ace DOVETE usare un Inizio automatico
#per l'XP DOVETE usare un processo parallelo
class Scene_TutSinCosMod
  #codice inizializzazione, messo per compatibilità
  def main
	Graphics.transition
	loop do
	  Graphics.update
	  Input.update
	  update
	end
	Graphics.freeze
	dispose
  end
  #inizio parte che vi interessa guardare :*
  def initialize
	#codice dal tutorial
	@var = 0
	@sprite = Sprite.new
	@sprite.bitmap = Bitmap.new(30,30)
	@sprite.bitmap.fill_rect(0,0,30,30,Color.new(255,255,255))
	@sprite.ox = @sprite.oy = 30/2
	#pannello informativo
	@info = Sprite.new
	@info.bitmap = Bitmap.new(200, 105)
	@info.y = Graphics.height - 108
	@info.x = 3
	#i tre quadrati numerati
	@sp = Sprite.new
	@sp.x = Graphics.width/2 + Math::sin(@var)*30
	@sp.bitmap = Bitmap.new(30,30)
	@sp.bitmap.fill_rect(0,0,30,30,Color.new(255,255,255))
	@sp.bitmap.draw_outlined_text(0,0,30,30,"1",1)
	@sp.ox = 15
	@sp2 = Sprite.new
	@sp2.x = Graphics.width/2 + Math::cos(@var)*30
	@sp2.y = Graphics.height/2 - 15
	@sp2.bitmap = Bitmap.new(30,30)
	@sp2.bitmap.fill_rect(0,0,30,30,Color.new(255,255,255))
	@sp2.bitmap.draw_outlined_text(0,0,30,30,"2",1)
	@sp2.ox = 15
	@sp3 = Sprite.new
	@sp3.x = Graphics.width/2 + @var%30
	@sp3.y = Graphics.height - 30
	@sp3.bitmap = Bitmap.new(30,30)
	@sp3.bitmap.fill_rect(0,0,30,30,Color.new(255,255,255))
	@sp3.bitmap.draw_outlined_text(0,0,30,30,"3",1)
	@sp3.ox = 15
	#linea centrale
	@lp = Sprite.new
	@lp.x = Graphics.width/2
	@lp.bitmap = Bitmap.new(1,Graphics.height)
	@lp.bitmap.fill_rect(0,0,1,Graphics.height,Color.new(255,255,255))
	@lp.z = @sp.z - 1
  end
  def update
	#aggiornamenti vari
	@sp.update
	@sp2.update
	@sp3.update
	@lp.update
	@info.update
	#codice dal tutorial
	@var += 0.1
	@sprite.update
	@sprite.y = 416/2 + Math::sin(@var)*50
	@sprite.x = 544/2 + Math::cos(@var)*50
	@sprite.angle = -@var*360/(2*Math::PI)
	#posizionamento quadrati numerati
	@sp.x = Graphics.width/2 + Math::sin(@var)*30
	@sp2.x = Graphics.width/2 + Math::cos(@var)*30
	@sp3.x = Graphics.width/2 + @var%30
	#scrittura valori nel pannello
	@info.bitmap.clear
	@info.bitmap.draw_text(0,0,200,24,"@var = "[email protected]_s)
	@info.bitmap.draw_text(0,27,200,24,"1 = "[email protected]_s)
	@info.bitmap.draw_text(0,54,200,24,"2 = "[email protected]_s)
	@info.bitmap.draw_text(0,81,200,24,"3 = "[email protected]_s)
  end
  def dispose
	#codice dal tutorial
	@sprite.bitmap.dispose
	@sprite.dispose
	#distruzione altri oggetti
	@sp.bitmap.dispose
	@sp.dispose
	@sp2.bitmap.dispose
	@sp2.dispose
	@sp3.bitmap.dispose
	@sp3.dispose
	@lp.bitmap.dispose
	@lp.dispose
  end
  #fine parte che vi interessa guardare
end
#compatibilità XP
if !defined?(Graphics.width)
  module Graphics
	def self.width
	  return 640
	end
	def self.height
	  return 480
	end
  end
end
#codice per disegnare i contorni neri nel testo
class Bitmap
  def draw_outlined_text(*args)
	align = 0; color = self.font.color.clone
	if Graphics.width == 544
	  sh = self.font.shadow; self.font.shadow = false
	end
	if [2,3].include?(args.size)
	  x = args[0].x; y = args[0].y
	  w = args[0].width; h = args[0].height
	  string = args[1]
	  align = args[2] if args.size > 2
	elsif [5,6].include?(args.size)
	  x = args[0]; y = args[1]
	  w = args[2]; h = args[3]
	  string = args[4]
	  align = args[5] if args.size > 5
	else
	  raise("Numero di argomenti non valido: " + args.size.to_s + "\n" +
			"Valori consentiti: 2,3,5,6")
	end
	self.font.color = Color.new(38,31,23,255)
	draw_text(x, y + 1, w, h, string, align)
	draw_text(x , y - 1, w, h, string, align)
	draw_text(x + 1, y + 1, w, h, string, align)
	draw_text(x + 1 , y - 1, w, h, string, align)
	draw_text(x - 1, y + 1, w, h, string, align)
	draw_text(x - 1 , y - 1, w, h, string, align)
	draw_text(x + 1, y, w, h, string, align)
	draw_text(x - 1, y, w, h, string, align)
	self.font.color = color
	draw_text(x, y, w, h, string, align)
	self.font.shadow = sh if Graphics.width == 544
  end
end

Modificato da mikb89, 01 March 2012 - 00:26 AM.

[Guardian of Irael]

Uh ottimo un tutorial su seno e coseno! :3
Se ne era parlato dell'utilità, ma non aveva mai avuto tante applicazioni... magari se vuoi accennare a qualche esempio utile! ^ ^

Mi sa che per 2k e 2k3 non è tanto utile come tutorial, giusto come concetto D:
Ottimo lavoro! ^ ^

[mikb89]

Grazieee ^^

Se ne era parlato dell'utilità, ma non aveva mai avuto tante applicazioni... magari se vuoi accennare a qualche esempio utile! ^ ^

L'esempio che forse più riscuotere più utilizzi è un HUD circolare. Oppure per fare oscillare oggetti in caduta per effetti atmosferici particolari. Vabè che ce ne sono di già fatti però. Comunque tipo foglie che cadono, tempesta di sabbia, ecc.

Mi sa che per 2k e 2k3 non è tanto utile come tutorial, giusto come concetto D:

Più che altro il resto. Comunque mi pare ci fossero patch che fanno usare le funzioni trigonometriche.

[Guardian of Irael]

Dicevo di aggiungerli sopra per far capire agli utenti a cosa serve e far trovare loro la voglia di leggere il tutorial! XD
^ ^

Sì, sì ci sono patch apposite :D
^ ^

[keroslifer]

Ottimo tutorial per l'utilizzo delle funzioni trigonometriche, molto utile anche per capire l'utilità di queste funzioni in varie situazioni! :)

[mikb89]

Guardian, hai ragione :D

Grazie, keros ^^ (p.s. preferisci essere abbreviato in kero o keros? keros fa un po' di espagnolo xD)

EDIT: aggiunti esempi ^^
Sono più che altro un'anticipazione dei contenuti, ma è quello che alla fine spiega il tutorial, anche se capendo bene i concetti si possono fare molte più cose.

Modificato da mikb89, 01 March 2012 - 00:31 AM.

[keroslifer]

Ottimo per nuovi esempi!

Grazie, keros ^^ (p.s. preferisci essere abbreviato in kero o keros? keros fa un po' di espagnolo xD)

kero è l'abbreviazione corretta, in quanto il mio username viene dall'unione delle parole Keroro e Slifer ;)
keros fa troppo strano XD

Modificato da keroslifer, 01 March 2012 - 14:30 PM.

[Guardian of Irael]

Direi ottimo pure io per gli esempi, ma non mi ricordo quello che c'era e quello che non c'era! XD Immagino quelle righe dopo la spiegazione di ogni opzione con numeri infiniti ed esempi di resto, ottimo! ^ ^

[Apo]

Non facilissimo da comprendere per un profano della trigonometria, ma decisamente utile e interessante
Permette molti e vari movimenti che di certo il ruota immagine da eventi non concede XD
Molto interessante anche il giocare sui valori di x e y per creare effetti Yoyo oppure moti ellittici!

[Holy87]

Ottimo tutorial! Non ero a conoscenza che l'RGSS integrasse il modulo Math, ma voglio provare a fare qualche script che usi il Seno e Coseno!

[mikb89]

^^

@kero: ok xD

Non facilissimo da comprendere per un profano della trigonometria, ma decisamente utile e interessante

Apo, hai notato qualche passaggio difficile in particolare? Magari è qualcosa che posso spiegare meglio ^^

Ottimo tutorial! Non ero a conoscenza che l'RGSS integrasse il modulo Math, ma voglio provare a fare qualche script che usi il Seno e Coseno!

Ha un sacco di funzioni utili, per esempio Math::hypot(x,y) per calcolare la distanza fra due punti o Math::atan2(x,y) che calcola l'angolo di orientazione verso una coordinata. Usarli toglie un sacco di lavoro di calcoli ^^

Grazie anche a voi per i commenti ^^

(quanti ^^ ho messo nel post? xD)

[Apo]

Niente per cui penso non basti Wikipedia, come le definizioni di Seno e Coseno che quando potrò mi guarderò/studierò e

Non si può passare direttamente @var perché l'angolo va da 0 a 360 mentre i valori che prendono le funzioni
sinusoidali hanno 2 volte pi greco come gamma di valori. Che corrisponde a Math::PI, mi pare chiaro.
Il meno va messo perché il giro è al contrario. I valori matematici litigano con quelli informatici perché nella
prima le y vanno dal basso verso l'alto mentre nella seconda è al contrario. Vabè.

Visto che non so niente di funzioni sinusoidali e quindi non ho chiaro perché abbiamo un 2 PiGreco.
La moltiplicazione per 360 come mai esattamente? Sarebbe per far "ruotare" giusto?

0.1 * 360 = 36°
0.2 * 360 = 72°
0.3 * 360 = 108°
0.4 * 360 = 124°
0.5 * 360 = 180°
0.6 * 360 = 196°
0.7 * 360 = 252°
0.8 * 360 = 288°
0.9 * 360 = 324°
1.0 * 360 = 360°
1.1 * 360 = 396° che è 360° + 36° iniziali... credo che nel modulo angle ci sia un resto fatto con 360 giusto?
Però non ho chiaro come si lega il doppio PiGreco...
Citando Montabalno(il giovane), "è ragionato"?

[mikb89]

In effetti in questa parte ho un po' sorvolato. È che per spiegarla bene ci vorrebbe un paragrafo a parte.

È come hai capito tu. @var è espresso in radianti, una misura che ha una definizione BRUTTISSIMA:

Tale misura rappresenta il rapporto tra la lunghezza di un arco di circonferenza spazzato dall'angolo, e la lunghezza del raggio di tale circonferenza.

Il valore .angle ha invece bisogno di un numero espresso in gradi.
Ora, mentre i gradi vanno da 0 a 360, i radianti vanno da 0 a 2 pi greco. Ragion per cui, se 0 è 0, 360 corrisponde a 2 pi greco.
Quella che faccio è una conversione di unità, un po' come 1 € che vale 1936,27 £ xD
Allego una piccola dimostrazione pratica :*

Come ottenere 2 volte pi greco:

Prendi una cordicella e fanne un cerchio. Misurane il diametro (la lunghezza fra un bordo e l'altro) e dividi per due per ottenere il raggio.

Misura la cordicella, dividi per il raggio -> 2 volte pi greco!! eeeehhhh!! xD

Do per scontato si sappia che un giro completo è 360° e che il pi greco vale 3,1415...

Le funzioni sinusoidali arrivano quindi a 2 pi greco perché, se gli dai un valore più alto, come per i 360, è come se stessi ricominciando il giro.

Per ottenere la formula io uso le proporzioni:

2 pi : 360 = @var : x

Per ottenere x, si moltiplica 360*@var e poi si divide per 2 pi greco.

Comunque è una formula nota, si dovrebbe ricordare a memoria. Io me la calcolo perché ho una memoria del cavolo xD

Dimmi quanto comprensibile è così poi la allego di sopra, magari togliendogli un po' di 'xD' che ho sparso ^^

[Apo]

Aaahn, avevo pensato ai radianti(tranquillo è un concetto che abbiamo fatto a scuola ), ma non mi tornava la divisione per cui...

Non avevo capito che si trattava della formula dalla proporzione, perché non avevo pensato di considerare @var come un valore in radianti...
Cioè tu, avendo un valore come @var, che non va bene per i gradi, considerandolo in radianti puoi ricavarne un angolo in gradi...
Ho capito bene?
Ma per esempio... Se @var aumentava di 1, posso evitare la cosa giusto?
... Ho provato con una variabile in più, quindi sì XD

[mikb89]

Una variabile in più in che senso?

Cioè tu, avendo un valore come @var, che non va bene per i gradi, considerandolo in radianti puoi ricavarne un angolo in gradi...

Esattamente. @var alla fine è un numero, però lo considero in radianti per poter ricavarne quel che voglio.

Se @var aumentava di 1 semplicemente il giro era più veloce. Se aumentava di 10 iniziava a saltare parti xD

[Apo]

No lo so che era più veloce XD
Per uno intendevo genericamente unità intera, cioè mi chiedevo se potevo dare come ad angle direttamente un valore qualsiasi purché sia intero.
Però provando vedo che teoricamente potrei dare anche un numero decimale(anche perché pensandoci dividere per 2Pigreco non può dare un numero intero). Il considerarlo in radianti era solo una questione di esempio visivo, cioè renderlo più veloce?

Comunque mi pare di aver capito abbastanza, per seno coseno e funzione sinusidale guardo Wiki, visto che la prof mi ha fatto tipo "Questa domanda corrisponde ad un intero quadrimestre" XD

Ribadisco, funzioni utilissime

EDIT Una variabile in più nel senso che ho messo una @var2 per usarla nell'angle, distinta dalla @var1 che gestisce il movimento circolare. Così ho provato a decidere in altri modi la rotazione.

Modificato da Apo, 02 March 2012 - 19:44 PM.

[mikb89]

Capito.
Ad angle puoi anche passare un valore non intero, il fatto è che il valore considerato con sin e quello considerato come angle, se vuoi fare sia muovere circolarmente l'oggetto che rotearlo, non corrispondono.
Quindi se usi lo stesso valore non ti dà errore, però vedi che l'oggetto fa il giro su sé stesso più velocemente rispetto a come si muove.

Che comunque se provi tu stesso puoi vedere e che lo dico io è inutile xD

Potevi ad esempio valutare @var in gradi e passarlo direttamente ad angle e convertirlo invece per sin e cos, in radianti. Una conversione però si doveva sempre fare.

Allora se poi prendi un buon voto in trigonometria, creditami xD

[Apo]

Nono intendeva dire che per spiegarmi tutto bene ci voleva troppo XD
Ma ti crediterò tranquillo/a(non ricordo la tua situazione genitale)
Quindi giocare su angle-radianti permette di non perdere l'uso della vista.

[giver]

Quindi giocare su angle-radianti permette di . . . non perdere l'uso della vista.

. . . gestire due movimenti usando una sola variabile . . .

[Apo]

Forse è il completamento migliore : )