How To Draw A Grid In Processing

In this coding activity we volition employ the Processing library to create a filigree of coloured squares. Nosotros will utilize the Hue Saturation Brightness (HSB) color model to assign the colours, which I covered in a previous action. Consequently, this activity follows from previous ones and I advise y'all achieve those activities first:

Setting up the programming environs,
The activity to make a quick sketch before y'all code, and
Hue Saturation Effulgence activities get-go.
Create a spectrum of coloured squares in Processing (part i)

Regular grid, coloured in a spectrum of colours, with a black stroke around each cell. — Regular grid, coloured in a spectrum of colours, with a blackness stroke around each cell.

At the stop of this action, I want you to realise that (in coding) information technology is best to dissever the index (position) of each grid jail cell and its actual x,y plotted position. This makes lawmaking that tin be easily practical to different situations.

Stride 1. Plan the picture

Any project y'all are doing, information technology is good to know where you are heading! The Critical Thinking Sheet can help you think and programme your code.

Our activeness today is to create a moving-picture show of a grid of coloured shapes, where each square is placed alongside the other.

Coloured grid of random colours — Small regular grid of random coloured squares.

We can think nigh this idea as a grid of cells, where each cell is the same size, sits side by side to another cell, and each cell includes ane object. We could identify different shapes in each jail cell (such as a rectangle or a circle), but let's start by placing coloured squares. We could also change the colours of the circles to create various patterns, but let's start simple and shade them by random colours.

Critical Thinking Sheet, with the numbers in the panels.

If yous take not done then already: print out the Disquisitional Thinking Sail. On the printout, now complete the problem, name and add today'due south date. Likewise explicate the challenge part ①
In panel ② make a sketch of the problem output, and annotate the diagram.
In panel ③ y'all can explain the main components of the organisation. In this challenge at that place are three main aspects: (i) the shape that we will plot, (ii) the colour that it will be, and (iii) the position we will place it in.
In panel ④ nosotros can now explain the procedure (algorithm). A simple process is to run through every cell position (we can do this by going through all x positions and and then all y positions), then set the required colour, and finally plot the shape.
Finally, nosotros need to consider what to do next. Definitely we need to think more most the cell, and how to index each part, and nigh the colour model.

Step 2. Set up the basic window

Setting upward the Processing environment with basic code should piece of cake now.

Set the window size to 600 by 200
Set background to white
Choose the colorMode to be HSB, and set all values (for at present) to be 100
Plot a grey rectangle, to make certain it all works fine.

Test picture, make sure that the Processing environment has been setup correctly. Showing one rectangle at x,10, width and superlative existence 100, and grayness color, with a white stroke,

          size(800,200);          colorMode(HSB, 100, 100, 100);          groundwork(100);          // Do a test with ane rectangle          // simply to brand sure that everything is working          fine                    make full(l);          stroke(100);          strokeWeight(2);          rect(x,x,100,100);

Stride 3. Understand the grid and coordinate arrangement

Permit united states of america remind ourselves about the coordinate organization in Processing.

We can plot a rectangle in Processing, by describing the location of the pinnacle left position of the rectangle, and set its width and height.

Height Tip.
A unit of measurement square sets each side to exist ane.

Let united states assume (for now) that the width and peak of the rectangle is one. This provides a really squeamish way to alphabetize every grid point. The starting time square is placed at (0,0), and then moving to the right we get the second at (1,0), 3rd at (two,0) and and then on. We are using the unit of measurement square, to simplify the code.

Unit grid, with first at (0,0), second (1,0), third (2,0) and so on — Plotting lots of unit squares, we tin plot the commencement at (0,0) and then (one,0) and and so on.

