こんにちは！ @reona396 / レオナ といいます。
Processingというプログラミング言語を使ってデジタルアート・メディアアート作品を制作するのが趣味の人間です。
ようするにプログラミングでお絵かきするのが好きな人間です。
もうこの趣味を始めて8年くらいになるでしょうか。こんなに長続きしてる趣味、他にはありません。それくらい好きです！
Processingの他には、Processingの親戚みたいな存在であるp5.jsもよく利用しています。
ちなみにお仕事はインタラクションエンジニア/フロントエンドエンジニアです。お仕事でもたまにProcessingやp5.jsを使うことがあります。

進学や進級のシーズンである4月を迎え、Processingを学び始めたという方がTwitter上にも増えてきました。
Processingファンとしてすごくすごく嬉しいです！
最近は大学や高専の授業やプログラミング演習でProcessingやp5.jsが扱われることも多くなってきたようですね。
また、職業や立場にとらわれず「プログラミングを学んでみたい」という意欲から誰に強制されるでもなく自主的に勉強されている方もいらっしゃるようで、そのガッツを見習わなければ…と思う日々です。

そんな中、Processingについてお悩みツイートをされている方もちらほら見かけるようになってきました。
そこで、Processingやp5.jsを学んでいく上でよく聞こえてくるお悩みに対して、私なりの回答を考えてみることにしました。
Processingの学習や制作を進めるにあたって、悩まれている方の助けになればいいなーと思っています！

[更新情報]
2019/05/09 : 7項目追記しました。

「どう勉強していけばいいかわからない」

初めてProcessingでプログラミングに触れ、楽しいな…とは思ったものの、そこからどう勉強していけばいいかわからないという方。
ようこそProcessingの世界へ！まずは「Processing 入門」といったワードでググってみるのがオススメです！
最近は日本語の資料もネット上にたっっっくさん増えてきて学習しやすさ鰻登り状態なので、きっとあなたにぴったりの教材が見つかるはずです。
入門資料で基本を身に着けたら、あとは気持ちのおもむくままに作品を制作しまくりましょう！

そして忘れてはいけないのが、制作したら発信していきましょう。
ネット上に投稿するもよし、家族や友人に見せてみるもよし。
発信することで勉強のモチベーションも上がるはずです。
上がったモチベーションを原動力にさらに次のステップへ行けるよう勉強して、また作品を制作して、発信して…のループをうまく回していきましょう！きっと楽しくなっちゃうはずです！

「作品制作のアイデアが浮かばない」

わかります。Processingあるあるですよね……。ホント、浮かばない時はまったく浮かばなくなっちゃいますよね…！
そんな時は外に出たり本を読んだりして、目についた模様や図柄を「Processingで描くならどうコーディングしたらいいだろう…」と考えてみると良いかもしれません。
例えばお気に入りの洋服の柄をコーディングしてみるなんていかがでしょうか？
こんな感じで！
Tutorial : ギンガムチェックを描いてみよう - OpenProcessing

あとは同じProcessingでも、いつもとは違う領域にチャレンジしてみるのも新しい楽しみが見つかりそうです。
実はProcessingはグラフィックやアニメーションの制作だけでなく、サウンドを扱ったり、画像処理をしたり、ハードウェアと連携したり…様々な要素にチャレンジできる言語・ツールなんです。
そういった別領域について調べているうちに、素敵なアイデアが浮かぶかもしれませんね！

「コーディングしてみたが、思い通りの実行結果にならない」

お気持ちものすごくわかります。
頭に思い描いている構造がうまく実装できないとめちゃくちゃ悔しいですよね…！！
そういう場合はprintデバッグ(Processingならprint関数やprintln関数で変数の値を調べて、数値的にコードがどういう状況か把握したり、問題を突き止めたりすること)しまくってなんとか原因を探るのも一手です。根気よくいきましょう…！
あるいは、実装したい機能を細かく分けて、段階的に実現していくのもアリだと思います。いきなりフルコースを作るのは大変だから、まずは前菜だけ作ってみる、みたいな…。
それでもどうにもこうにも実装できない動かなーーーい！！！という日もあります！
そんな日は思いきってぐっすり寝て、頭をすっきりさせた状態でもう一度取りかかるとするっと動いたりするんですよね。あれホント不思議。

