xxxxxxxxxx50
<html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <h1>Space-filling Curves</h1> <h2>How it Works</h2> <p>A space-filling curve starts with a <em>seed</em> (shown on the right). You can change this seed by changing the number in the "seed" input field below. It can contain 1, 2, 3 and 4 in some order. At each iteration, the figure is downsampled, copied, rotated and connected up. You can change how it's rotated by clicking on the <em>rotation instructions</em> on the right pane. A rotation instruction is a dot, an arc or a line. A dot means "do nothing", an arc means "rotate" (the longer the arc the more rotation), and a line means "reflect" or "flip" (the direction of the line represents the axis to reflect about). The number of iterations you do is called the <em>order</em> of the curve. You can change this by sliding the "order" slider at the bottom. Finally, you can change the grid size by ticking/unticking the "grid size" checkbox below. If it's unticked, it's 2x2, and if it's ticked, it's 3x3. If it's a 3x3 grid, the seed isn't going to be 1234 in some order any more, though, it's going to be 123456789 in some order instead.</p> <h2>Examples</h2> <h3>Hilbert Curve (default settings)</h3> <p> Grid: 2x2<br /> Seed: 3124<br /> Rotation Instructions: nothing, nothing, antidiagonal flip, diagonal flip </p> <h3>Morton Curve / Z-order Curve</h3> <p> Grid: 2x2<br /> Seed: 1234<br /> Rotation Instructions: nothing, nothing, nothing, nothing </p> <h3>Peano Curve</h3> <p> Grid: 3x3<br /> Seed: 741258963<br /> Rotation Instructions: nothing, horizontal flip, nothing, vertical flip, 180° rotation, vertical flip, nothing, horizontal flip, nothing </p> <h3>Sierpinski Triangle</h3> <p>Some interesting things happen if you don't use all four squares.</p> <p> Grid: 2x2<br /> Seed: 234<br /> Rotation Instructions: nothing, nothing, nothing </p> <script src="sketch.js"></script> </body></html>