This indexing scheme fits really well with a for loop. For example we tin utilise two for loops to index positions in a 2D filigree betwixt 0 and 9 as follows:

          for(int x=0; 10<ten; x++)    for(int y=0; y<x; y++){    // loop lawmaking goes here }

Merely, if we directly plot 1 past 1 rectangles – they would be very small-scale. Indeed, so small that they are just revealed when nosotros zoom into the screenshot.

Two small 1-sided rectangles, plotted in Processing, one at (0,0) and the other at (1,1) — Two small-scale 1-sided rectangles, plotted in Processing, one at (0,0) and the other at (1,1)

Nosotros need to scale everything upward. In computer graphics scaling is performed through multiplication. So to scale everything by 10, nosotros can multiple the index position x and y past 10 to become the real location, and multiple the unit rectangle past 10, to create a rectangle of 10 width by 10 height. Mayhap nosotros want a grid of 12 rectangles by 12 rectangles, we merely change the terminate conditions of both for-loop to 12. Equally follows:

          for(int x=0; x<12; x++)    for(int y=0; y<12; y++){    rect( 10 * 10, y * 10, 10, ten); }

Top Tip.

Separate the quantity of items, and how they are indexed, from their utilize.

This is a really good strategy: separate the quantity of the things, and how they are indexed, from their utilise (or in our case, their position).

Regular grid, 12 by 12 grid of rectangles, all coloured grey, with white stroke. — Regular grid, 12 past 12 grid of rectangles, all coloured grey, with white stroke.

Refactor the code.

Let us improve the code making it more descriptive, and remove magic numbers. To do this nosotros need to define some variables.

We can prepare myScale to exist 10,
the width and height of each rectangle to exist cellSize,
the size of the index could be unlike in 10 and the Y management, then let'due south ascertain gridQuantity10 and gridQuantityY too to ten. The code to accomplish this result is as follows:

          size(200,200); colorMode(HSB, 100, 100, 100); background(100);  fill(l); stroke(100); strokeWeight(1);  float myScale = 10; float cellSize  = 10; int gridQuantityX = 12; int gridQuantityY = 12;  for(int x=0; x<gridQuantityX; x++)    for(int y=0; y<gridQuantityY; y++){    rect( x * myScale, y * myScale, cellSize, cellSize); }

Some observations with this code:

if cellSize is bigger than myScale then the rectangles overlap,
if cellSize is smaller and so myScale in that location is a small gap between each rectangle.
if the result of gridQuantityX*cellSize is larger than the width or gridQuantityY*cellSize greater than the width of the window then not all the rectangles would be seen on that window.

Step 5. Colour the squares and brand the grid make full the window

Let's modify the code (slightly) to make the grid make full the window. Nosotros can practice this by setting the rectangle dimensions, and calculating the quantity of rectangles that will fit in the window. We also need to re-organise the lawmaking lodge to brand information technology piece of work; especially set up the colorMode subsequently, when we know the colour range.

Top Tip.

Remember to refactor your code.

fix the cellSize to 20
Summate the (integer) quantity of cells that will fit in the window width, past floor(width/cellSize);
Calculate the (integer) quantity of cells that will fit in the window height, by floor(height/cellSize);
Set the scale to the cellSize.
Fix the colourRange in the HSB space to the x value of the gridQuantity;
Fill the colour based on the ten value.

          size(600,200); background(255);  float cellSize    = ten; int gridQuantityX = floor(width/cellSize); int gridQuantityY = floor(peak/cellSize);  bladder myScale = cellSize; int colourRange = gridQuantityX;  colorMode(HSB, colourRange, 100, 100); stroke(0); // get in black strokeWeight(ii);  for(int x=0; x<gridQuantityX; 10++)    for(int y=0; y<gridQuantityY; y++){      fill(x,100,100);       rect( x * myScale, y * myScale, cellSize, cellSize); }

Rainbow of colours, in a window 600 by 200, and cellSize to 10

Step 6. Now your turn. Add variation and try different values

Now we can change the bones code, to make it more interesting.

Try dissimilar colour combinations. Perhaps make them all ane colour, random colours, or a small range of colours (such as low-cal bluish to dark blue.

Meridian Tip.

Don't guess values for your code. Instead imagine the end result, then choose values to achieve that consequence!

Adapt the size of the rectangles. Attempt to brand them bigger or smaller. Even brand them really pocket-size, so that individually the rectangles cannot exist seen.

Alter the stroke and appearance of each rectangle. White strokes, coloured stroke, blackness stroke, to noStroke.

Add some noise. One thing we could add together some randomness into the colour choice. Rather than plotting an exact colour, we can add or delete a random value from a fixed colour blueish. We are adding a deterministic jitter to the colour value. We tin hands achieve this past adding a random value to the colour. For instance, we can use a random range created past random(-5,5). By choosing a stock-still colour bluish, nosotros can make a swimming puddle tiling pattern, as follows:

Nosotros tin can do the same with the spectrum colour choice: choose the spectrum colour, then jitter the colour by +random(-5,5).