Epic 24 x 24 matrix designs

Processing for Pi
1

We are building a giant light display to teach kids how to code at our local library. The display is 3.5 metres high and 3.5 metres wide - made up of a matrix of 24 x 24 block pixels, and powered by sending Processing code to a Raspberry Pi. Does anyone have any current examples that we could use as a demo or to showcase what Processing can do?? Thanks heaps!

1 Like
2

Are these pixels LEDs that are on/off, monochrome, full color…?

Will this be hooked up like a very low resolution display, or will it be controlled via pins / serial?

Will students be programming on the PI, or are they programming and testing on a normal desktop and then those sketches are transferred /adapted to the PI?

3

Some things to do with a 24Ă—24 pixel wall:

  • patterns (checkerboards, nested rectangles or diamonds, grids and diagonals, etc)
  • animated patterns
  • rain
  • random static
  • a binary clock
  • bar chart
  • large alphabet, one letter at a time
  • Rorschach icon generation / random space Invaders
  • games: pong, breakout, endless runner, atari 2600 era (maze, adventure), debt hole (gradius), flappy bird, dance dance revolution, etc
4

Example for animation of a “3” and a rectangle

Jeremy’s questions remain valid

//vars
PFont myFont;

float s=1; 
float x1, y1;

int phase=0;

int xStart;

float rectangleSize = 0;

int upperBorder=0;

int timer; 

float angleRect=0; 

void setup() {
  size(1500, 500, P2D);
  background(0);

  x1=width/2;
  y1=height/2;

  xStart=width+8;

  myFont = createFont("ARIAL", 34);
  textFont(myFont);
  textAlign(CENTER, CENTER);
  textMode(SHAPE);
}

void draw() {
  background(0);

  animate1();
}//draw

// ------------------------------------------------------------------------------

void animate1() {

  pushMatrix(); 

  switch(phase) {

  case 0:
    // show 3 
    if (xStart>width/2) { 
      text("3", 
        xStart, y1);
      xStart-=3;
    } else
    {
      phase=1;
    }
    break; 

    // ---

  case 1:
    // show 3 grow 
    translate(x1, y1);
    scale (s);
    text("3", 
      0, 0);
    s+=.1;
    if (s>11) 
    {
      phase = 2;
    }
    break; 

    // ---

  case 2:
    // show 3 shrink
    translate(x1, y1);
    scale (s);
    text("3", 
      0, 0);
    s-=.1;
    if (s<=1) 
    {
      phase = 3;
    }
    break;

    // ---

  case 3:
    // show 3 go left 
    if (xStart>-12) { 
      text("3", 
        xStart, y1);
      xStart-=3;
    } else {
      phase=4;
    }
    break;

    // ---
  case 4: 
    //rectangle green 
    fill(0, 255, 0);
    rectMode(CENTER);
    rect(width/2, height/2, 
      rectangleSize, rectangleSize);
    rectangleSize+=3;
    if (rectangleSize>444) { 
      phase++;
    }
    break;

  case 5:
    //rectangle red shrink 
    noFill(); 
    stroke(255, 2, 2);
    strokeWeight(9);
    rect(width/2, height/2, 
      rectangleSize, rectangleSize);
    rectangleSize-=2;
    if (rectangleSize<=0) { 
      phase=6;
      timer=millis();
    }
    break; 

  case 6:
    //rectangle grows red 
    rectangleSize=0;
    for (int i=0; i<upperBorder; i++) {
      rect(width/2, height/2, 
        rectangleSize, rectangleSize);
      rectangleSize+=29;
    }//for
    // slowly grow the rect
    if (millis()-timer>230) {
      upperBorder++;
      if (upperBorder<22) 
        timer=millis();
    }//if
    if (upperBorder>=22) {
      upperBorder=22;
      if (millis()-timer > 1700)  // wait  
        phase++;
    }//if
    break;

  case 7:
    //rectangle rotates
    pushMatrix(); 
    rectangleSize=0;
    translate(width/2, height/2); 
    rotate(angleRect); 
    for (int i=0; i<upperBorder; i++) {
      rect(0, 0, 
        rectangleSize, rectangleSize);
      rectangleSize+=29;
    }
    angleRect+=0.032;
    popMatrix(); 
    break; 

  default:
    //Error
    println("Error");
    break; 
    //
  }//switch 

  popMatrix();
}

void mousePressed() {
  //
}
//