Login to your CodeSandbox account. Select the Frontend for practicalcompute.cc Template. In the upper right corner, select the Fork drop-down and select your project area name. After the fork is created, go back to the Dashboard and rename this forked sandbox to svg_graphics1.

Change into your ~/Documents folder and run degit to create a new project called svg_graphics1. Here are the commands to follow:

The last command will start the vite server. So, you can go to http://localhost:5173 to view the current app.

To show how the Rectangle class can be used, let’s modify index.mjs to just draw a single rectangle. Here is the new version of the code:

The new lines are 11-13. Line 11 gets a reference to the SVG container area. Line 12 constructs a Rectangle object at (50, 60) with a width of 70 and a height of 40, and is colored red.

Here is a screen shot showing that rectangle in the browser window:

Let’s modify index.html so that we can gather the input that we need to draw the rows and columns of rectangles. Here is the new version of index.html:

The new lines are 16-27. Line 16 adds a <h2> element to create a heading for the rectangles setup. Lines 17 and 18 create a prompt for the input text box to get the number of rows. Lines 19 and 20 do the same thing for getting the number of columns. Line 21 is a prompt for getting the type of fixed color type. Lines 22-25 define a <select> element that allows the user to specify the type of fixed color type to use. Line 26 makes it so there is a blank line before the <button> that follows. Line 27 creates a <button id="ok_button"> that will be clicked on to draw the rectangles based on the user input.

Here is a partial screen shot that shows the input elements for the rectangles setup:

Next, we modify index.mjs so so that we can start to set up drawing the rows and columns of rectangles. This is just the first pass at doing this so we will only put in enough changes to test our code:

The new lines are 9, 11-13 and 17-19. Line 9 adds the global variable, svg_area, that will hold the reference to the SVG container element. Lines 11-13 define the drawRectangles() function. All this function does right now is print 'drawRectangles called' to the Console. Line 17 gets the reference to the SVG container element and stores this reference as svg_area. Line 18 gets a reference to the Ok button. Line 19 makes it so that clicking on that Ok button will call the drawRectangles() function.

The following animated gif will demonstrate inside of CodeSandbox the testing of our changes to index.mjs:

Now that we know that clicking on the Ok button calls the correct function, let’s modify that function to read in the input values. Here is the next version of index.mjs:

The new lines are 12-19. Lines 12-14 get references to the elements used to gather the rows, columns and fixed type, respectively. Lines 15 and 16 use the Number() function to convert the input from the text boxes into numbers and store in rows and columns, respectively. Line 17 gets the value from the <select> list and stores this in fixed_type. Line 18 uses a template. This is a string enclosed in backticks (` `). Within those backticks any place that has a ${some_variable}, will substitute in the value of that variable. This is called variable interpolation or substitution. So, line 18 will print the rows and columns entered by the user. Line 19 also uses variable interpolation and the backticks to print out the fixed_type string.

The following partial screen shot shows the result of the user entering values for the rows, columns and fixed type and then hitting the Ok button:

Next, we will use the values for rows and columns to draw rectangles. For this pass, we will just draw "red" rectangles. Here is a diagram that shows how the x-coordinate and y-coordinate values have to change:

Each time we increase the column, the x-coordinate must increase by (width + 5), if 5 pixels is used for the horizontal gap. Each time we increase the row, the y-coordinate must increase by (height + 5), if 5 pixels is used for the vertical gap. The column values will go from 0 up to (columns - 1). The row values will go from 0 up to (rows - 1). So, generalized formulas for x and y would be:

x-coordinate = startX + column * (width + 5)
y-coordinate = startY + row * (height + 5)

To see this, you can substitute in values for the column and the row. So, for column = 0, we have:

x = startX

For column = 1, we have:

x = startX + (width + 5)

For column = 2, we have: x = startX + 2*(width + 5)

and so forth;

Here is a diagram that you may find helpful to visualize this:

In computer graphics, the way that x and y are defined is that x increases to the right, but y increases going down. It is important to keep this in mind, any time you need to think about positioning for computer graphics.

Using the formulas avoe, this will draw the rectangles in the rows and columns that the user specifies. Here is the new version of index.mjs:

The new lines are 18-31. Line 18 sets the starting x-coordinate. Line 19 sets the starting y-coordinate. Line 20 defines the width to be 35 pixels. Line 21 defines the height to be 20 pixels. Hopefully, you can see how you could add input text boxes to allow the user to specify the width and the height of the rectangles. Lines 23-30 define the nested for loop. Note that both for loops are index-based for loops. This is the most straightforward way to calculate the (x,y) coordinates for the top left of each rectangle.

When you see nested for loops like this, think of the outer for loop as iterating over the rows, and the inner for loop iterating over the columns within each row. In other words, as you increase the column number, you are increasing x. When you increase the row number, you are increasing y. So, the outer for loop will set a value for the row, and this is fixed while the inner for loop iterates over the columns. So, with the nested for loops set up this way, you are drawing the first row with all its columns, then the second row and all its columns, etc.

