// Arret a 7:05

​

// Rayon de la sphere

let r = 200;

// densite de la sphere 

let density ;

let densitySlider ;

// On va creer des slider pour jouer sur le theta

let thetaMax, phiMax ;

let thetaMaxSlider, phiMaxSlider;

​

​

​

function setup() {

  createCanvas(700, 700, WEBGL); //3D mode

  angleMode(DEGREES); 

  colorMode(HSB); //Hue, Saturation, Brightness

  // bg = loadImage('https://i.ytimg.com/vi/sT8JIn7Q_Fo/maxresdefault.jpg');

  stroke(199, 88, 88);

  strokeWeight(3);

  noFill();

  // e1 signature

  // Creer Slider pour jouer sur Phi et Theta

  thetaMax = createDiv();

  thetaMaxSlider = createSlider(0, 360, 360, 10);

  phiMax = createDiv();

  phiMaxSlider = createSlider(0, 180, 180, 10);

  // Ici on cree un controle de type Slider, qui permettra de jouer sur la densite de la forme

  density = createDiv();

  densitySlider = createSlider(3, 62, 24, 1); // min, max, defaut, stepSize

}

​

function draw() {

  background(230, 50, 15);

  // background(bg)

  //Permet de controler la forme avec la souris + parametres de sensibilite

  orbitControl(4,4);

  // De base, la forme, en ligne a les poles alignes a l'horizontal, Il faut la faire tourner pour la mettre a la verticale

  rotateY(90);

  rotateZ(65);

  //Adapte la definition a la taille de la densite voulue

  // e1 signature

  // On ne fait pas des spheres completes, on permet de jouer sur l'angle

  for(let phi = 0 ; phi < phiMaxSlider.value() ; phi += 180/densitySlider.value()){

    // Etape 1 : On peut mettre POINTS dans beginshape pour avoir des pointilles

    beginShape();

    // Etape 0 : Creer une serie de point positionnee par rapport a un referentiel radial

    // e1 signature

    // On ne fait pas des spheres completes, on permet de jouer sur l'angle

    for (let theta = 0 ; theta < thetaMaxSlider.value() ; theta += 360/densitySlider.value()){

      let x = r * cos(phi) ;

      let y = r * sin(phi) * sin(theta);

      let z = r * sin(phi) * cos(theta); 

      // Etape 0 : point(x,y,z);

      // Etape 1 on met Vertex () et on ajouter les beginShape+endshape pour definit l'objet graphique

      vertex(x, y , z);

    }

    // Etape 2 : On met CLOSE pour avoir des lignes fermees

    endShape(CLOSE);

  } 

  // e1 signature

  // afficher les slider d'angle

  thetaMax.html("Theta max value " + thetaMaxSlider.value());

  phiMax.html("Phi max value " + phiMaxSlider.value());

  // Afficher le density slider

  let displayDensity = int(map(densitySlider.value(),3, 62, 1, 60));

  density.html("Densite : "+displayDensity);

}