Loading...
Logo
Processing Forum
I am new to Processing, but have programmed in VB, some WPF, and LabView.
 
I am interested in starting on a flip-book animation program, in which you draw sequential images and can play it back as an animation. It would be nice to save it as a single file for loading, but saving it as a sequence of images (png with alpha) would be just fine. I would want to do that anyway for rendering a video file in post processing. I don't care about layers (yet) or sound. Being able to see a ghost of the previously drawn image would be good (onion skin).
 
Anyway, I'm looking to program something like this and then add features as it goes. Anyone ever worked on anything like this, seen examples or tutorials, or know a bit of code to get me started? Not looking for the solution, just a bump in the right direction as far as Processing code. I'm looking for a simple base to start with. I've found examples of drawing with a mouse and I will probably start there. I looked through the forums and didn't see anything along this line.
 
I'm also looking to integrate my Wacom tablet, but that's a side point.
 
Any help would be appreciated. Thanks.

Replies(12)

Dunno if it's much help; but I've got a post in which I've tweaked a program
to save screenshots of the desktop in a Queue structure at a specified frequency.

If you wanna take a look:
http://forum.processing.org/topic/save-frames-per-second

My advice is to use a PGraphics for each frame. Then you can draw/display/save them separately and with transparency. You can use tint(255, transparency); to display an image with transparency (0-255) and a PGraphics is also an image.

Also see: File > Examples > Topics > Animation


hello,

I am still thinking but maybe this is a starting point for you, too:
http://www.openprocessing.org/sketch/97381

Because:
  • It has different pages
  • You can have different items on each page
  • You can go from page to page
  • It has different things to draw (free hand, line, rect, ellipse....)

what you need to do:
  • remove 3D stuff
  • be able to say "new page" and copy all elements from previous page (or show prev page as ghost image)
  • save the drawing area with get() as a png (without ghost image)

Greetings, Chrisir   


@GoToLoop That is a help. I have a feeling I'm going to overtax my pc. Anything I can do to ease the pain will go a long way.
 
@amnon.owed I'll look into PGraphics. Thanks.
 
@Chrisir That is an excellent starting point. Just what I was hoping for.
 
I'll update my process as I go on and post my code for pointers. I found a great book at the library "Processing for Visual Artists" which will give me something to paw through when my pc is otherwise occupied. I have to say that the amount of info on the Processing site is fantastic.

good luck!

if you need help, pm me pls, because this forum doesn't notify us. 
Well, I've been experimenting with some code and have a first draft of a beginning.
Warning: this is code I've been testing out on my phone, and it is a draft.
That being say, know that this code was edited in a text editor after I ran a portion of it on my phone.
I haven't been able to fire up my PC, but hope to this weekend.
 
Anyway, here is my code.
Right now I'm looking to create new PGraphics on the fly and navigate them with the keyboard.
Any advice, help, etc. would be greatly appreciated!
 
Also @Chrisir I'm afraid I don't know how to PM, so I hope you see this.
 
Copy code
  1. //Animation Flipbook RevA
  2. /*
  3. My first stab at code to make an animation flipbook
  4. I am just working out the manipulation of the individual pages
  5. Want to scroll left and right with arrow keys
  6. Up arrow will insert new page after the current
  7. To Do:
  8.       Make a page class with .add method
  9.       Use ArrayList(?) to monitor pages
  10.       Finish keyboard commands
  11.       Add function to display image in background for a drawing reference
  12.       Add functions to copy/paste a page
  13.       Add tablet functions (In progress)
  14.       Add erase function (In progress)
  15.       View pages as animation with spec'd FPM
  16.       Export single page function -PNG
  17.       Export all pages function -PNG
  18.       Import single page function
  19.       Import multiple pages function
  20. Wishlist:
  21.       Layers for foreground and background pages
  22.       Brush pallet
  23.       Import gif image sequence as brush with TAB switching of frames
  24. */
  25. int currentPage =1;
  26. PGraphics img;
  27. void setup() {
  28.       size(350, 450);
  29.       smooth();
  30.       img = createGraphics(200,200);
  31.       img.beginDraw();
  32.       img.smooth();
  33.       img.endDraw();
  34. }
  35. void draw() {
  36.       background(180);
  37.       image(img,50,50);
  38. }
  39. void mouseDragged() {
  40.       makeMark();
  41. }
  42. void makeMark() {
  43.       img.beginDraw();
  44.       img.noStroke();
  45.       img.fill(0);
  46.       img.ellipse(mouseX-50,mouseY-50,10,10);
  47.       img.endDraw();
  48. }
  49. // keyboard input is incomplete
  50. void keyPressed() {
  51.       switch (keyCode) {
  52.             case LEFT: //scroll left through pages
  53.                   println("###### Left Arrow ######");
  54.                   break;
  55.             case RIGHT: //scroll right through pages
  56.                   println("###### Right Arrow ######");
  57.                   break;
  58.             case UP: // insert new page after current
  59.                   println("###### Up Arrow ######");
  60.                   break;
  61.             case 32: // display toggle of a ghost of prev page
  62.                   println("###### Spacebar ######");
  63.                   break;
  64.             case DOWN: // delete current page
  65.                   println("###### Down Arrow ######");
  66.                   break;
  67.             default:
  68.                   println("###### Keycode error ######");
  69.             }
  70. }
 
 

