上面呈現的是透過 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/
