Ascii Art (Design)

Video ascii art is areal time post processing effect that will transform any video into ASCII art. The effect is created in a shader and use Kickjs engine. You can see the ASCII shader in action on

Jan 25, 2015 19:15This is a lovely example of what someone has done to adapt the Ascii Video to be easily used by other users, simply uploading a video it will develop it to be produced with letters, the main feature of a Ascii.  To me when I look at this I am getting an impression of particles, the slight movements that the letters are making looks like the way I want to particles to react in an image, the only problem being that I think the image is too clear here, you can clearly see what is happening and I don’t want that to be the case. I want people to react to what is being displayed and try and disrupt it.

Here below is what I am working with, I have used my phone as an example of the way the camera and code react to the colours to change them into letters. I’ve added the code below.

Jan 25, 2015 19:38

* ASCII Video
* by Ben Fry.
* Text characters have been used to represent images since the earliest computers.
* This sketch is a simple homage that re-interprets live video as ASCII text.
* See the keyPressed function for more options, like changing the font size.


Capture video;
boolean cheatScreen;

// All ASCII characters, sorted according to their visual density
String letterOrder =
" .`-_':,;^=+/"|)\<>)iv%xclrs{*}I?!][1taeo7zjLu" +
char[] letters;

float[] bright;
char[] chars;

PFont font;
float fontSize = 1.5;
void setup() {
size(640, 480);

// This the default video input, see the GettingStartedCapture
// example if it creates an error
video = new Capture(this, 160, 120);

// Start capturing the images from the camera

int count = video.width * video.height;

font = loadFont("UniversLTStd-Light-48.vlw");

// for the 256 levels of brightness, distribute the letters across
// the an array of 256 elements to use for the lookup
letters = new char[256];
for (int i = 0; i < 256; i++) {
int index = int(map(i, 0, 256, 0, letterOrder.length()));
letters[i] = letterOrder.charAt(index);

// current characters for each position in the video
chars = new char[count];

// current brightness for each point
bright = new float[count];
for (int i = 0; i < count; i++) {
// set each brightness at the midpoint to start
bright[i] = 128;
void captureEvent(Capture c) {;
void draw() {


float hgap = width / float(video.width);
float vgap = height / float(video.height);

scale(max(hgap, vgap) * fontSize);
textFont(font, fontSize);

int index = 0;
for (int y = 1; y < video.height; y++) {

// Move down for next line
translate(0, 1.0 / fontSize);

for (int x = 0; x < video.width; x++) {
int pixelColor = video.pixels[index];
// Faster method of calculating r, g, b than red(), green(), blue()
int r = (pixelColor >> 16) & 0xff;
int g = (pixelColor >> 8) & 0xff;
int b = pixelColor & 0xff;

// Another option would be to properly calculate brightness as luminance:
// luminance = 0.3*red + 0.59*green + 0.11*blue
// Or you could instead red + green + blue, and make the the values[] array
// 256*3 elements long instead of just 256.
int pixelBright = max(r, g, b);

// The 0.1 value is used to damp the changes so that letters flicker less
float diff = pixelBright - bright[index];
bright[index] += diff * 0.1;

int num = int(bright[index]);
text(letters[num], 0, 0);

// Move to the next pixel

// Move over for next character
translate(1.0 / fontSize, 0);

if (cheatScreen) {
//image(video, 0, height - video.height);
// set() is faster than image() when drawing untransformed images
set(0, height - video.height, video);
* Handle key presses:
* 'c' toggles the cheat screen that shows the original image in the corner
* 'g' grabs an image and saves the frame to a tiff image
* 'f' and 'F' increase and decrease the font size
void keyPressed() {
switch (key) {
case 'g': saveFrame(); break;
case 'c': cheatScreen = !cheatScreen; break;
case 'f': fontSize *= 1.1; break;
case 'F': fontSize *= 0.9; break;


This piece of code relates to my general idea to the best that I can find, the position I am in now is take the sketches I have created and the concept idea I have and manipulate this piece of work to the fashion I want it to represent. Lets get drawing.


Doctor Who (Kinetic Typography) Portfolio

This is my final production for this mini project….reason for this is down to time, there is a lack of it… Here you can see my use of colour for change in personality and size of font to give a depth of field, also a problem which I solved was the speed of the camera. Using less sudden movements and spacing the key frames apart more gave a smooth feel to the animation, complementing the typography and also the audio itself. I’ve also take a Tardis (The Doctors Time Machine) texture to use as the background, inspired from the V for Vendetta texture used.

If I where to continue this project, which I most likely will at a later date in my own time…I would finish off the entire audio and spend more time on placement and effects used. Creating something which I could use as a full portfolio piece.

If I where to make any changes to this just over 30 second animation I would work with more effects, giving individual words personalities and textures. This would related more to other Kinetic Typography animations which I have seen and thoroughly enjoyed.

Another Try (Kinetic Typography) Portfolio

Another basic training for myself, I have changed the audio something which I stumbled upon

I am going to stick with the chosen audio and work on this for my final piece, I feel a lot more emotion in this one rather then the other. Also being given the opportunity to work with colour to show off different genders/character in the audio, not having this would have made the animation a bit dull and dry from my point of view.

  • The camera movement is too fast (hurting the eyes)

downloadThis appeared to represent a Moire Pattern… This was mentioned to me by one of my seminar tutors, Simon. The result of this was a bad view for the eyes ruining the whole animation. This needs to be fixed.


  • Slow to fast camera movement isn’t perfect

There is a big jump from slow cut moves to fast cuts, again not look very nice and can be quite messy when viewing the animation. The struggle is trying to keep up with the audio in the animation, but there is another way round this. Coming back to a structured theme, like in V for Vendetta this problem could be solved.

I am getting used to the camera tool now and have also taken some of the techniques I was using for my first Gravity Kinetic animation, using those for improvements. Coming along here tomorrow I will finish up with this mini project and get back to my Blending.

I Am Talking (Kinetic Typography) Portfolio

First Draft of after effects camera tool…

A fair bit of work is needed on this, of course I am not happy with it, but it is a starter to get me warmed up with how to use the camera tool. The next step being for me clean everything up, not having having such a cluttered space because this looks very messy and doesn’t give off a nice image and also to bring in some of the techniques used in the first Gravity animation. This will help give off a better image for the animation. Starting to add some personality in the words and movement.

Hello Stone Henge (Kinetic Typography) Portfolio

I love Doctor Who. It is without a doubt my favourite thing in the whole world. I want to do something which I am going to enjoy (obviously) bring me to use this epic speech made by The Doctor (Matt Smith). Another reason for this choice of mine is due to the theme of the speech. The power and persuasion which is in his voice, put together which the timing of each word made is perfect for a Kinetic Typography display. Check it, someone has already done one.

Using a tutorial linked to me from my class mate Bob I began to learn the basics of using the camera tool on After Effects.

The reason I want to use the camera tool for my Typography animation is because of it’s free flowing manner. Having subtitle animation which is just layered key frames gives off a…what i would call ‘tacky’ impression’…whereas using this motion movement shows a clean good looking video effect. Watching the tutorial gave me the basics of everything I needed to get started.

Using keyframes and camera movements the flow from word to word was working out smoothly. When adding text I would have to go through the process of putting 2d font into a 3d area which allowed me to work with the words and travel through them. The tools for moving text around and the camera around are incredibly simular to those used on Blender; working with X,Y and Z axis you place the work in the position you want.

Screen Shot 2014-03-23 at 20.18.03

Coming to a point in the animation where I though a change in view was necessary I wanted to show off the surrounds e.g. the back of other texts in the scene. As seen below.

Screen Shot 2014-03-23 at 21.49.43

A problem appeared when doing this.…when working with this tool you have a point of interest which is where the camera always looks at when flowing. When flipping the camera to face the back of the text the point of interest would change compromising the rest of the animation.

Screen Shot 2014-03-23 at 22.42.21

After some research and pure stroke of luck I came across that you could key frame said point, solving the whole problem. You may think that, that is obvious, but trust me it took me a while to find out.