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

37 lines
902 B
JavaScript
Raw Normal View History

2024-11-24 18:59:11 -05:00
function Gasket() {
// Hint: try increasing the iteration count
const iterations = 10000;
2024-11-24 18:59:11 -05:00
// Hint: negating `x` and `y` creates some interesting images
2024-11-24 22:37:53 -05:00
const transforms = [
2024-11-24 18:59:11 -05:00
(x, y) => [x / 2, y / 2],
(x, y) => [(x + 1) / 2, y / 2],
(x, y) => [x / 2, (y + 1) / 2]
]
2024-11-24 18:59:11 -05:00
const image = new ImageData(600, 600);
2024-11-24 22:37:53 -05:00
2024-11-24 18:59:11 -05:00
function* chaosGame() {
var [x, y] = [randomBiUnit(), randomBiUnit()];
2024-11-24 18:59:11 -05:00
for (var count = 0; count < iterations; count++) {
2024-11-24 22:37:53 -05:00
const i = randomInteger(0, transforms.length);
[x, y] = transforms[i](x, y);
2024-11-29 19:25:29 -05:00
if (count > 20)
2024-11-24 18:59:11 -05:00
plot(x, y, image);
2024-11-29 19:25:29 -05:00
if (count % 1000 === 0)
2024-11-24 18:59:11 -05:00
yield image;
2024-11-17 20:42:42 -05:00
}
}
2024-11-24 18:59:11 -05:00
return (
<Canvas
width={image.width}
height={image.height}
painter={chaosGame()}/>
)
}
2024-11-24 18:59:11 -05:00
render(<Gasket/>)