Skip to main content

Array

Arrays are linear sequences of elements that can be accessed by index. They are perfect for visualizing sorting algorithms, searching, and other sequential operations.

Source Code

1array numbers = {
2  value: [1, 2, 3, 4, 5]
3  color: [null, "blue", null, "red", null]
4  arrow: [null, "min", null, "max", null]
5}
6

7page
8show numbers

Rendered Diagram

Properties​

Arrays support the following properties:

PropertyTypeDescription
value(number | string | null)[]The array 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 array
belowstring | text_objectLabel positioned below the array
leftstring | text_objectLabel positioned to the left
rightstring | text_objectLabel positioned to the right

Methods​

Arrays 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(index, value) - Set value at specific index
  • setColor(index, color) - Set color at specific index
  • setArrow(index, arrow) - Set arrow at specific index

Multiple Element Methods​

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

Add/Insert Methods​

  • addValue(value) - Add value to end of array
  • insertValue(index, value) - Insert value at specific index

Remove Methods​

  • removeValue(value) - Remove first occurrence of value
  • removeAt(index) - Remove element at specific index

Examples​

Basic Array Example​

Array with Colors and Arrows​

Source Code

1array myArr = {
2  value: [10, 20, 30, 40]
3  color: ["red", "green", null, "blue"]
4  arrow: ["start", null, "pivot", "end"]
5}
6

7page
8show myArr

Rendered Diagram

Dynamic Array Manipulation​

Source Code

1array arr = {
2  value: [5, 3, 8, 1]
3}
4

5page
6show arr
7

8page
9arr.setColor(0, "red")
10arr.setColor(1, "red")
11

12page
13arr.setValues([3, 5, 8, 1])
14arr.setColors(["green", "green", null, null])
15

16page
17arr.addValue(9)
18arr.setColor(4, "blue")

Rendered Diagram

Array with Labels​

Source Code

1array scores = {
2  value: [85, 92, 78, 95]
3  above: "Student Test Scores"
4  below: "Spring 2024"
5}
6

7page
8show scores

Rendered Diagram

Dynamic Text with setText​

Source Code

1array arr = {
2  value: [1, 2, 3, 4]
3}
4

5page
6show arr
7

8page
9arr.setText("Array Elements", "above")
10arr.setText("Index: 0, 1, 2, 3", "below")
11

12page
13arr.setText("Modified Array", "above")
14arr.above.setFontWeight("bold")
15arr.below.setColor("gray")
16

17page
18// remove bottom text
19arr.setText(null, "below")
20arr.setText("Size: 4", "right")

Rendered Diagram

Use Cases​

Arrays are ideal for:

  • Sorting algorithms - Visualize bubble sort, merge sort, etc.
  • Search algorithms - Show binary search, linear search
  • Algorithm analysis - Demonstrate time/space complexity
  • Data processing - Show filtering, mapping operations
  • Index-based operations - Array access patterns