What do I put in the HTML file?

Processing Beginners
1

I’m learning Processing and want to be able to write it in a text editor on my computer. I downloaded processing.js and have written a quick sketch called program.pde:

void setup() {
    size(200, 200);
    fill(200);
    ellipse(10, 20, 30, 40);
}

Now, from what I know, I need to put an html file in the same folder as processing.js and program.pde. I’ve looked around for hours and hours, and I’ve tried putting many things in the html file, but nothing seems to work. I never get my ellipse when I open the html file in Chrome. I’ve tried this:

<!DOCTYPE html>
 <html>
 <head>
   <title>Test</title>
   <script src="processing.js"></script>
 </head>
 <body>
  <canvas data-processing-sources="program.pde"></canvas>
</body>
</html>

…and this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="processing.js"></script>
  </head>
  <body>
    <script src="program.pde"></script>
  </body>
</html>

…and much more, but I’ve never gotten anything on the webpage. If someone could help me figure this out, that would be very much appreciated! Thanks.

1 Like
2
1 Like
3

Thanks. If I want to use Chrome, which workaround do you suggest?

4

The extension approach is the easiest. :wink:

You can also take a look at the “index.html” file from the sketch link below: :link:

1 Like
5

Sorry, but you mean the Github local server?

6

No, I’ve meant the Chrome’s EXTENSION. :point_left:

But feel free to try out any other solutions & workarounds. :innocent:

7

Okay. I’ve installed the extension, and it directs me to program.pde, but when I get there, I see the code I wrote and not the actual sketch.

8

Servers needs an HTML file to kick start everything else! :soccer:

Again, take a look at my online sketch example I’ve posted. :eyes:

9

The HTML file is blank.

I looked at your sketch, but I don’t recognize most of the code as Processing.

10

ProcessingJS.org/articles/p5QuickStart.html

1 Like
11

It isn’t. It’s the “index.html”:

You can run the code on Processing’s IDE (PDE) too.

1 Like