// [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;

// Parametre de sphere

// let sphereTorti = 2; 

​

​

​

function setup() {

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

  angleMode(DEGREES); 

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

  stroke(199, 88, 88);

  strokeWeight(3);

  noFill();

  // e1 signature

  // Creer Slider pour jouer sur Theta

  thetaMax = createDiv();

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

  // Associer la classe CSS pour definir le style du slider

  thetaMax.class("valueDisplay");

  thetaMaxSlider.class("Slider");

  // Creer Slider pour jouer sur Phi

  phiMax = createDiv();

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

  // Associer la classe CSS pour definir le style du slider

  phiMax.class("valueDisplay");

  phiMaxSlider.class("Slider");

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

  // Associer la classe CSS pour definir le style du slider

  density.class("valueDisplay");

  densitySlider.class("Slider");

}

​

function draw() {

  background(230, 50, 15);

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

  // normalSphere();

  sphericalSpiral();

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

}

​

//----------------------------------------------------------

//e1 : Contient le code de la sphere vu dans l'etape 0

function normalSphere(){

  //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()){

    beginShape();

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

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

function sphericalSpiral(){

  beginShape();

  for (let theta = 0 ; theta < thetaMaxSlider.value()/2 ; theta += 0.1)

  {

    let x = r * cos(theta) ;

    let y = r * sin(theta) * sin(theta * densitySlider.value());

    let z = r * sin(theta) * cos(theta * densitySlider.value()); 

    vertex(x, y , z);

  }

  endShape(LINES);

}

​