CODE 7
PFont font;
PGraphics pg;
void setup() {
font = createFont("SentyWen", 600);
size(800, 800, P2D);
pg = createGraphics(800, 800, P2D);
}
void draw() {
background(204,236,239);
// PGraphics
pg.beginDraw();
pg.background(204,236,239);
pg.fill(255);
pg.textFont(font);
pg.textSize(800);
pg.pushMatrix();
pg.translate(width/2, height/2-215);
pg.textAlign(CENTER, CENTER);
pg.text("n", 0, 0);
pg.popMatrix();
pg.endDraw();
int tilesX = 9;
int tilesY = 9;
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.12 + ( 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 7
Explanation
This code is a text animation code. The letter in this code is split into different tiles so that it will be moving around circulating. Same as the other code, the first part of the code is use to declare the font of the letter and the size of the screen.
int tilesX = 9;
int tilesY = 9;
int tileW = int(width/tilesX);
int tileH = int(height/tilesY);
for (int y = 0; y < tilesY; y++) {
for (int x = 0; x < tilesX; x++) {
// 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);
}
}
This part of the code defines the tiles of the letter 'n'. Then, the following line defines the speed of the movement and finally identify where the tiles will end and start.
Original Code
Original Code
Modifications
1) Increasing the speed by increasing:
int wave = int(sin(frameCount * 0.05 + ( x * y ) * 0.07) * 100);
to
int wave = int(sin(frameCount * 0.12 + ( x * y ) * 0.07) * 100);
2) Change the letter by changing:
pg.text("a", 0, 0);
to
pg.text("n", 0, 0);
3) Change the font by changing:
font = createFont("Andale Mono.ttf", 600);
to
font = createFont("SentyWen", 600);
4) Decreasing the number of tiles:
int tilesX = 16;
int tilesY = 16;
to
int tilesX = 9;
int tilesY = 9;
5) Changing background colour:
pg.background(0);
to
pg.background(204,236,239);
PFont font;
PGraphics pg;
void setup() {
font = createFont("Andale Mono.ttf", 600);
size(800, 800, P2D);
pg = createGraphics(800, 800, P2D);
}
void draw() {
background(0);
// PGraphics
pg.beginDraw();
pg.background(0);
pg.fill(255);
pg.textFont(font);
pg.textSize(800);
pg.pushMatrix();
pg.translate(width/2, height/2-215);
pg.textAlign(CENTER, CENTER);
pg.text("a", 0, 0);
pg.popMatrix();
pg.endDraw();
int tilesX = 16;
int tilesY = 16;
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);
}
}
}