On line 22, we create a variable called, outstring. Throughout the nested for loop, we will keep concatenating on to the end of outstring so that we can see how the (x,y) coordinates change as the loops run. We cannot simply use console.log() to print all along the way, as this will result in the output being broken up into more lines than we want. By updating outstring on line 27, we are adding the (x,y) coordinates for each column in a given row. Then, on line 29 we add a newline character, so that outstring will continue on the next line. This will simulate going to the next row. Note on lines 25 and 26, we use the formulas shown above to calculate the next x and y values. Finally, on line 31 we print out the entire contents of outstring all at once so we can see the output formatted into rows and columns.

Here is a screen shot showing the results of running the app now:

Now that the nested for loop has been set up, let’s actually draw some rectangles. To keep the changes minimal, we will make all the rectangles "red" for this pass. Here is the new version of index.mjs:

The new lines are 26-28. Line 26 creates a new Rectangle object at the calculated coordinates. The rectangles are all red at this point. That means that the fixed type value is not being used yet. Line 27 assigns an id to the Rectangle object. Note that this must be done before the draw() method is called on line 28.

The following screen shot shows the Elements tab of the Chrome browser’s DevTools displaying the id values. So, an id="0-0" means this is row 0, column 0. An id="2-3" means this is the rectangle at row 2, column 3. That would be the third physical row and fourth physical column (since the rows and columns are numbered starting at 0). Note that this is only visible if you display the page in a browser window. You can’t see this in the Preview of CodeSandbox.

Now that we can draw the rectangles using the nested for loops, let’s make use of the fixed type value to either draw the rectangles with Fixed row color or Fixed column color. So, we need to make use of a selection statement to handle these two cases.

Here is the new code for index.mjs that uses such a selection statement:

The new lines are 22, 25, 26-30 and 33. Line 22 defines an array called colors that consists of four color strings. Line 25 sets a default value for the color variable. Lines 26-30 define the selection statement that will enforce the fixed_type value. So the first case, on lines 26-28, will be executed if fixed_type is Fixed row color. Line 27 will choose the color by setting it to colors[row%4]. This requires some explanation.

The % symbol is the modulus operator. The modulus operator returns the remainder of dividing the number before the modulus symbol by the number following the modulus symbol.

So, for example 6%4 returns 2, because 6 divided by 4 is 1 with a remainder of 2. The expression 3%4 returns a 3. This is because 3 divided by 4 is 0 with a remainder of 3. The modulus operator always returns the smallest positive number that needs to be added to a multiple of the second number to obtain the first number. So, 98%4 will return 2. This is because the closest multiple of 4 to 98 (without going over) is 96, and 96 + 2 = 98.

Since colors is an array, colors[0] is 'red', colors[1] is 'blue', colors[2] is 'green' and colors[3] is 'orange'. The reason why we use the % operators is to make sure that the index always ranges between 0 and 3. This means that if you have more than 4 rows or 4 columns, the colors will just repeat after 'orange' is reached. You can try working this out step by step.

Suppose you are setting Fixed row color, then:

when row = 0, row%4 = 0, so colors[row%4] is 'red'
when row = 1, row%4 = 1, so colors[row%4] is 'blue'
when row = 2, row%4 = 2, so colors[row%4] is 'green'
when row = 3, row%4 = 3, so colors[row%4] is 'orange'
when row = 4, row%4 = 0, so colors[row%4] is 'red'
when row = 5, row%4 = 1, so colors[row%4] is 'blue' and so on.

In setting the color this way, we only change the color if the row changes if we are using Fixed row color. Otherwise, if we are using Fixed column color, then the color=colors[col%4] only changes when the column changes. This produces the effect that we wanted.

The following animated gif (generated using the vite server page) shows the app in action:

If you want to replay the animation click on the Reload gif button.

One thing that we have forgotten to take into account is that each time that drawRectangles() is called, more SVG objects are appended to svg_area. This will make the app draw the rectangle incorrectly, and there will be more than one rectangle that has the same id. This is because we need to clear out svg_area each time we call drawRectangles(). Here is a new version of index.mjs that fixes this:

The new lines are 11-15 and 18. Lines 11-15 define the removeChildren() function. This uses a while loop that will keep removing the first child of the element, until all the children are removed. Line 18 calls this removeChildren() function inside of drawRectangles(), so that any time we click the Ok button, the svg_area is cleared out before adding the new SVG objects. You should run the application to verify that the rectangles are drawn correctly. An easy way to see this is to use 5 rows and 8 columns, and then redraw using 3 rows and 4 columns. Before applying this fix (to clear svg_area), this would not have drawn correctly.