speice.io/blog/2024-11-15-playing-with-fire/1-introduction/chaosGame.js

37 lines
852 B
JavaScript

// Hint: try increasing the iteration count
const iterations = 10000;
// Hint: negating `x` and `y` creates some interesting images
const transforms = [
(x, y) => [x / 2, y / 2],
(x, y) => [(x + 1) / 2, y / 2],
(x, y) => [x / 2, (y + 1) / 2]
]
function* chaosGame() {
let image = new ImageData(500, 500);
let [x, y] = [randomBiUnit(), randomBiUnit()];
for (var count = 0; count < iterations; count++) {
const i = randomInteger(0, transforms.length);
[x, y] = transforms[i](x, y);
if (count > 20)
plot(x, y, image);
if (count % 1000 === 0)
yield image;
}
yield image;
}
// Wiring so the code above displays properly
function Gasket() {
const {setPainter} = useContext(PainterContext);
setPainter(chaosGame());
return (<></>)
}
render(<Gasket/>)