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-image-transparency.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>Transparency</h2>
  
  <p>Move the pointer left and right across the image to change
  its position. This program overlays one image over another 
  by modifying the alpha value of the image with the tint() function.</p>
  
  <p><a href="http://processing.org/learning/basics/transparency.html"><b>Original Processing.org Example:</b> Transparency</a><br>
  <script type="application/processing">
  PImage a, b;
  float offset;
  
  void setup() 
  {
    size(200, 200);
    a = loadImage("construct.jpg");  // Load an image into the program 
    b = loadImage("wash.jpg");   // Load an image into the program 
    frameRate(60);
  }
  
  void draw() 
  { 
    image(a, 0, 0);
    float offsetTarget = map(mouseX, 0, width, -b.width/2 - width/2, 0);
    offset += (offsetTarget-offset)*0.05; 
    tint(255, 153);
    image(b, offset, 20);
  }
  </script><canvas width="200" height="200"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"><img src="javascript-processing-example-construct.jpg" id="construct.jpg"><img src="javascript-processing-example-wash.jpg" id="wash.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, b;
  float offset;
  
  void setup() 
  {
    size(200, 200);
    a = loadImage("construct.jpg");  // Load an image into the program 
    b = loadImage("wash.jpg");   // Load an image into the program 
    frameRate(60);
  }
  
  void draw() 
  { 
    image(a, 0, 0);
    float offsetTarget = map(mouseX, 0, width, -b.width/2 - width/2, 0);
    offset += (offsetTarget-offset)*0.05; 
    tint(255, 153);
    image(b, offset, 20);
  }</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.