Weeks 3 and 4 Deliverables

Detail image

Detail image

Detail image

Detail image

Detail image

Detail image

Kinetic Typography Tutorial

Detail image

Detail image

Kinetic Typography Code


PGraphics pg;
PFont font;
import processing.serial.*;

Serial myPort;


void setup() {
  
  font = createFont("Helvetica",600);
  size(800,800,P2D);
  pg = createGraphics(800,800, P2D);
  
}

void draw() {
  
  
  pg.beginDraw();
  pg.background(0);
  pg.fill(255);
  pg.textFont(font);
  pg.textSize(mouseX);
  
  pg.pushMatrix();
  pg.translate(width/2, height/2);
  pg.textAlign(CENTER, CENTER);
  pg.text("a",0,0);
  pg.popMatrix();
  
  pg.endDraw();
  
  
  image(pg,0,0);
  
  int tilesX = 8;
  int tilesY = 8;
  int sinx = int(sin(frameCount*0.01));
  
  int tileW = int(width/tilesX);
  int tileH = int(height/tilesY);
  
  for (int y = 0; y < tilesY; y++) {
    for (int x = 0; x < tilesX; x++) {
      
   
      int wave = int(sin(frameCount*0.005*(tileW*y))*10); //changing here creates tremble
      
      //SOURCE
      int sx = x*tileW + wave;
      int sy = y*tileH; 
      int sw = tileW + wave;
      int sh = tileH;
      
      //DESTINATION
      int dx = x*tileW;
      int dy = y*tileH;
      int dw = tileW;
      int dh = tileH;
      
      copy(pg, sx, sy, sw, sh, dx, dy, dw, dh);
        
  }

  } 
}

Detail image