[an error occurred while processing this directive] [an error occurred while processing this directive]

Tweak Mode

Tweak Mode is a mode of Processing (processing.org) that allows tweaking hard-coded numbers in the code while the sketch is running and seeing the result in real time.

This video will give you a feeling of what it is like:

When a sketch is being executed in tweak mode, all hard-coded numbers become interactive and can be modified by clicking and dragging to the left or right. When a value change, the PDE will update the running sketch with the new value and the result will be visible immediately. This mode is useful if you want to refine a certain feature/color/behaviour in your sketch, if you want to experiment freely with numbers, or if you try to understand someone else's code. other uses are welcome.

TweakMode is now part of Processing 3.0!

a pre-release of Processing 3.0 get be downloaded from here.

You can run your sketch in Tweak mode by going into "Sketch" --> "Tweak", or by pressing Cmd+Shift+'T' (Ctrl+Shift+'T' on Windows).
In this new release TweakMode does not depend anymore on OSC and creates its own client-server for communication. By default, Processing will use a random port for the communication, if you find this behavior problematic, you can change this setting by modifying 'tweak.port' in preferences.txt

Using tweak mode

Basically there is nothing special you need to do, tweak mode will automatically make all your hard-coded numbers modifiable when you run a sketch. You can go ahead and load some of your favorite Processing examples and tweak them. Having said that, there are number of key concepts to understand about how tweak mode operates so you can make the best out of it.

Scope of change

Without going into too much detail of how tweak mode operates internally, you should remember that changing a number will have effect only if the tweaked code will be executed in the future.
For example, take the following code:

void setup()
{
  size(200, 200);
  background(20);
}

void draw()
{
  fill(100, 0, 0);
  ellipse(100, 100, 50, 50);
}

In this code, changing the values of 'size(...)' and 'background(...)' functions will have no effect while the sketch is running because these lines of code happened once on setup and will never be executed again during the sketch life. On the contrary, changing the values of fill() and ellipse() will have effect because 'draw' is executed over and over again.

The same principle applies to global variables, for example:

int CIRCLE_SIZE = 50;

void setup()
{
  size(200, 200);
  background(20);
}

void draw()
{
  int red = 100;
  fill(red, 0, 0);
  ellipse(100, 100, CIRCLE_SIZE, CIRCLE_SIZE);
}

In this case, changing the value assigned to CIRCLE_SIZE (50) will have no effect because the assignment of the value '50' to the variable CIRCLE_SIZE happened only once during the sketch life, so the value of CIRCLE_SIZE will remain the same even if the assigned value is changed. On the contrary, changing the assigned value of the variable 'red' (100) will have the expected effect because this assignment happens every draw.

A simple solution to the problem with the global variables is to reassign values you wish to tweak in the draw function. For example, the following draw function will elliminate the issue we had with the size of the ellipse in the previous code.

void draw()
{
  CIRCLE_SIZE = 50;
  int red = 100;
  fill(red, 0, 0);
  ellipse(100, 100, CIRCLE_SIZE, CIRCLE_SIZE);
}

Adding the line 'CIRCLE_SIZE = 50;' to the top of the draw function made it possible to tweak this number and control also the size of the circle in real time.

Precision of change

When you change a value of a number by dragging left or right, the value will change in units that are determined by the number of digits after the decimal point.
The following code will explain what I just tried to say:


int red = 100;       // change with precision of 1
float xPos = 50.0;   // change with precision of 0.1      
float yPos = 50.00;  // change with precision of 0.01

If you need more precision add more digits after the decimal point.

Colors

Tweak mode will do its best to find color operations in your code and will display a color selector for your convenience. In case you use more than one color-mode (defined with the function 'colorMode(...)') in your sketch, tweak mode will not be able to understand the intended color due to color mode ambiguity. If this is the case in you sketch you can always use HEX or web-color syntax which does not depend on the current color-mode.
For example, use:

fill(#ff00ff);   // OR
fill(0xffff00ff);

Tweak only defined parameters

If you want to tweak only certain parameters in your sketch, you can add the comment "// tweak" on the same line that contains the values you wish to tweak, like in the following example:

void setup()
{
  size(200, 200);
}

void draw()
{
  background(0);    // tweak
  fill(255);        // tweak
  
  ellipse(100, 100, 50, 50);
}

With the above code, tweak mode will ignore all numbers in the sketch and allow tweaking only the background and fill colors.

Source Code

The source can be found in github: http://github.com/galsasson/tweakmode/
Please help by posting issues and bugs (or bug fixes!).

Acknowledgements

This work could not be posible without the tremendous guidance and help from my mentor Daniel Shiffman who supported me from the conception stages of this work. Thanks also to Manindra Moharana for the help along the way.

This work is built upon a number of projects:

Processing - by Ben Fry and Casey Reas

oscP5 - by Andreas Schlegel

JavaOSC - by Chandrasekhar Ramakrishnan