400dimGraphiques0g1dimGraphiquesdimGraphiques5g2dimGraphiquesdimGraphiquesg3dimGraphiquesdimGraphiques5g4dimGraphiquesdimGraphiquesg5dimGraphiquesdimGraphiquesg5texte0Les glissières modifient menu1créer une liste avecla zone graphique en haut à gauchela zone graphique en haut à droitela zone graphique en bas à gauchela zone graphique en bas à droitele canvas centralmenu1choix dans le menuligne0texte1Taille gliss10110.01ligne1texte2Nombre gliss20110.01ligne2texte3Autre gliss30110.01ligne3caseTransparencevraidimCanvasdimCanvascontenantdiv contenanttext-aligncentercontenantwidthcréer un texte avec2dimGraphiques×pxtexte0contenantmenu1contenantligne0contenanttexte1contenantgliss1contenantligne1contenanttexte2contenantgliss2contenantligne2contenanttexte3contenantgliss3contenantligne3contenantcasecontenantgliss1width320pxgliss2width320pxgliss3width320px0créer une liste aveccréer une liste avec10.50.5créer une liste avec0.310.51créer une liste avec10.50créer une liste avec100.9créer une liste avec0.511positionnerdefinirCouleursdefinirRemplissagechoix dans le menuFairefixerzoneGraphParamàfixerzoneGraphGlissàPour l'objetstylevaleurPour l'objetstylevaleurPour l'objetstylevaleurl'objetaura l'objetpour parentl'objetaura l'objetpour parentl'objetaura l'objetpour parentl'objetaura l'objetpour parentl'objetaura l'objetpour parentl'objetaura l'objetpour parentl'objetaura l'objetpour parentl'objetaura l'objetpour parentl'objetaura l'objetpour parentl'objetaura l'objetpour parentl'objetaura l'objetpour parentl'objetaura l'objetpour parentl'objetaura l'objetpour parentPour l'objetstylevaleurPour l'objetstylevaleurCréer élémenttypetexteCanevas : dim horizontaledimension verticaleCréer une case à cocheraffichantavec cocheInsérer un saut de ligneCréer une glissièreminimummaximumvaleur initialepasCréer un textede contenuInsérer un saut de ligneCréer une glissièreminimummaximumvaleur initialepasCréer un textede contenuInsérer un saut de ligneCréer une glissièreminimummaximumvaleur initialepasCréer un textede contenuInsérer un saut de lignesi l'état dechange faireCréer un menu localà partir de la listeCréer un textede contenuCacher l'objetCréer une zone graphiquede dimensionsparInsérer un saut de ligneCréer une zone graphiquede dimensionsparInsérerun espace depixelsCréer une zone graphiquede dimensionsparInsérer un saut de ligneCréer une zone graphiquede dimensionsparInsérerun espace depixelsCréer une zone graphiquede dimensionsparfixercompteuràfixerdimCanvasàfixerdimGraphiquesàpouractions initiales zoneGraphGlisszoneGraphParamcréer une liste avecgliss1valeur degliss2valeur degliss3valeur denzgpasser a la zone graphiqueavec :0g1dimnbalphaellipses tournantesavec :abcnzgpasser a la zone graphiqueavec :1g2echellenbalphaspirales polygonalesavec :abcnzgpasser a la zone graphiqueavec :2g3rayonniveauvariationAnglesierpinskiavec :abcnzgpasser a la zone graphiqueavec :3g4rayonnbfacteurpolygones tournantsavec :abcg5tracer graphique cachenzgpasser a la zone graphiqueavec :4canvasdimnbamplitudefigure canvasavec :abccompteur1+360reste de÷fixercompteuràChoisir la zone graphiqueDonner à l'élémentde la listela valeurpouractions en boucle dimGraphiquespourpasser a la zone graphiqueavec : n, zgzgnzoneGraphParamélément numérode la liste0tempélément numérode la liste1tempélément numérode la liste2tempélément numérode la listefixercàfixerbàfixeraàfixertempàChoisir la zone graphiquepour ellipses tournantes av...pour modifier avec : x, min...pour spirales polygonales a...pour definirCouleurs  fixer...pour sierpinski avec : rayo...pour definirRemplissage  fi...pour polygones tournants av...pour choix dans le menu  si...pour tracer sierpinski avec...pour positionner  Placer l'...pour poly avec : n, r, x, y...pour tracer graphique cache...pour figure canvas avec : d...


