Coding Math Episode 58: Array Math

Introduction

• Covering tips and tricks for working with arrays, particularly math-related ones.
• Review basics of arrays, then dive into more advanced topics.

Basics of Arrays

• Definition: A collection of values stored in a single object.
• Distinguishing Feature: Accessible by numerical index.
• Implementation Variations: In some languages: Arrays hold only a single type of data; in other languages (e.g., JavaScript), arrays can hold multiple types.
• Methods for Manupulation:
  • Some languages require special methods like array.get(3), array.set(3, 'foo').
  • In JavaScript: array[3] = 'foo' to set, value = array[3] to get.
• Creating Arrays:
  • JavaScript: new Array() or [] for an empty array.
  • Most arrays are zero-indexed.

Looping Through Arrays

For Loop

• Structure:
  • Initialization block
  • Condition checked before each iteration
  • Afterthought executed after each iteration
• Traditional For Loop: for (var i = 0; i < array.length; i++) { // Access array[i] }
• Optimization Trick: Store array length in a variable to potentially speed up access. Modern optimizations make this negligible.
• Example: var len = array.length; for (var i = 0; i < len; i++) { // Access array[i] } ``

While Loop

• Set up parameters manually. var i = 0; while (i < array.length) { // Access array[i] i++; }

ForEach Loop

• Functional reactive programming approach.
• Performance Consideration: Slower compared to for loop for large arrays. array.forEach(function(element) { // Do something with element });

Reverse Looping

• Loop in reverse, useful for removing items in a loop.
• Example: for (var i = array.length - 1; i >= 0; i--) { if (array[i] === 5) { array.splice(i, 1); } }

Two-Dimensional Arrays

• Concept: Array where each element is another array.
• Example: var grid = []; for (var i = 0; i < 10; i++) { grid[i] = []; }
• Accessing Elements: grid[2][3] accesses the element in the 3rd row and 4th column.
• Flattening for Performance: Use a single-dimensional array.
  • Index Calculation: row * numCols + col
  • Example Functions: get and set
  function get(col, row) { return grid[row * numCols + col]; } function set(col, row, value) { grid[row * numCols + col] = value; }
• HTML5 Canvas Application: Storing pixel values as RGBA.
  • Index Calculation for Canvas:
    • 4 * (y * width + x)
    • Accessing channels: index for red, index + 1 for green, index + 2 for blue, index + 3 for alpha.

Comparing Elements Within an Array

• Use Case: Particle systems, collision detection.
• Node Garden Example: Connect nodes within a certain distance.
  • Unoptimized: Checking each pair twice, including unnecessary self-checks.
  • Optimized: Use nested loops starting from i + 1.
  for (var i = 0; i < nodes.length - 1; i++) { for (var j = i + 1; j < nodes.length; j++) { // Compare nodes[i] with nodes[j] } }
• Additional Optimization: Vary line width based on distance for visual effects. var widthFactor = (1 - (dist / maxDist));

Conclusion

• Review of basic and advanced techniques for working with arrays, particularly in JavaScript.
• Applications include iterating, manipulating, and optimizing arrays for performance.
• Highlighted example applications in graphics and functional programming.