「英語で書かないといけないのがしんどい…英語のエラー文が怖い…」

ellipseとかrectとか馴染み薄い言葉を入力するの、それだけでなんだかエネルギー使っちゃいますよね。エラー文もいきなりドカッと英語できますし慣れないうちは戸惑いますよね。
でも幸いにして、英語って学校で一度は習ったことありますし、日常生活の近いところにある言語でもありますよね。「洋服の”サイズ"」とか言いますし。そういえばProcessingにもsize()って出てきますよね！覚えやすい！

それに、英語だろうと他の言語だろうと、わからなければググなり辞書を引くなりすればきっとそこには日本語での説明があるはずです！これは助かる！最高！意味がわかれば怖くない！
そして世の中にはどんなにググってもわからない問題も多く、えてしてそういうものの方が深刻な悩みに発展しがちです。着地点の見えない修士論文の執筆とか、上司の気持ちとか(闇)
つまり言語の問題は「調べればわかる」ものなので、まだまだなんとかなる領域の問題だと思えば元気が出てきませんか？…出てこない？

「プログラミングって数学使うのか…数学苦手なんだよな…」

わかる〜〜〜〜〜〜〜〜〜。私も数学苦手なので気持ちめちゃくちゃわかります。
私の場合、学生時代(特に高校)は授業や教科書の内容を早く進めることが重視されていたがゆえに、そのスピードについていけず、脱落し、それでも受験やテストは迫っていて、仕方ないから公式だけでも覚えて、…という感じの繰り返しでした。
だから公式と別の公式、性質と別の性質とのつながりが見えなくて、もう詰め込んだだけという感じでした。
例えば、0°、30°、45°、60°、90°…の時のサインコサインタンジェントの値の表ってありますよね。
あの表って、サインコサインタンジェントの定義と 30°, 60°, 90°で構成された三角形の辺の長さの比が 1: 2:√3 であることや45°, 45°, 90°で構成された三角形の辺の長さの比が1:1:√2であるという性質を組み合わせれば簡単に埋められるはずなんですよね。
そのことに気がついてなくて、高校生だった私はあの表の数字の並びを丸暗記してたんですよね……。

時は流れて、プログラミングを学び、Processingで三角関数やベクトルを扱ううち、なんとなくしくみがわかるようになってきました。上記の表の件もその中で気がついたことです。
どうしてわかるようになってきたのかというと、「自分のペースでじっくり疑問を潰しながら学べるようになったから」ではないかと思っています。
授業だととにかく時間がない、質問するのもなんだか恥ずかしい、試験が迫っているからじっくり調べ物する時間もない…となりがちですが、趣味でやる数学やプログラミングは趣味でやるがゆえに自分のペースでゆっくり&とことん疑問と向き合えます。
おかげでなんとなく数学の面白さに気がつき始めたところです。
この辺は「体育の授業は苦手だったけど、ジムで自分のペースで運動することで体を動かす楽しさに目覚めた」みたいなエピソードと似てるな、とも思います。
だからもし、あなたが数学に苦手意識を持っていたとしてもどうか諦めないで、せっかく興味を持ったり触れる機会がめぐってきたのですから、今度こそじっくりとことん向き合ってみるのも楽しいかもしれません。
趣味プログラミングなので、肩の力を抜いてやれる、というのは大きいです。あくまで趣味なので！

「Processing勉強したけど…で、何すればいいの？ただ絵が描けるだけじゃん」

何をおっしゃる、あなたは絵が描けるようになったことでお金儲けができるようになったんですよ！！！！！！！！！！！！！！
SUZURI や pixivFACTORY / BOOTH といったサービスのおかげで、今や画像さえあれば無料でTシャツやスマホケース等を商品として売れる時代。
そう、もうおわかりですね。
こういったサービスを利用することでProcessingで描いた画像をグッズ化して売ることができるんです！
あなたは今、まだ見ぬゴールドラッシュの鉱山の入口でツルハシを持ってたたずんでいます。どうします？掘るでしょ？掘るしかねえ。金だぞ金！
とりあえず、Processingで描いた画像を使ってTシャツ作って売りましょう。最悪、売れなくても自分で買って着ちゃえばいいわけですし。Tシャツならパジャマにもなる。

「公式のエディタ、微妙じゃない？」

