Creating fun fractals with chat GPT
3 min readOct 5, 2023
Mandelbrot
Create an html page and add a javascript file that generates the mandelbrot fractal. Use a lot of colors.
document.addEventListener('DOMContentLoaded', function() {
const canvas = document.getElementById('mandelbrotCanvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const maxIterations = 1000;
function mandelbrot(x, y) {
let zx = 0;
let zy = 0;
for (let i = 0; i < maxIterations; i++) {
let xtemp = zx * zx - zy * zy + x;
zy = 2 * zx * zy + y;
zx = xtemp;
if (zx * zx + zy * zy > 4) {
return i;
}
}
return maxIterations;
}
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
const px = (x - width / 2) / (width / 4);
const py = (y - height / 2) / (height / 4);
const iterations = mandelbrot(px, py);
const color = `hsl(${iterations % 360}, 100%, 50%)`;
ctx.fillStyle = color;
ctx.fillRect(x, y, 1, 1);
}
}
});
Snowflake
I asked the same prompt but the result was not very good. Then I asked for a 3D version. This is the result:
document.addEventListener('DOMContentLoaded', function() {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.IcosahedronGeometry(1, 0);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const snowflake = new THREE.Mesh(geometry, material);
scene.add(snowflake);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
snowflake.rotation.x += 0.01;
snowflake.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
});
It is not a fractal but it is ok.
Sierpinski carpet
Using the same prompt but asking for movement too.
document.addEventListener('DOMContentLoaded', function() {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
const generateSierpinskiCarpet = function(x, y, z, size, depth) {
if (depth === 0) return;
const offset = size / 3;
const newSize = size / 3;
const boxGeometry = new THREE.BoxGeometry(newSize, newSize, newSize);
const box = new THREE.Mesh(boxGeometry, material);
box.position.set(x, y, z);
scene.add(box);
for (let dx = -1; dx <= 1; dx++) {
for (let dy = -1; dy <= 1; dy++) {
for (let dz = -1; dz <= 1; dz++) {
if (Math.abs(dx) + Math.abs(dy) + Math.abs(dz) > 1) {
generateSierpinskiCarpet(x + dx * offset, y + dy * offset, z + dz * offset, newSize, depth - 1);
}
}
}
}
};
generateSierpinskiCarpet(0, 0, 0, 100, 3);
camera.position.z = 200;
// Add mouse controls
const mouse = new THREE.Vector2();
const raycaster = new THREE.Raycaster();
document.addEventListener('mousemove', (event) => {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
});
function animate() {
requestAnimationFrame(animate);
// Update camera position based on mouse movement
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
if (intersects.length > 0) {
const target = intersects[0].point;
camera.position.lerp(target, 0.05);
}
renderer.render(scene, camera);
}
animate();
});
Conclusion
Chat GPT can help you a lot in this kind of activity but, certainly, doesn’t do all the work.