All geek questions in one place

How do you configure js processing on html?

How do you run processJS script on html page? Can someone send me a test .html file and any supporting code files for me to get an idea?

Say I wanted to run this rectangle:

rect(50,50,50,50);
+4
source share
2 answers

Everything you want to know is on this page: JavaScript Quick Start | Processing.js

But basically you need to create an html file that downloads the Processing.js library, then write the Processing.js code and upload the file .pdeto the tag canvason this page. It looks like this:

<!DOCTYPE html>
 <html>
 <head>
   <title>Hello Web - Processing.js Test</title>
   <script src="processing-1.3.6.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>

- JavaScript (, 2.2.1), "". , ( > ), , .

0

, Processing.js javascript, pde (java), .

* , javascript with(obj){code}, . .

, , , .

!:)

<html>
    <head>
    </head>
    <body>
        <canvas id="output-canvas"></canvas>
        <script src="processing.1.4.8.js"></script>

<script> ( function () {

new Processing ( document.getElementById ( "output-canvas"), sketch );

function sketch ( pjs ) {

    // some initilization if you prefer

    // set the canvas size
    pjs.size ( 800, 600 );

    // ( 0, 0, 0, 0 ) - if you want a transparent sketch over some backdrop
    pjs.background ( 255, 255, 255, 255 );

    // make the ugly pjs go away
    with ( pjs ) {

        // red stroke
        stroke ( 255, 0, 0 );

        // thick border
        strokeWeight ( 5 );

        // yellow fill
        fill ( 255, 240, 0 );

        // draw a rectangle
        rect ( 50, 50, 300, 200 );

    }
}

} ) (); </script>

    </body>
</html>
0

Source: https://habr.com/ru/post/1652262/

More articles:


All Articles