Embedding sketches in HTML

edited April 2017 in JavaScript Mode

I followed some straightforward instructions on embedding a sketch from: http://cs.nyu.edu/~kapp/cs101/processing_on_the_web/ however all I got was a white space where the sketch should have appeared.

I'm pretty new to processing and programming. In addition to the instructions I followed which specify what to insert into the html file and where to put the various files (including processing.js), does the actual code have to be re-written in any way? I'm talking about a really simple sketch where a ball follows the mouse, so no classes or external libraries etc.

Also, my code is written in the standard Java version of processing. I'm was assuming that processing.js file takes care of any conversion necessary.

Answers

  • Can you provide your html and js code? Are you embedding the processing.js in the same folder than your html?

    You can test your code in openprocessing.com so I understand. Have you considered using p5.js and do all your coding in javascript instead?

    What website are you trying to run your code on? Do they allow to run javascript?

    Kf

  • To answer the last question first, I was attempting to do this by opening the html file from a folder on my computer, not on web. Could that be the problem? I just assumed that would work...

  • edited May 2017

    Can you share a sample of your code or a snippet showing your approach? One issue of accessing a file from your file system is that you might right into CORS issues. That is, if you are loading the file using javascript. I don't think you will have any problem if you use plain HTML code.

    You could run your first example in openprocesing, codepen or sketchpad.cc. You can search previous posts that shows some samples.

    Also, what web browser are you using? It is strongly suggested starting with FireFox. Chrome is a good option as well but you need to run it with an extra parameter.

    *****Ok, I checked your post again and your question is related to processing.js so you should try openprocessing. My comments was more related to accessing resources like images or sound.

    Regarding to processing.js library, I suggest you work on installing the Processing.js mode in the Processing IDE. It is very likely that it is not an available mode nowadays because there is not much support from what I understand. However, you can still get the library online and you can install it manually. You can run write Processing java-code and compile it in java mode. When you know your code is working, then you switch to Processing.js mode and then, when you hit the run button, your sketch will be launched in a browser. No changes needed at all.

    Kf

    Kf

Sign In or Register to comment.