Theme: Arrays as Creative Containers of Information

In Session 4, we explored how arrays store sets of values — colors, sizes, positions, even rows from CSV files or API responses — and how loops allow us to visualize those collections.

This assignment asks you to turn a dataset (your own array OR an external file/API) into a creative, meaningful visualization using arrays + loops.

BASIC TRACK — Build a Visualization from Hand-Made Arrays

Goal: Use arrays you create (colors, sizes, positions, labels, etc.) and visualize them using a loop.

Starter Code

// Session 4 — Array Visualization (Basic)
// Goal: Store multiple related values in arrays & draw them with a loop.

let arrCol = [];
let arrSize = [];

function setup() {
  createCanvas(400, 400);

  // fill array with colors
  arrCol[0] = "red";
  arrCol[1] = "blue";
  arrCol[2] = "green";

  // fill array with random sizes
  for (let j = 0; j < arrCol.length; j++) {
    arrSize[j] = random(40, 120);
  }
}

function draw() {
  background(220);

  // visualize arrays
  for (let i = 0; i < arrCol.length; i++) {
    fill(arrCol[i]);
    circle(100 + i * 100, height / 2, arrSize[i]);
  }
}

Requirements

• Create at least two arrays of the same length (e.g., colors + sizes, x + y positions, names + scores).
• Draw a set of shapes using a loop that reads from your arrays.
• Use each array to control a different visual attribute:
  • color, size, position, label, rotation, etc.
• Add comments explaining your choices.

Extensions

• Add a third array (e.g., shape type, opacity, stroke weight).
• Create interaction: mousePressed() adds a new value to the arrays.
• Sort an array (e.g., largest → smallest) and redraw the visualization.
• Make each element animate (grow, fade, drift).

Reflection Questions