Processing – Arrays

During this seminar which took place in the computer labs we were taught the basics of arrays used in programming. From what I have learned, an array is a systematic list of numbers which are in order which can only include integers including decimals. Using this type to list data, I was asked to create a simple programme where when the user clicked the mouse the rectangle shape within the window would change colour which would match to the ones listed in the array in random order.

To begin, I needed  to create an index of different colours using the colour-hex which enabled me to use colour models of RGB.

Using the array method, it was important that I including the HEX values to assign my colours in the array.

Afterwards, I need to write the ‘void setup’ function in order for my program to display a window and a canvas. So within this, I need to include the values of how large the canvas will be in the window of the program using the size method nested within the ‘void setup’ function. I then need to draw a rectangle so I will use the ‘rect’ function and 4 positions, x, y and width and height to draw it.

After that, I need to call the ‘void draw’ function so that my program know that it will be drawing a shape every time something happens.

As the user needs to click the mouse to change the colour of the square I will need to call the ‘mouseClicked’ function. Within this function I will need to call my array of colour using the ‘float’ data type (include integers with decimals). After that I will need to convert my floating HEX numbers into whole numbers suing the ‘int’ function. Using the ‘fill’ method I will then be able fill the square with a colour from the array of colours. Below is the programme:


Once the programme has been run the user is able to see a white rectangle with no colour. But when the user clicks on the rectangle the colour will change randomly and accordingly to the array of colours. Here are some examples of how the rectangle changes colour: