购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.6 开启第一个程序

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

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

img

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

img

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

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

例1-1 绘制一条线段

在draw函数内,输入以下内容:

img

完整的代码结构如下:

img

上述代码执行的结果是:绘制一条线段,其中一个顶点的位置距离画布最左边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所示)。

img
img
img

图1.3 例1-2效果图

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

点击中间区域
呼出菜单
上一章
目录
下一章
×