そんな気持ちになっちゃった時は「お好きなエディタ名 + Processing」でググって自分好みの環境を整えちゃいましょう！エディタがイケてないと感じるのと言語・ツールとしてイケてないと判断してしまうのは別のお話なので！
私もAtomで書いたりVSCodeで書いたり、試行錯誤中です。
p5.jsはVSCodeで書くのが好きになりつつあります。

「ゲーム作れる？」

情熱さえあれば作れると思います！まずは「Processing ゲーム」でググってみましょう！
ただ、Processing以外にもゲームを作るためのツールはたくさんあるので、作りたいと思っているゲームにはどんなツールが適しているか調べたり考えたりしてみるのもオススメです。ツールの選定からゲーム制作は始まっているんですね！

ゲーム制作はプログラムだけでなく、ルール設計、システム設計、レベルデザイン、グラフィック、サウンド…等々、たくさんの要素の絡み合いだと思います。いきなりそんな一大プロジェクトに取りかかるのは気後れしてしまう…と思ったら、まずはProcessingでコンパクトなゲームを作って感覚や自信を掴むのも手だと思います！

「就活に有利？」

とても難しい質問です。
Processingやp5.jsを使う仕事というのは、実はまだまだ少ないというのが現状です。
だから、Processingをやった経験が、何かの資格のように「直接的に」活かせるかというとちょっと微妙なところです。
でも、もしもあなたがプログラマー/エンジニアになりたいと思っているのであれば「日々自分の力でプロジェクトを設計・実装・発信」していたという実績がきっと就活の場で効いてくるのではないかと思います。
プログラミングに興味がない人より、そういう活動を日頃からカジュアルにやっている人の方が現場としては魅力的に思われるのではないかと推測します。

また、プログラミングをやっている方々がよく言うこととして「ひとつの言語を学ぶと他の言語も書けるようになる」というのがあります。
これはプログラミングの考え方を抽象化すると、どの言語も共通したものを持っていることが多いためにそう言われています。
この考えでいけば、現場で使われている言語であれそうでない物であれ、学んでおけばきっとどこかで役に立つということになります。

………とはいえ、クリエイティブなことというのは将来的に実利があるかどうかとか、深く重く考えすぎるとかえってアイデアの幅を狭めてしまうかもしれません。
肩の力を抜いて取り組む方が、良いアイデアが浮かんだり面白い物が作れたりするんじゃないかな、と個人的には思います。のんびりいきましょう。

「周りにやっている人がいない…」

少なくともこの文章書いてる人はやってるから大丈夫ですって！
つまりはネットで仲間を見つけてしまえば良いのです！
まずはTwitterで「#Processing」「#p5js」で検索してみましょう！(日本語ツイートにしぼりたい場合はさらに「 lang:ja」をつけましょう！)
たくさんの方が日々Processingの作品制作に取り組まれている様子がわかると思います。
そして、次はあなたが「#Processing」「#p5js」に投稿する番です！！

オフラインでも勉強仲間や制作仲間、あるいは先生や師匠が欲しいと思ったら、IT系の勉強会やもくもく会に参加するのもオススメです。学会やカンファレンスの情報にアンテナを張っておくのも良いですね。

「コードや作品の共有方法がわからない」

Processingのコードの共有ならGitHubやGistに置いちゃう、ブログを開設してそこに書く(今始めるならやっぱりnoteですかね？)、Qiitaに登録して書く、などがあるかなと思います。
実際に動いているところを画像や動画にしてTwitterなどに投稿するのも良いですね。その際はハッシュタグをお忘れなく！Processing作品は「#Processing」を付けて投稿されていることが多いです。そこにコードへのリンクも貼るともう最高ですね！

p5.jsを利用されている場合はOpenProcessingやNEORTがオススメです。
コードの共有も作品の動作も見せることができる欲張りセットなサイトです。
投稿サイトについては他にも色々な選択肢があります。
この辺の情報は以下の記事にまとめているので、もしよろしければご覧ください。
p5.js のスケッチを展示できるサービスを試してまとめてみた : だらっと学習帳

「授業でProcessingについての課題が出たけど詰まった…」

