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-basic-image-sprite.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>Sprite</h2>
  
  <p>by <a href="http://www.presstube.com/">James Patterson</a>. 
  
  Demonstrates loading and displaying a transparent GIF image. 
  
  Created 27 January 2003.</p>
  
  <p><a href="http://processing.org/learning/basics/sprite.html"><b>Original Processing.org Example:</b> Sprite</a><br>
  <script type="application/processing">
  PImage teddy;
  
  float xpos;
  float ypos;
  float drag = 30.0;
  
  void setup() 
  {
    size(200,200);
    teddy = loadImage("teddy.gif");
    xpos = width/2;
    ypos = height/2;
    frameRate(60);
  }
  
  void draw() 
  { 
    background(102);
    
    float difx = mouseX - xpos-teddy.width/2;
    if(abs(difx) > 1.0) {
      xpos = xpos + difx/drag;
      xpos = constrain(xpos, 0, width-teddy.width);
    }  
    
    float dify = mouseY - ypos-teddy.height/2;
    if(abs(dify) > 1.0) {
      ypos = ypos + dify/drag;
      ypos = constrain(ypos, 0, height-teddy.height);
    }  
    
    // Display the sprite at the position xpos, ypos
    image(teddy, xpos, ypos);
  }
  </script><canvas width="200" height="200"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"><img src="javascript-processing-example-sky.jpg" id="sky.jpg"><img src="javascript-processing-example-teddy.gif" id="teddy.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>
  PImage teddy;
  
  float xpos;
  float ypos;
  float drag = 30.0;
  
  void setup() 
  {
    size(200,200);
    teddy = loadImage("teddy.gif");
    xpos = width/2;
    ypos = height/2;
    frameRate(60);
  }
  
  void draw() 
  { 
    background(102);
    
    float difx = mouseX - xpos-teddy.width/2;
    if(abs(difx) &gt; 1.0) {
      xpos = xpos + difx/drag;
      xpos = constrain(xpos, 0, width-teddy.width);
    }  
    
    float dify = mouseY - ypos-teddy.height/2;
    if(abs(dify) &gt; 1.0) {
      ypos = ypos + dify/drag;
      ypos = constrain(ypos, 0, height-teddy.height);
    }  
    
    // Display the sprite at the position xpos, ypos
    image(teddy, xpos, 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.