Creating fun fractals with chat GPT

--

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.

--

--