Newsgroup: it.comp.lang.javascript
Titolo: Problemino matematico

Vorrei realizzare un layer che orbita intorno ad un'altro, ma mi sono
bloccato nel calcolare le posizioni x e y in 2d.
Se l'orbita vista in 2d fosse perfettamente circolare non avrei problemi,
con un codice del genere:
grado++
posX = Math.sin(grado * Math.PI / 180) * raggio
posY = Math.cos(grado * Math.PI / 180) * raggio
if(grado > 359)
    grado = 0
Ma purtroppo non è sempre cosi, in quanto le orbite sono un cerchio
schiacciato (non un ellisse) e di solito con una angolazione di diversi
gradi.
Un mio amico mi ha detto che bisogna prendere in considerazione l'asse z e
fare complicati calcoli matematici e che non è molto facile.
Qualcuno mi può aiutare?
Thankx
--
the fly on the net
webmaster di "the devil inside"
http://members.tripod.com/netfly
e-mail:
net...@netbusiness.it

 wrote in message
7n836e$ac3$1...@fe1.cs.interbusiness.it...


Qualcuno mi può aiutare?
Potresti usare la formula "tradizionale":
    x'=(m*X)/(p+Z)
    y'=(m*Y)/(p+Z)
e sostituire a X, Y e Z i valori ritornati dalla funzione del percorso che
compie il tuo layer, oppure lasciare Y costante se ti muovi solo sul piano
orizzontale...
m= fattore ingrandimento
p= fattore di proiezione
entrambe le variabili hanno dei valori ottimali a seconda della risoluzione
dello schermo e delle proprie esigenze; purtroppo però non li ho sotto mano,
se non per le basse risoluzioni tipo 320*200... ma immagino che non sia il
tuo caso!
;)
Cì@0.
Ðarius. (
http://www.infotronica.it/darius/
)
-----------------------------------------------------------------


per schiacciare il cerchio è sufficiente dividere le variabili posX e/o posY
per un parametro a scelta.
Il parametro può essere fisso, ma in questo caso il cerchio verrebbe
schiacciato rispettivamente lungo l'asse delle Y e/o delle X.
Se invece vuoi ottenere delle angolazioni particolari devi considerare due
variabili temporanee (es posX1 e posY1) per le quali applicherai la formula
matematica del cerchio schiacciato; quindi potrai determinare posX e posY
operando una rotazione degli assi in base all'angolo prescelto:
posX1 = Math.sin(grado * Math.PI / 180) * raggio
posY1 = Math.cos(grado * Math.PI / 180) * raggio
posX= f(posX1, angolo)
posY= f(posY1, angolo)
dove f() è la funzione (matematica) di rotazione.
Potrai trovare spiegazioni su come si opera una rotazione su qualsiasi
manuale di geometria analitica di liceo scientifico.
Ciao
    Luca

Ho dimenticato di schiacciarti il cerchio:
posX1 = Math.sin(grado * Math.PI / 180) * raggio /parametro1
posY1 = Math.cos(grado * Math.PI / 180) * raggio /parametro2
I parametri sono necessariamente diversi, altrimenti ottieni solo una
circonferenza più piccola.
Ciao
    Luca

Questo è quello che ho realizzato fin'ora (l'ho scritto prima del tuo post).
grado++
angolaz = 45
if(angolaz + grado > 360)
    angolaz = -315
posX = Math.sin(grado * Math.PI / 180) * raggioX
posY = Math.cos(grado * Math.PI / 180) * raggioY
raggio = Math.sqrt(Math.pow(posX, 2) + Math.pow(posY, 2))
//ebbene sì, il vecchio teorema di pitagora!
posX = Math.sin(grado + angolaz * Math.PI / 180) * raggio
posY = Math.cos(grado + angolaz * Math.PI / 180) * raggio
if(grado > 360)
    grado = 0
