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 上。

放棄在 OpenShift 上管理部落格

去年決定將 Blog 從 Logdown 換成自架 Ghost 後,就想找一個線上空間來管理。但 LinodeDigital Ocean 要從頭來覺得麻煩,而 Heroku 不知道為何怎樣就是看不懂,後來看到 OpenShift 設定似乎挺簡單,於是就辦來試試看。

無奈 OpenShift 根本 Bug 滿天飛,社群的 Ghost 架設速成 script 根本不能用就算了,連從官方的 Node.js 重頭架也常設定跑失敗,跑到最後居然是鎖我帳號??更別說我在試用時三不五時被登出,不然就是怎麼按 Application 都沒顯示東西,也不知道怎麼回到我剛剛的設定頁面。

在 Linux 上執行 Path of Exile (PoE)

banner

之前在 Wine 上跑過一陣子 PoE,但經過幾次更新後,loading 畫面除了狂閃外基本上就是完全進不去的狀態,然而當時也是有點膩了,所以也懶得折騰(基本上都是在講把 Wine 降級或是裝 PlayOnLinux,不過不想這樣搞)。

現在 2.0 出了,「據說」修好了錯位,也偶然發現有一篇比較不那麼麻煩的設定文章,試一試還真的成功了,在這邊紀錄一下。

用 PM2 部署 node server

前置作業

首先先設定完這篇文的前置作業。

部署與開發用的機器都要安裝 PM2sudo npm i pm2 -g

部署設定

於專案資料夾底下執行 pm2 ecosystem 生成 ecosystem.json5,修改副檔名為 json 檔以便顯示語法 hightlight。

將裡面的內容做修改

注意最後一句裡 pm2 startOrRestart ecosystem.json 的副檔名是否相同。

用 Shipit 部署 node server

前置作業

假設是全新的 Linux,帳號為 deploy

  1. 在 github 等託管服務中登錄 deploy server 的 ssh public key。
  2. 設定 ssh 免密碼遠端登入:在 .ssh/authorized_keys 裡貼上開發機的 ssh public key。
  3. 如有需要,將 server 裡的 global package 裝好,如 bower、sails、grunt-cli 等等。
  4. 設定 server 裡程式碼的存放位置,假設為 /usr/src
1
2
mkdir -p /usr/src/my-project-name
chown deploy:deploy /usr/src/my-project-name