var canvas, dimGraphiques, dimCanvas, compteur, g1, g2, g3, g4, gliss1, gliss2, gliss3, a, b, c, x, min, max, u, dim, nb, amplitude, nbb, rayon, niveau, variationAngle, facteur, contenant, ligne1, ligne2, case2, ligne3, n, glissN, alpha, glissAlpha, echelle, glissEchelle, vitRot, glissVitRot, rot, y, i, couleurs, r, glissFrac, fract, delta, glissEch, a1, a2, a3, b1, b2, b3, x1, x3, y1, y3, x2, y2, nMax, sierpCouleurs, texte1, texte2, texte3, texte0, menu1, ligne0, zoneGraphGliss, zoneGraphParam, zg, j, temp, g5, zAngle;

/**
 * Fonction exécutée une fois, au départ
 */
function actions_initiales() {
  dimGraphiques = 400;
  dimCanvas = dimGraphiques;
  compteur = 0;
  g1=creerZoneGraphique(dimGraphiques,dimGraphiques);
  createSpan("").style("display","inline-block").style("width","5px");
  g2=creerZoneGraphique(dimGraphiques,dimGraphiques);
  createSpan("<br>");
  g3=creerZoneGraphique(dimGraphiques,dimGraphiques);
  createSpan("").style("display","inline-block").style("width","5px");
  g4=creerZoneGraphique(dimGraphiques,dimGraphiques);
  createSpan("<br>");
  g5=creerZoneGraphique(dimGraphiques,dimGraphiques);
  cacherObjetPrudent("g5",g5);
  texte0=createSpan('Les glissières modifient ');
  menu1=creerMenuLocal(['la zone graphique en haut à gauche', 'la zone graphique en haut à droite', 'la zone graphique en bas à gauche', 'la zone graphique en bas à droite', 'le canvas central']);
  siChangementPrudent("menu1",menu1,"choix_dans_le_menu",choix_dans_le_menu);
  ligne0=createSpan("<br>");
  texte1=createSpan('Taille ');
  gliss1=createSlider(0,1,1,0.01);
  ligne1=createSpan("<br>");
  texte2=createSpan('Nombre ');
  gliss2=createSlider(0,1,1,0.01);
  ligne2=createSpan("<br>");
  texte3=createSpan('Autre ');
  gliss3=createSlider(0,1,1,0.01);
  ligne3=createSpan("<br>");
  case2=createCheckbox('Transparence',true);
  canevas=creerCanvas(dimCanvas,dimCanvas); canvas=canevas;
  contenant=createElement('div','');
  stylerObjetPrudent("contenant",contenant,'text-align','center');
  stylerObjetPrudent("contenant",contenant,'width',(String(2 * dimGraphiques) + String('px')));
  assignerParentPrudent("texte0",texte0,"contenant",contenant);
  assignerParentPrudent("menu1",menu1,"contenant",contenant);
  assignerParentPrudent("ligne0",ligne0,"contenant",contenant);
  assignerParentPrudent("texte1",texte1,"contenant",contenant);
  assignerParentPrudent("gliss1",gliss1,"contenant",contenant);
  assignerParentPrudent("ligne1",ligne1,"contenant",contenant);
  assignerParentPrudent("texte2",texte2,"contenant",contenant);
  assignerParentPrudent("gliss2",gliss2,"contenant",contenant);
  assignerParentPrudent("ligne2",ligne2,"contenant",contenant);
  assignerParentPrudent("texte3",texte3,"contenant",contenant);
  assignerParentPrudent("gliss3",gliss3,"contenant",contenant);
  assignerParentPrudent("ligne3",ligne3,"contenant",contenant);
  assignerParentPrudent("case2",case2,"contenant",contenant);
  stylerObjetPrudent("gliss1",gliss1,'width','320px');
  stylerObjetPrudent("gliss2",gliss2,'width','320px');
  stylerObjetPrudent("gliss3",gliss3,'width','320px');
  zoneGraphGliss = 0;
  zoneGraphParam = [[1, 0.5, 0.5], [0.3, 1, 0.51], [1, 0.5, 0], [1, 0, 0.9], [0.5, 1, 1]];
  positionner();
  definirCouleurs();
  definirRemplissage();
  choix_dans_le_menu();
}

