iframe-proxy | Sunbelt Computer Software

91 lines (72 loc) · 2.97 KB

<!DOCTYPE html>
    <title>Processing.js Example Page</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="processing.js"></script>
        This is a source-file-less sketch, loaded from inline source code in
        the html header. This only works if the script specifies a data-processing-target
    <script type="text/processing" data-processing-target="targetcanvas">
      //  Processing.js example sketch
      int fontsize = 24;
      void setup() {
        size(200, 200);
        stroke(0);
        fill(0);
        textFont(createFont("Arial",fontsize));
        noLoop();
      void draw() {
        background(#F0F0E0);
        String textstring = "header example";
        float twidth = textWidth(textstring);
        text(textstring, (width-twidth)/2, height/2);
    </script>
    <h3>Processing.js Example Page - Loading Sketches</h3>
    <p>This is a sketch that is loaded from source. If you want to be able
        to use this sketch after loading, for instance in your own JavaScript
        code, it needs an id='...' so that you can request it using:</p>
    <pre>   Processing.getIntanceById('...')</pre>
    <p>You can also load a sketch from multiple source files by putting
        them all in a canvas data-processing-sources attribute string, separated
        with spaces:</p>
    <pre>   &lt;canvas ... data-processing-sources="file1.pde file2.pde file3.pde" ...&gt;</pre>
    <canvas data-processing-sources="example.pde" style="border: 1px solid black;"></canvas>
    <p>This is a source-less sketch, loaded from inline source code. Note
        that in order for an on-page inline sketch to be loaded into a canvas,
        the sketch must either immediately preceed the &lt;canvas&gt; it is to be
        loaded in, or the script needs to indicate the id for the canvas.</p>
    <p>This means you can either place your script inside the &lt;body&gt; element,
        above its associated &lt;canvas&gt;, or in the &lt;head&gt; element, pointing to
        its associated &lt;canvas&gt; element.</p>
    <script type="text/processing">
      //  Processing.js example sketch
      int fontsize = 24;
      void setup() {
        size(200, 200);
        stroke(0);
        fill(0);
        textFont(createFont("Arial",fontsize));
        noLoop();
      void draw() {
        background(#F0F0E0);
        String textstring = "inline example";
        float twidth = textWidth(textstring);
        text(textstring, (width-twidth)/2, height/2);
    </script>
    <canvas style="border: 1px solid black;"></canvas>
    <p>This sketch is loaded from a &lt;script&gt; in the html header block
        which specifies this canvas as its target, referencing its id:</p>
    <pre>   &lt;script type="text/processing" data-processing-target="targetcanvas"&gt;...&lt;/script&gt;</pre>
    <canvas id="targetcanvas" style="border: 1px solid black;"></canvas>

Sunbelt Computer Software

PL/B Language Development and Support

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sunbelt Computer Software

PL/B Language Development and Support

FilesExpand file tree

example.html

Latest commit

History

example.html

File metadata and controls