來畫個圖吧 - P5.js 入門

p5 demo

圖片來源：我畫的

# Intro

嗨嗨！大家最近還好嗎？

（久違的文章）

前陣子真的忙爆了 QQ，轉換新工作、接了一個小案子，最近小弟終於有點時間，可以回歸 Error Baker 了，先跟大家還有其他持續在寫文章的夥伴說聲 Sorry！我回來了！

這次要跟大家聊聊的是：大家敲碗已久的（並沒有） 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