/**
 * Fonction exécutée périodiquement, de façon répétée
 */
function actions_en_boucle() {
  zoneGraphParam[zoneGraphGliss] = [valeurPrudent("gliss1",gliss1), valeurPrudent("gliss2",gliss2), valeurPrudent("gliss3",gliss3)];
  passer_a_la_zone_graphique(0, g1);
  ellipses_tournantes(a, b, c);
  passer_a_la_zone_graphique(1, g2);
  spirales_polygonales(a, b, c);
  passer_a_la_zone_graphique(2, g3);
  sierpinski(a, b, c);
  passer_a_la_zone_graphique(3, g4);
  polygones_tournants(a, b, c);
  choisirZoneGraphique(g5);
  tracer_graphique_cache();
  passer_a_la_zone_graphique(4, canvas);
  figure_canvas(a, b, c);
  compteur = (compteur + 1) % 360;
}

/**
 * Décrire cette fonction…
 */
function passer_a_la_zone_graphique(n, zg) {
  choisirZoneGraphique(zg);
  temp = zoneGraphParam[n];
  a = temp[0];
  b = temp[1];
  c = temp[2];
}

/**
 * Décrire cette fonction…
 */
function ellipses_tournantes(dim, nb, alpha) {
  couleurFondC((color(255,200,200,255)));
  dim = modifier(dim, 1, dimGraphiques / 2 - 5);
  nb = Math.round(modifier(nb, 1, 20));
  alpha = modifier(alpha, 0, dim / 25);
  strokeWeight_(0);
  fill_((color(255,0,0,255)));
  leGraphicsActif.resetMatrix();
  leGraphicsActif.translate((leGraphicsActif.width / 2),(leGraphicsActif.height / 2));
  leGraphicsActif.rotate(radians((2 * (compteur % 360))));
  for (var count = 0; count < nb; count++) {
    ellipse_(0,0,dim,alpha);
    leGraphicsActif.rotate(radians((180 / nb)));
  }
}

/**
 * Décrire cette fonction…
 */
function modifier(x, min, max) {
  return min + x * (max - min);
}

/**
 * Décrire cette fonction…
 */
function spirales_polygonales(echelle, nb, alpha) {
  couleurFondC((color(200,255,200,255)));
  stroke_((color(0,50,0,255)));
  echelle = modifier(echelle, 0.01, 10);
  nb = Math.round(modifier(nb, 1, 1000));
  alpha = modifier(alpha, 30, 150);
  sautePos((leGraphicsActif.width / 2),(leGraphicsActif.height / 2));
  fixeCap((-1 * compteur));
  x = posXsouris() - 0.5 * dimCanvas;
  y = posYsouris() + (leGraphicsActif.height - 0.5 * dimCanvas);
  if (mouseIsPressed && x > 0 && x < leGraphicsActif.width && y > 0 && y < leGraphicsActif.height) {
    sautePos(x,y);
  }
  for (i = 1; i <= nb; i += abs(1)) {
    avance((echelle * i));
    droite(alpha);
  }
}

function mathRandomInt(a, b) {
  if (a > b) {
    // Swap a and b to ensure a is smaller.
    var c = a;
    a = b;
    b = c;
  }
  return Math.floor(Math.random() * (b - a + 1) + a);
}

