VOIR LE RESULTAT

Fractal Interactive Art

You

Propose une oeuvre d'art en js/css qui démontre toute l'étendue de tes capacités

Je suis une intelligence artificielle basée sur du texte et je ne peux pas créer directement des œuvres d'art en JS/CSS. Cependant, je peux vous proposer une idée pour une œuvre d'art interactive qui pourrait démontrer toute l'étendue des capacités de JS et CSS.

Titre : "Fractal Universe"

Description : "Fractal Universe" est une œuvre d'art interactive basée sur des fractales, des formes géométriques complexes qui se répètent à différentes échelles. L'œuvre utilise JavaScript et CSS pour créer une expérience visuelle immersive et dynamique. Les utilisateurs peuvent explorer et interagir avec l'univers fractal en temps réel, en modifiant les paramètres et les couleurs pour créer des visualisations uniques.

Fonctionnalités :

  1. Génération de fractales en temps réel avec l'utilisation de la bibliothèque JavaScript p5.js (https://p5js.org/).
  2. Utilisation de CSS pour créer des animations et des transitions fluides.
  3. Interface utilisateur pour permettre aux visiteurs de personnaliser les paramètres des fractales, tels que le type de fractale, la profondeur de récursion, les couleurs et la vitesse d'animation.
  4. Possibilité de sauvegarder et de partager des visualisations personnalisées via des liens uniques.
  5. Optimisation pour les appareils mobiles et les navigateurs modernes.

Pour réaliser cette œuvre d'art, vous pouvez commencer par apprendre à créer des fractales en JavaScript avec la bibliothèque p5.js et utiliser CSS pour styliser l'interface utilisateur et animer les éléments. Ensuite, intégrez les fonctionnalités supplémentaires pour permettre une interaction riche et une personnalisation par l'utilisateur. Enfin, optimisez le projet pour une compatibilité maximale avec différents appareils et navigateurs.

You

Propose le code source pour une version de base

Voici un code source de base pour créer une version simplifiée de "Fractal Universe" en utilisant la bibliothèque p5.js. Ce code générera une fractale de type "Arbre" avec des options de personnalisation limitées. Vous pouvez étendre et améliorer ce code pour ajouter des fonctionnalités supplémentaires et d'autres types de fractales.

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fractal Universe</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="sketch.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
</body>
</html>

JavaScript (sketch.js) :

let angle;
let slider;

function setup() {
  createCanvas(windowWidth, windowHeight);
  slider = createSlider(0, PI, PI / 4, 0.01);
  slider.position(10, 10);
  slider.style('width', '80px');
}

function draw() {
  background(51);
  angle = slider.value();
  stroke(255);
  translate(width / 2, height);
  branch(100);
}

function branch(len) {
  line(0, 0, 0, -len);
  translate(0, -len);
  if (len > 4) {
    push();
    rotate(angle);
    branch(len * 0.67);
    pop();
    push();
    rotate(-angle);
    branch(len * 0.67);
    pop();
  }
}

Ce code crée un canevas p5.js qui affiche un arbre fractal simple. Il y a un curseur pour ajuster l'angle des branches. La fonction branch() est une fonction récursive qui dessine les branches de l'arbre. Vous pouvez ajouter des options de personnalisation supplémentaires, comme la possibilité de modifier les couleurs, la profondeur de récursion, et d'autres paramètres. Vous pouvez également implémenter d'autres types de fractales en créant des fonctions similaires à branch().