Fractal Interactive Art

Quels sont les autres types de fractales disponibles ?

Il existe de nombreux types de fractales avec des caractéristiques et des structures uniques. En voici quelques-uns que vous pourriez envisager d'ajouter à votre projet "Fractal Universe" :

Ensemble de Mandelbrot : C'est l'un des ensembles fractals les plus célèbres. Il est défini par l'ensemble des points pour lesquels la suite définie par zₙ₊₁ = zₙ² + c (où z et c sont des nombres complexes) ne diverge pas lorsqu'elle est itérée à partir de z=0.
Ensemble de Julia : Cet ensemble fractal est similaire à l'ensemble de Mandelbrot, mais il utilise une valeur constante pour c (nombre complexe) pour tous les points du plan. Chaque ensemble de Julia correspond à un point spécifique de l'ensemble de Mandelbrot.
Tapis de Sierpinski : C'est une version bidimensionnelle du Triangle de Sierpinski. Il s'agit d'un motif répétitif de carrés imbriqués formant un tapis fractal.
Flocon de Koch : C'est une courbe continue qui forme un motif similaire à un flocon de neige lorsqu'elle est répétée à l'infini. La courbe de Koch est construite en remplaçant répétitivement chaque segment de ligne par une séquence spécifique de segments de ligne plus petits.
Fractale de Dragon : C'est une courbe auto-similaire qui remplit une partie du plan en formant une structure en forme de dragon. Elle est construite en pliant répétitivement une bande de papier sur elle-même, puis en traçant la limite de la bande.
Plante de Barnsley : C'est une fractale qui ressemble à une fougère ou à une plante. Elle est générée en utilisant un ensemble d'équations de transformation affine définies par l'itération de fonctions contractantes (ou transformations de Barnsley).
Fractale de Menger Sponge : C'est une fractale tridimensionnelle obtenue en répétant un processus de subdivision sur un cube. Le cube est divisé en 27 cubes plus petits, et les cubes centraux de chaque face et le cube central du volume sont retirés, puis le processus est répété sur les cubes restants.

Ces fractales peuvent être implémentées en utilisant des algorithmes récursifs, des transformations géométriques et des techniques d'itération. Vous pouvez ajouter ces fractales à votre projet en créant des fonctions spécifiques pour chacune d'elles et en mettant à jour l'interface utilisateur pour permettre la sélection de différents types de fractales.

Propose le code js pour ajouter le flocon de koch

Voici le code JavaScript pour ajouter le Flocon de Koch à votre projet "Fractal Universe". Vous pouvez intégrer ce code à votre fichier sketch.js existant pour ajouter le Flocon de Koch en tant qu'option de fractale.

Tout d'abord, mettez à jour le menu déroulant HTML pour inclure le Flocon de Koch :

<select id="fractalType">
    <option value="tree">Arbre</option>
    <option value="sierpinski">Triangle de Sierpinski</option>
    <option value="koch">Flocon de Koch</option>
</select>

Ensuite, ajoutez le code suivant à votre fichier sketch.js pour dessiner le Flocon de Koch :

function drawKoch(iterations) {
  let length = min(width, height) * 0.4;
  let centerX = width / 2;
  let centerY = height / 2 - length / (2 * sqrt(3));

  // Déplace le repère au centre de la fenêtre
  translate(centerX, centerY);

  // Dessine les trois côtés du flocon de Koch
  for (let i = 0; i < 3; i++) {
    drawKochSegment(length, iterations);
    rotate(-2 * PI / 3);
  }
}

function drawKochSegment(len, iterations) {
  if (iterations <= 0) {
    line(0, 0, len, 0);
    translate(len, 0);
  } else {
    len /= 3;
    drawKochSegment(len, iterations - 1);

    rotate(PI / 3);
    drawKochSegment(len, iterations - 1);

    rotate(-2 * PI / 3);
    drawKochSegment(len, iterations - 1);

    rotate(PI / 3);
    drawKochSegment(len, iterations - 1);
  }
}

Mettez également à jour la fonction draw() pour inclure le Flocon de Koch en tant qu'option :

function draw() {
  background(51);
  let angle = radians(angleSlider.value());
  let color = colorPicker.value();
  stroke(color);

  if (fractalType.value() === 'tree') {
    drawTree(angle);
  } else if (fractalType.value() === 'sierpinski') {
    drawSierpinski(angle);
  } else if (fractalType.value() === 'koch') {
    drawKoch(4);
  }
}