「オリジナル作品を制作してきてね」系の課題であるあるなお悩みですね。
アイデアが出ない時というのは逆立ちしたって出てこないものですよね…。
とにかく(日頃から)アウトプットとインプットを繰り返していくという戦法しかないかもしれません。
アウトプットは作品をどんなもので作り上げることで、インプットは他の人が制作した作品を観察したりコードをよく読んでみること・(Processingの)本を読むこと・先生に質問しに行くこと等です。
特に先生に質問しに行くのはすごく大事だと思います。
というのも、評価する方の評価軸を知ることで「そこに着地させればいいんだな」というポイントが見えてくるからです。
芸術性を評価されるのか？独創性を評価されるのか？あるいは実装力？実用性やインタラクティブ性があるものの方がうける？またはグループ制作で協調性を見るという場合もあるかもしれません。
先生に授業の質問するついでになんとなーくでも聞き出せると最高ですね！思いきって制作について今まさに詰まっている点について相談してみるのもアリですね！
評価軸を聞き出せたらあとはそれをヒントにアイデアを練って、クリエイティブの神がやってくるのを待ちましょう(？)。グッドラック！

「Processingについて先生に質問しに行っても冷たいorやる気がないみたい…」

Processing関連の質問をくれた学生さんに、授業の愚痴を聞かせてくれとお願いするとたびたびこう返されることがあります。学生さんは心細い気持ちになることでしょう。
これは難しいところです。
先生もお忙しい方でしょうから、いつもお時間を割いてくださるとは限りませんし、たまたま機嫌が悪かっただけかもしれません。あなたを責めるつもりはありませんが、質問のやり方や話し方が先生の感覚と合わなかったということもありえます。

どういう対応をとるかはその時の空気次第にはなってしまいますが、少なくともあなたの熱意を先生にお伝えしておくことが大事になってくるのではないかなと思います。
授業や演習、課題に対して熱意があることをアピールすれば、先生も「だったらちょっと面倒見てやろうかな」という気持ちになられる…かもしれません。
あとは、自分の話を聞いてもらうだけでなく、先生のお話も伺ってみるのも一手だと思います。
例えば「〇〇先生の授業ではProcessingを扱われていますが、数あるプログラミング言語の中からProcessingを教材として選ばれた理由を教えてください」という風に先生のお考えについて詳しく掘り下げるような質問をすれば、先生が授業で何を重視されているかが見えてくるのではないかと思います。
そこから上手くあなたの疑問の答えを引き出したり、つながったりすると良いですね。

あるいは視点を変えて、情報を持っているのはその先生だけとも限りませんから、プログラミングが得意な人を見つけて一緒に勉強してみるとか、先輩に「あの授業どうでした？」って聞いてみるとか、プログラミング教育に熱心な別の先生を捕まえて悩みを相談してみるというのも良いかもしれませんね。
あなたの疑問に答えが、熱意に実りがあることを祈ります。

もし、この文章を読んでいるあなたがProcessingを教える立場にいらっしゃる方であれば、できる範囲で構いませんので、質問されたらどうか真摯にお答えいただけると嬉しいです。
それは質問者がその後の人生において、プログラミングに対してポジティブであり続けることにも繋がります。
また、学生さんの中には授業の先生よりもどこの馬の骨ともしれない私のようなネット上の匿名プログラマーに個人的に頼る方もいらっしゃいます。
もちろん、プログラミング愛好家同士のコミュニティとして助け合うのは当然のことです。私も学生時代に勉強会コミュニティの社会人エンジニアたちにたくさんのことを学ばせていただいたように、初心者・初学者・助けられる範囲にある方にはできる限り親切に接することをポリシーとしています。
しかし、その範囲を越えてサポートを求める方も中にはいらっしゃいます(要は宿題代行的な…)。相談相手がいないことによって追い詰められているのだと思います。
授業やセミナーであればその道のプロとして教壇に立たれている「先生」という存在がいらっしゃるはずですし、授業のことは授業の先生に伺った方が良いのでは、というのが私の意見です。
どうぞよろしくお願い致します。

「Processingの授業や教科書がつまらない！」

もしかしたら、授業や教科書の内容があなたのやりたいことにフィットしていないのかもしれませんね。
具体的にやりたいことがある！という場合はそれをキーワードにググって自主学習しちゃいましょう！「Processing ゲーム」とか「Processing 画像処理」とか。
特にやりたいことがあるわけではないけどつまらない…という場合は「Processing 入門」でググって面白そうな資料で勉強してみるのも良いかもしれません。
あるいはTwitterのProcessingタグを検索して刺激を得るのもアリですね！「こんなの作れるんだー！」という驚くような作品に出会えるかも！

