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-mousesignals.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>MouseSignals</h2>
  
  <p>Move and click the mouse to generate signals. 
  The top row is the signal from "mouseX", 
  the middle row is the signal from "mouseY",
  and the bottom row is the signal from "mousePressed".</p>
  
  <p><a href="http://processing.org/learning/basics/mousesignals.html"><b>Original Processing.org Example:</b> MouseSignals</a><br>
  <script type="application/processing">
  int[] xvals;
  int[] yvals;
  int[] bvals;
  
  void setup() 
  {
    size(200, 200);
    xvals = new int[width];
    yvals = new int[width];
    bvals = new int[width];
  }
  
  int arrayindex = 0;
  
  void draw()
  {
    background(102);
    
    for(int i=1; i<width; i++) { 
      xvals[i-1] = xvals[i]; 
      yvals[i-1] = yvals[i];
      bvals[i-1] = bvals[i];
    } 
    // Add the new values to the end of the array 
    xvals[width-1] = mouseX; 
    yvals[width-1] = mouseY;
    if(mousePressed) {
      bvals[width-1] = 0;
    } else {
      bvals[width-1] = 255;
    }
    
    fill(255);
    noStroke();
    rect(0, height/3, width, height/3+1);
  
    for(int i=1; i<width; i++) {
      stroke(255);
      point(i, xvals[i]/3);
      stroke(0);
      point(i, height/3+yvals[i]/3);
      stroke(255);
      line(i, 2*height/3+bvals[i]/3, i, (2*height/3+bvals[i-1]/3));
    }
  }
  </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[] xvals;
  int[] yvals;
  int[] bvals;
  
  void setup() 
  {
    size(200, 200);
    xvals = new int[width];
    yvals = new int[width];
    bvals = new int[width];
  }
  
  int arrayindex = 0;
  
  void draw()
  {
    background(102);
    
    for(int i=1; i&lt;width; i++) { 
      xvals[i-1] = xvals[i]; 
      yvals[i-1] = yvals[i];
      bvals[i-1] = bvals[i];
    } 
    // Add the new values to the end of the array 
    xvals[width-1] = mouseX; 
    yvals[width-1] = mouseY;
    if(mousePressed) {
      bvals[width-1] = 0;
    } else {
      bvals[width-1] = 255;
    }
    
    fill(255);
    noStroke();
    rect(0, height/3, width, height/3+1);
  
    for(int i=1; i&lt;width; i++) {
      stroke(255);
      point(i, xvals[i]/3);
      stroke(0);
      point(i, height/3+yvals[i]/3);
      stroke(255);
      line(i, 2*height/3+bvals[i]/3, i, (2*height/3+bvals[i-1]/3));
    }
  }</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.