I saw your post

You forgot to use my code 


Greetings, Chrisir   

If you need an answer, please send me a personal message since this forum doesn't notify.
No, I didn't forget! I've been looking at it. It is a little beyond my ability to follow through it yet, but I'm working on it.
I'm trying to start off small, learn from my mistakes, and look at examples.
 
And as I stated above, I can't figure out how to PM.

Here is my code for an ArrayList of PGraphics pages. You can create multiple pages and move between them with the arrow keys. Now I need to work on inserting new pages between existing pages and delete pages. I would like to make a Page class, but I'll figure that out later. Any input is welcome.

Copy code
  1. int currentPage = 1;
  2. ArrayList<PGraphics> pageCollection = new ArrayList<PGraphics>();
  3. void setup(){
  4.       size(400,400);
  5.       background(255);
  6.       pageCollection.add(createGraphics(300,300));
  7.       pageCollection.get(0).beginDraw();
  8.       pageCollection.get(0).background(200);
  9.       pageCollection.get(0).endDraw();
  10. }
  11. void draw(){
  12.       frame.setTitle("Page " + currentPage + " of " + pageCollection.size());
  13.       background(255);
  14.       image(pageCollection.get(currentPage-1),50,50);
  15. }
  16. void mouseDragged() {
  17.       makeMark();
  18. }
  19. void makeMark() {
  20.       pageCollection.get(currentPage-1).beginDraw();
  21.       pageCollection.get(currentPage-1).smooth();
  22.       pageCollection.get(currentPage-1).stroke(0);
  23.       pageCollection.get(currentPage-1).line(pmouseX-50,pmouseY-50,mouseX-50,mouseY-50);
  24.       pageCollection.get(currentPage-1).endDraw();
  25. }
  26. void keyPressed() {
  27.       switch (keyCode) {
  28.             case LEFT: //scroll left through pages
  29.                   println("###### Go Back One Page ######");
  30.                   if (currentPage == 1){
  31.                         currentPage = 1;
  32.                   }else {
  33.                         currentPage -=1;
  34.                   }                 
  35.                   break;
  36.             case RIGHT: //scroll right through pages
  37.                   println("###### Go Forward One Page ######");
  38.                         if (currentPage == pageCollection.size()){
  39.                               newPage();
  40.                         }else {
  41.                         currentPage +=1;
  42.                         }                 
  43.                         break;
  44.             case UP: // insert new page at end
  45.                   println("###### Add New Page to End ######");
  46.                   newPage();
  47.                   break;
  48.             case 32: // display toggle of a ghost of prev page
  49.                   println("###### Spacebar ######");
  50.                   break;
  51.             case DOWN: // delete current page
  52.                   println("###### Down Arrow ######");
  53.                   break;
  54.             default:
  55.                   println("###### keyCode error ######");
  56.       }
  57. }
  58. void newPage() {
  59.       pageCollection.add(createGraphics(300,300));
  60.       pageCollection.get(currentPage).beginDraw();
  61.       pageCollection.get(currentPage).background(200);
  62.       pageCollection.get(currentPage).smooth(); 
  63.       pageCollection.get(currentPage).stroke(0); 
  64.       pageCollection.get(currentPage).endDraw();
  65.       currentPage +=1;
  66. }


I think arraylist is more a collection than an ordered list.

Therefore when you need to insert or cut out pages in the middle of the book, I'd choose array instead of arraylist


Greetings, Chrisir

If you need an answer, please send me a personal message since this forum doesn't notify.
I have little coding or programming skill, sorry. I used to design magazine in PDF. Now I want to make it as flip book. Any one helps? I do a little search on Google for  flash magazine maker. I checked its digital magazine which looks beautiful with pretty background, buttons, outlay, etc. The flipping animation is most favorable, just like reading a real paper print book. Do you guys use it before? Any suggestion?