need some help for a animation

Programming Questions

clankill3r

need some help for a animation

in Programming Questions • 2 years ago

Hi, for school i have to make a leading for a movie, i choose the usual suspects.

Here is something i made in illustrator/ after effects to show a still of what i want:

I only want to animate every name, this will take me weeks in after effects so i thought let use processing.

I want every frame exported to a pdf (so i can use that later in AE to do camera zoom in and movement etc.).

(The pdf thing for every frame is not the problem btw..)

The first thing i did was creating textAreas in processing, (see them as position places for names).

For that i use a image (since it easilly allows me to adjust font, spacing etc.).

Green is for right align, blue for left, white for 1 time left and 1 time right, red is skip.

This is the result, which is good so far:

For the animation, i would like to test different things, like:

-Let names go threw red/ let them skip red

-Adjust the delay for when the next one comes in (so there can move multiple names at once

-Skip positions that are taken (and in position) / let them go threw

-From the beginning of the line to the end of the line / from the beginning of THE USUAL SUSPECTS to the end

-Different start positions, like names can come from right bottom aswell.

All above would be nice, however, just something working would be even more nice since i got to show something by wensday.

But that is not the only problem, i'm a bit stuck in what would be a good way to handle things.

How do i assign (I got a bug atm, every thing is placed in the A).

And apart from that, how must i continue, what should be restructured, how could my functions/classes look like.

(like what is a smart way to handle the left right and 'justify' text).

Some help would be really nice.

p.s. code in next post

text:

http://dl.dropbox.com/u/17630770/namenLijs_big_RandomOrder.txt

image:

http://dl.dropbox.com/u/17630770/position_mask2.gif

Replies(5)

clankill3r

Re: need some help for a animation

2 years ago

the text i need to use, and the image used for 'tracing' is at the bottom of the previous post.

(p.s. if it's easy'r to make a reversed animation then that is also fine).

import processing.pdf.*;
import java.util.Arrays;
PImage posMask;
PFont font;
String[] lines;
TextArea[] textAreas = new TextArea[0];
int textAreaID = 0;
Name[] names = new Name[0];
color rood = color(255, 0, 0);
color groen = color(0, 255, 0);
color blauw = color(0, 0, 255);
color wit = color(255);
float lineHeight;
float yShift;
int minNameWidth = MAX_INT;
// . . . . . . . . . . . . . .
void setup() {
size(1600, 674);
posMask = loadImage("position_mask2.gif");
// String[] fontList = PGraphicsPDF.listFonts();
// println(fontList);
font = createFont("MyriadPro-Regular", 5);
textFont(font);
// fill name array
lines = loadStrings("namenLijs_big_RandomOrder.txt");
for(int i = 0; i < lines.length; i++) {
names = (Name[])append(names, new Name(lines[i], i));
if(int(textWidth(lines[i])) < minNameWidth) minNameWidth = int(textWidth(lines[i]));
}
println("minNameWidth: "+ minNameWidth);
lineHeight = textAscent() + textDescent();
yShift = lineHeight+3;
println("yShift: " + yShift);
image(posMask, 0, 0);
detectAreas(posMask, 100, int(224-lineHeight));
detectAreas(posMask, 271, int(395-lineHeight));
detectAreas(posMask, 441, int(565-lineHeight));
println("detectAreas done");
Arrays.sort(textAreas);
Arrays.sort(names);
// asign name to target
int targetCount = 0;
for(int i = 0; i < names.length; i++) {
if(textAreas[targetCount].textAreaWidth >= names[i].nameWidth) {
names[i].targetID = textAreas[targetCount].id;
targetCount++;
}
}
//Collections.shuffle(Arrays.asList(textAreas));
}
// . . . . . . . . . . . . . .
void draw() {
for(int i = 0; i < textAreas.length; i++) {
textAreas[i].display();
}
// beginRecord(PDF, "frame" + frameCount + ".pdf");
// call after beginRecord to avoid a error
textFont(font);
fill(0);
for(int i = 0; i < names.length; i++) {
Name n = names[i];
n.x = textAreas[n.targetID].x;
n.y = textAreas[n.targetID].y;
n.display();
}
//endRecord();
//println(frameCount + " being created");
//exit();
noLoop();
}
// . . . . . . . . . . . . . .
void detectAreas(PImage img, int startY, int stopY) {
int count = startY*img.width;
TextArea ta;
for(int y = startY; y < stopY; y += yShift) {
int x = 0;
while( x < img.width) {
if(img.pixels[count] == groen) {
ta = new TextArea(x, y, "RIGHT", textAreaID++, false, true);
x++;
count++;
while( x < img.width && img.pixels[count] == groen) {
x++;
count++;
}
ta.setEndPoint(x-1);
if(ta.textAreaWidth >= minNameWidth) {
textAreas = (TextArea[])append(textAreas, ta);
textAreaID++;
}
}
else if(img.pixels[count] == wit) {
ta = new TextArea(x, y, "JUSTIFY", textAreaID++, true, true);
x++;
count++;
while( x < img.width && img.pixels[count] == wit) {
x++;
count++;
}
ta.setEndPoint(x-1);
if(ta.textAreaWidth >= minNameWidth) {
textAreas = (TextArea[])append(textAreas, ta);
textAreaID++;
}
}
else if(img.pixels[count] == blauw) {
ta = new TextArea(x, y, "LEFT", textAreaID, true, false);
x++;
count++;
while( x < img.width && img.pixels[count] == blauw) {
x++;
count++;
}
ta.setEndPoint(x-1);
if(ta.textAreaWidth >= minNameWidth) {
textAreas = (TextArea[])append(textAreas, ta);
textAreaID++;
}
}
else {
x++;
count++;
}
}
count += (yShift-1) * width;
}
}
// . . . . . . . . . . . . . .
void mousePressed() {
println(get(mouseX, mouseY));
println("mouseX: "+mouseX + " " + "mouseY: "+mouseY);
if(get(mouseX, mouseY) == rood) {
println("rood");
}
if(get(mouseX, mouseY) == groen) {
println("groen");
}
if(get(mouseX, mouseY) == blauw) {
println("blauw");
}
if(get(mouseX, mouseY) == wit) {
println("wit");
}
}
// . . . . . . . . . . . . . .

class TextArea implements Comparable {
int x, y;
int endPoint;
int textAreaWidth;
String align;
int id;
boolean useLeft;
boolean useRight;
boolean leftInPosition = false;
boolean rightInPosition = false;
TextArea(int x, int y, String align, int id, boolean useLeft, boolean useRight) {
this.x = x;
this.y = y;
this.align = align;
this.id = id;
this.useLeft = useLeft;
this.useRight = useRight;
}
String toString() {
return "id: " + id + "\ttextAreaWidth: " + textAreaWidth + "\tx: " + x + "\ty: " + y + "\tendPoint: " + endPoint + "\talign: " + align;
}
void setEndPoint(int endPoint){
this.endPoint = endPoint;
textAreaWidth = endPoint-x;
}
void display() {
pushStyle();
rectMode(CORNERS);
noFill();
stroke(0);
rect(x, y, endPoint, y+lineHeight);
popStyle();
}
int compareTo(Object anotherTextArea) throws ClassCastException {
if (!(anotherTextArea instanceof TextArea)) {
throw new ClassCastException(" A TextArea object expected.");
}
return int(textAreaWidth - ((TextArea) anotherTextArea).textAreaWidth);
}
}

class Name implements Comparable {
float x, y;
String name;
float nameWidth;
int id;
int targetID;
boolean inPosition = false;
Name(String name, int id){
this.name = name;
nameWidth = textWidth(name);
this.id = id;
}
void display(){
pushMatrix();
translate(x, y);
text(name, 0, 0);
popMatrix();
}
String toString(){
return "id: " + id + "\tnameWidth: " + nameWidth + "\t" + name;
}
int compareTo(Object anotherName) throws ClassCastException {
if (!(anotherName instanceof Name)) {
throw new ClassCastException(" A Name object expected.");
}
return int(nameWidth - ((Name) anotherName).nameWidth);
}
}

PhiLho

Re: need some help for a animation

2 years ago

Before solving your problem, I slightly rewrote your code, using ArrayLists instead of growing arrays for better performance and simpler code, factorizing duplicate code, etc.

PImage posMask;
PFont font;
ArrayList<TextArea> textAreas = new ArrayList<TextArea>();
int textAreaID = 0;
ArrayList<Name> names = new ArrayList<Name>();
color rood = color(255, 0, 0);
color groen = color(0, 255, 0);
color blauw = color(0, 0, 255);
color wit = color(255);
float lineHeight;
float yShift;
int minNameWidth = MAX_INT;
// . . . . . . . . . . . . . .
void setup() {
size(1600, 674);
posMask = loadImage("position_mask2.gif");
// String[] fontList = PGraphicsPDF.listFonts();
// println(fontList);
font = createFont("Myriad Pro", 5);
textFont(font);
// fill name array
String[] lines = loadStrings("namenLijs_big_RandomOrder.txt");
for (int i = 0; i < lines.length; i++) {
names.add(new Name(lines[i], i));
int tw = int(textWidth(lines[i]));
if (tw < minNameWidth) minNameWidth = tw;
}
println("minNameWidth: "+ minNameWidth);
lineHeight = textAscent() + textDescent();
yShift = lineHeight+3;
println("yShift: " + yShift);
image(posMask, 0, 0);
detectAreas(posMask, 100, int(224-lineHeight));
detectAreas(posMask, 271, int(395-lineHeight));
detectAreas(posMask, 441, int(565-lineHeight));
println("detectAreas done");
Collections.sort(textAreas);
Collections.sort(names);
// assign name to target
int targetCount = 0;
for (Name name : names) {
if (textAreas.get(targetCount).textAreaWidth >= name.nameWidth) {
name.targetID = textAreas.get(targetCount).id;
targetCount++;
}
}
//Collections.shuffle(Arrays.asList(textAreas));
}
// . . . . . . . . . . . . . .
void draw() {
for (TextArea textArea : textAreas) {
textArea.display();
}
// beginRecord(PDF, "frame" + frameCount + ".pdf");
// call after beginRecord to avoid a error
textFont(font);
fill(0);
for (Name name : names) {
name.x = textAreas.get(name.targetID).x;
name.y = textAreas.get(name.targetID).y;
name.display();
}
//endRecord();
//println(frameCount + " being created");
//exit();
noLoop();
}

PhiLho

Re: need some help for a animation

2 years ago

PImage posMask;
PFont font;
ArrayList<TextArea> textAreas = new ArrayList<TextArea>();
ArrayList<Name> names = new ArrayList<Name>();
color rood = color(255, 0, 0);
color groen = color(0, 255, 0);
color blauw = color(0, 0, 255);
color wit = color(255);
float lineHeight;
float yShift;
int minNameWidth = MAX_INT;
// . . . . . . . . . . . . . .
void setup() {
size(1600, 674);
posMask = loadImage("position_mask2.gif");
// String[] fontList = PGraphicsPDF.listFonts();
// println(fontList);
font = createFont("Myriad Pro", 7);
textFont(font);
// fill name array
String[] lines = loadStrings("namenLijs_big_RandomOrder.txt");
for (int i = 0; i < lines.length; i++) {
names.add(new Name(lines[i], i));
int tw = int(textWidth(lines[i]));
if (tw < minNameWidth) minNameWidth = tw;
}
println("minNameWidth: "+ minNameWidth);
lineHeight = textAscent() + textDescent();
yShift = lineHeight+3;
println("yShift: " + yShift);
image(posMask, 0, 0);
detectAreas(posMask, 100, int(224-lineHeight));
detectAreas(posMask, 271, int(395-lineHeight));
detectAreas(posMask, 441, int(565-lineHeight));
println("detectAreas done");
Collections.sort(textAreas);
Collections.sort(names);
// assign name to target
int targetCount = 0;
for (Name name : names) {
while (targetCount < textAreas.size()) {
if (textAreas.get(targetCount).textAreaWidth >= name.nameWidth) {
name.targetID = targetCount++;
break;
}
targetCount++;
}
}
//Collections.shuffle(Arrays.asList(textAreas));
}
// . . . . . . . . . . . . . .
void draw() {
for (TextArea textArea : textAreas) {
textArea.display();
}
// beginRecord(PDF, "frame" + frameCount + ".pdf");
// call after beginRecord to avoid a error
textFont(font);
fill(0);
for (Name name : names) {
name.x = textAreas.get(name.targetID).x;
name.y = textAreas.get(name.targetID).y;
name.display();
}
//endRecord();
//println(frameCount + " being created");
//exit();
noLoop();
}
// . . . . . . . . . . . . . .
void detectAreas(PImage img, int startY, int stopY) {
int count = startY * img.width;
TextArea ta = null;
int textAreaID = 0;
for (int y = startY; y < stopY; y += yShift) {
int x = 0;
while (x < img.width) {
color c = 0;
if (img.pixels[count] == groen) {
ta = new TextArea(x, y, "RIGHT", textAreaID, false, true);
c = groen;
}
else if (img.pixels[count] == wit) {
ta = new TextArea(x, y, "JUSTIFY", textAreaID, true, true);
c = wit;
}
else if(img.pixels[count] == blauw) {
ta = new TextArea(x, y, "LEFT", textAreaID, true, false);
c = blauw;
}
x++;
count++;
if (c != 0) {
while (x < img.width && img.pixels[count] == c) {
x++;
count++;
}
ta.setEndPoint(x-1);
if (ta.textAreaWidth >= minNameWidth) {
textAreas.add(ta);
textAreaID++;
}
}
}
count += (yShift-1) * width;
}
}

class Name implements Comparable {
float x, y;
String name;
float nameWidth;
int id;
int targetID;
boolean inPosition;
Name(String name, int id){
this.name = name;
nameWidth = textWidth(name);
this.id = id;
}
void display(){
text(name, x, y+lineHeight);
}
String toString(){
return "id: " + id + "\tnameWidth: " + nameWidth + "\t" + name;
}
int compareTo(Object anotherName) throws ClassCastException {
if (!(anotherName instanceof Name)) {
throw new ClassCastException(" A Name object expected.");
}
return int(nameWidth - ((Name) anotherName).nameWidth);
}
}

class TextArea implements Comparable {
int x, y;
int endPoint;
int textAreaWidth;
String align;
int id;
boolean useLeft;
boolean useRight;
boolean leftInPosition;
boolean rightInPosition;
TextArea(int x, int y, String align, int id, boolean useLeft, boolean useRight) {
this.x = x;
this.y = y;
this.align = align;
this.id = id;
this.useLeft = useLeft;
this.useRight = useRight;
}
String toString() {
return "id: " + id + "\ttextAreaWidth: " + textAreaWidth + "\tx: " + x + "\ty: " + y + "\tendPoint: " + endPoint + "\talign: " + align;
}
void setEndPoint(int endPoint){
this.endPoint = endPoint;
textAreaWidth = endPoint-x;
}
void display() {
pushStyle();
rectMode(CORNERS);
noFill();
stroke(128, 128);
rect(x, y, endPoint, y+lineHeight);
popStyle();
}
int compareTo(Object anotherTextArea) throws ClassCastException {
if (!(anotherTextArea instanceof TextArea)) {
throw new ClassCastException(" A TextArea object expected.");
}
return int(textAreaWidth - ((TextArea) anotherTextArea).textAreaWidth);
}
}

TextArea's id is no longer used.

clankill3r

Re: need some help for a animation

2 years ago

thanks a lot!

I think i can continue for a while.

clankill3r

Re: need some help for a animation

2 years ago

ok got quite far, stuck on one thing. Or i make it freeze or it doesnt work.

The code that i post (/link to) will work but hasn't the thing in it that i go explain now.

Instand of processing have find out the best position i can set them myself now by hand.

So if something doesn't fit the rest goes to the next text area:

Only when a position is taken i can now overwrite it by clicking on it again (then you see things double (or triple etc)).

I used a boolean before called leftTargetSet, only now it can happen that 3 parts for example of a name fit in somehwere. And if i set the leftTargetSet to early then the rest goes to the next textArea when i don't want that.

In other words, can someone help me that a text area can only be used for 1 name.

(NOTE!!! if it's white then it must be able to use the text area one time for a name left aligned and 1 time for a name right aligned (those names can overlap).

this is my place tool (it's inside a class).

here it has to be done