sequencer.pde

/*
 * A simple grid sequencer, launching several effects in rhythm.
 */

float BPM = 120;
int[][] pattern = {
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 1},
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0},
  {0, 0, 0, 0, 0, 0, 0, 0}
};

OPC opc;

// Grid coordinates
int gridX = 20;
int gridY = 20;
int gridSquareSize = 15;
int gridSquareSpacing = 20;

// Timing info
float rowsPerSecond = 2 * BPM / 60.0;
float rowDuration = 1.0 / rowsPerSecond;
float patternDuration = pattern.length / rowsPerSecond;

// LED array coordinates
int ledX = 400;
int ledY = 360/2;
int ledSpacing = 15;
int ledBottom = int(ledY + 3.5 * ledSpacing);

// Images
PImage imgGreenDot;
PImage imgOrangeDot;
PImage imgPinkDot;
PImage imgPurpleDot;
PImage imgCheckers;


void setup()
{
  size(640, 360);

  imgGreenDot = loadImage("greenDot.png");
  imgOrangeDot = loadImage("orangeDot.png");
  imgPinkDot = loadImage("pinkDot.png");
  imgPurpleDot = loadImage("purpleDot.png");
  imgCheckers = loadImage("checkers.png");

  // Connect to the local instance of fcserver. You can change this line to connect to another computer's fcserver
  opc = new OPC(this, "127.0.0.1", 7890);

  // Three 8x8 grids side by side
  opc.ledGrid8x8(0, ledX, ledY, ledSpacing, 0);
  opc.ledGrid8x8(64, ledX - ledSpacing * 8, ledY, ledSpacing, 0);
  opc.ledGrid8x8(128, ledX + ledSpacing * 8, ledY, ledSpacing, 0);
  opc.showLocations(true);

  /*
   * Set up custom color management settings. We want all of the dynamic range we can
   * get, and it's okay if the very darkest parts of the display flicker a little due to
   * the dithering. We can get this effect by setting linearCutoff to zero, to disable
   * the linear portion of the gamma curve. This makes our "flash" effect roll off very
   * smoothly, instead of stuttering right before it completely shuts off.
   *
   * For more information about these settings, see the fcserver README. This is a JSON
   * blob in the same format as used by fcserver's config file.
   */
  opc.setColorCorrection("{ \"gamma\": 2.5, \"linearCutoff\": 0.0 }");

  // If the Fadecandy board's status LED is bothersome, it's easy to turn off or repurpose.
  opc.setStatusLed(false);
}

void draw()
{
  background(0);

  float now = millis() * 1e-3;
  drawEffects(now);
  drawGrid(now);
}

void mousePressed()
{
  int gx = (mouseX - gridX) / gridSquareSpacing;
  int gy = (mouseY - gridY) / gridSquareSpacing;
  if (gx >= 0 && gx < pattern[0].length && gy >= 0 && gy < pattern.length) {
    pattern[gy][gx] ^= 1;
  }
} 

void drawGrid(float now)
{
  int currentRow = int(rowsPerSecond * now) % pattern.length;
  blendMode(BLEND);

  for (int row = 0; row < pattern.length; row++) {
    for (int col = 0; col < pattern[0].length; col++) {
      fill(pattern[row][col] != 0 ? 190 : 64);
      rect(gridX + gridSquareSpacing * col, gridY + gridSquareSpacing * row, gridSquareSize, gridSquareSize);
    }
    
    if (row == currentRow) {
      // Highlight the current row
      fill(255, 255, 0, 32);
      rect(gridX, gridY + gridSquareSpacing * row,
        gridSquareSpacing * (pattern[0].length - 1) + gridSquareSize, gridSquareSize);
    }
  }
}

void drawEffects(float now)
{
  // To keep this simple and flexible, we'll calculate every possible effect that
  // could be in progress: every grid square, and the previous/next loop of the pattern.
  // Each effect is rendered according to the time difference between the present and
  // when that grid square would fire.

  // When did the current loop of the pattern begin?
  float patternStartTime = now - (now % patternDuration);

  for (int whichPattern = -1; whichPattern <= 1; whichPattern++) {
    for (int row = 0; row < pattern.length; row++) {
      for (int col = 0; col < pattern[0].length; col++) {
        if (pattern[row][col] != 0) {
          float firingTime = patternStartTime + patternDuration * whichPattern + rowDuration * row;
          drawSingleEffect(col, now - firingTime);
        }
      }
    }
  }
}

void drawSingleEffect(int column, float time)
{
  switch (column) {

    // First four tracks: Colored dots rising from below
    case 0: drawDotEffect(column, time, imgOrangeDot); break;
    case 1: drawDotEffect(column, time, imgPinkDot); break;
    case 2: drawDotEffect(column, time, imgPurpleDot); break;
    case 3: drawDotEffect(column, time, imgGreenDot); break;

    // Spinner overlay
    case 6: drawSpinnerEffect(time, imgCheckers); break;

    // Full-frame flash effect
    case 7: drawFlashEffect(time); break;
  }
}

void drawDotEffect(int column, float time, PImage im)
{
  // Draw an image dot that hits the bottom of the array at the beat,
  // then quickly shrinks and fades.

  float motionSpeed = rowsPerSecond * 90.0;
  float fadeSpeed = motionSpeed * 1.0;
  float shrinkSpeed = motionSpeed * 1.2;
  float size = 200 - max(0, time * shrinkSpeed);
  float centerX = ledX + (column - 1.5) * 75.0;
  float topY = ledBottom - time * motionSpeed;
  int brightness = int(255 - max(0, fadeSpeed * time));

  // Adjust the 'top' position so the dot seems to appear on-time
  topY -= size * 0.4;
 
  if (brightness > 0) {
    blendMode(ADD);
    tint(brightness);
    image(im, centerX - size/2, topY, size, size);
  }
}

void drawSpinnerEffect(float time, PImage im)
{
  float t = time / (rowDuration * 8.0);
  if (t < 0 || t > 1) return;

  float angle = t * 2.5;
  float size = 400;
  int alpha = int(100 * sin(t * PI));

  pushMatrix();
  translate(ledX, ledY);
  rotate(angle);
  blendMode(ADD);
  tint(alpha);
  image(im, -size/2, -size/2, size, size);
  popMatrix();
}

void drawFlashEffect(float time)
{
  float t = time / (rowDuration * 2.0);
  if (t < 0 || t > 1) return;

  // Not super-bright, and with a pleasing falloff
  blendMode(ADD);
  fill(64 * pow(1.0 - t, 1.5));
  rect(0, 0, width, height);
}