一、三者的关系

1、什么是Processing

Processing是关于数字艺术的编程语言，支持跨平台，语言本身是一个类Java语言，程序文件的后缀为.pde。通过编写processing程序，教师可以将复杂的物理、化学、数学原理形象的展示给学生；艺术家可以使用代码呈现出漂亮的图像；互动设计师可以做出好玩的互动程序。

具体介绍见：https://blog.csdn.net/liuxiao723846/article/details/82024008

2、什么是Processing.js

为了能让Processing的代码能在Web上工作，John Resig开发了Processing.js（这是继Jquery之后，他的第二个力作），该JS开发库用来完成两个方面的任务：

1. 能把Processing语言动态转换成JS，从而在Web环境中执行；
2. 提供了一套完整的2D图形处理接口(API)，直接以JS语言来编程。

显然其最实用的地方是能直接利用现有的大量Processing代码。Processing.js可以使用JavaScript绘制形状sharp和操作HTML5 canvas元素产生图像动画。官网：http://processingjs.org

3、什么是P5.js

P5是Processing语言的一个JS移植版本，使其能在Web中工作。它完全使用JavaScript来实现Processing语言相同的功能，但并不会动态翻译Processing语言代码，这一点和Processing.js不同。也就是P5.js差不多等同于Processing.js的JS API部分。但P5.js的功能更单一，角色更专注，且也是Processing基金会唯一支持的项目。官网：https://p5js.org/

所以，对我而言，如果你想利用已有的Processing（java）代码，你可以使用Processing.js。如果你想直接使用JS创建一些艺术作品（如基本的几何图形、图像处理、交互式动画和操作DOM等），那么推荐使用P5.js。

二、如何在网页中插入processing代码

方法一 使用processingjs

1、下载processing.js
下载链接：找到里面有个processing.js 下载https://github.com/processing-js/processing-js

2、写html文件

1、processing代码嵌入html
<script type="text/processing" src="/js/processing.js"></script>
<script type="text/processing" data-processing-target="mycanvas">  
 ... (添加processsing代码片段）
</script>
<canvas id="mycanvas"></canvas>

2、使用pde文件 注意将pde文件放入html文件同一级下（包括图片等素材）
<script src="/js/processing.js"></script>
<canvas data-processing-sources="xxx.pde"></canvas>

方法二 使用p5js

p5的api可以参考官网：
（1）https://p5js.org/zh-Hans/reference/
（2）sound API:https://p5js.org/zh-Hans/reference/#/libraries/p5.sound
参考文献：
官方入门文档：写得很仔细，好好看一下https://p5js.org/zh-Hans/get-started/