cc control types

Control Types

Up to now we have only worked with numeric values cc-control can also handle other types, with different controls and track types.

Colors and Gradients

	private CCP5Controller _myController;
	
	@CCProperty(name = "color")
	private CCColor _cColor = new CCColor();

	@CCProperty(name = "gradient")
	private CCGradient _cGradient = new CCGradient();
	
	public void setup() {
		_myController = new CCP5Controller(this);
	}

	public void draw() {
		background(255);
		
		noStroke();
		fill(_cColor.toInt());
		rect(100,100,width - 200, 100);
		noFill();
		for(int x = 100; x < width - 100; x++) {
			double myBlend = norm(x, 100, width - 100);
			stroke(_cGradient.color(myBlend).toInt());
			line(x, 300, x, 500);
		}
	}

cc-control comes with two types to handle colors CCColor for colors and CCGradient for gradients. For detailed information on the classes have a look in the javadoc.

Colors

When you define a property of the type CCColor cc-control creates a color control for it. The color control contains of an edit button and a color field indicating the current color. To change the color press the edit button and a color chooser opens.

Once you have edited the color press okay to close the editor and keep it, cancel to close without keeping the change and reset to reset the color to the original value without closing the editor window.

As for numeric values right click on the label and click Add To Timeline from the context menue.

As for numeric values you add a point by double click into the timeline. The appearance however is slightly different. On the upper half of the track you see the color change over time on the lower half you see the interpolation curve.

To edit the color select one or more points than press edit in the color control in the control ui. The changes you make in the color chooser are now applied to the control points in the timeline.

To change the interpolation curve select the curve tool from the context menue by right click in the track. This works identical to curve tracks so look here for more details.

	private CCP5Controller _myController;
	
	@CCProperty(name = "color")
	private CCColor _cColor = new CCColor();
	
	public void setup() {
		_myController = new CCP5Controller(this);
	}

	public void draw() {
		background(255);
		
		noStroke();
		fill(_cColor.toInt());
		fill(_cColor.r * 255, _cColor.g * 255, _cColor.b * 255, _cColor.a * 255)
	}

You can get the color value by using the r,g,b,a fields of the color object or the toInt() method.

Gradients

Gradients behave similar to colors. Once you have defined a property of the type CCGradient you see a gradient control in the control ui.

The gradient control shows the gradient you can edit the gradient by adding and removing color points. To add a point simply click in the area below the gradient preview. By clicking on a color point you open the color chooser to edit the color. You can move color points by mouse drag. To remove a color point click on it with pressed shift key.