Introduction

Arranging felt tip pens in a grid so adjacent pens are visually similar is a practical optimization problem. It appears simple, but the number of possible layouts grows quickly as pen count increases. A good solution balances quality and runtime by combining a clear similarity metric with a heuristic search algorithm.

Model The Problem

Represent each pen as a feature vector, usually RGB values from its color. Define a grid with fixed rows and columns, then define a score that rewards similar neighbors.

One common objective is minimizing total neighbor distance.

1function colorDistance(a, b) {
2  const dr = a.r - b.r;
3  const dg = a.g - b.g;
4  const db = a.b - b.b;
5  return Math.sqrt(dr * dr + dg * dg + db * db);
6}
7
8function gridScore(grid, rows, cols) {
9  let score = 0;
10  const idx = (r, c) => r * cols + c;
11
12  for (let r = 0; r < rows; r++) {
13    for (let c = 0; c < cols; c++) {
14      const cur = grid[idx(r, c)];
15      if (c + 1 < cols) score += colorDistance(cur, grid[idx(r, c + 1)]);
16      if (r + 1 < rows) score += colorDistance(cur, grid[idx(r + 1, c)]);
17    }
18  }
19  return score;
20}

Lower score means better local color continuity.

Start With A Fast Baseline

A simple baseline is sorting by hue and filling the grid row by row. This is not optimal, but it gives a strong starting point for local optimization.

1function rgbToHue(p) {
2  const r = p.r / 255, g = p.g / 255, b = p.b / 255;
3  const max = Math.max(r, g, b), min = Math.min(r, g, b);
4  const d = max - min;
5  if (d === 0) return 0;
6  let h;
7  if (max === r) h = ((g - b) / d) % 6;
8  else if (max === g) h = (b - r) / d + 2;
9  else h = (r - g) / d + 4;
10  return (h * 60 + 360) % 360;
11}
12
13function baselineLayout(pens) {
14  return [...pens].sort((a, b) => rgbToHue(a) - rgbToHue(b));
15}

Good baselines reduce search time later.

Improve With Simulated Annealing

Because exact optimization is expensive, simulated annealing is a practical heuristic. Randomly swap two pens, accept better swaps always, and sometimes accept worse swaps early to escape local minima.

1function randomInt(max) {
2  return Math.floor(Math.random() * max);
3}
4
5function anneal(layout, rows, cols, iterations = 20000) {
6  let current = [...layout];
7  let best = [...layout];
8  let currentScore = gridScore(current, rows, cols);
9  let bestScore = currentScore;
10
11  let temp = 50;
12  const cooling = 0.9995;
13
14  for (let i = 0; i < iterations; i++) {
15    const a = randomInt(current.length);
16    let b = randomInt(current.length);
17    if (a === b) b = (b + 1) % current.length;
18
19    [current[a], current[b]] = [current[b], current[a]];
20    const nextScore = gridScore(current, rows, cols);
21    const delta = nextScore - currentScore;
22
23    const accept = delta < 0 || Math.random() < Math.exp(-delta / temp);
24    if (accept) {
25      currentScore = nextScore;
26      if (nextScore < bestScore) {
27        bestScore = nextScore;
28        best = [...current];
29      }
30    } else {
31      [current[a], current[b]] = [current[b], current[a]];
32    }
33
34    temp *= cooling;
35    if (temp < 0.001) temp = 0.001;
36  }
37
38  return { best, bestScore };
39}

This approach performs well for medium grid sizes in browser or Node environments.

Practical UX Additions

If the goal is physical organization, exact global optimum may not be necessary. Users often prefer visually smooth gradients and grouped color families. Add domain constraints such as keeping brand groups together or reserving edge slots for special pens.

For interactive tools, show score improvements live and let users lock favorite positions before rerunning optimization.

Performance Considerations

For larger collections, recomputing full grid score after every swap can be costly. Optimize by recalculating only affected neighbor edges. This local delta update significantly reduces runtime.

Parallel search with multiple random seeds also helps. Run several annealing attempts and keep the best layout.

Common Pitfalls

• Using a similarity metric that does not match human color perception.
• Starting search from random layout only and wasting iterations.
• Recomputing full score for each swap in large grids.
• Treating one run as final without multi seed comparison.
• Ignoring practical constraints such as fixed positions or categories.

Summary

• Model pen arrangement as minimizing neighbor color distance in a grid.
• Build a baseline layout first, then optimize with heuristics.
• Simulated annealing is a practical method for large search spaces.
• Improve performance with local score updates and multi seed runs.
• Include user constraints for solutions that are both optimal and usable.