The Line Between Two Designs

The next step to try a different interpretation of what I am doing, before I get really deep into the code I need to state which direction I want to go in, either working the particles like the plan has always been or delving into something else, working with lines rather than dots or maybe even something completely different. Options being numbers or playing around with size of the letters, not like before, in turns of absolutely massive or really tiny. I will have to prepare myself whether lighting will have a big effect on the sizes and if this could effect the distance the camera could see.

10906287_10204886449954306_241422977948094300_nI’ll just get straight into trying out the lines, code used below –v–

String letterOrder =
"-__--__==__--__==__--__==__--__==__--__==__--__==__--__==__--__==" ;
char[] letters;

Using equals signs and similar line shapes I have replaced all the zeros, here are the results –v–Screen Shot 2015-01-25 at 21.41.48Yes! That is just a black screen!

There is obviously a problem here….

Doing further insight into what’s gone wrong here and not having any errors the problem is with density; the letters need to have a curtain density for them to placed onto the screen. The problem with using lines and lets which are very thin is the density of the symbols isn’t computed by the code leading to the blank screen.

Because I have come across this problem I am going to mess about a bit with the code and see what I come up with.

largefont

PFont font;
float fontSize = 3;

Increasing the size of the font the 3, usually being 1.5 you can see that the size of the letters is cause a bigger confrontation with each other dismantling the image and making it look quite (inaway) pixelated.

I not sure if I really like this effect, it has quite a lot of lag which is shame and does portray my concept to it’s full degree.

theblackspot

String letterOrder =
" .`-_':,;^=+/"|)\<>)iv%xclrs{*}I?!][1taeo7zjLu" +
"0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO";
char[] letters;

reversed particles

This is the reverse of the one before; having the particle on the inside, to do this I used what I learnt about density in the letters and made the top like of letters all lines and the bottom line ‘O’s’, creating what is above.

String letterOrder =
"------------------------------------------------" +
"0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO";
char[] letters;

 Here I have kept the top line of text which has worked out quite well for me; the way the pixels are reacting to my body shape and the outside if very similar to one of the drawings I have.

10419987_10204886438634023_5063957941942802546_nHere I was trying to show the difference I want between the body and what’s outside the body, and with the size of the text and the way code is laid out in the form of letter density order it has resulted in the main focus being what’s happening outside of the structure. Another thing I have noticed is the way the shade black doesn’t have any letters, it is a completely blank space when on camera. When I move my body the letters (particles) react in such away that it show’s what is happening when the motion takes place, even if it can’t be seen the camera is showing it, exactly what my concept is.

The Next Step

I want to make the particles clearer, giving the image more clarity and nicer imagery. My next step of experimentation is to mess about with the colour attributes and how the particles are represented.

The A to Zero Design Process

From the starting point my main objective is to achieve the best representation of what a particle system would look like by manipulating the code, here are some sketches of what I’m trying to show.10933874_10204886313190887_4319158734198323611_n-2What we have with the original piece is all the letters of the alphabet and grammar creating the environment

String letterOrder =
" .`-_':,;^=+/"|)\<>)iv%xclrs{*}I?!][1taeo7zjLu" +
"nT#JCwfy325Fp6mqSghVd4EgXPGZbYkOA&8U$@KHDBWNMR0Q";
char[] letters;

The code above ^

I am going to experiment with these letters and change them into symbols like lines and dots; trying to portray the movement in the environment to best of my ability.  In the sketch above I have tried to show little circles which I can develop the code into, I’ve changed the code see above to have ‘0’ to see what would happen.

String letterOrder =
"000000000000000000000000000000000000000000000000" ;
char[] letters;

00000As you can see the results are not what I want, the ‘0’s are not moving like particles and the image looks more like a stained glass effect. The way that I may fix this is if I replace the ‘0’ with different size round shapes e.g ‘O’ and ‘o’.

The results made no different, so I started playing around with the font size of the letters, replacing the code with this:

String letterOrder =
"0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO0oO" ;
char[] letters;

float[] bright;
char[] chars;

PFont font;
float fontSize = 1.5;

The Results –v– Changed fontSize from ‘2’ to 1.5.0oOThese are the results I’m looking for, what’s great about this is the way the “Particles” are knocking against each other, portraying the beginnings of my concept. The simple change in size of the letters and made such a big difference that a static image has become alive.

The smaller the particles the more that are needed to fill out the image. The expression here relates to the concept, but there are a few problems.

The Problems

I’m not convinced with the way motion is being shown, yes it is the particle portrayal that I want, but it’s something about the colour that I’m not really enjoying looking at. It’s important that I get the colour the way I want it, so what I’m going to do is mess about with which colours are being used, the code I am going to manipulate is below –v–

pushMatrix();
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);

As well as messing about with the colour I’m also going to see what the piece would look like if I where to use lines rather that circles. The reason I came to this was because of some of the sketch designs I created, I found that the way I was using my pen to draw the structure of peoples bodies where been show with a sound wave mimic. Let’s check what this looks like.

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 http://www.kickjs.org/example/video_ascii_art/Video_Ascii_Art.html.

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.
*/

import processing.video.*;

Capture video;
boolean cheatScreen;

// All ASCII characters, sorted according to their visual density
String letterOrder =
" .`-_':,;^=+/"|)\<>)iv%xclrs{*}I?!][1taeo7zjLu" +
"nT#JCwfy325Fp6mqSghVd4EgXPGZbYkOA&8U$@KHDBWNMR0Q";
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
video.start();

int count = video.width * video.height;
//println(count);

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) {
c.read();
}
void draw() {
background(0);

pushMatrix();

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

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

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

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

pushMatrix();
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;

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

// Move to the next pixel
index++;

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

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.