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-animatedsprite.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>AnimatedSprite</h2>
  
  <p>by <a href="http://www.presstube.com/">James Patterson</a>. 
  
  Press the mouse button to change animations.
  Demonstrates loading, displaying, and animating GIF images.
  It would be easy to write a program to display 
  animated GIFs, but would not allow as much control over 
  the display sequence and rate of display.</p>
  
  <p><a href="http://processing.org/learning/topics/animatedsprite.html"><b>Original Processing.org Example:</b> AnimatedSprite</a><br>
  <script type="application/processing">
  AniSprite animation1, animation2;
  float xpos, ypos;
  float drag = 30.0;
  
  void setup() {
    size(200, 200);
    background(255, 204, 0);
    frameRate(24);
    animation1 = new AniSprite("PT_Shifty_00", 38);
    animation2 = new AniSprite("PT_Teddy_00", 60);
  }
  
  void draw() { 
    float difx = mouseX - xpos;
    if (abs(difx) > 1.0) {
      xpos = xpos + difx/drag;
      xpos = constrain(xpos, 0, width);
    }
  
    // Display the sprite at the position xpos, ypos
    if (mousePressed) {
      background(153, 153, 0);
      animation1.display(xpos-animation1.getWidth()/2, ypos);
    } else {
      background(255, 204, 0);
      animation2.display(xpos-animation1.getWidth()/2, ypos);
    }
  }
  </script><canvas width="200" height="200"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"><img src="javascript-processing-example-PT_Shifty_0000.gif" id="PT_Shifty_0000.gif"><img src="javascript-processing-example-PT_Shifty_0001.gif" id="PT_Shifty_0001.gif"><img src="javascript-processing-example-PT_Shifty_0002.gif" id="PT_Shifty_0002.gif"><img src="javascript-processing-example-PT_Shifty_0003.gif" id="PT_Shifty_0003.gif"><img src="javascript-processing-example-PT_Shifty_0004.gif" id="PT_Shifty_0004.gif"><img src="javascript-processing-example-PT_Shifty_0005.gif" id="PT_Shifty_0005.gif"><img src="javascript-processing-example-PT_Shifty_0006.gif" id="PT_Shifty_0006.gif"><img src="javascript-processing-example-PT_Shifty_0007.gif" id="PT_Shifty_0007.gif"><img src="javascript-processing-example-PT_Shifty_0008.gif" id="PT_Shifty_0008.gif"><img src="javascript-processing-example-PT_Shifty_0009.gif" id="PT_Shifty_0009.gif"><img src="javascript-processing-example-PT_Shifty_0010.gif" id="PT_Shifty_0010.gif"><img src="javascript-processing-example-PT_Shifty_0011.gif" id="PT_Shifty_0011.gif"><img src="javascript-processing-example-PT_Shifty_0012.gif" id="PT_Shifty_0012.gif"><img src="javascript-processing-example-PT_Shifty_0013.gif" id="PT_Shifty_0013.gif"><img src="javascript-processing-example-PT_Shifty_0014.gif" id="PT_Shifty_0014.gif"><img src="javascript-processing-example-PT_Shifty_0015.gif" id="PT_Shifty_0015.gif"><img src="javascript-processing-example-PT_Shifty_0016.gif" id="PT_Shifty_0016.gif"><img src="javascript-processing-example-PT_Shifty_0017.gif" id="PT_Shifty_0017.gif"><img src="javascript-processing-example-PT_Shifty_0018.gif" id="PT_Shifty_0018.gif"><img src="javascript-processing-example-PT_Shifty_0019.gif" id="PT_Shifty_0019.gif"><img src="javascript-processing-example-PT_Shifty_0020.gif" id="PT_Shifty_0020.gif"><img src="javascript-processing-example-PT_Shifty_0021.gif" id="PT_Shifty_0021.gif"><img src="javascript-processing-example-PT_Shifty_0022.gif" id="PT_Shifty_0022.gif"><img src="javascript-processing-example-PT_Shifty_0023.gif" id="PT_Shifty_0023.gif"><img src="javascript-processing-example-PT_Shifty_0024.gif" id="PT_Shifty_0024.gif"><img src="javascript-processing-example-PT_Shifty_0025.gif" id="PT_Shifty_0025.gif"><img src="javascript-processing-example-PT_Shifty_0026.gif" id="PT_Shifty_0026.gif"><img src="javascript-processing-example-PT_Shifty_0027.gif" id="PT_Shifty_0027.gif"><img src="javascript-processing-example-PT_Shifty_0028.gif" id="PT_Shifty_0028.gif"><img src="javascript-processing-example-PT_Shifty_0029.gif" id="PT_Shifty_0029.gif"><img src="javascript-processing-example-PT_Shifty_0030.gif" id="PT_Shifty_0030.gif"><img src="javascript-processing-example-PT_Shifty_0031.gif" id="PT_Shifty_0031.gif"><img src="javascript-processing-example-PT_Shifty_0032.gif" id="PT_Shifty_0032.gif"><img src="javascript-processing-example-PT_Shifty_0033.gif" id="PT_Shifty_0033.gif"><img src="javascript-processing-example-PT_Shifty_0034.gif" id="PT_Shifty_0034.gif"><img src="javascript-processing-example-PT_Shifty_0035.gif" id="PT_Shifty_0035.gif"><img src="javascript-processing-example-PT_Shifty_0036.gif" id="PT_Shifty_0036.gif"><img src="javascript-processing-example-PT_Shifty_0037.gif" id="PT_Shifty_0037.gif"><img src="javascript-processing-example-PT_Teddy_0000.gif" id="PT_Teddy_0000.gif"><img src="javascript-processing-example-PT_Teddy_0001.gif" id="PT_Teddy_0001.gif"><img src="javascript-processing-example-PT_Teddy_0002.gif" id="PT_Teddy_0002.gif"><img src="javascript-processing-example-PT_Teddy_0003.gif" id="PT_Teddy_0003.gif"><img src="javascript-processing-example-PT_Teddy_0004.gif" id="PT_Teddy_0004.gif"><img src="javascript-processing-example-PT_Teddy_0005.gif" id="PT_Teddy_0005.gif"><img src="javascript-processing-example-PT_Teddy_0006.gif" id="PT_Teddy_0006.gif"><img src="javascript-processing-example-PT_Teddy_0007.gif" id="PT_Teddy_0007.gif"><img src="javascript-processing-example-PT_Teddy_0008.gif" id="PT_Teddy_0008.gif"><img src="javascript-processing-example-PT_Teddy_0009.gif" id="PT_Teddy_0009.gif"><img src="javascript-processing-example-PT_Teddy_0010.gif" id="PT_Teddy_0010.gif"><img src="javascript-processing-example-PT_Teddy_0011.gif" id="PT_Teddy_0011.gif"><img src="javascript-processing-example-PT_Teddy_0012.gif" id="PT_Teddy_0012.gif"><img src="javascript-processing-example-PT_Teddy_0013.gif" id="PT_Teddy_0013.gif"><img src="javascript-processing-example-PT_Teddy_0014.gif" id="PT_Teddy_0014.gif"><img src="javascript-processing-example-PT_Teddy_0015.gif" id="PT_Teddy_0015.gif"><img src="javascript-processing-example-PT_Teddy_0016.gif" id="PT_Teddy_0016.gif"><img src="javascript-processing-example-PT_Teddy_0017.gif" id="PT_Teddy_0017.gif"><img src="javascript-processing-example-PT_Teddy_0018.gif" id="PT_Teddy_0018.gif"><img src="javascript-processing-example-PT_Teddy_0019.gif" id="PT_Teddy_0019.gif"><img src="javascript-processing-example-PT_Teddy_0020.gif" id="PT_Teddy_0020.gif"><img src="javascript-processing-example-PT_Teddy_0021.gif" id="PT_Teddy_0021.gif"><img src="javascript-processing-example-PT_Teddy_0022.gif" id="PT_Teddy_0022.gif"><img src="javascript-processing-example-PT_Teddy_0023.gif" id="PT_Teddy_0023.gif"><img src="javascript-processing-example-PT_Teddy_0024.gif" id="PT_Teddy_0024.gif"><img src="javascript-processing-example-PT_Teddy_0025.gif" id="PT_Teddy_0025.gif"><img src="javascript-processing-example-PT_Teddy_0026.gif" id="PT_Teddy_0026.gif"><img src="javascript-processing-example-PT_Teddy_0027.gif" id="PT_Teddy_0027.gif"><img src="javascript-processing-example-PT_Teddy_0028.gif" id="PT_Teddy_0028.gif"><img src="javascript-processing-example-PT_Teddy_0029.gif" id="PT_Teddy_0029.gif"><img src="javascript-processing-example-PT_Teddy_0030.gif" id="PT_Teddy_0030.gif"><img src="javascript-processing-example-PT_Teddy_0031.gif" id="PT_Teddy_0031.gif"><img src="javascript-processing-example-PT_Teddy_0032.gif" id="PT_Teddy_0032.gif"><img src="javascript-processing-example-PT_Teddy_0033.gif" id="PT_Teddy_0033.gif"><img src="javascript-processing-example-PT_Teddy_0034.gif" id="PT_Teddy_0034.gif"><img src="javascript-processing-example-PT_Teddy_0035.gif" id="PT_Teddy_0035.gif"><img src="javascript-processing-example-PT_Teddy_0036.gif" id="PT_Teddy_0036.gif"><img src="javascript-processing-example-PT_Teddy_0037.gif" id="PT_Teddy_0037.gif"><img src="javascript-processing-example-PT_Teddy_0038.gif" id="PT_Teddy_0038.gif"><img src="javascript-processing-example-PT_Teddy_0039.gif" id="PT_Teddy_0039.gif"><img src="javascript-processing-example-PT_Teddy_0040.gif" id="PT_Teddy_0040.gif"><img src="javascript-processing-example-PT_Teddy_0041.gif" id="PT_Teddy_0041.gif"><img src="javascript-processing-example-PT_Teddy_0042.gif" id="PT_Teddy_0042.gif"><img src="javascript-processing-example-PT_Teddy_0043.gif" id="PT_Teddy_0043.gif"><img src="javascript-processing-example-PT_Teddy_0044.gif" id="PT_Teddy_0044.gif"><img src="javascript-processing-example-PT_Teddy_0045.gif" id="PT_Teddy_0045.gif"><img src="javascript-processing-example-PT_Teddy_0046.gif" id="PT_Teddy_0046.gif"><img src="javascript-processing-example-PT_Teddy_0047.gif" id="PT_Teddy_0047.gif"><img src="javascript-processing-example-PT_Teddy_0048.gif" id="PT_Teddy_0048.gif"><img src="javascript-processing-example-PT_Teddy_0049.gif" id="PT_Teddy_0049.gif"><img src="javascript-processing-example-PT_Teddy_0050.gif" id="PT_Teddy_0050.gif"><img src="javascript-processing-example-PT_Teddy_0051.gif" id="PT_Teddy_0051.gif"><img src="javascript-processing-example-PT_Teddy_0052.gif" id="PT_Teddy_0052.gif"><img src="javascript-processing-example-PT_Teddy_0053.gif" id="PT_Teddy_0053.gif"><img src="javascript-processing-example-PT_Teddy_0054.gif" id="PT_Teddy_0054.gif"><img src="javascript-processing-example-PT_Teddy_0055.gif" id="PT_Teddy_0055.gif"><img src="javascript-processing-example-PT_Teddy_0056.gif" id="PT_Teddy_0056.gif"><img src="javascript-processing-example-PT_Teddy_0057.gif" id="PT_Teddy_0057.gif"><img src="javascript-processing-example-PT_Teddy_0058.gif" id="PT_Teddy_0058.gif"><img src="javascript-processing-example-PT_Teddy_0059.gif" id="PT_Teddy_0059.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>
  AniSprite animation1, animation2;
  float xpos, ypos;
  float drag = 30.0;
  
  void setup() {
    size(200, 200);
    background(255, 204, 0);
    frameRate(24);
    animation1 = new AniSprite("PT_Shifty_00", 38);
    animation2 = new AniSprite("PT_Teddy_00", 60);
  }
  
  void draw() { 
    float difx = mouseX - xpos;
    if (abs(difx) &gt; 1.0) {
      xpos = xpos + difx/drag;
      xpos = constrain(xpos, 0, width);
    }
  
    // Display the sprite at the position xpos, ypos
    if (mousePressed) {
      background(153, 153, 0);
      animation1.display(xpos-animation1.getWidth()/2, ypos);
    } else {
      background(255, 204, 0);
      animation2.display(xpos-animation1.getWidth()/2, ypos);
    }
  }</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.