/**
 * Décrire cette fonction…
 */
function definirCouleurs() {
  fract = 0;
  couleurs = [];
  for (i = 1; i <= 1000; i += abs(1)) {
    couleurs[i] = (color((mathRandomInt(0, 255)),(mathRandomInt(0, 255)),(mathRandomInt(0, 255)),255));
  }
}

/**
 * Décrire cette fonction…
 */
function sierpinski(rayon, niveau, variationAngle) {
  couleurFondC((color(200,200,255,255)));
  rayon = modifier(rayon, 0, dimGraphiques / 2);
  niveau = Math.round(modifier(niveau, 0, 6));
  variationAngle = modifier(variationAngle, 0, 360);
  nMax = niveau + 1;
  leGraphicsActif.resetMatrix();
  leGraphicsActif.translate((dimGraphiques / 2),(dimGraphiques / 2));
  x1 = rayon * Math.cos((120 + compteur) / 180 * Math.PI);
  y1 = rayon * Math.sin((120 + compteur) / 180 * Math.PI);
  x2 = rayon * Math.cos((240 + compteur) / 180 * Math.PI);
  y2 = rayon * Math.sin((240 + compteur) / 180 * Math.PI);
  x3 = rayon * Math.cos((variationAngle + compteur) / 180 * Math.PI);
  y3 = rayon * Math.sin((variationAngle + compteur) / 180 * Math.PI);
  noFill_();
  cercle_(0,0,rayon);
  triangle_(x1,y1,x2,y2,x3,y3);
  tracer_sierpinski(niveau, x1, y1, x2, y2, x3, y3);
}

/**
 * Décrire cette fonction…
 */
function definirRemplissage() {
  sierpCouleurs = [color(45,128,255,255), color(255,0,0,255), color(0,255,0,255), color(0,0,255,255), color(0,255,255,255), color(255,0,255,255), color(255,255,0,255), color(255,128,45,255), color(0,0,0,255)];
}

/**
 * Décrire cette fonction…
 */
function polygones_tournants(rayon, nb, facteur) {
  couleurFondC((color(255,255,200,255)));
  rayon = modifier(rayon, 0, dimGraphiques / 2);
  nb = Math.round(modifier(nb, 3, 10));
  echelle = modifier(facteur, 0.5, 0.99);
  fract = modifier(compteur, 0, 0.99);
  alpha = 0;
  delta = fract * (360 / nb);
  for (i = 1; i <= 500; i += abs(1)) {
    fill_((couleurs[i]));
    poly(nb, rayon, dimGraphiques / 2, dimGraphiques / 2, alpha);
    rayon = rayon * echelle;
    alpha = alpha + delta;
  }
}

/**
 * Décrire cette fonction…
 */
function choix_dans_le_menu() {
  if (valeurPrudent("menu1",menu1) == 'la zone graphique en haut à gauche') {
    zoneGraphGliss = 0;
  }
  if (valeurPrudent("menu1",menu1) == 'la zone graphique en haut à droite') {
    zoneGraphGliss = 1;
  }
  if (valeurPrudent("menu1",menu1) == 'la zone graphique en bas à gauche') {
    zoneGraphGliss = 2;
  }
  if (valeurPrudent("menu1",menu1) == 'la zone graphique en bas à droite') {
    zoneGraphGliss = 3;
  }
  if (valeurPrudent("menu1",menu1) == 'le canvas central') {
    zoneGraphGliss = 4;
  }
  temp = zoneGraphParam[zoneGraphGliss];
  a = temp[0];
  b = temp[1];
  c = temp[2];
  fixeValeurPrudent("gliss1",gliss1,a);
  fixeValeurPrudent("gliss2",gliss2,b);
  fixeValeurPrudent("gliss3",gliss3,c);
  fixeContenuPrudent("texte3",texte3,(['Épaisseur', 'Angle', 'Position', 'Variation', 'Amplitude'][zoneGraphGliss]));
}

