› › ›

Help playing sketches on the web

GeorgeRolandGeorgeRoland
edited October 2017 in JavaScript Mode

I am trying to create a processing sketch (processing 3.3.6) and play it in a web browser.

Here is my processing sketch:

        // myTrialWebSketch.pde
        int x;
        void setup() {
          size(200, 200);
          background(100);
          x = -27;
          println("Hello Web!");
        }

        void draw() {
          background(100);
          ellipse(x, 100, 30, 30);
          x = x + 5;
          if (x > 236) {
            x = -27;
          }
        }

I downloaded processing-1.4.8.js

Here is my .html file:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Web - Processing.js Test</title>
    <script src="processing-1.4.8.js"></script>
</head>
<body>
    <h1>Processing.js Test</h1>
    <p>This is my first a Processing.js web-based sketch:</p>
    <canvas data-processing-sources="myTrialWebSketch.pde"></canvas>
</body>
</html>

The .html file. Processing .pde file and the processing-1.4.8.js are all in one directory. When I load the .html file into my browser, only the paragraph text shows up. My sketch doesn’t.

What am I doing wrong?

Tagged:

Best Answers

Answers

  • GoToLoopGoToLoop

    https://Forum.Processing.org/two/discussion/23720/processingjs-download#Item_1

  • GeorgeRolandGeorgeRoland

    Thanks, GoToLoop. I double-checked my files based on the instructions you gave and the linked pages for getting started, which I followed. My .html, .pde and processing-1.4.8.js files are all in one directory as you recommended. I tried loading this is Chrome and Safari with the same results--the processing sketch didn't appear. Don't understand why tis isn't working!

  • GoToLoopGoToLoop
    Answer ✓

    I tried loading this is Chrome and Safari with the same results...

    If you had really read the forum answer I've linked to, you'd know at least I've advised Firefox. [-(

  • GeorgeRolandGeorgeRoland

    Thanks, GoToloop. You caught me on that one! I downloaded Firefox v. 56.0.2 this morning, and the animation plays perfectly in that browser. I sent a message to Chrome that their browser doesn't support this project and may do the same for Safari although I doubt it'll help. It is very frustrating that this process only works with one browser! Thanks again for tutoring me on this problem!

  • GoToLoopGoToLoop
    edited October 2017 Answer ✓

    I sent a message to Chrome that their browser doesn't support this project and...

    Just a little further after I've mentioned Firefox there, I've also cited Chrome:

    To run them locally, use a Firefox-based browser, b/c they have no restriction for local files.

    Simply open or drag "index.html" into a Firefox browser, and the Java Mode "sketch.pde" will automatically get transpiled into JS and run there!

    For Chrome-based browsers, you can use the instructions below:
    http://Chrome-allow-file-access-from-file.com

    The reason I've recommended Firefox-based browsers 1st is b/c they simply work w/ file:// protocol scheme w/o any further configuration. \m/

    Other browser families need extra effort on our part in order to run ".js" files under the file:// scheme on them. #:-S

    On the other hand, under the http:// & https:// schemes, everything works as they should! $-)

    But in order to use these schemes, we'll need a local server (or host our files in an Internet web server).
    I've also cited a link for a wiki article about local servers there as well: :-\"

    And for a single solution to all browsers, take a look at this wiki tutorial below: https://GitHub.com/processing/p5.js/wiki/Local-server

    For more advanced instructions, study this article below:
    http://ProcessingJS.org/articles/p5QuickStart.html

    I'd pick the 2nd option (http-server over node.js) there. :P

    In short, you shoulda just followed the big recipe I've posted there... :-@
    https://Forum.Processing.org/two/discussion/23720/processingjs-download#Item_1

Sign In or Register to comment.