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

【问题标题】：How to integrate Processing into my webpage如何将处理集成到我的网页中
【发布时间】：2020-09-02 09:59:38
【问题描述】：

我正在尝试将 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>

【问题讨论】：

在你的草图中，setup 或 draw 方法永远不会被调用，也没有对 canvas 元素的引用
Processing js 似乎无论如何都被放弃了，所以我建议你寻找一个不同的库。也许 WebGL 适合你：get.webgl.org
谢谢。好的，你能建议我如何把我的草图放到我的网站上吗？草图：openprocessing.org/sketch/950912#

标签： javascript html processing

【解决方案1】：

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

getting started 页面非常简单。如果您想以最简单的方式进行操作，您可以使用the p5 webeditor。

您仍然需要将您的代码转换为 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();
    }
}

主要变化是函数用关键字function声明，而不是void； fullScreen() 在 p5 中不存在，但您可以创建一个具有窗口宽度和高度的画布（您也可以查看 fullscreen() 和 float 和 int 类型在 javascript 中不存在，您可以使用let 或const 声明变量。

在 p5 编辑器中复制之前的代码应该可以帮助您入门。现在，如果您想创建自己的 html 页面，您需要将代码移植到我之前展示的 javascript，但您还需要确保包含 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 页面时，您将看到您的画布。您可能想做的最后一件事是使用本地开发服务器为您的文件提供服务，因为这将简化您未来的开发。

这是一个codepen，我在其中移植了您的代码，javascript 位于一个专用文件中，我认为这将为您开始做您想做的事情打下良好的基础。

【讨论】：