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-interaction-tickle.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>Tickle</h2>
  
  <p>The word "tickle" jitters when the cursor hovers over.
  Sometimes, it can be tickled off the screen.</p>
  
  <p><a href="http://processing.org/learning/topics/tickle.html"><b>Original Processing.org Example:</b> Tickle</a><br>
  <script type="application/processing">
  PFont font;
  float x = 33; // X-coordinate of text
  float y = 60; // Y-coordinate of text
  
  void setup() 
  {
    size(200, 200);
    font = loadFont("AmericanTypewriter-24.vlw");
    textFont(font);
    noStroke();
  }
  
  void draw() 
  {
    fill(204, 120);
    rect(0, 0, width, height);
    fill(0);
    // If the cursor is over the text, change the position
    if ((mouseX >= x) && (mouseX <= x+55) &&
      (mouseY >= y-24) && (mouseY <= y)) {
      x += random(-5, 5);
      y += random(-5, 5);
    }
    text("tickle", x, y);
  }
  </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>
  PFont font;
  float x = 33; // X-coordinate of text
  float y = 60; // Y-coordinate of text
  
  void setup() 
  {
    size(200, 200);
    font = loadFont("AmericanTypewriter-24.vlw");
    textFont(font);
    noStroke();
  }
  
  void draw() 
  {
    fill(204, 120);
    rect(0, 0, width, height);
    fill(0);
    // If the cursor is over the text, change the position
    if ((mouseX &gt;= x) &amp;&amp; (mouseX &lt;= x+55) &amp;&amp;
      (mouseY &gt;= y-24) &amp;&amp; (mouseY &lt;= y)) {
      x += random(-5, 5);
      y += random(-5, 5);
    }
    text("tickle", x, y);
  }</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.