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-topic-image-pixelarray.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>PixelArray</h2>
  
  <p>Click and drag the mouse up and down to control the signal and 
  press and hold any key to see the current pixel being read. 
  This program sequentially reads the color of every pixel of an image
  and displays this color to fill the window.</p>
  
  <p><a href="http://processing.org/learning/topics/pixelarray.html"><b>Original Processing.org Example:</b> PixelArray</a><br>
  <script type="application/processing">
  PImage a;
  int[] aPixels;
  int direction = 1;
  boolean onetime = true;
  float signal;
  
  void setup() 
  {
    size(200, 200);
    aPixels = new int[width*height];
    noFill();
    stroke(255);
    frameRate(30);
    a = loadImage("ystone08.jpg");
    for(int i=0; i<width*height; i++) {
      aPixels[i] = a.pixels[i];
    }
  }
  
  void draw() 
  {
    if (signal > width*height-1 || signal < 0) { 
      direction = direction * -1; 
    }
  
    if(mousePressed) {
      if(mouseY > height-1) { mouseY = height-1; }
      if(mouseY < 0) { mouseY = 0; }
      signal = mouseY*width+mouseX;
    } else {
      signal += (0.33*direction);  
    }
    
    if(keyPressed) {
      image(a, 0, 0);
      /*
      loadPixels();
      for (int i=0; i<width*height; i++) { 
        pixels[i] = aPixels[i];  
      }
      updatePixels();
      */
      rect(signal\%width-5, int(signal/width)-5, 10, 10);
      point(signal\%width, int(signal/width));
    } else {
      background( aPixels[int(signal)] );
      /*
      loadPixels();
      for (int i=0; i<width*height; i++) { 
        pixels[i] = aPixels[int(signal)];
      }
      updatePixels();
      */
    }
  }
  </script><canvas width="200" height="200"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"><img src="javascript-processing-example-ystone08.jpg" id="ystone08.jpg"></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 a;
  int[] aPixels;
  int direction = 1;
  boolean onetime = true;
  float signal;
  
  void setup() 
  {
    size(200, 200);
    aPixels = new int[width*height];
    noFill();
    stroke(255);
    frameRate(30);
    a = loadImage("ystone08.jpg");
    for(int i=0; i&lt;width*height; i++) {
      aPixels[i] = a.pixels[i];
    }
  }
  
  void draw() 
  {
    if (signal &gt; width*height-1 || signal &lt; 0) { 
      direction = direction * -1; 
    }
  
    if(mousePressed) {
      if(mouseY &gt; height-1) { mouseY = height-1; }
      if(mouseY &lt; 0) { mouseY = 0; }
      signal = mouseY*width+mouseX;
    } else {
      signal += (0.33*direction);  
    }
    
    if(keyPressed) {
      loadPixels();
      for (int i=0; i&lt;width*height; i++) { 
        pixels[i] = aPixels[i];  
      }
      updatePixels();
      rect(signal\%width-5, int(signal/width)-5, 10, 10);
      point(signal\%width, int(signal/width));
    } else {
      loadPixels();
      for (int i=0; i&lt;width*height; i++) { 
        pixels[i] = aPixels[int(signal)];
      }
      updatePixels();
    }
  }</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.