Code

BImage b;

float data[][][] = new float [26][10][2];    //26 letters; 10 magnets; x and y placement;

shape LW,LB1,LB2,LB3,LB4,BB,s1,s2,d1,d2,BGcirc, BG;
shape[] shapes = {LB1,LB2,LB3,LB4,LW,BB,s1,s2,d1,d2,BGcirc,BG};

final float FRICTION = 0.15;

//*******************************************
void setup(){
  size(670,300);
  background(51);
  b = loadImage("batman.jpg");

  shapes[0] = new shape(0, 0, 200, 51,51,51, true, false);        //BB
  shapes[1] = new shape(0, 0, 100, 51,51,51, true, false);        //LB1
  shapes[2] = new shape(0, 0, 100, 51,51,51, true, false);        //LB2
  shapes[3] = new shape(0, 0, 100, 51,51,51, false, false);       //LB3
  shapes[4] = new shape(0, 0, 100, 51,51,51, false, false);       //LB4
  shapes[5] = new shape(0, 0, 100, 255,255,255, true, false);     //LW

  shapes[6] = new shape(0, 0, 250, 51,51,51, false, false);       //s1
  shapes[7] = new shape(0, 0, 250, 51,51,51, false, false);       //s2

  shapes[8] = new shape(0,0, 150, 51,51,51, false, true);         //d1
  shapes[9] = new shape(0,0, 150, 51,51,51, false, true);         //d2

  shapes[10]= new shape(250,350, 350, 255,255,255, true, false);  //BGcirc

}

//*******************************************
void loop(){
  background(51);
  Batman();
  image(b,260, 170);
}

//*******************************************
void drawStuff(){
  fill(51);
  rectMode(CORNER);
  rect(0,0,500,700);
  for(int i = 10; i>=0; i--){
    shapes[i].render();
  }
}

//*******************************************
class PhysicalThing {
  float px,py;
  float vx, vy;
}

//*******************************************
class magnet extends PhysicalThing {
  /*
  not using anything in this because i'm not using magnets
  to draw these letters... magnets are just for transitions.
  */
}

//*******************************************
class shape extends PhysicalThing {
  int shapeSize;
  int redColor;
  int greenColor;
  int blueColor;
  boolean isCircle;
  boolean isQuad;

  shape(float x, float y, int Size, int colr, int colg, int colb, boolean isCirc, boolean isQ){
    px = x;
    py = y;
    vx = vy = 0;
    shapeSize = Size;
    redColor = colr;
    greenColor = colg;
    blueColor = colb;
    isCircle = isCirc;
    isQuad = isQ;
  }

  void render(){
    if (isCircle == true){                              //to make circles
      ellipseMode(CENTER_DIAMETER);
      noStroke();
      fill(redColor, greenColor, blueColor);
      ellipse(px,py, shapeSize, shapeSize);
    }
    else if (isCircle == false && isQuad == false){    //to make squares
      rectMode(CENTER_DIAMETER);
      noStroke();
      fill(redColor, greenColor, blueColor);
      rect(px,py, shapeSize, shapeSize);
    }

    else if (isCircle == false && isQuad == true){     //to make diamonds
      fill(redColor, greenColor, blueColor);
      quad(px,py-shapeSize, px+shapeSize,py, px,py+shapeSize, px-shapeSize,py);
    }
  }
  void setPositions(int letter, int mag){
    px = data[letter][mag][0];
    py = data[letter][mag][1];
  }

}

//*******************************************
void Batman(){
int myArr[] = {1,0,19,12,0,13};            //assigning the values of the letters for "batman" in an array
  fillArrayData();

  for(int i = 0; i < 6; i++){
    for(int j = 0; j<10; j++){
      push();

      translate((i * 110), 0);
      shapes[j].setPositions(myArr[i], j);
      scale(.2);

      drawStuff();

      pop();
    }
  }
}

