Creating Gradients with colorLib

Posted by Jan Vantomme on 24 December 2010.
Tags: , ,

colorLib has a class to create gradients from an array of colors or a Palette object. The gradient class extends the Palette class, so all methods from that class can be used on the gradient object you create.

There are four different constructors you can use to create a Gradient object. In this article, I’m going to show you how you to use them, and draw the gradients to the screen. Note that a gradient object is just a palette that stores all colors from the gradient. The library doesn’t have methods to draw gradients to the screen.

Creating a Gradient From an Array of Colors

First, you’ll need to declare a variable of type Gradient. I’ll usually name it g.

Gradient g

Second thing to do is creating an array of colors.

color[] c = new color[2];
c[0] color(25500);
c[1] color(2552550); 

The following piece of code will take the two colors from the array and calculate the 120 steps between them.

= new Gradient(thisc120); 

You can draw a gradient by accessing the colors from the gradient object. I usually don’t draw gradients to the screen but use the object to animate the color of an object over a certain time.

for (int i 0g.totalSwatches(); i++) {
    stroke
g.getColor(i) );
    
line(0iwidthi);

A basic gradient created with colorLib.

Wrap the colors

If you want your gradient to end with the same color as the startcolor, you can use a fourth parameter on the constructor. Use true if you want to wrap the gradient, false if you want a normal gradient.

= new Gradient(thisc120true); 

A wrapped gradient created with colorLib.

Creating a Gradient From a Palette Object

Creating a gradient from a colorLib Palette object works the same way. In stead of an array with colors, you’ll just add a Palette object as a parameter in the constructor. Be careful when you generate a palette with random colors. The results might look ugly…

= new Palette(this);
for (
int i 05i++) {
    p
.addColorcolor(random(255), random(255), random(255) ) );
}
= new Gradient(p450); 

A gradient created from a Palette object.

Wrap the colors

You can also wrap the colors of the gradient when you create one from a Palette object.

= new Gradient(p450true); 

A wrapped gradient created from a Palette object.

Downloads

Download all gradient examples from this tutorial. Download [colorLib](http://code.google.com/p/colorlib/ at Google Code).

If you create images with colorLib, please add them to our Flickr group.

Tweet this article

Oldskool Comments (3)

Gravatar for Amnon Owed

From: Amnon Owed
Date: 24.12.2010

Just downloaded colorLib and got myself a Kuler key. Might as well start using 'em now ;-)

Top · Permanent link to this comment

Gravatar for Amnon Owed

From: Amnon Owed
Date: 24.12.2010

I've been working with the lib and I'm really liking it. Now I have a question. Methods like getPopular() and similar, return a line to the console (and thus are saved somewhere in plain text) which includes the Kuler API key. Is it possible to prevent printing of these lines to the console?

Top · Permanent link to this comment

Gravatar for Jan Vantomme

From: Jan Vantomme
Date: 25.12.2010

At this moment it's not possible. When we started colorLib, you didn't need an API key for Kuler. Printing to the console was used for debugging purposes. I'll add it to the next release.

Top · Permanent link to this comment