CODEWITHSUNDEEP
javascripthtmlprocessing
Clarke Cribb
Clarke Cribb

Reputation: 269

How to integrate Processing into my webpage

I am trying to integrate Processing (a graphical programming language) into my website but the code doesnt seem to work. It doesnt seem to register the processing code...

Any ideas why?

    <!doctype html>
<html lang="en">
<head>
    <script type="text/javascript" src="js/processing.js"></script>
    
</head>

<body>
<script type= "text/processing">


int ranges = 100;

void setup() {
  fullScreen();
  background(0);
}

void draw() {
  background(0);
  noFill();
  strokeWeight(1);

  for (int i = 1; i < ranges; i++) {
    float paint = map(i, 0, ranges, 1, 105);
    stroke(paint);
    
    beginShape();
    for (int x = -100; x < width + 11; x += 20) {
      float n = noise(x * 0.001, i * 0.01, frameCount * 0.01);
      float y = map(n, 0.1, 1, mouseY, height);
      vertex(x, y);
    }
    endShape();
  }
}

</script>
 

    <canvas id="sketch" style="border: 1px solid black;"></canvas>

</body>
</html>

Upvotes: 2

Views: 1940

Answers (1)

statox
statox

Reputation: 2886

You can't reuse your processing code as is: This is a java code and it can not be executed in a web page. To use processing in a webpage you need to use the javascript implementation of the language: p5.js.

The getting started page is pretty straight forward. If you want to do it in the simplest way possible you can use the p5 webeditor.

You will still need to convert your code to javascript, it would look something like this:

const ranges = 100;
function setup() {
    createCanvas(windowWidth, windowHeight);
    background(0);
}

function draw() {
    background(0);
    noFill();
    strokeWeight(1);
    for (let i=1; i<ranges; i++) {
        let paint = map(i, 0, ranges, 1, 105);
        stroke(paint);

        beginShape();
        for (let x=-100; x<width + 11; x+=20) {
            const n = noise(x * 0.001, i * 0.01, frameCount * 0.01);
            const y = map(n, 0.1, 1, mouseY, height);
            vertex(x, y);
        }
        endShape();
    }
}

The main changes are that functions are declared with the keyword function, not void; fullScreen() doesn't exist in p5 but you can create a canvas with the width and height of the window (you could also have a look at fullscreen() and the types float and int don't exist in javascript, you can declare the variables with let or const.

Copying the previous code in the p5 editor should get you started. Now if you want to create your own html page you will need to port your code to javascript as I showed before but you will also need to make sure that you include the p5.js framework. An easy way to do it is to replace your processing.js script by a version hosted on a cdn like this:

<!doctype html>
<html lang="en">

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
</head>

<body>
    <script type="text/javascript">
        const ranges = 100;

        function setup() {
            createCanvas(windowWidth, windowHeight);
            background(0);
        }

        function draw() {
            background(0);
            noFill();
            strokeWeight(1);
            for (let i = 1; i < ranges; i++) {
                let paint = map(i, 0, ranges, 1, 105);
                stroke(paint);

                beginShape();
                for (let x = -100; x < width + 11; x += 20) {
                    const n = noise(x * 0.001, i * 0.01, frameCount * 0.01);
                    const y = map(n, 0.1, 1, mouseY, height);
                    vertex(x, y);
                }
                endShape();
            }
        }
    </script>
</body>

</html>

Now when you open this html page in your browser you will see your canvas. One last thing you might want to do is to use a local development server to serve your file because it will ease your future developments.

Here is a codepen where I ported your code, the javascript is in a dedicated file, I think it will give you a good basis to start doing what you want.

Upvotes: 3

Related Questions