---

layout: default

---

<h3>Saturation</h3>

<p>Saturation is the strength or purity of the color and represents the

amount of gray in proportion to the hue. A "saturated" color is pure

and an "unsaturated" color has a large percentage of gray.

Move the cursor vertically over each bar to alter its saturation.</p>

<p><a href="http://processing.org/learning/basics/saturation.html">Original Processing.org Example: Saturation</a><br>

<div class="learning-demo"><script type="application/processing">

int barWidth = 5;

int[] saturation;

void setup()

size(200, 200);

colorMode(HSB, 360, height, height);

saturation = new int[width/barWidth];

void draw()

int j = 0;

for (int i=0; i<=(width-barWidth); i+=barWidth) {

noStroke();

if ((mouseX > i) && (mouseX < i+barWidth)) {

saturation[j] = mouseY;

}

fill(i, saturation[j], height/1.5);

rect(i, 0, barWidth, height);

j++;

}

</script><canvas width="200" height="200"></canvas></div></p>

<div style="height:0px;width:0px;overflow:hidden;"></div>

<div class="code"><pre name="code" class="processing">// All Examples Written by Casey Reas</a> and Ben Fry</a>

// unless otherwise stated.

int barWidth = 5;

int[] saturation;

void setup()

{

size(200, 200);

colorMode(HSB, 360, height, height);

saturation = new int[width/barWidth];

}

void draw()

{

int j = 0;

for (int i=0; i&lt;=(width-barWidth); i+=barWidth) {

noStroke();

if ((mouseX &gt; i) && (mouseX &lt; i+barWidth)) {

saturation[j] = mouseY;

}

fill(i, saturation[j], height/1.5);

rect(i, 0, barWidth, height);

j++;

}

}</pre></div>