Générateur de Fractales


Accueil > Projets > Générateur de Fractales

Par Galichet N., Gouttenoire M. en juin 2019

Présentation du projet

Ce projet à été réalisé par Mathieu GOUTENNOIRE et Nils GALICHET, élève de Tale S en spé ISN (Informatique et Sciences du Numérique) au lycée Louis Pasteur d’Avignon au cours de l’année scolaire 2018 - 2019.

Apercçu du site internet

Le projet Fractal Generator consiste en un site internet capable de générer via
divers algorithmes des images de fractales enregistrables sur l’ordinateur du client. Il
offre de plus la possibilité de sauvegarder dans une galerie temporaire la fractale
générée par le client.

Le site est accessible par le maximum de personnes à travers le
monde, c’est pourquoi il a été décidé d’écrire les pages du site en Anglais afin de viser un maximum de clients potentiels.

Afin de rendre accessible notre site à un maximum de personnes, tous les textes
ont étés écrits en Anglais, seuls des commentaires dans les fichiers de code restent en Français, car ils ne sont tout simplement pas destinés à être lus par les utilisateurs finaux.

Résumé du projet

Le site internet se compose de 3 pages au total :

  • L’accueil
  • Fonctionnement du générateur
  • Le générateur
  1. /* Très bref extait de la feuille de style  */
  2. html, body {
  3.                 background-color: #1d1f23;
  4.         height: 100%;
  5.         margin: 0px;
  6.         padding: 0px;
  7.         overflow: auto;
  8. }
  9.  
  10.  
  11. .title_website {
  12.         text-align: center;
  13.         border-bottom: silver 4px solid;
  14.         margin-bottom: 0px;
  15.         padding: 0px;
  16.         background-color: #1d1f23;
  17. }
  18.  
  19. nav {
  20.         padding: 5px 0px 5px 0px;
  21.         background-color: black;
  22.         color: white;
  23. }

Télécharger

La feuille de style intégrale est consultable par toute personne capable de la récupérer ...

Les pages sont accessibles via un menu :

Le menu de navigation

  1. /* la fonction php qui gère la barre de navigation */
  2. function NavBar()
  3. {
  4.         echo '<nav><div class="container"><ul class="nav nav-pills">';
  5.         foreach($GLOBALS['MENU'] as $item) {
  6.                 echo '<a href="'.$item[1].'"><li class="nav-item btn btn-dark buttonnav';
  7.                 if (strcasecmp($_SERVER['SCRIPT_NAME'], $item[2]) == 0) {
  8.                         echo ' active';
  9.                 }
  10.                 echo '">'.$item[0].'</li></a>';
  11.         }
  12.         echo '</ul></div></nav>';
  13.         return;
  14. }

Télécharger

L’intégralité du code php n’est pas proposé au téléchargement.

Le site adopte une certaine architecture modulaire. En effet, les en-têtes des
pages et une partie du corps sont générées via une série de fonctions PHP qui sont
incluses dans un fichier nommé “fonctions.php”. Ces fonctions permettent, par
exemple, de charger automatiquement les fichiers css et javascript en les listant dans le dossier, et de les inclure via une balise html. Cette modularité est appréciable lorsqu’il y a beaucoup de fichiers ou de fonctions.

Le générateur possède plusieurs algorithmes de générations, 5 en tout :

Les 5 algorithmes de générations

  1. Circle based N°0
  2. Circle based N°1
  3. Barnsley Fern
  4. Mandelbrot sin(z/c)
  5. Mandelbrot z^2+c

Chacun de ces algorithmes génère un type de fractale précis.

  1. // la fonction javascript qui génère une fractale de Mandelbrot sin(z/c)
  2. function mandelbrotSinZC(iter) {
  3.   let ratio = width / height;
  4.   let zx, zy, cx, cy, n, a, b;
  5.  
  6.   let colorFROM = color(ForegroundColorFROM.r, ForegroundColorFROM.g, ForegroundColorFROM.b);
  7.   let colorTO = color(ForegroundColorTO.r, ForegroundColorTO.g, ForegroundColorTO.b);
  8.   let backgroundColor = color(BackgroundColor.r, BackgroundColor.g, BackgroundColor.b);
  9.  
  10.   for (let x = 0; x < width; x++) {
  11.     for (let y = 0; y < height; y++) {
  12.  
  13.       zx = map(x, 0, width, -1.1 * ratio, 1.1 * ratio);
  14.       zy = map(y, 0, height, -1.1, 1.1);
  15.  
  16.       cx = zx;
  17.       cy = zy;
  18.  
  19.       n = 0;
  20.  
  21.       while (n < iter) {
  22.         a = (zx * cx + zy * cy) / (cx * cx + cy * cy);
  23.         b = (zy * cx - zx * cy) / (cx * cx + cy * cy);
  24.         zx = Math.sin(a) * Math.cosh(b);
  25.         zy = Math.cos(a) * Math.sinh(b);
  26.         if (zx * zx + zy * zy > 16) break;
  27.         n ++;
  28.       }
  29.  
  30.       if (n == iter) {
  31.         col = backgroundColor;
  32.       } else {
  33.         col = lerpColor(colorTO, colorFROM, sqrt(n / iter));
  34.       }
  35.  
  36.       stroke(col);
  37.       point(x, y);
  38.     }
  39.   }
  40. }

