什么是Processing？

Processing是一种具有革命前瞻性的新兴计算机语言，它的概念是在电子艺术的环境下介绍程序语言，并将电子艺术的概念介绍给程序设计师。它是 Java 语言的延伸，并支持许多现有的 Java 语言架构，不过在语法 (syntax) 上简易许多，并具有许多贴心及人性化的设计。Processing 可以在 Windows、MAC OS X、MAC OS 9 、Linux 等操作系统上使用。目前最新版本为Processing 3。以 Processing 完成的作品可在个人本机端作用，或以Java Applets 的模式外输至网络上发布。

以上节选自百度百科。简单来说，Processing是一种函数比较简单的绘图语言，可以让设计师比较容易的画出由数据生成的图形。

Processing类似于Java，具有自己的IDE（开发环境）。

OSX的Processing 3 界面

Processing 3的下载地址：https://processing.org/download/

Processing可生成 *.pde 文件，该文件除了可以在Processing 3 编译器中运行外，还可以导出成矢量图形或被嵌入网页中运行。（具体方法见’将Processing嵌入Web’这一章节）

在Processing 3 中编译执行pde文件
在浏览器中编译执行的pde文件

虽然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工程

  1. Open a blank folder where the project will be saved (File -> Open Folder)
  2. Create a new file (File -> New File)
  3. Set file language to processing (bottom right corner of VS Code)
  4. Open command line and run “Processing: Create Task File”
  5. Save file (file name must match the folder name in #3 above)
  6. 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>