Le code ci-dessus ajoute la fonction drawKoch(iterations) pour dessiner le Flocon de Koch en utilisant un nombre spécifié d'itérations. La fonction drawKochSegment(len, iterations) est une fonction récursive qui dessine un segment de la courbe de Koch en fonction de la longueur et du nombre d'itérations.

Vous pouvez personnaliser davantage ce code en ajoutant des options pour modifier le nombre d'itérations ou l'échelle du Flocon de Koch.

Comment augmenter la taille visible du flocon ?

Pour augmenter la taille visible du Flocon de Koch, vous pouvez ajuster la valeur de la variable length dans la fonction drawKoch(iterations). Actuellement, elle est définie comme 40% de la plus petite dimension de la fenêtre (min(width, height) * 0.4). Vous pouvez augmenter cette valeur pour rendre le Flocon de Koch plus grand. Par exemple, pour le rendre 60% de la plus petite dimension de la fenêtre, modifiez la valeur de length comme suit :

function drawKoch(iterations) {
  let length = min(width, height) * 0.6; // Changer la valeur ici pour ajuster la taille du flocon
  let centerX = width / 2;
  let centerY = height / 2 - length / (2 * sqrt(3));

  // Déplace le repère au centre de la fenêtre
  translate(centerX, centerY);

  // Dessine les trois côtés du flocon de Koch
  for (let i = 0; i < 3; i++) {
    drawKochSegment(length, iterations);
    rotate(-2 * PI / 3);
  }
}

En augmentant la valeur de length, le Flocon de Koch apparaîtra plus grand sur l'écran. Vous pouvez expérimenter avec différentes valeurs pour trouver la taille qui convient le mieux à votre projet.

Vous pouvez également ajouter un curseur pour contrôler la taille du Flocon de Koch. Ajoutez un curseur HTML dans le fichier HTML :

<label>Taille du flocon:</label>
<input type="range" min="0.1" max="1" value="0.6" step="0.1" id="sizeSlider" />

Mettez ensuite à jour le fichier sketch.js pour récupérer le curseur et utiliser sa valeur pour définir la taille du Flocon de Koch :

let sizeSlider;

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleSlider = select('#angleSlider');
  colorPicker = select('#colorPicker');
  fractalType = select('#fractalType');
  sizeSlider = select('#sizeSlider');
}

function draw() {
  // ... (autres parties de la fonction draw)

  if (fractalType.value() === 'koch') {
    drawKoch(4, sizeSlider.value());
  }
}

function drawKoch(iterations, scaleFactor) {
  let length = min(width, height) * scaleFactor;
  // ... (reste de la fonction drawKoch)
}

Cela permettra à l'utilisateur de contrôler la taille du Flocon de Koch en utilisant le curseur ajouté.

Où définir la position de la fractale ?

Pour déplacer la fractale du Flocon de Koch vers le bas, vous pouvez ajuster la valeur de centerY dans la fonction drawKoch(iterations, scaleFactor).

Actuellement, centerY est défini pour centrer le Flocon de Koch verticalement sur le canevas :

let centerY = height / 2 - length / (2 * sqrt(3));

Pour déplacer la fractale vers le bas, vous pouvez ajouter un décalage à la valeur de centerY. Par exemple, vous pouvez déplacer la fractale de 20% de la hauteur du canevas vers le bas en ajoutant height * 0.2 à la valeur de centerY :

function drawKoch(iterations, scaleFactor) {
  let length = min(width, height) * scaleFactor;
  let centerX = width / 2;
  let centerY = height / 2 - length / (2 * sqrt(3)) + height * 0.2; // Ajouter le décalage ici

  // Déplace le repère au centre de la fenêtre
  translate(centerX, centerY);

  // Dessine les trois côtés du flocon de Koch
  for (let i = 0; i < 3; i++) {
    drawKochSegment(length, iterations);
    rotate(-2 * PI / 3);
  }
}

En ajoutant un décalage à la position verticale de la fractale, vous pouvez contrôler la position de la fractale sur le canevas et la déplacer vers le bas. Vous pouvez ajuster la valeur height * 0.2 pour modifier l'emplacement de la fractale en fonction de vos préférences.