如何将处理集成到我的网页中

Question

我正在尝试将 Processing（一种图形编程语言）集成到我的网站中，但代码似乎不起作用。好像没有注册处理代码...

知道为什么吗？

    <!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>

Answer 1

您不能按原样重用您的处理代码：这是一个 java 代码，不能在网页中执行。要在网页中使用处理，您需要使用语言的 javascript 实现：p5.js.

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

您仍然需要将代码转换为 java脚本，它看起来像这样：

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();
    }
}

主要的变化是函数是用关键字 function 声明的，而不是 void； fullScreen() 在 p5 中不存在，但您可以使用 window 的宽度和高度创建一个 canvas（您还可以查看 fullscreen() 和类型 float 和 int 在 java 脚本中不存在，您可以使用 let 或 const.

声明变量

在 p5 编辑器中复制之前的代码应该可以让您开始。现在，如果您想创建自己的 html 页面，您需要将代码移植到 java 脚本，正如我之前展示的那样，但您还需要确保包含 p5.js 框架.一种简单的方法是用托管在 cdn 上的版本替换您的 processing.js 脚本，如下所示：

<!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>

现在，当您在浏览器中打开此 html 页面时，您将看到 canvas。您可能想要做的最后一件事是使用本地开发服务器来提供您的文件，因为这将简化您未来的开发。

这里是我移植代码的 codepen，java脚本在一个专用文件中，我认为它会为你开始做你想做的事情打下良好的基础。

如何将处理集成到我的网页中

How to integrate Processing into my webpage

html

javascript

processing