Create an Animation by drawing with your hand (or mouse). For my Thesis!

Markpieces

Hi all!, I'm working on my thesis and I was wondering if someone could help me with my little problem!

I'm new in the Processing field, how could I create a real time animation of a sketch in the same frame of time in which i'm drawing it?

for example: if I draw a line on my tool, I'd like it to show (by pushing a button) how I created that line, through an animation.

If could also suggest me some readings or references, that would be very much appreciated. Thank you so much for your help and time.

KevinWorkman

You're going to have to break the animation down into individual frames. You can't just animate drawing a line in a single frame. By definition the animation will have to consist of multiple frames.

jeremydouglass

how could I create a real time animation of a sketch in the same frame of time in which i'm drawing it? for example: if I draw a line on my tool, I'd like it to show (by pushing a button) how I created that line, through an animation.

There are several ways to interpret this question -- please define your terms so we know what problem to help you with.

if I draw a line on my tool

I'm assuming this tool is your processing sketch, e.g. you click with the mouse, drag, and release. Is this a line tool (straight line) or a pencil tool (trail of dots)?

I'd like it to show how I created that line, through an animation.

If this is a line tool, do you want to play back everywhere the mouse was before the person finally released the button, dropping the final line segment? If this is a pencil tool, do you want to play back the trail of dots in order? should it be real-time (the speed of the mouse) or line-length time (x dots per second)?

Chrisir

References: see section tutorials, section reference, section examples, section books on the website

Bird

I would start with the Video Export library. I contains an example using PGraphics. You can draw to the PGraphics using the mouse. First, I would learn how to draw to a PGraphics and then save it as an image. If you save the image in Draw(), you will have as many frames as your sketch frameRate by the duration of the sketch. You can then compile the individual frames into a video. Or, more economically, use the Video Export library to render a video, frame by frame, directly from the PGraphics.

Markpieces

I'm assuming this tool is your processing sketch, e.g. you click with the mouse, drag, and release. Is this a line tool (straight line) or a pencil tool (trail of dots)?

Yes, i was thinking to create a tool (the processing sketch) like a painting tool, what i want to create is like a drawing tool (paint tool) where i can draw some shapes (pencil tool - trail of dots) and, by clicking a button or keep it pressed, i would like to see the "creation" of my shape in a loop, like an animation.

If this is a pencil tool, do you want to play back the trail of dots in order? should it be real-time (the speed of the mouse) or line-length time (x dots per second)?

Yes, i want to play back the trail of dots in order to see it "real time" (speed of the mouse).

The second step of my sketch would be creating "layers of animation" in order to controlling multiple "animations" at the same time.

Thanks for your answer!, really appreciated!

Markpieces

I would start with the Video Export library. I contains an example using PGraphics. You can draw to the PGraphics using the mouse. First, I would learn how to draw to a PGraphics and then save it as an image. If you save the image in Draw(), you will have as many frames as your sketch frameRate by the duration of the sketch. You can then compile the individual frames into a video. Or, more economically, use the Video Export library to render a video, frame by frame, directly from the PGraphics.

Thank you, for now I'll try to study PGraphics references!.

Markpieces

I tried to make some test in my sketch, and this is the result!.

I would like to create a line (and a shape, after) instead of a "moving dot", and add one button for "moving" between a "normal line", and an animated one!.

int frames = 30;

PGraphics pg[] = new PGraphics [frames];

void setup(){

size(1000,700);
background(255);  

for (int i=0; i<frames; i++){

//creazione del loop considerando l'array di "livelli"
pg[i] = createGraphics(width, height);

//caratteristiche base all'interno dell'array, inizio disegno e fine disegno (per ogni frame) default initial settings
pg[i].beginDraw();
pg[i].background(255);
pg[i].stroke(0);
pg[i].strokeWeight(4);
pg[i].endDraw();

}

}

void draw(){

int currFrame = frameCount % frames; // da 0 a 29 frames
if(mousePressed) {
pg[currFrame].beginDraw();
pg[currFrame].line(pmouseX, pmouseY, mouseX, mouseY);
pg[currFrame].endDraw();
}

image (pg[currFrame], 0, 0);

}

Do you have any suggestion? I'm looking forward to hearing from you guys!

Many thanks!

Bird

Something like this?

ArrayList<PImage> stack;
PGraphics drawingBoard;
int stackCounter;
boolean playAnimation;

void setup() {
  size(300, 300);
  stack = new ArrayList<PImage>();
  drawingBoard = createGraphics(width, height);
  drawingBoard.beginDraw();
  drawingBoard.stroke(0);
  drawingBoard.strokeWeight(4);
  drawingBoard.endDraw();
  stackCounter = 0;
  playAnimation = false;
}

void draw() {
  background(255);
  if (playAnimation) {
    image(stack.get(stackCounter), 0, 0);
    stackCounter++;
    if (stackCounter >= stack.size()) stackCounter = stack.size()-1;
  } else {
    image(drawingBoard, 0, 0);
  }
}

void mousePressed() {
  playAnimation = false;
}

void mouseDragged() {
  drawingBoard.beginDraw();
  drawingBoard.line(pmouseX, pmouseY, mouseX, mouseY); 
  drawingBoard.endDraw();
  stack.add(drawingBoard.copy());
} 

void mouseReleased() {
  playAnimation = true;
} 

void mouseClicked() { 
  if (mouseButton == LEFT) {
  } else if (mouseButton == CENTER) {
  } else if (mouseButton == RIGHT) {
    // right-click the mouse to replay the whole animation
    stackCounter = 0;
  }

Markpieces

Something like this?

Yes!, it's a really good start, i tried to use this code on my computer and it works fine great, but if i try to put on my tablet doesn't work anymore.

The code for now is like this, my next steps i would like to "set" this "animation movement" only if i click a button (for drawing a "normal shape" like a background, and drawing another "shape" animated if i click the button).

ArrayList<PImage> stack;
PGraphics drawingBoard;
int stackCounter;
boolean playAnimation;


void setup() {


size(1000, 700);
stack = new ArrayList<PImage>();
drawingBoard = createGraphics(width, height);
drawingBoard.beginDraw();
drawingBoard.stroke(0);
drawingBoard.strokeWeight(4);
drawingBoard.endDraw();
stackCounter = 0;
playAnimation = false;
}

void draw() {
background(255);
if (playAnimation) {
image(stack.get(stackCounter), 0, 0);
stackCounter++;
if (stackCounter >= stack.size()) stackCounter = stack.size()-1;
} else {
image(drawingBoard, 0, 0);
}
}

void keyPressed () {
playAnimation = false;
} 

void keyReleased () {
playAnimation = true;

} 

void mouseDragged() {
drawingBoard.beginDraw();
drawingBoard.line(pmouseX, pmouseY, mouseX, mouseY); 
drawingBoard.endDraw();
stack.add(drawingBoard.copy());
} 

void mouseClicked() { 
if (mousePressed == true) {
// right-click the mouse to replay the whole animation
stackCounter = 0;
}
}

For my next steps i would like to create this shapes like a layers for controlling the size, rotation ecc. I'll try to do my best, but is difficult for a Newbie like me, and i don't know i have enough power or memory for that.

TABLET: HUAWEI MediaPad T3 10 - EMUI 5.1 - CPU Snapdragon 425 - Ram 2 gb

I'm looking forward to hearing from you guys!

Many thanks!