それでもどうしても楽しめなかった時も、落ち込む必要はありません。
授業の課題やテストだけ最低限クリアして、あとは他の勉強してみるのもアリだと思います。
というのも、私が大学院生時代に学部生向けの授業にProcessingを導入した際、担当していた先生が「Processingはさくっとプログラミングが学べて良い。さくっと学べるということはさくっと自分の興味や適性がわかるということ。早めに自分の『領域』を知ることが大事」とおっしゃっていました。
何事もやってみないことには楽しいか楽しくないか、自分に向いているか向いていないかわからないものです。
挑戦した、勉強したという実績はたしかにあなたの中に残ります。だから別の道に行く時もどうか自信を持って！

「プログラミングに興味はあるけど家にパソコンがない」

パソコンがなくても、p5.jsならタブレットがあれば学べると思います。スマホからでもなんとか…！
以下のWebサイト上でp5.jsが動かせるので、アクセスして触ってみてください。(はじめは「p5.js 入門」とググって資料を見ながらトライしてみると良いと思います！あと、文字入力にしんどさを感じたらBluetooth対応のキーボードを接続してコーディングするとさらに捗ると思います)
p5.js Web Editor - https://editor.p5js.org/

上記のサイトはアカウントを作れば自作のプログラムをWeb上に保存することができます。
そのため、図書館やパソコン教室、公民館やネットカフェなど「パソコンは自由に触れるが電源を落とすとデータが全削除される」場所でも楽しく利用できると思います！
図書館という話題でいうと、最近はp5.jsやProcessing関連の日本語の書籍も色々と発売されているので、図書館で借りたり、置いてなければリクエストを出したりしてみるのもアリですね！紙の本ならネットで調べ物するのと違って通信量を気にしなくて済みますし…！

「なかなか制作の時間が取れない…」

「忙しい…でも作りたい…！」そんな素敵な情熱をお持ちのあなたのために、時間短縮のアイデアをいくつか考えてみました！

☆ 作品制作の時間短縮アイデア :
作品のアイデアを常にメモしておく
いざ「制作するぞ！」と意気込んでもアイデア出しに時間がかかってタイムオーバー…とならないためにも、日頃からアイデアメモを書いておくのがオススメです。
スマホでも、紙のノートでも！お好きなサッとメモれるツールで！
制作する時間がとれたら「設計図はあるし、あとは組み立てるだけだなー」って気持ちで取り組めると最高ですね！

違うテーマの作品をゼロから作るのではなく、同じテーマをちょっとずつ改造していく
制作のたびに違うネタを考えて作って…となると時間かかりがちになっちゃいますよね。
だからまずはシンプルなネタを作り、そこからちょっとずつ改造していく方式で制作していくのもひとつの手です。
私の作品になっちゃいますが、例えばこんな感じですね : Shear - OpenProcessing → Shear2 → Shear4
この方式だと毎回ベースのコードがあって、そこから少し手を加えていくことで作品が完成するので、スピーディに作品が制作できます。
少し改造するだけでまったく異なる雰囲気の作品が生まれることもあるので、そういった楽しさも味わえる制作方法です。

☆ 作品投稿・共有の時間短縮アイデア:
作品の画像化(スクショ)の方法を工夫する
Twitterなどに作品の画像を投稿する際、PCの画面全体をスクショしたり、スマホで写真を撮ったりした後に適当な大きさに切り抜いて…という作業は時間がかかるので、Processing側でsave関数を使って作品を画像としてキャプチャするのがオススメです！
例えば、以下のコードを加えれば実行画面をクリックするだけで画像としてキャプチャできます。

void mousePressed() {
  save("myImage.png");
}

p5.jsにチャレンジしてみる
p5.jsなら、投稿サイト(OpenProcessing, NEORT等)にコードを投稿すれば実行画面もコードもどちらもすぐに共有できます。
「実行画面を画像や動画で準備するのに特に時間がかかってしまうのが悩み」という方にオススメです。
書き方もProcessingに似ているのでProcessingをやったことがある方ならさくっと始められると思います。

「作品投稿したのに反応がなくて悲しい…」

