CODEWITHSUNDEEP
processing
Ptr13
Ptr13

Reputation: 593

How to put Processing in HTML page?

Is there a way to put Processing in an HTML page? Say I have a .pde file, and I want it to be on my HTML web page, how could I do that? (Processing is a kind of a graphics language.)

Upvotes: 4

Views: 23978

Answers (3)

Hscraft
Hscraft

Reputation: 1

It is possible to put Processing code directly in your web page Using the data-processing-sources attribute on the canvas, and having Processing.js load an external file is the preferred and recommended way to include scripts in a web page. However, it is also possible to write in-line Processing code.

Processing code example ( worked for me ) ( easiest way I guess ) :

<script src="processing-1.3.6.min.js"></script>      
<script type="application/processing" data-processing-target="pjs">
      void setup() {
        size(200, 200);
       background(100);
        stroke(255);
        ellipse(50, 50, 25, 25);
        println('hello web!');
      }
     </script>
     <canvas id="pjs"> </canvas>

Upvotes: 0

Alec
Alec

Reputation: 1188

You should be able to export your pde file into a HTML page with Processing's JavaScript mode. A web-export folder will be created and containing everything you need for deployment (index.html, processing.js, and other resource files...).

You may also consider to take this Coursera course which gives you an overview of what Processing can do. I've finished this and it's fun and useful!

Upvotes: 5

Chris Culter
Chris Culter

Reputation: 4556

Would Processing.js work for you?

Upvotes: 4

Related Questions