topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

#javascript-processing-example-topic-animation-sequential.htm / htm



  <!DOCTYPE html>
  <html><head>
  <script src="javascript-processing-example-processing.js"></script>
  <script src="javascript-processing-example-init.js"></script>
  <link rel="stylesheet" href="javascript-processing-example-style.css">
  </head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
  <h2>Sequential</h2>
  
  <p>by <a href="http://www.presstube.com/">James Patterson</a>.  
  
  Displaying a sequence of images creates the illusion of motion. 
  Twelve images are loaded and each is displayed individually in a loop.</p>
  
  <p><a href="http://processing.org/learning/topics/sequential.html"><b>Original Processing.org Example:</b> Sequential</a><br>
  <script type="application/processing">
  int numFrames = 12;  // The number of frames in the animation
  int frame = 0;
  PImage[] images = new PImage[numFrames];
      
  void setup()
  {
    size(200, 200);
    frameRate(30);
    
    images[0]  = loadImage("PT_anim0000.gif");
    images[1]  = loadImage("PT_anim0001.gif"); 
    images[2]  = loadImage("PT_anim0002.gif");
    images[3]  = loadImage("PT_anim0003.gif"); 
    images[4]  = loadImage("PT_anim0004.gif");
    images[5]  = loadImage("PT_anim0005.gif"); 
    images[6]  = loadImage("PT_anim0006.gif");
    images[7]  = loadImage("PT_anim0007.gif"); 
    images[8]  = loadImage("PT_anim0008.gif");
    images[9]  = loadImage("PT_anim0009.gif"); 
    images[10] = loadImage("PT_anim0010.gif");
    images[11] = loadImage("PT_anim0011.gif"); 
    
    // If you don't want to load each image separately
    // and you know how many frames you have, you
    // can create the filenames as the program runs.
    // The nf() command does number formatting, which will
    // ensure that the number is (in this case) 4 digits.
    //for(int i=0; i<numFrames; i++) {
    //  String imageName = "PT_anim" + nf(i, 4) + ".gif";
    //  images[i] = loadImage(imageName);
    //}
  } 
   
  void draw() 
  { 
    frame = (frame+1)\%numFrames;  // Use % to cycle through frames
    image(images[frame], 0, 0);
  }
  </script><canvas width="200" height="200"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"><img src="javascript-processing-example-PT_anim0000.gif" id="PT_anim0000.gif"><img src="javascript-processing-example-PT_anim0001.gif" id="PT_anim0001.gif"><img src="javascript-processing-example-PT_anim0002.gif" id="PT_anim0002.gif"><img src="javascript-processing-example-PT_anim0003.gif" id="PT_anim0003.gif"><img src="javascript-processing-example-PT_anim0004.gif" id="PT_anim0004.gif"><img src="javascript-processing-example-PT_anim0005.gif" id="PT_anim0005.gif"><img src="javascript-processing-example-PT_anim0006.gif" id="PT_anim0006.gif"><img src="javascript-processing-example-PT_anim0007.gif" id="PT_anim0007.gif"><img src="javascript-processing-example-PT_anim0008.gif" id="PT_anim0008.gif"><img src="javascript-processing-example-PT_anim0009.gif" id="PT_anim0009.gif"><img src="javascript-processing-example-PT_anim0010.gif" id="PT_anim0010.gif"><img src="javascript-processing-example-PT_anim0011.gif" id="PT_anim0011.gif"></div>
  
  <pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
  // unless otherwise stated.</b>
  int numFrames = 12;  // The number of frames in the animation
  int frame = 0;
  PImage[] images = new PImage[numFrames];
      
  void setup()
  {
    size(200, 200);
    frameRate(30);
    
    images[0]  = loadImage("PT_anim0000.gif");
    images[1]  = loadImage("PT_anim0001.gif"); 
    images[2]  = loadImage("PT_anim0002.gif");
    images[3]  = loadImage("PT_anim0003.gif"); 
    images[4]  = loadImage("PT_anim0004.gif");
    images[5]  = loadImage("PT_anim0005.gif"); 
    images[6]  = loadImage("PT_anim0006.gif");
    images[7]  = loadImage("PT_anim0007.gif"); 
    images[8]  = loadImage("PT_anim0008.gif");
    images[9]  = loadImage("PT_anim0009.gif"); 
    images[10] = loadImage("PT_anim0010.gif");
    images[11] = loadImage("PT_anim0011.gif"); 
    
    // If you don't want to load each image separately
    // and you know how many frames you have, you
    // can create the filenames as the program runs.
    // The nf() command does number formatting, which will
    // ensure that the number is (in this case) 4 digits.
    //for(int i=0; i&lt;numFrames; i++) {
    //  String imageName = "PT_anim" + nf(i, 4) + ".gif";
    //  images[i] = loadImage(imageName);
    //}
  } 
   
  void draw() 
  { 
    frame = (frame+1)\%numFrames;  // Use % to cycle through frames
    image(images[frame], 0, 0);
  }</pre>
  </body></html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.