来画个图吧 —— P5.js 入门

p5 demo

图片来源：我画的

# Intro

嗨嗨！大家最近还好吗？

（久违的文章）

前阵子真的忙爆了 QQ——换了新工作、接了一个小案子。最近小弟终于有点时间，可以回归 Error Baker 了。先跟大家还有其他持续在写文章的伙伴说声抱歉！我回来了！

这次要跟大家聊聊的是：大家敲碗已久的（并没有）P5.js。顾名思义，.js 结尾的是一个 JavaScript 的 package，它可以用来进行艺术创作。或许你可能听过 D3.js 之类的 package。两者的差别在于：D3.js 是数据导向的、P5.js 是艺术导向的。虽然都算是视觉化的一部分，但其实差别还挺大的，像是：D3 的数据大多是有意义的、P5 大多是随机乱数。对新手来说，这样理解会比较好懂一点（？）。

如果说论实用性，笔者绝对推荐去学 D3.js。有的公司面试时还会加分，因为可以制作很多的图表、圆饼图……等。P5.js 的话真的就是学来艺术创作的（修身养性？）。如果想稍微了解看看的话，还是可以看一下这一篇。这一篇算是稍微介绍一下 P5.js 是做什么的，没兴趣的话也没关系。那么还有兴趣的朋朋们，让我们开始吧！

# TL;DR

成为工程师时，学到的新潮用语：Too Long; Don't Read。

先来看一下成品～

project demo

可以猜猜笔者画的什么，文末公布答案。

登勒！就是一个朴实无华的小画家，就是先让大家看个画面比较有感觉。对，绝不是为了想玩电话游戏（？）。

在实作之前，笔者要大家先想一下，如果用 HTML/CSS/JS 的话大家会怎么实作？（先想想就好，不用真的做出来）

DEMO / code 连结

# Init

首先要讲的是画布。一张图最重要的就是画布了，有了画布就可以让艺术家在上面尽情地发挥创意。

但在生成画布之前，要先注册一个 OpenProcessing 的账号。这是一个 Open source 的平台，可以免费注册，就可以继续我们的旅程了～

openProcessing

OpenProcessing 的官网就是潮（但就是慢了点？）。

开完新的项目后，画面应该会长得跟我一样。操作挺人性化的（跟其他 Adxxx 的产品来说），但笔者还是稍微讲解一下：

页面正中间的三角形按钮，按下去就开始执行你的 code 了
</> 应该不用我说了吧 XD，就是回到 code 的地方
右上角的 Save 就是存储哦（专业中翻英？）
右侧是一些设定，基本上不用去动

OpenProcessing

非常人性化的界面，小巧而强大

首先什么都不用做，就开一个 project 就好了。什么？这样就可以开始画画了吗？对喔！没错，就是这么轻松！

# Create

接着在画布上发挥你的创意吧！

先什么都不用动就按下「三角形的执行按钮」吧！

OpenProcessing

你已经进入 P5.js 的绝对领域了！

可以先稍微玩一下，体验一下 P5.js 的威力。到这边已经离我们的最终成果不远了（蛤？你说你什么都还没做啊！）

先别急，code 这不是来了吗？
笔者花了点时间加了注解（~~翻译，英文真的非常非常难~~）。

// 只會在初始化的時候執行一次
function setup() {
  // 初始化畫布
  createCanvas(windowWidth, windowHeight)
  // 背景：只有一個數值 (0 ~ 255) 黑 ~ 白
  background(200)
}

// 每個 "frame" 都執行
function draw() {
  // 當滑鼠按下的時候才畫
  if (mouseIsPressed) {
    // 要畫的顏色：(0, 0, 0) ~ (255, 255, 255) => 黑色 ~ 白色
    fill(0, 0, 0)
    // 畫線，上一個 previous (pmouseX, pmouseY) 到現在滑鼠位置(mouseX, mouseY)
    line(mouseX, mouseY, pmouseX, pmouseY)
  }
}

接着你就可以像是小画家的方式在上面画画了。可以看到有很多的功能，例如：line 这个 function 的用法，每次都要去查文件才会用，因为真的很多东西啦。

也可以参阅 P5.js 的文件。

画点、画线、画正方形，你想要画的，基本上文件都会有。

剩下的就是你的超能力了！

# Summary

今天我们学到了 P5.js 可以让我们用短短几行 code 就可以完成伟大的创作。

带大家稍微玩一下简单的小画家，虽然不是什么很大的 project，但是试想：「如果不用 P5.js，只使用原生的 HTML/CSS/JavaScript 去写一个小画家，需要多少行的 code？」但这边 P5.js 都帮我们把粗重的工作都包好了，让艺术家们可以专心地创作。当然这还只是 P5.js 的一小部分而已。如果你也有兴趣，还可以试试更多的 生成式艺术，试试看在 P5.js 里加入回圈吧！

像是这样：

p5 project demo