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-structure-creategraphics.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>CreateGraphics</h2>
  
  <p>The createGraphics() function creates an object from the PGraphics class 
  (PGraphics is the main graphics and rendering context for Processing). 
  The beginDraw() method is necessary to prepare for drawing and endDraw() is
  necessary to finish. Use this class if you need to draw into an off-screen 
  graphics buffer or to maintain two contexts with different properties.</p>
  
  <p><a href="http://processing.org/learning/basics/creategraphics.html"><b>Original Processing.org Example:</b> CreateGraphics</a><br>
  <script type="application/processing">
  PGraphics pg;
  
  void setup() {
    size(200, 200);
    pg = createGraphics(80, 80, P3D);
  }
  
  void draw() {
    fill(0, 12);
    rect(0, 0, width, height);
    fill(255);
    noStroke();
    ellipse(mouseX, mouseY, 60, 60);
    
    pg.beginDraw();
    pg.background(102);
    pg.noFill();
    pg.stroke(255);
    pg.ellipse(mouseX-60, mouseY-60, 60, 60);
    pg.endDraw();
    
    image(pg, 60, 60); 
  }
  </script><canvas width="200" height="200"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"><img src="javascript-processing-example-mask.jpg" id="mask.jpg"><img src="javascript-processing-example-test.jpg" id="test.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>
  PGraphics pg;
  
  void setup() {
    size(200, 200);
    pg = createGraphics(80, 80, P3D);
  }
  
  void draw() {
    fill(0, 12);
    rect(0, 0, width, height);
    fill(255);
    noStroke();
    ellipse(mouseX, mouseY, 60, 60);
    
    pg.beginDraw();
    pg.background(102);
    pg.noFill();
    pg.stroke(255);
    pg.ellipse(mouseX-60, mouseY-60, 60, 60);
    pg.endDraw();
    
    image(pg, 60, 60); 
  }</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.