あるある〜〜〜〜〜わかる〜〜〜〜〜。
Processingに限らず、クリエイターならば誰しもが抱えるお悩みですよね…。神絵師さんとか毎回めちゃバズっててホントすごい…。
Twitterに投稿している場合、 #Processing をつけていると見てもらえる可能性がアップする…かも？p5.jsなら #p5js ですね！
あとは…とにかく本数出していくしかないですよね…！
「あの人はProcessingの作品をよく投稿している人だ」っていうイメージがつけば自然と見てくれる人が増えていく…はずです。きっと。
私もバズりた〜い！お互い精進していきましょう…！！

「大した作品、コードじゃないから公開するのは恥ずかしい…」

人に見せるのって勇気が必要ですよね…！
が、しかし、かの吉田兼好も徒然草150段において「芸を身に着けるにあたって『未熟だからこっそり練習していよう』と言う人は伸びない。未熟なうちから人に混ざって励む者こそ上達する」と述べています(要約。こちらが詳しいです → 徒然草　現代語訳つき朗読｜第百五十段　能をつかんとする人 )。
何事も発信すること、人に見せることで新しい気付き、学び、自信が得られると私は思っています。あまり気負いすぎず、気楽に作品やコードを色んな人に見せていきましょう！
最初の一歩として、家族や友人、サークルや研究室の仲間などローカルなつながりに向けて発信してみるのも良いですね。
そしてWebにもガンガン投稿していきましょう！楽しいですよ！！！

私の話でいうと、自分の中では「パッと目をひくものでもないけどボツにするのももったいないし投稿しておくか〜」くらいのテンションでアップロードした作品が意外とウケが良い時もあるので、客観的評価というのはわからないものだよなぁ…と思います(もちろん「こりゃバズるだろワハハ！」ってテンションで投稿したのに反応がイマイチだった…って時もありますが)。
だから、自分の中で「これは微妙だしやめておこう」とリミットをかけるのはもったいないと思っています！
「何が評価されるかわからないし、とりあえず出しとこ」くらいのノリで気楽にいきましょう！！

「他の人のコードを観察して作品をつくったんだけど『パクリだ！』って怒られない？」

丸パクリ、虚偽の自作アピール、厳格なライセンスで保護されている作品…でない限りはたぶん怒られることはないと思います。
というのも、例えばProcessing系作品投稿サイトOpenProcessingにはForkという機能がついており、これは他の人が公開しているコードに手を加えることでまた別の作品として投稿できるというものです。
言い換えれば、他の人のコードを下地にして作品を制作し、それを「枝分かれした作品」として投稿できる機能です。
「枝分かれ」の良いところは、枝をたどれば元の作品にたどり着くという点です。つまり、出典がはっきりわかるようになっているので、Forkした側もされた側も気持ち良く利用できるようになっています。

Processingの本やブログ記事などを読んで「これは○○さんの□□という記事を参考にした作品です」と明示した上で作品を投稿することは、Processing界隈ではよく見る光景です。
インスパイア元へのリスペクトを忘れずに作品制作に取り組めばきっと大丈夫だと思います。

「センスが欲しい！」

私も欲しい〜〜〜〜〜〜〜〜！！！！！！！！！
こればかりは一朝一夕では身につきませんし、じっくり自分の中で養っていくしかないですよね…。
センスを養うためには、やはりたくさんの素敵な作品を観察して「良いところは盗む」精神が大事なのかなと個人的には思っています。素晴らしい作品をたくさん生み出しているクリエイターさんは読書家だったり、イベント好きだったりと、インプットもしっかりしている印象が強いんですよね…。

さらに、素敵な作品を見て具体的にどこを良いと思うのか丁寧に観察することでもっともっと自分の身になっていくのではないかと思っています。
その作品のどこに心惹かれたのか？アニメーション？色使い？形？ダイナミックなところ？繊細なところ？何らかが数の暴力のように夥しい量あるところ？「そうやって実装するのか！」的なところ？短いコードで面白くしているところ？
好きな作品の好きな理由をじっくり考えれば、きっと自分の作品にも活かしたくなる箇所が見つかりそうな気がします。
それを自分の「センス」として取り込んでいきたいですね。私も精進しなければ…。

---

というわけで、Processing / p5.js お悩み相談室でした！
お役に立てれば幸いです！