ITERATIVE CANVAS
Step

Reset
Step Size (0-2):
Iterations:

Quick Draw:
Display 'X':
Number of Target Points:
Scale (0, 1]:
Clear Targets


Save PNG

point point point
X

Help

Basics

Chaos - chaotic motion is explored in this program, and is shown to create fascinating patterns under some circumstances.

Setting Up

First, set the step size to 0.01, then press 'Step'. What just happened? There are three target points on the canvas - two are blue, one is red. The red one was randomly selected. The red X (henceforth called 'the X') just jumped 1% of the way towards that red target point (1% comes from the 0.01 step size), and a new target point was selected (now highlighted in red.) Every time the X moves, it leaves a little black dot behind.
Press 'Step' a few more times and watch the X 'walk' around (this is called a 'random walk'.) Click 'Go ∞' to watch the random walk.
Now, check 'Quick Draw'. You can see that the walk stays pretty close to the center. As the X gets closer to one of the target points, there is a 33% chance that the X will move a small hop (1% of the way) towards the close target and a 66% chance that the X will make a larger hop towards the center (the sum of the probabilities of the other two points -- the hop is larger because the distance to each of those points is greater).

Exploring

Click 'Reset' and change 'Step Size' to .1 (this is equal to 10%.) Repeat the above steps; watch the random walk when run to ∞. Notice that the size of that cloud of points is bigger. That makes sense, each time it steps it's making a bigger jump towards the randomly selected target.

First predict what will happen to the cloud of points, then run the following step sizes: .2, .3, and .5.

What?!

You should have noticed that a step size of .5 creates a special pattern: the Sierpinski Triangle.

Geometrically speaking, the Sierpinski triangle is gotten by taking a fully-shaded triangle, then connecting the midpoints of each side.
The resulting connected midpoints form a triangle inside the shaded one - delete all the area inside that middle triangle. That leaves three triangles,
one on the top and two on the bottom. Repeat this connect-midpoints-and-delete process for each. And then again for each of the 9 triangles etc.
See this link for a nice graphic.

Ok, now what?

The best thing is to explore - check out other people's templates, make some of your own.

Controls

  • The best way to learn with this program is to explore! Here is a list of all of the Controls and what they do:
  • Auto Place Targets/Custom - Switch between creating calculated targets (evenly spaced around a circle) or manually placing
  • Number of Target Points - If target points are automatically generated, how many to make
  • Scale - Change the proximity of the automatically placed target points
  • Step Size - Jump size between current point and next target point as a ratio. A ratio between 1 and 2 allows points to be placed past the target (but not at infinity) - you may need to decrease the scale to see the entire picture.
  • Iterations - How many points to calculate when you press Go!
  • Quick Draw - Calculate infinite runs more quickly (by a lot)
  • Display 'X' - Display the red X on the canvas and highlight the current target point
  • Clear Targets - If set to 'custom', will remove all target points from the canvas
  • Place Targets - Place target points on the canvas (inside the black box) by clicking
  • Snap To Grid - Create a grid to which points will snap when manually added. You can change the grid size (default 100px).
  • Go! - Iterate as many times as are input with Iterations
  • Go to infinity - Iterate until a manual stop
  • Stop run to infinity - Stop a run to infinity
  • Reset - Remove points on the canvas (target points are unaffected)