Affichage hiérarchique

InstinctHack · (Modification du message : 19-11-2012, 18h32 par InstinctHack.)

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:

***supersnail*** · 04-11-2012, 13h22

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]

supersnail · (Modification du message : 08-12-2012, 17h13 par supersnail.)

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>

supersnail · (Modification du message : 04-11-2012, 14h42 par supersnail.)

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

supersnail · (Modification du message : 08-12-2012, 17h13 par supersnail.)

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

Booster2ooo · 05-11-2012, 15h56

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/

Booster2ooo · (Modification du message : 05-11-2012, 18h51 par Booster2ooo.)

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

spgb · 06-11-2012, 10h46

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

InstinctHack · (Modification du message : 06-11-2012, 12h02 par InstinctHack.)

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 :/

Booster2ooo · (Modification du message : 07-11-2012, 12h53 par Booster2ooo.)

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

InstinctHack · 10-11-2012, 12h26

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);

Booster2ooo · 12-11-2012, 15h28

t'as pas oublié

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

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

    }

?

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	Apprendre JavaScript en s'amusant !	Booster2ooo	6	344	25-11-2013, 23h08 Dernier message: saywoot
	[JavaScript] Fonction Array	Shirobi	18	811	29-10-2012, 22h36 Dernier message: InstinctHack
	[Html/Javascript] Comment cachées les informations que contienne une variable ?	WizOut	22	1,024	21-10-2012, 14h15 Dernier message: sakiir
	[JavaScript] parcours du DOM	InstinctHack	1	137	07-08-2012, 11h27 Dernier message: Booster2ooo
	[JavaScript] faire de l'Ajax facilement	InstinctHack	0	109	02-03-2012, 01h39 Dernier message: InstinctHack
	[Javascript] .toString()	mercurial17	5	292	30-12-2011, 00h21 Dernier message: Ark

Identifiant Mot de passe
S’enregistrer \| Mot de passe oublié ? Se rappeler