Bene, effettivamente il layer sembra effettuare un'orbita intorno all'altro
(non deve essere per forza preciso). Ho notato però una cosa strana: il
layer che ruota sembra rallentare e compiere un'orbita leggermente a 8 nella
"parte stretta" (passatemi il termine non proprio matematico) dove invece
dovrebbe scorrere velocemente.
La teoria che ho applicato per questa funzione è semplice da capire ed è
secondo me corretta, ma non sembra comportarsi correttamente sul campo. Ho
pensato ad un problema di arrotondamenti che porta a spostarsi un pixel più
in là dando l'impressione di un'orbita a 8.
Grazie a tutti quelli che hanno la pazienza di aiutarmi.
---
the fly on the net




















Puo' andare?
Un Saluto a Tutti!! :) 
Bye 

Ro<*¿*>berto 
PS:finito il primo assaggio di 
vacanza!! :( 




Se il problema non è solo quello che dicevo prima prova ad inviare tutto
quanto il codice, compresi i layers e le dimensioni delle immagini che
ruotano, altrimenti è un po' difficile capire la dinamica del prgramma...
Ad ogni modo in genere alcune sproporzioni sono solo illusioni ottiche
dovute ad un non corretto allineamento delle immagini stesse:
1) non è bene posizionare un'immagine, specie se è grande, dal suo angolo
superiore sinistro. E' preferibile centrare l'immagine, con un:
        image.style.left=posX-image.width/2;
        image.style.top=posY-image.height/2;
2) Pur percorrendo un'eventuale ellisse a velocità angolare costante (come
nel nostro caso), quando il layer si trova più lontano, quindi è più
piccolo, sembra andare più
velocemente di quando è grande: infatti in natura gli oggetti lontani
sembrano
muoversi più lentamente di quelli vicini. Aggiungiamo anche il fatto che su
computers non troppo veloci (come il mio P150, per esempio :), il browser
impiega più tempo a ridisegnare di continuo un'immagine di 500x500 pixel
piuttosto che una di 50x50, quindi questo rallentamento si va ad aggiungere
all'effetto di
prima.
Un'idea? Beh, ti passo questo script che è un po' lo sviluppo di uno che
avevo
fatto precedentemente.
Qui non si calcola direttamente PosX e PosY in funzione di t, ma t stessa
viene calcolata in funzione di un altro ht, e quindi si trova PosX e PosY
dalla nuova t.
t viene calcolato come cosinusoide funzione di th che invece cresce
costantemente,
simulando così una accelerazione e una decelerazione per il movimento del
layer. Mi è più facile darti il codice in mano che spiegare come funziona,
cmq il cuore dell'idea sta nella funzione runElektron()...
<HTML>
<HEAD>
<STYLE>
 div {position:absolute;}
</STYLE>
<SCRIPT>
var DivData=new Array('BackDiv','ForeDiv');
var strVisib=new Array('visibile','hidden');
var xc, yc, ht=0; t=0, backPtr=1;
var xCenter,yCenter;
var xRadius=170, yRadius=100;
var tmpHeight,tmpWidth;
function SwapImages()
{
 document.all[DivData[backPtr]].style.pixelLeft=
 document.all[DivData[1-backPtr]].style.pixelLeft;
 document.all[DivData[backPtr]].style.pixelTop=
 document.all[DivData[1-backPtr]].style.pixelTop;
 document.all[DivData[backPtr=1-backPtr]].style.visibility="hidden";
 document.all[DivData[1-backPtr]].style.visibility="visible";
}
function RunElektron()
{
 xc=xRadius*Math.sin(t*0.0175);
 yc=yRadius*Math.cos(t*0.0175);
document.all[DivData[1-backPtr]].style.pixelLeft=xCenter+xc-document.images[
1-backPtr].width/2;
document.all[DivData[1-backPtr]].style.pixelTop=yCenter-yc-document.images[1
-backPtr].height/2;
 document.images[1-backPtr].width= tmpWidth-45*(Math.cos(t*0.0175));
 document.images[1-backPtr].height= tmpHeight-45*(Math.cos(t*0.0175));
 //if (t==90||t==270)
 if (ht==60||ht==120)                        // Queste ultime righe.
  SwapImages();
 t=180*(1-Math.cos(ht*0.0175));
 ht+=(ht>180)?-179:1;
 ht+=10*(ht==175); //Altrimenti il layer si ferma per un po' in fondo...
  setTimeout("RunElektron()",25);
}
</SCRIPT>
</HEAD>
<BODY scroll=no aLink=#4040ff bgColor=#ffff00 link=#4040ff vLink=#4040ff
ONLOAD="xCenter=document.body.clientWidth/2;
yCenter=document.body.clientHeight/2;"
ONRESIZE="xCenter=document.body.clientWidth/2;
yCenter=document.body.clientHeight/2;">
<DIV id=BackDiv>
 <A href="