Télécharger

Les scripts javascript sont consultables par toute personne capable de les récupérer depuis le site public ...

On remarque cependant des similitudes lors de la génération de fractales entre Circle Based 0 et 1, car la seule différence entre ces deux algorithmes est que la condition pour générer un nouveau pixel dans l’image de la fractale diffère.

Pour tous les algorithmes, il y a la possibilité de

  • Choisir le nombre d’itérations de l’algorithme
  • Choisir les couleurs du dégradé de la fractale
  • Choisir la couleur de fond
  • Choisir la résolution, le nom et le format de l’image à enregistrer

Seuls les algorithmes Circle Based 0 et 1 possèdent des options plus spécifiques
telles que changer le nombre de points ou bien appliquer un décalage sur le point
précédemment choisi de manière aléatoire.

Au chargement de la page de génération, les paramètres par défaut ont été
automatiquement ajustés afin d’obtenir une fractale triangulaire (il s’agit du triangle
de Sierpiński).

Triangle de Sierpiński généré à l'aide du site

Nous pouvons noter certains points essentiels à nos yeux en cette fin de projet :

  • HTML/CSS structuré et satisfaisant
  • Générateur fonctionnel, 5 algorithmes en tout
  • Enregistrement des images de fractales du côté client opérationnel
  • Ecriture et lecture des images sur le serveur pleinement fonctionnelles
  • Planning respecté (pas de retard)
  • Site rapide et accessible, notamment du côté serveur avec le PHP

Barnsley Fern généré à l'aide du site

Organisation des tâches & difficultés rencontrées

Nous ne nous sommes pas particulièrement dédiés à une tâche bien spécifique,
cependant nous pouvons considérer que lors de l’élaboration du projet, Nils a plus
travaillé sur la partie communication client/serveur, sur la structure et la mise en page du site, et Mathieu sur la partie algorithme du générateur ainsi que sur la structure de la page du générateur.

Mandelbrot sin(z/c) généré à l'aide du site

Notre répartition des tâches s’explique principalement par le fait que nous avons
des domaines de compétences différents et donc cette dernière s’est faite très
naturellement.

Tout au long du projet, nous avons rencontré diverses difficultés :

  • Au niveau de l’affichage des fractales et des générations
  • Des sauvegardes locales (sur le pc du client) mais aussi au niveau du serveur
    des images générées, notamment un problème avec le serveur web
  • Des problèmes de mise en forme avec le css.
  • Des problèmes de performances (algorithmes trop lents).

Mandelbrot z^2+c généré à l'aide du site

Néanmoins chacun de ces problèmes a été résolu avec plus ou moins de facilité

Matériel nécessaires à la réalisation du projet

Afin de réaliser notre projet, nous avons utilisé les outils suivants :

  • Ordinateurs connectés à internet,
  • Outils d’édition de fichiers textes tels que NotePad++,
  • Outils de transfert de fichiers en SSH,
  • Un ordinateur serveur disposant d’une connexion internet et d’un serveur web.

La plus part des images ont été soit générées grâce à notre site soit par nous même
à l’aide de différents logiciels, il n’y a donc aucune image susceptible d’avoir des
droits d’auteurs.

Liste des fichiers

Voici la liste des fichiers utilisés dans notre projet (hors librairies non codées par nos
soins). Ce tableau décrit le rôle de ces fichiers et indique leur nombre de lignes.

Liste des fichiers
Chemin relatif du fichier Rôle du fichier Nombre de lignes
./DisplayFractals.php Page du générateur 190
./HowItWorks.php Page d’explication de
l’algorithme
56
./SendImg.php Gère la réception des images sur le serveur 84
./Index.php Page d’accueil 110
libs/form.js Gère les actions de l’utilisateur sur la page du générateur 281
libs/functions.php Code des fonctions permettant la modularité du site 138
libs/generator.js Fonctions génératrices des fractales 194
libs/sketch.js Fichier javascript dédiée à la librairie p5, permettant la mise en place du canvas où s’afficheront les previews des fractales 179
libs/style.css Fiche de style 157

Nombre total de lignes : 1389

L’intégralité du code n’est ni présenté, ni proposé à la consultation, seuls quelques cours extraits ont été proposés dans ce compte rendu.

Conclusion

En guise de conclusion nous souhaitons dire que ce projet a été pour nous une expérience très positive, le travail en équipe ainsi que le respect d’un planning ont été des défis pour nous.

Nos avis ont été parfois divergents, mais des solutions aux problèmes que nous avons rencontrés ont toujours été trouvées après concertation.

Nous avons deux manières de programmer très différentes et le fait de devoir rendre notre code lisible a été quelque chose de très important auquel nous n’étions pas forcément habitués.

Nous espérons que ce projet sera non seulement utile, mais aussi une source d’inspiration pour les prochains élèves qui choisiront la spécialité NSI.

Tester le générateur de fractales en ligne

Lien alternatif pour tester ce générateur (Bientôt disponible)