Techniques for Exploring Parameter Spaces

When you create a sketch, you may need to choose some numbers to produce the effect that you want.

Sometimes you can calculate the numbers, or copy the numbers from somewhere else (for example, if you find a color in an image or on the web). However, sometimes figuring out the numbers is a process of trial and error.

The slow way to do this is to enter one number into the program code, run the sketch, modify the code to use a different number, run the sketch again, and repeat until you find something that you like.

A quicker way is to yoke the parameter value to mouse position. Then you can move the mouse to the position that produces the effect that you want, get the value that was produced by that position, and use that in your code.

Here's an example using the Lissajous curve. This curve generalizes the use of sin() and cos() to produce a circle, to produce different curves that loop back and forth different numbers of times.


1. Editing Code

Let's edit the code to use a different value for ratio:


And a third value:


2. Driving a value from the mouse position

Now, modify this to drive ratio from the mouse x position. This allows us to scrub the mouse left and right, in order to rapidly explore a range of values.


The missing piece is that need to be able to find out what numbers looked good. There are three ways to do this:

Print all the values to the console:


Print a value to the console when we click the mouse. (In order for this to work, the value has to be a global variable, so that mousePressed() can read the variable that draw() sets.)

Use text() to display the value directly on the canvas: