Processing-Tutorial: Kinetic Typography 1

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

In the last years i’ve observed a new tendency in typography and graphic design which has been made possible by the rise of affordable animation-software like Adobe After Effects, variable fonts and more accessible tools in Creative Coding: Kinetic Typography is the new kid in town, an umbrella term for moving, flexible typographic systems.

Some good examples: The whole work by DIA studio and the crazy cool AR-app “Weird Type” by Zach Lieberman.

In this tutorial i wanna show you a fancy approach on animating type. Our application will segment a simple lettering into rectangular pieces and shift each snippet slightly different on the horizontal axis. To do so, we will utilize a two-dimensional grid and put a sine-wave into it. Ready? Let’s go!

Download this tutorial with all assets on Github

The copy()-function

If we want to copy the pixels of a defined area to another, the copy-function is the right tool for us. In its simplest form it takes 8 arguments: The first four integer-values define the area that we want to copy. The last four define the destination. For clarity I will use variables in this tutorial.

// SOURCE
int sx = 0;
int sy = 0;
int sw = 100;
int sh = 100;

// DESTINATION
int dx = 100;
int dy = 100;
int dw = 200;
int dh = 200;

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

To get the best results and prevent visual feedback, we can put another parameter in there, which defines the template, we want to copy the pixels from. So instead of getting the pixels directly from the sketch, we use another surface like an image or a PGraphics-object as a reference, which can be passed as an additional argument into the first place of the copy-function.

a digital passepartout

In the example above i copy an area of an PImage-surface to my sketch-window. The mouse-position controls the coordinates of the source.

int sx = mouseX+150;
int sy = mouseY+150;
int sw = 150;
int sh = 150;

// DESTINATION
int dx = width/2-125;
int dy = height/2-125;
int dw = 250;
int dh = 250;

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

In our kinetic type-experiment we wanna do exactly the same, but with multiple elements in a two-dimensional grid. Let’s wrap up the actual sketch to get going.

Preparing the sketch

First we have to create and initialize the PGraphics-object we want to use as a template. Then we create and initialize a PFont. Note: Make sure that you’ve copied the font-file to the data-folder!

PGraphics pg;
PFont font;

void setup() {
  font = createFont("RobotoMono-Regular.ttf", 600);
  size(800, 800, P2D);
  pg = createGraphics(800, 800, P2D);
}

Next we put the lettering onto the PGraphics-element inside the draw-function and center it.

Just in case you have never worked with PGraphics: It is comparable with a layer in Photoshop, so it can be treated as an independent sketch in our actual sketch. It is a very powerful tool to manage complexity and to crop things. As always: Look up the reference if you’re stuck here!

void draw() {
  background(0);
  pg.beginDraw();
  pg.background(0);
  pg.fill(255);
  pg.textFont(sansBlack);
  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();
}

Now if we hit the run-button we won’t see anything, because we do not draw the PGraphics-element anyway. Let’s do this quickly using the image-function, so we can check if everything is sitting in the right place.

image(pg,0,0);

So far so good. What we have to do now is wrapping up a two-dimensional for-loop to create a grid. But before we need to define the number of tiles that we want to get vertically and horizontally, which we can use to calculate the correct dimensions. Let’s start with 8 tiles on both on the x- and the y-axis.

  int tilesX = 8;
  int tilesY = 8;

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

  for (int y = 0; y < tilesY; y++) {
    for (int x = 0; x < tilesX; x++) {
      ...
    }
  }
Note: I’ve added a grid of rectangles to visualize what we are doing here.

Next let’s place the copy-function into the grid and put the tile-dimensions and -positions into the right places.

  int tilesX = 8;
  int tilesY = 8;

  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;
      int dy = y*tileH;
      int dw = tileW;
      int dh = tileH;
      
      copy(pg, sx, sy, sw, sh, dx, dy, dw, dh);

    }
  }

If we run the sketch now, we’ll see a white, lowercase “a” on our window. Nothing fancy seems to happen here. Why is that?

Actually we are already copying the tiles to the appropriate positions, but we don’t do anything with them. If you look at the code above, you’ll see that the source-values are equal to the destination-values. So what we have to do now is writing a logic that tells the elements how to move.

We can either manipulate the source or the destination. Both approaches can produce totally diverse and interesting effects. To keep things simple, we’ll play with the source coordinates (sx and sy) in this tutorial.

Pushing a wave through the grid

Now it’s time to define a variable that represents the distortion-effect. That variable has to be inside of the nested for-loop and it has to differ slighty in each iteration. If the output of this variable is too chaotic, it will produce random-like effects. That’s not exactly what we want. Our aim is to get a smooth movement and that’s why we’ll use the sin()-function, controlled by the frameCount and the coordinates inside our loop.

int wave = int(sin(frameCount * 0.01 + ( x * y )) * 30);

If you have never worked with the sin()-function yet, don’t worry. It produces a value between -1 and 1 and takes a number as an argument to control its phase. Look up the Processing-reference if you are stuck here. Understanding how waves work in Processing is extremely helpful for a variety of things, especially if you work on animations.

Last but not least we’ll mix the wave-variable into the source-x-coordinate.

int sx = x*tileW + wave;

Here’s the complete code

PFont font;
PGraphics pg;

void setup() {
  font = createFont("RobotoMono-Regular.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 + wave;
      int sy = y*tileH;
      int sw = tileW;
      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);

    }
  }
}

That’s it!

We’re done! I hope you understand everything properly. If you have any recommendations for this tutorial, feel free to get in touch with me. And of course i would love to see what kind of visuals you come up with. Drop me a line!

post@timrodenbroeker.de

Happy coding!

Download this tutorial with all assets on Github

Published by Tim on Tuesday April 16, 2019

Last modified on October 19th, 2020 at 11:56


Comments

No comments found.

Related

25. September 2020

Processing-Tutorial – Programming Posters

Some of you have asked for it, so here it is: A raw and uncut tutorial in which I explain […]

4. September 2020

Bauhaus 101 – A beginners Processing Tutorial

Hi and welcome to this very condensed and quick tutorial that aims to get you amazed for Creative Coding in […]

20. August 2020

How to use p5.js with Visual Studio Code

In this short tutorial i explain how you can use p5.js with Visual Studio Code. For this purpose, i’ll use […]

17. August 2020

Exporting Videos from Processing

This best practice makes it easy to export videos from Processing. Before you start, make sure you have the VideoExport-library […]

27. July 2020

The Magic Triangle

The Magic Triangle is a powerful creativity technique that can be applied to many different areas.

20. March 2020

Processing-Tutorial: Rasterize 3D

In this tutorial I show you how to create abstract 3D portraits from any image file. Here you will learn […]

6. December 2019

Processing-Tutorial: Image-Rasterizer

Level: Beginner & intermediate In this tutorial i’ll guide you through all the necessary steps to rasterize an image with […]

4. November 2019

Processing-Tutorial: WAVES pt. 1

This is the first part of a brand new tutorial-series about Waves, a fundamental skill and feature in Generative Design […]

1. August 2019

p5studio

A prototype for a browser-based design-application, built with p5.js and vue.js.

9. June 2019

Lifeline

A time in space-experience

14. April 2019

Processing-Tutorial: Video Export

One of the most powerful features of Processing in comparison to all web-based approaches and frameworks (like p5.js) is the […]

1. March 2019

How to rasterize an image with Processing

In this post i’ll teach you how to access the data of an image and how to use it to […]

23. November 2018

Programming Posters

Creative Coding in the realms of Graphic Design

22. September 2018

La Luz Negra

Custom design-software for CCCB Barcelona

8. August 2018

The Bach-Project

Generative visuals made from the “Prelude in C” by Johann Sebastian Bach.

22. June 2018

Reflect

An interactive music experience for the web-browser

30. April 2018

The Grid

An experimental web-application, displaying news from the New York Times archive

23. November 2017

Redrawing Images

Digital, animated 3d-objects based on photographs by Ivana Marija Hope