Processingで作ったものをWordPressにアップする →p5.jsで書き直すのがイイみたい

こんにちは。

野郎です。

今日はProcessingで作ったものをwordpressにアップする方法だよー。

あのね、野郎はこのあたり、だいぶ調べなきゃわからなかったです。遠回りした・・・。聞ける人がいないとは、時にこういうことになるのを受け入れることなのだ・・・。自分で調べたから、筋肉になったよ!

結論から書くよ。

結論:javaで書いたスケッチは、processing.js(ほぼjavascript)かp5.js(これもjavascript)に移植しましょう。

予想:すごいヤヤコシイことやってれば別だけど、移植はそんなに難しくないと思われる。

最初はさ、移植しなくても動くのかな?と思ったのよ。だけど全部は動かなかったのね。今回は、その思考試行愚行過程も少し反映された構成です。

ProcessingをWordpressへ

processingはグリグリ動くので、とっても面白いです。まだ教科書を写経しつつ改造などが多いけど、それでも楽しいっす。やはり楽しいほうがイイよね!野郎は長年鍛えた修行回路があるんで、つい苦行にしてしまいがちですが、そりゃ楽しいほうがイイのでであります。

せっかく作ったんだから、ここに乗せたいなと思うのは人情です。それで、少し調べてみたの。

このブログはwordpress書いているんだけどさ、processingで作ったものを乗っけようかと思ったんだけど、イマイチピタッとしたのが見つけられなかったんだよ。できないわけは絶対にない(だって載せてる人がいるんだもの)けど、どうすりゃいいんだーって思ったのです。

よーく調べて、ちゃんとよく考えたらできました。焦ってはいけません。落ち着きが大事です。

備忘録的にも書いておこうと思ったのですな。

このサイトを見るのです!

検索したのは、processing wordpress how to とかだったかな。この手のは英語のほうが情報が多い気がするので。

えーと、試行錯誤しましたが、最終的にはここに書いてある通りにやればできます。

How To Insert Processing Sketches Into WordPress Posts

ありがとうございますー。

ここに書いてある通りにやればできるんだけど、一つだけ注意です。「MINE types」っていうプラグインを使って、WordPressにアップしても大丈夫な拡張子を登録するのね。お手本サイトではProcessingの「.PDE」を登録してって書いてあります。ここで、「.js」ってjavascriptの拡張子も同時に登録するのね(ウルトラ重要)。

「.js」を登録しておかないと、security reasonで「Processing.min.js」ってブラウザでProcessingを動かすファイルがアップできません。これがアップできないとProcessingの「.pde」ファイルを乗せても何も表示されないっすー。

ここだけが注意点で、他は書いてある通りにやってくださいな。

作ったもの

試しに作ったものを載せてみるね。

一つ目は今使っている、learn processingって本のエクササイズとかを改造したものです。動くー。これだけでも楽しいー。

なんだかキラキラしていてアッパーな気持ちです。

次は二つ目ー。

ボールがキラキラして色が変わるもの。重力加速度を変えたりした。

野郎はこういうの見てるの好きみたいなんだよな。眺めてしまう。


あれ・・・?

真っ黒いままだな・・・・。

うーん。

グリグリ動か、、、、ない。ガビーン。

動かないのかー。

違いは何かしら

うーんとさ、一応ちゃんと動いたものがあったってことはさ、wordpressにもっていき方はたぶんあってるんだと思うんだ。そこは一つ進歩です。前進。野郎頑張ってる。えらい。自分を褒めるのです。大事。

一つ目のはさ、変数と条件分岐と繰り返しだけでできているのね。二つ目のは、配列とかクラスとか使ってるの。違いはきっとそこで、動かなかった原因がこれなのかと。

よく考えたら当たり前な気がするけど、やっぱりjavascriptの書き方に直さなきゃいけないのじゃないのかな。調べてみたら、書き方結構違うんだもん。varとかfunctionとか。

参考にしたサイト(ありがとう!):

Overview of differences

Converting .pde to p5.js

Processing to P5 — How to convert?

Processing to p5.js converter

OpenProcessing: converting code written in Java to JavaScript

読んでたらだんだん理解してきました。そしてさ、前に紹介したprocessing の入門書は、コードをp5.jsで書いたものがあった気がしたんだよな。その本の配列とかクラスとかの部分を読んでみたら、移植も簡単にできそうな気がする。知りたい部分を読んでみて、わからないところだけネットで調べればいいんだもんな。

そして、調べたらP5.jsバージョンの本、やっぱりあった!そしてPDFもありました!ヒャッホーーーーゥ!

結論

野郎は、基本的にはjavaベースのProcessingで勉強を続けます。はい。やってる本、やりたい本がjavaベースだし。

そして、ここに乗せたいときだけ、頑張って翻訳します。それはそれで勉強になると思われるし。

しかし、この結論に至るまで長かった。。。。調べまくった・・・。

スポンサーリンク
スポンサードリンク




スポンサードリンク




シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサードリンク