1.6　开启第一个程序

完成上述工作便可以开启第一个程序了！“p5”文件夹内已经有一个创建好的空项目——“empty-example”文件夹。打开“empty-example”文件夹将会看到两个文件：“index.html”和“sketch.js”。使用代码编辑器将它们打开并浏览里面的内容。

查看“index.html”文件会发现，它仅仅是为了给程序建立架构，它将需要用到的p5.js库文件和另一个名为“sketch.js”的文件（需要编写p5.js代码的文件）链接在一起。创建这些链接的HTML代码如下：

本书并不是为了学习HTML语言，因此无须对此HTML文件执行任何操作，读者只需要将重心放在“sketch.js”文件上面即可。 接下来，使用编辑器浏览“sketch.js”文件，会看到下面的代码，这里才是开始编写p5.js代码的地方：

学习过Processing的读者对上述结构会感觉非常熟悉，代码分为两部分：setup函数和draw函数。每个部分都有特定的功能。凡是设置程序初始状态的代码，建议写在setup函数里面，例如，设置画布大小、刷新频率、色彩模式等。关于图形绘制的功能代码建议写在draw函数里面，例如，设置颜色填充、绘制矩形、绘制直线、绘制图像像素等。这里暂且将这些详细的功能放到一边，本书后面会对这些功能进行详细讲解。

与前几节不同，学习后面章节要做的不仅仅是阅读，实践与练习才是最重要的事情。在理解了一些代码的基本含义后，请使用键盘输入这些代码并尝试进行改变，绘制出不一样的艺术图形。首先，尝试着画一些简单的图形。

例1-1　绘制一条线段

在draw函数内，输入以下内容：

完整的代码结构如下：

上述代码执行的结果是：绘制一条线段，其中一个顶点的位置距离画布最左边50像素，距离画布最顶部50像素，另一个顶点会跟随鼠标指针移动。将示例保存并使用Web浏览器（推荐使用Chrome浏览器）查看代码的运行效果。双击“index.html”文件，或在浏览器中选择并打开“index.html”文件。如果输入的代码无误，那么将会在浏览器中看到一条跟随鼠标指针移动的线段。

上面这个示例是在“empty-example”文件夹中完成的创作。但是，如何建立新项目呢？最简单的方法是：单击“empty-example”文件夹，直接复制粘贴并将文件夹重命名，例如，命名为“myFirstProject”或“1-1”或其他能够表达作品内容的名称。创建好新的文件夹后，就可以在代码编辑器中打开新文件夹下的“sketch.js”文件开启新篇章。

读者练习本书的每个示例前，请使用不同的文件夹名称创建项目，以便日后方便查找（建议使用本书的示例编号命名文件夹名称，例如，将文件夹命名为“1-1”）。另外，应记住随时保存代码。养成经常保存代码的好习惯，在面对突发状况时就可以从容应对。

下面这个示例将尝试做一些更有趣的图形。

例1-2　绘制连续的线条

复制空项目“empty-example”文件夹并重命名文件夹名称。进入新创建的文件夹并打开“sketch.js”文件进行本例的编写（效果图如图1.3所示）。

这个示例创建了宽、高都是600像素的画布，鼠标指针可以在画布上移动并绘制出一些黑色的线段。单击鼠标，线段将变为灰白色。与其他计算机语言一样，p5.js只认识代码，因此需要严谨的语法结构和缜密的逻辑思维。只要一点一滴地进行练习，终会慢慢适应它。这里尝试着理解代码的含义，但不要着急，后面的章节还会学到更多关于绘图和互动的知识。读者学完整本书后，可以再回过头来看看这个示例，将会有不一样的感受。 s2ylFX9F2mqNyO6XXroe2cAunJEjBomWf9ZzhbeTvM1pHXkUbuWe2KaD3xagUOxH