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-inputs-mousefunctions.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>MouseFunctions</h2>
  
  <p>Click on the box and drag it across the screen.</p>
  
  <p><a href="http://processing.org/learning/basics/mousefunctions.html"><b>Original Processing.org Example:</b> MouseFunctions</a><br>
  <script type="application/processing">
  float bx;
  float by;
  int bs = 20;
  boolean bover = false;
  boolean locked = false;
  float bdifx = 0.0; 
  float bdify = 0.0; 
  
  void setup() 
  {
    size(200, 200);
    bx = width/2.0;
    by = height/2.0;
    rectMode(CENTER_RADIUS);  
  }
  
  void draw() 
  { 
    background(0);
    
    // Test if the cursor is over the box 
    if (mouseX > bx-bs && mouseX < bx+bs && 
        mouseY > by-bs && mouseY < by+bs) {
      bover = true;  
      if(!locked) { 
        stroke(255); 
        fill(153);
      } 
    } else {
      stroke(153);
      fill(153);
      bover = false;
    }
    
    // Draw the box
    rect(bx, by, bs, bs);
  }
  
  void mousePressed() {
    if(bover) { 
      locked = true; 
      fill(255, 255, 255);
    } else {
      locked = false;
    }
    bdifx = mouseX-bx; 
    bdify = mouseY-by; 
  
  }
  
  void mouseDragged() {
    if(locked) {
      bx = mouseX-bdifx; 
      by = mouseY-bdify; 
    }
  }
  
  void mouseReleased() {
    locked = false;
  }
  </script><canvas width="200" height="200"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"></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>
  float bx;
  float by;
  int bs = 20;
  boolean bover = false;
  boolean locked = false;
  float bdifx = 0.0; 
  float bdify = 0.0; 
  
  void setup() 
  {
    size(200, 200);
    bx = width/2.0;
    by = height/2.0;
    rectMode(CENTER_RADIUS);  
  }
  
  void draw() 
  { 
    background(0);
    
    // Test if the cursor is over the box 
    if (mouseX &gt; bx-bs &amp;&amp; mouseX &lt; bx+bs &amp;&amp; 
        mouseY &gt; by-bs &amp;&amp; mouseY &lt; by+bs) {
      bover = true;  
      if(!locked) { 
        stroke(255); 
        fill(153);
      } 
    } else {
      stroke(153);
      fill(153);
      bover = false;
    }
    
    // Draw the box
    rect(bx, by, bs, bs);
  }
  
  void mousePressed() {
    if(bover) { 
      locked = true; 
      fill(255, 255, 255);
    } else {
      locked = false;
    }
    bdifx = mouseX-bx; 
    bdify = mouseY-by; 
  
  }
  
  void mouseDragged() {
    if(locked) {
      bx = mouseX-bdifx; 
      by = mouseY-bdify; 
    }
  }
  
  void mouseReleased() {
    locked = false;
  }</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.