Skip to main content

Matrix

Matrices are two-dimensional grids of elements organized in rows and columns. They are perfect for visualizing 2D algorithms, image processing, and grid-based operations.

Source Code

1matrix grid = {
2  value: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
3  color: [[null, "blue", null], [null, "red", null], [null, "green", null]]
4  arrow: [[null, null, null], [null, "center", null], [null, null, null]]
5}
6

7page
8show grid

Rendered Diagram

Properties​

Matrices support the following properties:

PropertyTypeDescription
value(number | string | null)[][]2D array of matrix elements
color(color | null)[][]Colors for each element
arrow(number | string | null)[][]Arrows or labels for each element
abovestring | text_object (see special features)Label positioned above the matrix
belowstring | text_objectLabel positioned below the matrix
leftstring | text_objectLabel positioned to the left
rightstring | text_objectLabel positioned to the right

Methods​

Matrices support these methods for manipulation:

Text Positioning Methods​

  • setText(text, position) - Set or remove text at specific positions ("above", "below", "left", "right")

Single Element Methods​

  • setValue(row, col, value) - Set value at specific position
  • setColor(row, col, color) - Set color at specific position
  • setArrow(row, col, arrow) - Set arrow at specific position

Multiple Element Methods​

  • setValues([[...], ...]) - Set multiple values (use _ to keep existing)
  • setColors([[...], ...]) - Set multiple colors
  • setArrows([[...], ...]) - Set multiple arrows

Structural Methods​

  • addRow([values]?) - Add new row (optionally with values)
  • addColumn([values]?) - Add new column (optionally with values)
  • insertRow(index, [values]?) - Insert row at specific index with optional values
  • insertColumn(index, [values]?) - Insert column at specific index with optional values
  • removeRow(index) - Remove row at index
  • removeColumn(index) - Remove column at index
  • addBorder(value, color?) - Add border around matrix

Examples​

Basic Matrix Example​

Matrix with Colors​

Source Code

1matrix colorful = {
2  value: [["A", "B"], ["C", "D"]]
3  color: [["red", "blue"], ["green", "yellow"]]
4}
5

6page
7show colorful

Rendered Diagram

Dynamic Matrix Operations​

Source Code

1matrix mat = {
2  value: [[1, 2], [3, 4]]
3}
4

5page
6show mat
7

8page
9mat.setValue(0, 1, 5)
10mat.setColor(0, 1, "red")
11

12page
13mat.addRow()
14mat.setValue(2, 0, 7)
15mat.setValue(2, 1, 8)
16

17page
18mat.addColumn([5, 5, 5])
19mat.setValues([[0, 1, 5], [0, 3, 4], [0, 7, 8]])
20mat.setColors([["gray", null, "red"], ["gray", null, null], ["gray", null, null]])

Rendered Diagram

Matrix with Border​

Source Code

1matrix bordered = {
2value: [[5, 8], [2, 9]]
3color: [[null, null], [null, null]]
4}
5

6page
7show bordered
8bordered.addBorder(0, "gray")

Rendered Diagram

Matrix with Labels​

Source Code

1matrix myMatrix = {
2  value: [[12, 15, 18], [24, 27, 30]]
3  above: "Temperature Data (°C)"
4  left: "Days"
5  below: "Hours: 9AM, 12PM, 3PM"
6}
7

8page
9show myMatrix

Rendered Diagram

Dynamic Text with setText​

Source Code

1matrix data = {
2  value: [[1, 2], [3, 4]]
3}
4

5page
6show data
7

8page
9data.setText("Matrix Title", "above")
10data.setText("Row Labels", "left")
11

12page
13data.setText("Updated Title", "above")
14data.above.setFontSize(18)
15data.above.setColor("blue")
16

17page
18// remove left text
19data.setText(null, "left")
20data.setText("Column Info", "below")

Rendered Diagram

Use Cases​

Matrices are ideal for:

  • 2D algorithms - Pathfinding, flood fill, Conway's Game of Life
  • Image processing - Filters, transformations, pixel operations
  • Dynamic programming - Visualize DP tables and memoization
  • Graph adjacency matrices - Represent graph connections
  • Mathematical operations - Matrix multiplication, transformations
  • Game boards - Chess, checkers, tic-tac-toe
  • Coordinate systems - 2D grids and spatial algorithms
  • Methods Reference - Complete list of matrix methods
  • Array - One-dimensional arrays
  • Graph - Alternative way to represent 2D relationships