====== How to create color gradients ======

In Sparrow, gradients are created with the help of the ''SPQuad''-class. A quad is just a rectangle with a color (but without a texture). And if you look at the interface of ''SPQuad'', you’ll see that you can not only set one color, but four of them: one per vertex. This is a very simple and efficient way to create color gradients.

Do you remember the colorful sky background in PenguFlip? It was created with 5 huge quads, each with one color gradient. Here’s how one of those quads was created:

<code objc>
uint bottomColor = 0x1c1191; // blue
uint topColor = 0xea0b0b; // red
 
SPQuad *quad = [SPQuad quadWithWidth:250 height:150];
[quad setColor:topColor    ofVertex:0];
[quad setColor:topColor    ofVertex:1];
[quad setColor:bottomColor ofVertex:2];
[quad setColor:bottomColor ofVertex:3];
</code>

The vertices 0 and 1 are at the top, while 2 and 3 are at the bottom. Naturally, you can use 4 different colors for the 4 vertices, if you want to.

{{ :tutorials:gradient.png |A color gradient}}

Remember that ''SPImage'' is a subclass of ''SPQuad'' --- which means that you can [[modifying_the_color_of_an_image|tint]] a texture with a gradient, too!