什么是Processing?
Processing是一种具有革命前瞻性的新兴计算机语言,它的概念是在电子艺术的环境下介绍程序语言,并将电子艺术的概念介绍给程序设计师。它是 Java 语言的延伸,并支持许多现有的 Java 语言架构,不过在语法 (syntax) 上简易许多,并具有许多贴心及人性化的设计。Processing 可以在 Windows、MAC OS X、MAC OS 9 、Linux 等操作系统上使用。目前最新版本为Processing 3。以 Processing 完成的作品可在个人本机端作用,或以Java Applets 的模式外输至网络上发布。
以上节选自百度百科。简单来说,Processing是一种函数比较简单的绘图语言,可以让设计师比较容易的画出由数据生成的图形。
Processing类似于Java,具有自己的IDE(开发环境)。

Processing 3的下载地址:https://processing.org/download/
Processing可生成 *.pde 文件,该文件除了可以在Processing 3 编译器中运行外,还可以导出成矢量图形或被嵌入网页中运行。(具体方法见’将Processing嵌入Web’这一章节)


虽然Processing自带IDE,但其IDE相比VS code等成熟的IDE还是有不少差距(比如Ctrl+空格才能显示出代码补全)。下面是如何使用VS code编写Processing的方法,以及如何将*.pde嵌入web的方法。
在vscode中安装Processing扩展
在Processiing中安装Processing-java使vscode可编译processing代码
Windows
- Open the “Advanced System Settings” by running sysdm.cpl
- In the “System Properties” window, click on the Advanced tab.
- In the “Advanced” section, click the Environment Variables button.
- Edit the “Path” variable. Append the processing path (Example:
;C:\Program Files\Processing-3.0.1\
) to the variable value. Each entry is separated with a semicolon.
Mac
- Open Processing, and click the
Tools
->Install "processing-java"
menu item.
在vscode中新建一个Processing工程
- Open a blank folder where the project will be saved (File -> Open Folder)
- Create a new file (File -> New File)
- Set file language to processing (bottom right corner of VS Code)
- Open command line and run “Processing: Create Task File”
- Save file (file name must match the folder name in #3 above)
- Press CTRL + SHIFT + B to run sketch
将processing嵌入web
1.将processing.js放入根目录
2.在html中引用processiing.js和使用的.pde文件
<!DOCTYPE html>
<html>
<head>
<title>Test1</title>
<script src=”processing.js”></script>
</head>
<body>
<h1>Processing.js Test</h1>
<canvas data-processing-sources=”Test1.pde”></canvas>
</body>
</html>