Moving 'a'

PFont font;
PGraphics pg;

void setup() {
font = createFont("Geneva.dfont", 1000);
size(800, 800, P2D);
pg = createGraphics(800, 800, P2D);
}

void draw() {
background(0);

// PGraphics

pg.beginDraw();
pg.background(0);
pg.fill(153,193,133);
pg.textFont(font);
pg.textSize(75);
pg.pushMatrix();
pg.translate(width/2, height/2-215);
pg.textAlign(CENTER, CENTER);
pg.text("technology", 0, 0);
pg.text("and", 0, 75);
pg.text("empathy", 0, 150);
pg.popMatrix();
pg.endDraw();

int tilesX = 12;
int tilesY = 12;

int tileW = int(width/tilesX);
int tileH = int(height/tilesY);

for (int y = 0; y < tilesY; y++) {
for (int x = 0; x < tilesX; x++) {

// WARP
int wave = int(sin(frameCount * 0.05 + ( x * y ) * 0.07) * 100);

// SOURCE
int sx = x*tileW;
int sy = y*tileH;
int sw = tileW;
int sh = tileH;

// DESTINATION
int dx = x*tileW + wave;
int dy = y*tileH;
int dw = tileW;
int dh = tileH;

copy(pg, sx, sy, sw, sh, dx, dy, dw, dh);

}
}
}

Code

Video Demonstration

The code essentially cuts the background into tiles and moves them from side to side. When text is added onto the code, the words reveal the tiles, and the compressing and expanding movement of the tiles can be observed thoroughly. The tiles can be adjusted by size as well as its source and destination. This code uses functions such as PFont(), int, createGraphics and translate() to accomplish such movement. I modified the original code by changing the text to something that we had been working on which was empathy and technology. Originally the colour of the text was simply white but since the text regarded empathy, I wanted to change the colour to something ‘softer’. This is why I chose green for the colour of the text. Unlike the original code which shows one letter, I changed the size of the tiles so that the text could be read easier. I did this by decreasing the variables int tilesX and int tilesY from 16 to 12. I had to experiment with the different tile sizes to find one that I was satisfied with. I went through the process of trial and error in order to place the words correctly on the screen. Because they are three separate texts, I wanted to place them below each other. It took a while to get everything centred and all the space right.

(click the functions underlined to learn more about them)

Moving 'a'

Code

Video Demonstration

Functions