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-color-reading.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>Reading</h2>
  
  <p>An image is recreated from its individual component colors.
  The many colors of the image are created through modulating the 
  red, green, and blue values. This is an exageration of an LCD display.</p>
  
  <p><a href="http://processing.org/learning/basics/reading.html"><b>Original Processing.org Example:</b> Reading</a><br>
  <script type="application/processing">
  size(200, 200);
  noStroke();
  background(0);
  
  // Load an image from the data directory
  PImage c;
  c = loadImage("cait.jpg");
  
  int xoff = 0;
  int yoff = 0;
  int p = 2;
  int pix = p*3;
  
  for(int i = 0; i < c.width*c.height; i += 1) 
  {  
    int here = c.pixels[i];
    
    fill(red(here), 0, 0);
    rect(xoff, yoff, p, pix);
    
    fill(0, green(here), 0);
    rect(xoff+p, yoff, p, pix);
    
    fill(0, 0, blue(here));
    rect(xoff+p*2, yoff, p, pix);
    
    xoff+=pix;
    if(xoff >= width-pix) {
      xoff = 0;
      yoff += pix;
    }
  }
  </script><canvas width="200" height="200"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"><img src="javascript-processing-example-cait.jpg" id="cait.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>
  size(200, 200);
  noStroke();
  background(0);
  
  // Load an image from the data directory
  PImage c;
  c = loadImage("cait.jpg");
  
  int xoff = 0;
  int yoff = 0;
  int p = 2;
  int pix = p*3;
  
  for(int i = 0; i &lt; c.width*c.height; i += 1) 
  {  
    int here = c.pixels[i];
    
    fill(red(here), 0, 0);
    rect(xoff, yoff, p, pix);
    
    fill(0, green(here), 0);
    rect(xoff+p, yoff, p, pix);
    
    fill(0, 0, blue(here));
    rect(xoff+p*2, yoff, p, pix);
    
    xoff+=pix;
    if(xoff &gt;= width-pix) {
      xoff = 0;
      yoff += pix;
    }
  }</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.