› › ›

Processingjs Download

ThatOnePandaGuyThatOnePandaGuy
edited August 2017 in JavaScript Mode

I want to get into processingjs but im not sure how to download it. When i click on the download button it just brings me to lots of code. Im not sure what im suposed to do in this. I looked up on google and youtube on how to download it but it just shows me how to use processingjs. Any help would be grate to show me how to download processingjs.

Tagged:

Best Answers

Answers

  • GoToLoopGoToLoop
    edited September 2017
    • Processing.js is a JS library for browsers.
    • Its main feature is to transpile pure Processing's Java Mode ".pde" sketches into ".js" 1s, so they can run in any browser as well.
    • An online example: https://OpenProcessing.org/sketch/421196
    • As for any ".js" browser script, 1st it needs some ".html" file in order to kickstart it.
    • Now let's try to make it run locally, creating a minimum "index.html" file for it:
    <script async src=https://CDN.JSDelivr.net/processing.js/latest/mainfile></script>
<canvas data-processing-sources=sketch.pde></canvas>
  • kfrajerkfrajer
    Answer ✓

    Are you familiar with js? You can get the js script to attach to your processing sketches when you load them in a html file: http://processingjs.org/download/

    Using the actual file or the minimized version makes not difference for testing. For deployment, you should use the min version as there will be less bytes to transfer when loading a page request.

    How do you load java code into a html page? This start guide should be the first page to review: http://processingjs.org/articles/p5QuickStart.html

    In a nutshell,

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

    The script in the head section refers to the processing.js file you just downloaded. Make sure this file is in the sketch folder. The pde file is your processing code that you want to run. It is also located in the sketch folder. The above html file should be place in a file that ends with the html extension so any browser can load it. A generic name for this html is index.html. This is the name that most examples come with.

    Processing IDE also has a processing.js mode where you type your processing code and when you run it, it will launch a web browser window showing your code in a web page. This is done running in your machine. You might need to setup a local server if you are accessing files, like images. You should become familiar with the guide above as it explain what is available in processing.js, and what is more important, what is not available. For example, p.js has no support to external libraries. So if your code uses peasycam or the drop library, it will not work in p.js and you should migrate to p5.js instead.

    One last thing. You can use openprocesing.com to run your pde sketches. I haven't done it myself but from what I have seen, you create an account there, create a project and select p.js mode. Then load your code and run it and you can develop right away. You do not need to setup your processing.js file or index.html file as it is all done for you. If you follow this path and get stuck, ask here below or browse previous posts.

    If you want to make your sketches available online, and you want to enjoy more features, then you should consider using p5.js instead.

    Kf

  • TfGuy44TfGuy44
    edited August 2017 Answer ✓

    Right click the link and "Save link as...", call the file "processing.js".

    What you have just saved is a lot of javascript code that is the actual source code for ProcessingJS.

    This file is the file that you should inclued in your HTML:

    <script src="processing.js"></script>

    This page goes into more detail: http://processingjs.org/learning/

    EDIT: I'm Sloooooow.

  • ThatOnePandaGuyThatOnePandaGuy

    So this is what i have in a folder named "Website" http://imgur.com/a/MlpQc but when i run it on chrome (not firefox because i need to download it and my internet it slow) it only shows my heading and parigraph. Code: https://pastebin.com/U4ug8Jrr.

  • kfrajerkfrajer
    Answer ✓

    Yes, there is no Processing code so there is nothing to transpilate by processing.js in this case. Check previous related posts: https://forum.processing.org/two/search?Search=pjs

    or some of the quick guides from the processing.js website: http://processingjs.org/articles/jsQuickStart.html

    Kf

Sign In or Register to comment.