D3 + p5.js 筆記 - 自訂 preload 的 Ajax

p5.js 已經內建數種檔案請求的方式,這邊紀錄一下自己建立 ajax 請求註冊到 preload() 的方式(以 D3 為例)。

這邊要注意的是,在第 10 行的部份,請求後的資料不能直接指定給預先宣告的變數,否則 setup() 取資料時會是 undefined,或者可以這樣宣告:

1
2
3
4
5
'use strict'

// load function
let tmp = { list: [] };
// ---

在取得資料後直接將資料指定給 tmp.list,在 setup() 裡直接以 data.list 的方式取值即可,而範例裡的 returncallback 都是必要的,省略任何一樣都會出現 undefined

不用 new 的方式可以到這裡檢視。

D3 + p5.js 筆記 - 介紹 p5

先來大致介紹一下 p5.js

這是 Processing 團隊移植的 web 版本,除了 p5 之外還有一個是由 jQuery 作者自己實現,叫 Processingjs 的函式庫,可別搞混了。

為什麼選擇 p5?

以前大學時有教授教過 Processing 算是因素之一,入門上不算太難。

在圖片繪製上,p5 也簡化了一些步驟,比如畫線的時候,canvas 的畫法是

1
2
canvas.moveTo(x, y);
canvas.lineTo(x2, y2);

p5 只要一個 line 就可以解決。稍微試過 Pixi.jsEaselJS,這兩個基本上跟 canvas 原本的畫法差不了多少,畢竟定位是遊戲引擎,p5 是繪圖函式庫。

D3 + p5.js 筆記 - 前言

這陣子看了點 D3,並找了官方 wiki 的範例來試試,不過不是用 SVG,而是用 canvas 來畫。

之前要寫的網站要生成簡易的圖表,但因為沒學過 D3 的經驗(當時也來不及),所以找了現成的 Chart.js 來用,除了這套之外,之後也在 feedly 看了不少圖表生成的套件介紹,蠻多都是用 canvas 的。不過這倒也不是什麼選擇 canvas 的原因。

單純犯賤罷了…

然而,D3 對 canvas 的支援不好,不過這也不是很意外。問題在於要怎麼用 D3 把處理後的資料給 canvas 畫,根據這裡的介紹,第三種方式算是我在網路上最常看見的,基本上就是處理資料並創建虛假的元素,假裝自己在操作 SVG,然後再把這些假元素吐出來再用 canvas 的方式畫出來,怎麼看都覺得…蠻蠢的。所以我比較偏好第二種方式,讓 D3 負責處理資料、生成刻度等等,再用 p5.js 直接畫上去。

總之,之後會加減從 D3 官方的範例裡面先挑簡單的例子來練習,也會原始碼放到 GitHub 上。