/*******************************************
fills array
*******************************************/
void fillArrayData(){

  //---------------------------A
  data[0][0][0] = 250;
  data[0][0][1] = 500;
  data[0][1][0] = 250;
  data[0][1][1] = 300;
  data[0][5][0] = 100;
  data[0][5][1] = 250;
  //---------------------------B
  data[1][1][0] = 250;
  data[1][1][1] = 430;
  data[1][2][0] = 250;
  data[1][2][1] = 270;
  data[1][5][0] = 130;
  data[1][5][1] = 240;
  data[1][6][0] = 0;
  data[1][6][1] = 350;
  data[1][9][0] = 510;
  data[1][9][1] = 350;
  //---------------------------C
  data[2][0][0] = 370;
  data[2][0][1] = 350;
  data[2][5][0] = 0;
  data[2][5][1] = 0;
  //---------------------------D
  data[3][1][0] = 270;
  data[3][1][1] = 350;
  data[3][5][0] = 155;
  data[3][5][1] = 220;
  data[3][6][0] = 0;
  data[3][6][1] = 350;
  //---------------------------E
  data[4][3][0] = 350;
  data[4][3][1] = 420;
  data[4][4][0] = 350;
  data[4][4][1] = 280;
  data[4][5][0] = 155;
  data[4][5][1] = 220;
  data[4][6][0] = 0;
  data[4][6][1] = 350;
  data[4][7][0] = 500;
  data[4][7][1] = 350;
  //---------------------------F
  data[5][0][0] = 350;
  data[5][0][1] = 490;
  data[5][1][0] = 405;
  data[5][1][1] = 310;
  data[5][3][0] = 450;
  data[5][3][1] = 370;
  data[5][4][0] = 370;
  data[5][4][1] = 310;
  data[5][6][0] = 0;
  data[5][6][1] = 350;
  data[5][7][0] = 250;
  data[5][7][1] = 100;
  //---------------------------G
  data[6][0][0] = 350;
  data[6][0][1] = 315;
  data[6][1][0] = 400;
  data[6][1][1] = 370;
  data[6][5][0] = 380;
  data[6][5][1] = 465;
  //---------------------------H
  data[7][3][0] = 250;
  data[7][3][1] = 200;
  data[7][4][0] = 250;
  data[7][4][1] = 500;
  data[7][6][0] = 0;
  data[7][6][1] = 350;
  data[7][7][0] = 499;
  data[7][7][1] = 350;
  //---------------------------I
  data[8][5][0] = 250;
  data[8][5][1] = 70;
  data[8][6][0] = 5;
  data[8][6][1] = 350;
  data[8][7][0] = 495;
  data[8][7][1] = 350;
  //---------------------------J
  data[9][0][0] = 110;
  data[9][0][1] = 250;
  data[9][5][0] = 250;
  data[9][5][1] = 70;
  data[9][7][0] = 500;
  data[9][7][1] = 350;
  //---------------------------K
  data[10][1][0] = 250;
  data[10][1][1] = 200;
  data[10][2][0] = 250;
  data[10][2][1] = 500;
  data[10][6][0] = 0;
  data[10][6][1] = 350;
  data[10][8][0] = 480;
  data[10][8][1] = 350;
  //---------------------------L
  data[11][0][0] = 365;
  data[11][0][1] = 260;
  data[11][6][0] = 0;
  data[11][6][1] = 350;
  data[11][7][0] = 250;
  data[11][7][1] = 600;
  //---------------------------M
  data[12][1][0] = 190;
  data[12][1][1] = 455;
  data[12][2][0] = 310;
  data[12][2][1] = 455;
  data[12][5][0] = 120;
  data[12][5][1] = 230;
  data[12][6][0] = 250;
  data[12][6][1] = 600;
  data[12][8][0] = 250;
  data[12][8][1] = 100;
  //---------------------------N
  data[13][0][0] = 250;
  data[13][0][1] = 480;
  data[13][5][0] = 120;
  data[13][5][1] = 230;
  //---------------------------O
  data[14][1][0] = 250;
  data[14][1][1] = 350;
  //---------------------------P
  data[15][6][0] = 380;
  data[15][6][1] = 520;
  data[15][1][0] = 250;
  data[15][1][1] = 295;
  data[15][7][0] = 0;
  data[15][7][1] = 350;
  //---------------------------Q
  data[16][1][0] = 250;
  data[16][1][1] = 350;
  data[16][5][0] = 360;
  data[16][5][1] = 490;
  //---------------------------R
  data[17][1][0] = 250;
  data[17][1][1] = 320;
  data[17][2][0] = 410;
  data[17][2][1] = 370;
  data[17][5][0] = 155;
  data[17][5][1] = 220;
  data[17][6][0] = 1;
  data[17][6][1] = 350;
  data[17][8][0] = 260;
  data[17][8][1] = 600;
  //---------------------------S
  data[18][8][0] = 400;
  data[18][8][1] = 300;
  data[18][9][0] = 100;
  data[18][9][1] = 400;
  //---------------------------T
  data[19][6][0] = 70;
  data[19][6][1] = 450;
  data[19][7][0] = 430;
  data[19][7][1] = 450;
  //---------------------------U
  data[20][0][0] = 250;
  data[20][0][1] = 250;
  //---------------------------V
  data[21][8][0] = 250;
  data[21][8][1] = 200;
  //---------------------------W
  data[22][1][0] = 185;
  data[22][1][1] = 245;
  data[22][2][0] = 315;
  data[22][2][1] = 245;
  data[22][6][0] = 250;
  data[22][6][1] = 100;
  data[22][8][0] = 250;
  data[22][8][1] = 585;
  //---------------------------X
  data[23][1][0] = 250;
  data[23][1][1] = 200;
  data[23][2][0] = 250;
  data[23][2][1] = 500;
  data[23][8][0] = 30;
  data[23][8][1] = 350;
  data[23][9][0] = 470;
  data[23][9][1] = 350;
  //---------------------------Y
  data[24][0][0] = 250;
  data[24][0][1] = 200;
  data[24][1][0] = 100;
  data[24][1][1] = 400;
  data[24][6][0] = 500;
  data[24][6][1] = 350;
  //---------------------------Z
  data[25][8][0] = 400;
  data[25][8][1] = 400;
  data[25][9][0] = 100;
  data[25][9][1] = 300;
  data[25][6][0] = 250;
  data[25][6][1] = 100;
  data[25][7][0] = 250;
  data[25][7][1] = 600;
}

054 -- Typeset Word: Dynamic Typography

Statement:Develop a function which applies an expressive time-based transformation to your letters. This could be a function like "explode(char c)", which causes its graphical components to fly appart, or "shimmy(char c)" which causes it to wiggle in place. Develop a transformation that suits your alphabet well; then typeset an appropriate word using this technique.

hide statement