2D rendering processing P5

Question

I'm new to javascript and stumbled over this webpage:

http://processingjs.org/articles/RenderingModes.html

It describes how to render 2D objects in processing. If I open a new P5 project and insert the example code the code looks like this:

HTML (index.html):

 <html>
    <head>
      <meta charset="UTF-8">

      <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
      <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
      <script language="javascript" type="text/javascript" src="sketch_180226b.js"></script>
      <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->

      <!-- This line removes any default padding and style. 
           You might only need one of these values set. -->
      <style> body {padding: 0; margin: 0;} </style>
    </head>

<body>
</body>
</html>

JS (sketch_180226b.js):

int i = 0; 
void setup() {
    size(200, 200); 
    background(255);
    smooth();
    strokeWeight(15);
    frameRate(24);
} 
void draw() {
    stroke(random(50), random(255), random(255), 100);
    line(i, 0, random(0, width), height);
    if (i &lt; width) {
        i++;
    } else {
        i = 0; 
    }
}

But if I run the Code Chrome opens and it does not show anything. Do I have to create an extra canvas inside the HTML Code?

[Epthelyn's answer](https://stackoverflow.com/a/48991917/873165) is correct, but in case you wanted to read more about the differences between Processing, P5.js, and Processing.js, [here](http://happycoding.io/tutorials/p5js/which-processing) is a guide. — Kevin Workman, Feb 26 '18 at 17:10

score 2 · Accepted Answer · answered Feb 26 '18 at 15:35

Processing and p5 are not the same. p5 is JavaScript, Processing is converted to JavaScript when run. A useful comparison can be found here: https://www.sitepoint.com/processing-js-vs-p5-js-whats-difference/

That example you've found is for Processing, not p5, and so will not run because it isn't valid JavaScript - it will fail on line 1 with "int".

If you were intending to use p5, then the equivalent (and very similar) example would be:

let i = 0;
function setup() {
    createCanvas(200, 200); //replaced size(200,200)
    background(255);
    smooth();
    strokeWeight(15);
    frameRate(24);
} 
function draw() {
    stroke(random(50), random(255), random(255), 100);
    line(i, 0, random(0, width), height);
    if (i < width) {
        i++;
    } else {
        i = 0; 
    }
}

Otherwise, if you want to run Processing code in a browser then you'll need to use the process described here: http://processingjs.org/articles/p5QuickStart.html

Thank you for this useful information. I messed things up between those two "libraries". The example above works fine and now I know where to start :) — Gaterde, Feb 26 '18 at 15:39

2D rendering processing P5

1 Answers1