/**
 * Trace le triangle de Sierpinski
 */
function tracer_sierpinski(n, x1, y1, x2, y2, x3, y3) {
  var a1;
  var a2;
  var a3;
  var b1;
  var b2;
  var b3;
  a1 = (x1 + x3) / 2;
  b1 = (y1 + y3) / 2;
  a2 = (x2 + x3) / 2;
  b2 = (y2 + y3) / 2;
  a3 = (x1 + x2) / 2;
  b3 = (y1 + y2) / 2;
  if (n > 0) {
    fill_((sierpCouleurs[((nMax - n) - 1)]));
    triangle_(a1,b1,a2,b2,a3,b3);
    tracer_sierpinski(n - 1, a1, b1, a2, b2, x3, y3);
    tracer_sierpinski(n - 1, x1, y1, a3, b3, a1, b1);
    tracer_sierpinski(n - 1, a3, b3, x2, y2, a2, b2);
  }
}

/**
 * Décrire cette fonction…
 */
function positionner() {
  positionnerObjetPrudent("g1",g1,0,0);
  positionnerObjetPrudent("g2",g2,dimGraphiques,0);
  positionnerObjetPrudent("g3",g3,0,dimGraphiques);
  positionnerObjetPrudent("g4",g4,dimGraphiques,dimGraphiques);
  positionnerObjetPrudent("contenant",contenant,0,(2 * dimGraphiques + 20));
}

/**
 * Décrire cette fonction…
 */
function poly(n, r, x, y, alpha) {
  strokeWeight_(0);
  debutPoly();
  var repeat_end = n + 1;
  for (var count2 = 0; count2 < repeat_end; count2++) {
    sommet((x + r * Math.cos(alpha / 180 * Math.PI)),(y + r * Math.sin(alpha / 180 * Math.PI)));
    alpha = alpha + 360 / n;
  }
  finPoly();
}

/**
 * Décrire cette fonction…
 */
function tracer_graphique_cache() {
  zAngle = 119;
  couleurFondC((color(0,255,255,255)));
  sautePos((leGraphicsActif.width / 2),(leGraphicsActif.height / 2));
  fixeCap((-3 * compteur));
  for (i = 1; i <= 1000; i += abs(1)) {
    avance((1.9 * i));
    droite(zAngle);
    zAngle = zAngle + 0.005;
  }
}

/**
 * Décrire cette fonction…
 */
function figure_canvas(dim, nb, amplitude) {
  dimCanvas = Math.round(modifier(dim, 0, 2 * dimGraphiques));
  nb = Math.round(modifier(nb, 3, 12));
  amplitude = Math.round(modifier(amplitude, 0, 180));
  if (etatCasePrudent("case2",case2)) {
    zoneGraphiqueTransparente();
  } else {
    couleurFondC((color(266,266,266,255)));
    // 'On peut traiter une zone graphique comme un objet image'
    if (false) {image(g5,0,0)} else {image(g5,0,0,width,height)}
  }
  strokeWeight_(1);
  stroke_((color(0,0,0,255)));
  fill_((color(235,37,96,255)));
  canevas=creerCanvas(dimCanvas,dimCanvas); canvas=canevas;
  leGraphicsActif.textSize((Math.round(dimCanvas / 10)));
  positionnerObjetPrudent("canvas",canvas,(dimGraphiques - dimCanvas / 2),(dimGraphiques - dimCanvas / 2));
  leGraphicsActif.resetMatrix();
  leGraphicsActif.translate((leGraphicsActif.width / 2),(leGraphicsActif.height / 2));
  leGraphicsActif.rotate(radians((amplitude * Math.sin(compteur / 180 * Math.PI))));
  for (var count3 = 0; count3 < nb; count3++) {
    leGraphicsActif.text('p5Visuel',(Math.round(dimCanvas / 10)),0);
    leGraphicsActif.rotate(radians((360 / nb)));
  }
}


//dimGraphiques;
Exécuter