topical media & game development

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) _

#javascript-processing-example-basic-inputs-mouse1d.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>Mouse1D</h2>
  
  <p>Move the mouse left and right to shift the balance. 
  The "mouseX" variable is used to control both the 
  size and color of the rectangles.</p>
  
  <p><a href="http://processing.org/learning/basics/mouse1d.html"><b>Original Processing.org Example:</b> Mouse1D</a><br>
  <script type="application/processing">
  int gx = 15;
  int gy = 35;
  float leftColor = 0.0;
  float rightColor = 0.0;
  
  void setup() 
  {
    size(200, 200);
    colorMode(RGB, 1.0);
    noStroke();
  }
  
  void draw() 
  {
    background(0.0);
    update(mouseX); 
    fill(0.0, leftColor + 0.4, leftColor + 0.6); 
    rect(width/4-gx, width/2-gx, gx*2, gx*2); 
    fill(0.0, rightColor + 0.2, rightColor + 0.4); 
    rect(width/1.33-gy, width/2-gy, gy*2, gy*2);
  }
  
  void update(int x) 
  {
    leftColor = -0.002 * x/2 + 0.06;
    rightColor =  0.002 * x/2 + 0.06;
          
    gx = x/2;
    gy = 100-x/2;
  
    if (gx < 10) {
      gx = 10;
    } else if (gx > 90) {
      gx = 90;
    }
  
    if (gy > 90) {
      gy = 90;
    } else if (gy < 10) {
      gy = 10;
    }
  }
  </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>
  int gx = 15;
  int gy = 35;
  float leftColor = 0.0;
  float rightColor = 0.0;
  
  void setup() 
  {
    size(200, 200);
    colorMode(RGB, 1.0);
    noStroke();
  }
  
  void draw() 
  {
    background(0.0);
    update(mouseX); 
    fill(0.0, leftColor + 0.4, leftColor + 0.6); 
    rect(width/4-gx, width/2-gx, gx*2, gx*2); 
    fill(0.0, rightColor + 0.2, rightColor + 0.4); 
    rect(width/1.33-gy, width/2-gy, gy*2, gy*2);
  }
  
  void update(int x) 
  {
    leftColor = -0.002 * x/2 + 0.06;
    rightColor =  0.002 * x/2 + 0.06;
          
    gx = x/2;
    gy = 100-x/2;
  
    if (gx &lt; 10) {
      gx = 10;
    } else if (gx &gt; 90) {
      gx = 90;
    }
  
    if (gy &gt; 90) {
      gy = 90;
    } else if (gy &lt; 10) {
      gy = 10;
    }
  }</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) _

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.