开发环境的准备 | Beauty of Pixel 像素之美

我们的课程基于 p5.js 设计，p5.js 是一个基于 JavaScript 编程语言的创意编程库，它是 processing 在 web 网页端的实现。得益于 web 的开放特性，我们可以很方便地把我们 p5.js 的创意作品分享给他人。

在开始学习前，我们需要准备好一个可以上网的电脑，Windows 或者 Mac 都可以，电脑上需要安装最新的浏览器，比如谷歌浏览器、火狐浏览器、Safari 浏览器或者 Edge 浏览器。当然如果使用平板也是可以的，只是最好有一个外接的键盘，毕竟我们需要大量地输入代码程序。有很多种使用 p5.js 的方法，以下是两种最方便快捷的方式：

### 1.1.1 使用 p5.js 的在线编辑器

打开浏览器，在浏览器地址栏中输入 https://editor.p5js.com，等页面打开后，我们就可以开始使用了。

我们可以看到整个页面分成了两块，左侧是一个代码输入区，右侧是一个运行预览区，顶部有两个按钮：一个是运行按钮，点击了后可以预览代码的效果，另一个是停止按钮，点击后会停止预览。

打开页面后，在代码输入区，默认就已经有了一个代码片段了，我们可以点击运行按钮，在预览区看看当前代码运行出来的结果。这段代码绘制了一个灰色的正方形，是不是很简单？为什么这几行代码会绘制一个灰色的正方形？如果我们要绘制一个红色的正方形呢？或者我们把正方形换成圆形又该怎么做呢？在接下来的内容里，我们将会详细讲解。

### 1.1.2 openprocessing 社区在线编辑器

openprocessing.org 也提供类似 p5.js 在线编辑器的功能，此外，我们还可以在 openprocessing.org 浏览其他人的创意设计，寻找灵感。遇到好的创作时，我们还可以直接进行修改和保存为我们自己的作品。

### 1.1.3 Visual Studio Code 编辑器

Visual Studio Code 是微软开发的一款代码编辑器，以快速和丰富的插件而被大家所喜爱。我们可以在其官网下载安装。

安装完成后，我们在左边扩展览区域安装一个实时预览 html 的插件 Live Preview，它也是微软官方开发和维护的。

完成安装后，我们就可以开始写代码了。我们可以从菜单新建一个文件，假设其为 sketch.html，在其中输入以下代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.js"></script>
    <script>
       // 我们的 p5.js 代码
        function setup() {
            createCanvas(400, 400)
        }

        function draw() {
            circle(mouseX, mouseY, 100)
        }
    </script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

保存后点击预览按钮，可以实现实时预览。

vscode-preview

可以看到实时的预览效果，如下图

vscode-demo