Fractal Interactive Art
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 :
- Génération de fractales en temps réel avec l'utilisation de la bibliothèque JavaScript p5.js (https://p5js.org/).
- Utilisation de CSS pour créer des animations et des transitions fluides.
- 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.
- Possibilité de sauvegarder et de partager des visualisations personnalisées via des liens uniques.
- 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.
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().
Propose une version plus complexe
Voici une version plus complexe de "Fractal Universe" qui inclut des options pour personnaliser la couleur et le type de fractale. Le code générera des fractales de type "Arbre" et "Triangle de Sierpinski".
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;
font-family: Arial, sans-serif;
}
canvas {
display: block;
}
.controls {
position: absolute;
top: 10px;
left: 10px;
color: white;
}
label {
display: block;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="controls">
<label>Fractal Type:</label>
<select id="fractalType">
<option value="tree">Arbre</option>
<option value="sierpinski">Triangle de Sierpinski</option>
</select>
<label>Angle:</label>
<input type="range" min="0" max="180" value="45" step="1" id="angleSlider" />
<label>Color:</label>
<input type="color" id="colorPicker" value="#ffffff" />
</div>
<script src="sketch.js"></script>
</body>
</html>
JavaScript (sketch.js) :
let angleSlider;
let colorPicker;
let fractalType;
function setup() {
createCanvas(windowWidth, windowHeight);
angleSlider = select('#angleSlider');
colorPicker = select('#colorPicker');
fractalType = select('#fractalType');
}
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);
}
}
function drawTree(angle) {
translate(width / 2, height);
branch(150, angle);
}
function branch(len, angle) {
line(0, 0, 0, -len);
translate(0, -len);
if (len > 4) {
push();
rotate(angle);
branch(len * 0.67, angle);
pop();
push();
rotate(-angle);
branch(len * 0.67, angle);
pop();
}
}
function drawSierpinski(angle) {
let s = min(width, height) * 0.8;
let h = s * sqrt(3) / 2;
translate((width - s) / 2, (height - h) / 2);
sierpinski(0, 0, s, angle);
}
function sierpinski(x, y, size, angle) {
if (size < 5) {
triangle(x, y, x + size / 2, y + size * sqrt(3) / 2, x + size, y);
} else {
let newSize = size / 2;
sierpinski(x, y, newSize, angle);
sierpinski(x + newSize, y, newSize, angle);
sierpinski(x + newSize / 2, y + newSize * sqrt(3) / 2, newSize, angle);
}
}