How to setup processingjs library on html?

Question

I realise the exact same question has been asked already however, the answers did not work for me: How do you setup processingJS on html?

I pasted exactly what was suggested but still no result. The processingjs website (http://processingjs.org/articles/jsQuickStart.html) gives the following advice:

<script src="processing-1.3.6.min.js"></script>
<canvas data-processing-sources="hello-web.pde"></canvas>

But it is not clear exactly how to use them for a newbie like me. Do I place them both in the HTML file or one in the linked .js file?

The purpose of this is that I am trying to learn by doing on the Khan Academy processingjs course.

Many thanks,

Answer 1

Please be more specific about what you're seeing. What do you mean by "still no result"? You need to check the JavaScript console for any errors.

My guess is you're getting an error saying that it can't find processing.js or that it can'd find your .pde file. These files have to be located at the path you define. The code in the answer you linked to assumes that they're right next to the .html file, but that's not always the case. Please note that the code in the answer was just an example, and should not be copied directly. You have to understand what each line is doing and then do that in your own code.

I've written a tutorial on deploying your Processing code using Processing.js available here.