I recently made a sketch where you can drag cells in a grid. The cells hold letters, but it is easy to adapt it to hold colors...
http://bazaar.launchpad.net/~philho/+junk/Processing/files/head:/_SmallPrograms/GridOfLetters/

PhiLho, that's pretty cool. I'm not too worried about the actual drag and drop though. The problem I'm having is figuring out how to assign a color based on the positions of the nodes, the distance of each node from its neighboring nodes, and the actual color assigned to a node.

Associate to color is easy: multiply by 10 and you get indexes in a 10 color palette. Adjust to the size of your palette, of course...
I am not sure to get the "position, neighbor distance" part.

EDIT: Removed this section to avoid confusing readers and to make post shorter

Here is a sketch that is stuck at the point I was trying to describe earlier. Right now I have click and draggable nodes that show a black / white color. Underneath the nodes I have an area that has random vertical lines that are black and white. That area underneath is in a temporary state and what I am stuck on. My goal is to instead have that area be vertical lines of smooth gradients based on the color of the nodes above. If there are 3 nodes then that area will have 2 smooth gradients in the space between the nodes. Here is what I have so far:

1. int numNodes = 3;
2. color[] nodeColor = new color[numNodes];
3. int[] nodePos = new int[numNodes];
4. boolean somethingSelected;
5. int selectedNode;
6.  
7. void setup() {
8.   size(800, 200, P2D);
9.   for (int i = 0; i < numNodes; i++) {
10.     nodeColor[i] = color(random(256), random(256), random(256));
11.     nodePos[i] = width/(numNodes-1)*i;
12.   }
13.   println("Click and drag the nodes along the line");
14.   println("Press 'c' to randomize the color of the nodes");
15.   println("Press 'p' to reset the position of the nodes");
16. }
17.  
18. void draw() {
19.   if (somethingSelected) nodePos[selectedNode] = mouseX;
20.   background(255);
21.   line(0, 50, width, 50);
22.   for (int i = 0; i < numNodes; i++) {
23.     fill(nodeColor[i]);
24.     rect(nodePos[i]-5, 25, 10, 50);
25.   }
26.   loadPixels();
27.   int count = 0;
28.   for (int i = 0; i < width; i++) {
29.     float w = float(width);
30.     if (i > nodePos[count+1])
31.       count++;
32.     float a = float(i - nodePos[count]) / (nodePos[count+1] - nodePos[count]);
33.     color val = lerpColor(nodeColor[count], nodeColor[count+1], a);
34.     for (int j = height/2; j < height; j++) pixels[i+j*width] = val;
35.   }
36.   updatePixels();
37. }

Currently, don't move the left and right nodes... To be fixed, if needed (or make them fixed).

Thanks PhiLho, that helped me figure it out :)

Ok, one last problem. I managed to get the sketch to work without lerpColor() because I don't think that exists in JavaScript and I'll want to do the same there later. But I used map() to get my sketch to work which apparently also doesn't exist in JavaScript (or is not supported in all browsers). Can you help me figure out how to assign val its value without using map()? I can't seem to figure it out. I highlighted the line in red.

It is surprising that map() isn't implemented in all browsers. And you can see in the PApplet source, its definition is very simple! It is just a convenience function, like dist().
You can also find the code of lerpColor in http://code.google.com/p/processing/source/browse/trunk/processing/core/src/processing/core/PGraphics.java although the HSB mode uses a Java specific function, perhaps the reason it isn't in PJS.

Thanks again, here it is:

Got it working with the Mandelbrot Set. Unfortunately I am having trouble getting the lowest value and highest value to match the color palette. Other than that pretty happy with it: