[JavaScript] Fonction trigo - Version imprimable

[JavaScript] Fonction trigo - Version imprimable

+- N-PN White-Hat Project (https://dev.n-pn.fr/forum)
+-- Forum : Programmation (https://dev.n-pn.fr/forum/forumdisplay.php?fid=72)
+--- Forum : Langages interprétés (https://dev.n-pn.fr/forum/forumdisplay.php?fid=27)
+--- Sujet : [JavaScript] Fonction trigo (/showthread.php?tid=2362)

[JavaScript] Fonction trigo - InstinctHack - 04-11-2012

Bonjour à tous!
j'aimerais faire un truc sympa en javascript, un menu multidimensionnel qui fonctionnerais comme un système solaire.
Et là où je bloque, c'est obtenir les différents couple de position x et y des satellites de ma planètes avec en entré la position x et y de la planète, la distance planète-satellites, et le nombre de satellites.

En gros, comment obtenir les coordonnées x et y de x points qui forme un cercle autour d'un centre de coordonnées x et y et d'un rayon z.

vous avez une idée ? :nul en géométrie:

RE: fonction trigo en javascript - supersnail - 04-11-2012

Je sais pas si ça t'as déjà vu le cercle trigonométrique ou pas encore...

Pour faire "simple", cos(x) te donne l'abscisse d'un point d'un cercle de rayon 1 et d'angle x, tandis que le sin(x) te donne l'ordonnée de ce point...

Donc pour avoir le point d'un cercle de rayon z, ben tu multiplies par z le cos et le sin Wink

Pour que ce soit plus clair, voilà le cercle trigonométrique:
[Image: cercletrigo.png]

RE: fonction trigo en javascript - InstinctHack - 04-11-2012

merci beaucoup supersnail!
j'ai presque réussi à faire ce que je voulait, mais j'ignore pourquoi il y a un décalage :/
Voilà le code

Code HTML :
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Cv (Curriculum vitae)</title>

<style type="text/css">

#centre

{

    position: absolute;

    background-color: red;

    height: 10px;

    width: 10px;

}

.satellite

{

    position: absolute;

    background-color: green;

    height: 10px;

    width: 10px;

}

</style>

    </head>

    <body>

        <div id="centre">

            <div class="satellite"></div>

            <div class="satellite"></div>

            <div class="satellite"></div>

            <div class="satellite"></div>

            <div class="satellite"></div>

        </div>

<script type="text/javascript" >

function degres_radian(angle)

{

    return Math.PI * angle / 180;

}

function radian_degres(angle)

{

    return 180 * angle/ Math.PI 

}

var position_x_centre=parseInt(prompt("Position x du centre ?"));

var position_y_centre=parseInt(prompt("Position y du centre ?"));

var satellites=document.querySelectorAll("#centre .satellite");

var nombre_point= satellites.length;

var distance_planete_satellite=parseInt(prompt("Distance planète-satellite ?"));

document.getElementById("centre").style.left=position_x_centre+"px";

document.getElementById("centre").style.top=position_y_centre+"px";

var angle=360/nombre_point;

for(var abc=0;abc<nombre_point;abc++)

{

    a=abc*angle;

    position_x=position_x_centre+(Math.cos(degres_radian(a))*distance_planete_satellite);

    position_y=position_y_centre+(Math.sin(degres_radian(a))*distance_planete_satellite);

    alert("Position x : "+position_x+"\n"+"Position y : "+position_y);

    satellites[abc].style.left=position_x+"px";

    satellites[abc].style.top=position_y+"px";

}

</script>        

    </body>

</html>

RE: fonction trigo en javascript - supersnail - 04-11-2012

Le problème du décalage vient que la position de tes satellites se fait déjà par rapport au centre (vu qu'ils sont à l'intérieur du div "centre") Wink

Du coup rajouter la position du centre devient superflue Wink

RE: fonction trigo en javascript - InstinctHack - 05-11-2012

J'ai retourné le truc dans tous les sens, mais je doit rater une marge ou oublier quelque chose :/
Le placement est pas exactement celui qu'il devrait être -_-
Si quelqu'un aurait une idée, je suis preneur. Smile

Code :
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Cv (Curriculum vitae)</title>

<style type="text/css">

body

{

    background-image: url("http://img371.imageshack.us/img371/5643/5hn0.png");

}

.centre

{

    position: absolute;

    background-color: red;

    z-index: 5;

}

.satellite

{

    transition:all 0.5s;

    position: absolute;

    background-color: white;

    z-index: 10;

    text-align: center;

    margin: 0 0 0 0;

    padding: 0 0 0 0;

/*

  display:inline-block;

  vertical-align:middle;

*/

}

.satellite:hover

{

    background-color: blue;

}

</style>

    </head>

    <body>

<!--

        <div class="" style="position:absolute;top:400px;left:500px;">X</div>

-->

        <div class="centre" diametre_planete="200" diametre_satellite="50" distance_centre_planete_satellite="0">

            <div class="satellite">.</div>

            <div class="satellite">.</div>

            <div class="satellite">.</div>

            <div class="satellite">.</div>

            <div class="satellite">.</div>

        </div>

<script type="text/javascript" >

function degres_radian(angle)

{

    return Math.PI * angle / 180;

}

function radian_degres(angle)

{

    return 180 * angle/ Math.PI 

}

var array_planete=document.querySelectorAll(".centre");

for(var abc=0;abc<array_planete.length;abc++)

{

    var diametre_planete=parseInt(array_planete[abc].getAttribute("diametre_planete"));//parseInt(prompt("Diamètre du centre ?"));

    var diametre_satellite=parseInt(array_planete[abc].getAttribute("diametre_satellite"));//parseInt(prompt("Diamètre des satellites ?"));

    var distance_centre_planete_satellite=parseInt(array_planete[abc].getAttribute("distance_centre_planete_satellite"));//parseInt(prompt("Distance entre les centres planète-satellite ?"))-(diametre/2);

    var position_x_centre_planete=window.innerWidth/2;//parseInt(prompt("Position central x du centre ?"));

    var position_y_centre_planete=window.innerHeight/2;//parseInt(prompt("Position central y du centre ?"));

    array_planete[abc].style.height=diametre_planete+"px";

    array_planete[abc].style.width=diametre_planete+"px";

    array_planete[abc].style.borderRadius=(diametre_planete/2)+"px";

    array_planete[abc].style.left=(position_x_centre_planete-(diametre_planete/2))+"px";

    array_planete[abc].style.top=(position_y_centre_planete-(diametre_planete/2))+"px";

    var satellites=array_planete[abc].querySelectorAll(".satellite");

    for(var abc=0;abc<satellites.length;abc++)

    {

        satellites[abc].style.height=diametre_satellite+"px";

        satellites[abc].style.width=diametre_satellite+"px";

        satellites[abc].style.borderRadius=(diametre_satellite/2)+"px";

        a=abc*(360/satellites.length);

        position_x=Math.cos(degres_radian(a));//on cherche la coordonnée x en ayant l'angle

        position_y=Math.sin(degres_radian(a));//on cherche la coordonnée y en ayant l'angle

        position_x*=diametre_planete+(distance_centre_planete_satellite-diametre_satellite); 

        position_y*=diametre_planete+(distance_centre_planete_satellite-diametre_satellite);

        satellites[abc].style.left=(position_x+diametre_satellite)+"px";

        satellites[abc].style.top=(position_y+diametre_satellite)+"px";

//        alert(position_x+"\n"+position_y);

    }

}

</script>        

    </body>

</html>

l'erreur doit être dans cette section :

Code JAVASCRIPT :

        position_x=Math.cos(degres_radian(a));//on cherche la coordonnée x en ayant l'angle

        position_y=Math.sin(degres_radian(a));//on cherche la coordonnée y en ayant l'angle

        position_x*=diametre_planete+(distance_centre_planete_satellite-diametre_satellite);

        position_y*=diametre_planete+(distance_centre_planete_satellite-diametre_satellite);

        satellites[abc].style.left=(position_x+diametre_satellite)+"px";

        satellites[abc].style.top=(position_y+diametre_satellite)+"px";

le code est ici : http://passion09.comule.com/cv.php

RE: fonction trigo en javascript - Booster2ooo - 05-11-2012

J'ai pas trop le temps de regarder l'algo mais j'en profite quand même pour vous suggérer d'utiliser JSFiddle quand il s'agit de languages web, c'est quand mm très pratique:
http://jsfiddle.net/rexjA/1/

RE: fonction trigo en javascript - Booster2ooo - 05-11-2012

Bon, j'ai pas pris le temps de corriger, j'ai tout réécris.
http://jsfiddle.net/rexjA/2/

Je ne sais pas si dans ton code tu en tenais compte mais j'ai vu que ta planète et tes satellites étaient tous en absolue. Il faut donc bien garder à l'esprit que les satellites sont positionnés de manière relative à la planète et non à la "window".

GL Smile

Edit:
Bon, j'ai pas résisté à faire le cas des absolute, alors voila, *spoiler alert* http://jsfiddle.net/rexjA/3/

Edit 2:
Autre remarque important que j'avais oubliée, en JS, pour le parseInt, il faut mieux toujours précisé la base 10 en second param pour éviter les surprises Wink

RE: fonction trigo en javascript - spgb - 06-11-2012

JSFiddle c'est bien mais pas toujours fiable par contre.
Donc si on peut tester en local ... c'est toujours mieux. (si on doit partager, ça peut être pratique)

Bien joué sinon Wink

RE: fonction trigo en javascript - InstinctHack - 06-11-2012

Merci beaucoup Booster2ooo !
En revanche j'ai encore un problème c'est pour la récursivité du truc, genre le satellite du satellite
j'ai remis le code ici http://passion09.comule.com/planete.php et là pour ceux qui préfère http://jsfiddle.net/rexjA/4/ en ajoutant un satellite ainsi :

Code :
<div class="planet satellite" data-raidusplanet="100" data-raidussat="25" data-distance="10" >

Et j'avoue que j'ignore comment résoudre ça :/

RE: fonction trigo en javascript - Booster2ooo - 06-11-2012

http://jsfiddle.net/rexjA/6/

- Vérifier le niveau dans lequel se trouve le node satellite
- Ne pas appliquer la translation top/left d'une planète à un satellite&planète

RE: fonction trigo en javascript - InstinctHack - 10-11-2012

Booster2ooo le code est parfaitement fonctionnel sur jsFiddle, mais sur firefox nan :/
j'ai une erreur dans firebug

Code :
TypeError: planets[p].hasClass is not a function

!planets[p].hasClass('satellite') && buildUniverse(planets[p], true);

RE: fonction trigo en javascript - Booster2ooo - 12-11-2012

t'as pas oublié

Code :
var hasClass = function (ele,cls) {

        return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));

    }