WordPress 嵌入 – Processing [1]


上面呈現的是透過 Processing 所編寫的 Pendulum Wave Effect 互動展示功能。效果還不錯,比起單純看影片、GIF檔要來的有感覺,不過呈現效果在網頁版上會比較好,手機上的觸控模式效果應該會比較差一點。

以下要講的不是Processing多好用,好用到聶永真也愛用,也不是講Pendulum Wave,而是要簡單地講解該怎麼把Processing 所製作出來的.pde檔案嵌入到WordPress的網頁、頁面當中。

但還是感謝一下Steve Crayons我是看了他的影片之後才想到要做這件事,上面呈現的也是他所編寫的程式碼。

第一步、安裝外掛:

  • ProcessingJS for WP:這個外掛功能是可以透過簡單的一行代碼將.pde檔呈現出來。
  • WP Add Mime Types:由於WordPress預設不能上傳奇怪的檔案類型,所以我們透過這個外掛來讓我們能夠上傳.pde的檔案。

第二步、設定外掛:

安裝完WP Add Mime Types之後呢,進入到左邊的選單中的「設定->MIME類型設定」。
在這個頁面我們可以看到許多的附檔名以及相關設定,但是.pde檔’還沒在裡面,所以我們要手動加上去,會像下圖:

上方會出現紅色的字,那是正常的,標示了你更動了哪些地方。

我知道你懶:

pde   = text/plain

js    = application/javascript

第三步、上傳所需檔案:

接下來就是準備我們想要呈現的.pde檔案以及一個很重要的將Java轉換成Javascript的工具。Processing 是基於Java語言的,但是Java和網頁瀏覽器其實不太相容,因次我們才需要將Java轉為Javascript,很幸運的是我們生於一個樂於分享的時代,所以所需要的文件我們可以在個Github裡下載:點我

下載完之後,我們就將這個包裡的「Processing.min.js」檔案提取出來,等等跟我們想要展示的.pde檔一起上傳到我們的媒體庫裡面。一定要上傳成功喔,如果沒有成功就不要往下繼續作了,往上看看哪裡有問題,或是把瀏覽器重啟也可以。

第四步、將我們的程式碼加入文章、頁面當中:

這就是重點啦,只要在我們想要插入程式碼的地方輸入以下文字即可:

[pjs4wp url="processingfile.pde" bordercolor="#000"]][[/pjs4wp]

記得把「processingfile.pde」改成你自己檔案的位置,這樣應該就可以呈現了。

一開始我是使用直接在內容中放進程式碼的方式,但那樣其實挺多問題跟Bug的,所以我還是建議把整個軟體上傳,這樣會比較穩定、方便。

第五步、完成!

成功之後,就可以開始各種玩弄了,但是要注意你所租借主機的效能,太大型的應該執行起來還是會有問題。由於我也剛接觸這個嵌入方法,一定還有很多不清楚的,屆時再勞煩讀者回報相關問題囉!


接下來展示一些小型Processing製的視覺效果:

Sine波

自生成迷宮

光線渲染(互動式)


本文參考引用自 http://hartleyhacks.com/guides-and-tutorials/how-to-insert-processing-sketches-into-wordpress-posts/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

error: 我鎖起來惹 ˊ_>ˋ