http://www.infotronica.it/darius/
">
 <IMG border=0 name=back
src="
http://www.infotronica.it/darius/js/rotateworld3.gif
" WIDTH=48
HEIGHT=48>
 </A>
</DIV>
<DIV id=TextDiv><FONT color=#ff0000 face=times size=4><B>
 <FONT color=#FF8020 face="comic sans ms">
 C'era una volta, tanto tempo fa,<BR>
 Un Layer, che con IE4 o superiore<BR>
 riusciva a fare cose straordinarie!<BR>
 Volava, volava e volava...<BR>
 Pollicino voleva afferrarlo,<BR>
 ma non ci riusciva<BR>
 perché non era reale.<BR>
 </FONT>
 Bye.<BR>DARIUS. (<A
href="
http://www.infotronica.it/darius/
">
www.infotronica.it/darius/
</A>)</B>
 </FONT>
</DIV>
<DIV id=ForeDiv style="VISIBILITY: hidden"><A
href="
http://www.infotronica.it/darius/
">
 <IMG border=0 name=fore
src="
http://www.infotronica.it/darius/js/rotateworld3.gif
" WIDTH=48
HEIGHT=48> </A></DIV>
<SCRIPT>
 tmpWidth=document.images['back'].width;
 tmpHeight=document.images['back'].height;
 document.all.TextDiv.style.left=document.body.clientWidth/2-150;
 document.all.TextDiv.style.top=document.body.clientHeight/2-100;
 RunElektron()
</SCRIPT>
</BODY></HTML>


No... non è questo che intendevo... :)
Sentite, io volevo mandarvi una zuper-mail con il codice che ho fatto finora
per farvi capire quello che voglio fare, ma non so proprio come inserire il
JS.
Ma come fate, inserite il codice dopo aver composto il messaggio?
CIAO :)
---
the fly on the net


Ma come fate, inserite il codice dopo aver composto il messaggio?
Oh, Yesssss! Salvalo come file sul desktop e "Notepadizzalo"!
:)
Ripulisci tutte le porcherie create da OE che non ti servono, tipo i 50000
<div>, e lo spazio tra <HTML> č </HTML> č a tua disposizione, piů
eventualmente qualche truschino con le intestazioni, ma lě c'č da stare
attenti perché si rischia di bloccare tutto...
P.S.: Ricordati di trasformare gli "=" in "=3D"!!!!!
Q.S.: Anche se ami tanto Netscape, per questa volta usa Outlook, o non ti
funzionerŕ nulla!
R.S.: Abilita anche i messaggi in HTML sui NG, altrimenti ti vengono
convertiti in formato solo testo!
S.S.: Non includere immagini o il robomoderatore ti sega il messaggio: crea
dei link con document.write("<IM"+"G SRC=3D'htt"+"p://.................");
T.S.: Se vuoi essere sicuro che funziona tutto bene salva prima il file tra
le bozze, guardalo da lě, e invialo solo allora...
U.S.: In bocca al lupo...
In fondo, perň, se ti dobbiamo aiutare a debuggare il codice, faresti prima
a mandare il codice originale, altrimenti passiamo mezz'ora a togliere gli
"=3D"...
:)
Cě@0.
Đarius. (
http://www.infotronica.it/darius/
)
-----------------------------------------------------------------







 


the fly on the net
 ha scritto nel messaggio 
...


P


S


 
the fly on the net


Mi sono accorto adesso che non funzia.. com'č possibile che
document.all["pianeta"].style non esista...
Eppure mi pareva che con IE fosse tutto OK.
Cosa mi sfugge?

Ciao flay
Io ne ho fatte + di 20 di Zuper E-Mail
prima di riuscire a beccarne una buona...
l'errore è dovuto all'oggetto:
var centroX=document.all["pianeta"]......
chiamato prima del body , prima cioè che
sia stato creato!
----
