Categories

# Create a spectrum of coloured squares in Processing (part 2)

Learn how to use the HSB model, and plot hundreds of coloured squares with different effects.

This is part 2, and we continue the coding activity from part 1, and now vary the size of the rectangles and their transparency.

In this coding activity we extend the code of part 1 and create hundreds of rectangles that will show a spectrum of colour, with each rectangle showing a variety of effects, such as colour or transparency changes. We use the Processing library, and the Hue Saturation Brightness (HSB) colour model. This activity follows from previous activities and I suggest (if you have not already) that you follow the following three activities first:

1. Setting up the programming environment
2. The activity to make a quick sketch before you code, and
3. Hue Saturation Brightness activities first.
4. Create a spectrum of coloured squares in Processing (part 1)

## Step 1. Recap, and getting the basics working

Load Processing and the saved rectangles activity (part 1). Make sure you have gotton this far.

In part 1, we plot rectangles while the `myX` variable had a value less than the width. We incremented the `myX` variable every time we went round the loop, and changed the colour depending on the `myX` value. We defined the y position by a random amount (between 0 and height). This gives red squares on the left and purple on the right.

``````//Rectangles coloured by the spectrum
size(800,540);
background(255,255,255);
colorMode(HSB,800,100,100,100);
float myX=0;

while(myX<width){
fill(myX,100,100);
rect(myX,random(height),20,20);
myX += 0.5;
}``````

Now we extend the code in several ways.

## Step 2. Center and adapt the size of the rectangles

We first centre the rectangles. Currently the rectangles are plotted in positions defined by the top left hand corner. We use `rectMode( mode ) `to set how we define the location of the plotted rectangles. The mode can be either `CORNER`, `CORNERS`, `CENTER`, or `RADIUS`. See the processing website for a long description of each setting for `rectMode`. The default `rectMode` is `CORNER`, we will use `CENTER` to put the `x,y` position in the centre of the rectangle.

``rectMode(CENTER);``

Let’s revisit the x and y variables. Before we just used `myX`, and set the y value when we needed it. Let us now define a `myY` variable:

``float myY = 0;``

and set this to the random value every time we go round the loop.

``myY = random(height);``

Now, let’s change the size of the rectangles every time we go round the while loop. To achieve this task, let us think about what we want:

1. We need to use a random value to change the size of the squares.
2. We want to have squares. So we’ll need to define a variable to hold the value such that the width and height of the rectangle is the same.
3. We don’t want extremely small squares, so we need a minimum size.

Let us now set a few more variables. We need a variable for the minimum width of the rectangle (let’s set this initially to 1), another variable to set the maximum size (let’s set this to 80), and a final one to hold the current size (initially 0).

``````float myRectSizeMin = 1;
float myRectSizeMax = 80;
float myRectSize    = 0;``````

Every time we go round the while loop, we need to update the `myRectSize`, with a random value between the minimum and maximum value. We can achieve this as follows:

``myRectSize = random(myRectSizeMin, myRectSizeMax);``

Note that (with the current set variables) this now gives us a random number between 1 up to (and not including) 80. To summarise so far, we now have the following code:

``````//Rectangles random sized, and coloured by the spectrum
size(800,540);
background(255,255,255);
colorMode(HSB,800,100,100,100);
rectMode(CENTER);
float myX=0;
float myY=0;
float myRectSizeMin = 1;
float myRectSizeMax = 80;
float myRectSize    = 0;

while(myX<width){
myRectSize = random(myRectSizeMin, myRectSizeMax);
myY = random(height);
fill(myX,100,100);
rect(myX,myY,myRectSize,myRectSize);
myX += 3;
}``````

We have already setup the HSB colour mode to be `colorMode(HSB,800,100,100,100);` remember that this setting gives us the Hue range between 0 and 800, with each of Saturation, Brightness and Opacity between 0 and 100.

We need to define a variable to hold the opacity, let’s define the following:

``float myOpacity = 0;``

Let’s set the opacity between 20 and 80. We don’t want it too translucent, otherwise it won’t be seen. We don’t want it too opaque because it will cover other rectangles. Every time round the loop we need to call the following:

``myOpacity  = random(20,80);``

And also set the fill to change the opacity, as follows:

``fill(myX,100,100,myOpacity);``

This now gives us code with a set of variables, and a while loop that is starting to do many commands.

``````//random sized rectangles coloured by the spectrum, with random opacity (alpha value)
size(800,540);
background(255,255,255);
colorMode(HSB,800,100,100,100);
rectMode(CENTER);
float myX=0;
float myY=0;
float myRectSizeMin = 1;
float myRectSizeMax = 80;
float myRectSize    = 0;
float myOpacity     = 0;

while(myX<width){
myRectSize = random(myRectSizeMin, myRectSizeMax);
myOpacity  = random(20,80);
myY        = random(height);
fill(myX,100,100,myOpacity);
rect(myX,myY,myRectSize,myRectSize);
myX += 3;
}``````

• Swap the rectangles with circles. In Processing we can create circles by using the method `ellipse()`.