見出し画像

p5.js からメディアアートをどんどん楽しむロードマップとTips.


本記事は Life is Tech ! Advent Calendar 2023 に参加している記事になります.
学生メンターとして所属させていただいている Life is Tech ! のコミュニティーのアドベントカレンダーです.

こちらで私はp5.jsを用いたメディアアートを中高生に伝えているのですが, ロードマップが見えづらい分野であると感じており, これを機に現在の私の考えるロードマップをまとめてみようと思いました.

ロードマップが見えづらいとは, つまり自由に楽しめる分野であるということであり, これこそが魅力であるということは私も真に感じているのですが, 1つの例としてお読みいただけると幸いです.

p5.js や クリエイティブコーディングに触れたことのある方も, そうでない方も,  長い記事になりますが, ぜひお付き合いください..!



0. メディアアートとは

ロードマップの前に, 本記事ではじめてp5.jsやクリエイティブコーディングについて知った方 (は少ないと思いますが..笑) のために私の考える魅力について軽く触れておきたいと思います.

そもそもメディアアートとは広い意味を持っており, メディアを用いたアートを広く指します.

googleでメディアアートを検索した結果

企業的な観点で言えば, チームラボやライゾマティクスを思い浮かべることが多いのではないでしょうか.

他方, このような高度な技術やデバイスを用いることなく, 個人の創作としてメディアを用いたアートを楽しんでいる人がたくさんいます.

それが正しく今回扱うp5.jsやクリエイティブコーディングの世界です.
上述しました私の所属するコミュニティではメディアアートコースとしてこれらを扱っている都合上, 本記事ではこちらを狭義のメディアアートと定義させていただきたいと思います.

ここから説明を広げると中々文字数が足りなくなってきますので, 興味を持った方にぜひおすすめしたい記事や動画, 私の作品をあげて, ここからは本題のロードマップに移ります. (敬称略です.)

Image Circle


1. 出会いと学び

クリエイティブコーディングやp5.js, processing に惹かれ, 作品を作ってみたいと思った方向けのパートです.
ぜひ, 一緒に楽しみましょう..!!


1-a. 学びを助けてくれるもの

p5.jsやprocessingにはさまざまな参考サイトがあり,  本当に学びやすいものになっていると思います.
書籍やサイト, 動画などさまざまありますが, 私のおすすめは以下です.

数学に抵抗のある方は前者, 全然余裕という方は後者のサイトがわかりやすいのではないかと思います.
ここで全てを分かり切る必要はないと思っているのですが, 特にプログラミング初学者の場合はわからないなりにも目だけ通して「見たことはある」くらいにしておくと, この後楽しくコーディングがしやすいのではというのが私の考えです.

そして, 上記サイトなどで基本を身につけた後には ginさんのp5.js勉強会の動画で作品作りを体験してみるのが良いのではないかと思っています.
数学的な内容も含みますが, 数学的な解説をがっつりしているわけでもなく, 一緒に手を動かしてみたら作品作りの楽しさを存分に感じることができると思います.
私もとってもお世話になっています.笑


1-b. 作品を作るためのインプット

私もがっつりそうなのですが, クリエイティブコーディングを魅力的に感じた方の中には, 絵を描いたり音楽に合わせて踊ったり, のような芸術的な活動をしたいけど, 向いていなくて… みたいなテンション感の方も少なくないのではないかと思います.

私は特にそうで, センスあるお洒落な感じが好きでも一向にお洒落な服の着方もわからないし, 絵も下手で, 踊りや楽器も全然です. 笑

そんな私はとりあえず, クリエイティブな創作物にアンテナを強めに張っていろんなものを見てみていました.
メディアアート的な創作物はもちろんですが, 音楽や写真, 絵画, 映像 … などなど.

そもそもこんなコンテンツへの憧れはある訳ですし, 見ることはただただ楽しいので, 自分が作るなら, p5.js で作ってみるならという, 少し作り手の気持ちになって見聞きすることだけ意識してみているかなと思います.

北海道小樽にある西洋美術館  色味がとても好きだったので記録しておいた


1-c. コミュニティへの参加と発信

p5.js や processing のコミュニティは活動が活発で, とても優しくウェルカムな雰囲気です.

招待リンクあるかなと思ったら, Processing Comunnity Japan のXに招待リンクがありましたので, こちらにも貼らせていただきます.

後述する #minacoding にも沢山の方が参加してくださっていたり, 一度勉強の資料を探していて質問させていただいた時には, たくさんの方が資料をくださったりととても温かいコミュニティだと思います.

また, discord でなくとも, Xやinstagram でどんどんフォローしてみるのは良いと思います.
タイムラインに素敵な作品が毎日のように並ぶようになります. 笑

誰からあげるかというのがとても難しいのですが, このnoteに出てきた高尾俊介さんや, ginさん, reonaさん はとても沢山作品をアップしておられて素敵です.

私はそもそも全然誰が誰だか状況だったので, 自分の先輩がフォローしている人で作品を上げていそうな方を片っ端からフォローしていました. 笑


この繋がりの上で, 「発信」も大事になってくると思います.

これは創作全体に関わることになると思いますが, 自らが作ったものを発信して, また他の人の発信を認め合うことで, 刺激しあいながら自らの創作物も良くなっていくと思っています.

そもそも, こんな硬いことを言わずとも, 良いものが出来れば他の人に見てもらいたいし, 他の人の好きな作品には好きですと言いたいものですよね.笑
※ このあたりの内容についてはこちらのnoteにも描いたので, ぜひです.

しかし, ここで他の人の作品に比べて自らの作品の, 特に技術的なレベルが低いことに負い目を感じることが多いですよね, 分かります.
ただ, 誰もがはじめは初学者. 気楽に発信する習慣をつけやすいのも初学者だと思っています.

気持ちが軽くなればと, 私が初めに発信したと思われる作品も載せるので, 背中を押せていれば嬉しいです.笑
この時はこれが技術の150%で傑作でお気に入りでした.

https://openprocessing.org/sketch/1780148


2. 楽しみと迷い

そこそこ基礎的な知識で楽しみ方がわかってきて, ここからどうしようとなった方向けのパートです.
私もめっちゃそんな感じです.


2-a. 2つの力をバランスよく伸ばす

このあたりで, 簡単な技術でもどんどん作品をコネコネすることを楽しむ方と, 作品は思いつかないけど高度な技術もどんどん取れる方に分かれてくると思います.

私はどちらでも問題ないと思っていて, ただ必要以上に自分を責めないことと, とはいえ自分に足りていない方もゆっくりじっくり身につけることが重要であると思っています.


作品を素朴な技術でコネコネしていると, 少し技術的にレベルが高い作品へのコンプレックスが沸いたりします.
断言しているのは, 自分の経験だからです.笑

自らの作品が良いし技術が重要なわけではないとわかっていても, やっぱり気にしてしまうものです.

ここで, 自分を否定せず, コネコネするのを楽しみつつ, ちょっと気が向けば難しい技術も学んでみる.
何度技術の習得に挫折しても, いつか分かるかと長い目でみて, またコネコネするというのが良いかなと思います.

私はshaderに10回以上は挫折していますし, 再帰にも何度も挫折しました.笑
ただ, 挫折し続けて2年くらい経った今, なんとなく理解でき始めています.

コンピュータ, 数学や物理的な要素を多く含むので難しい内容があるのは仕方ありません.
ただ, 気が乗った時には, そのやる気を逃さないことが大事だと思います.


他方, 技術はあるけど作品が思いつかない方もいると思います.
こちらは自分の通った道ではないので想像にはなりますが, 技術習得時に簡単な作品を作ってみるのが良いのではないかなというのが私の意見です.

ちょっとパラメータをいじるだけで作品が一気に華やかになるものです.
これは私がクリエイティブコーディングを伝える身で, さまざまな方の作品を見ていて思うことですが, パッと綺麗で華やかな作品ほど細かな工夫で成り立っていたりします.  ( 例えば, colorModeなど )

技術で足すことだけではなく, 少しちょっとした工夫をちょちょっと加えてみると,  作品作りがもっと楽しくなると思います.


2-b. どんどん作品を作る

1-b でも触れましたが, そもそも芸術に全然触れたことのない私にとって, どうすれば作品の作品性が上がるのか, 見栄え良く自らの納得いくものになるのかは, とても疑問でした.

それに対する今の仮説は, 作品を作った量です.

量か質かという話ではないのですが, さまざまな技術やさまざまなものを作ってみると, 作品が洗練されていく気がします.
実際, 芸術大学に行っている方もさまざまな科目を学ばれるのだろうと思うと, 1から自らの芸術性を高めるにあたってさまざまなものに触れることは重要なのかもしれません.


また, これに関わる私の後悔なのですが, もっと作品を真似るべきでした.

誰かの作品を真似ることはよくないと思い続けていたのですが, CCライセンスへの知識不足だったんです.

CCライセンスとはインターネット時代のための新しい著作権ルールで, 作品を公開する作者が「この条件を守れば私の作品を自由に使って構いません。」という意思表示をするためのツールです.

creative commons JAPAN - クリエイティブ・コモンズ・ライセンスとは

openprocessingでは BY-NC-SA というCCライセンスがデフォルトで, 公開する時に特に操作を加えなければ, このライセンスで公開している方がほとんどです.
そして, この BY-NC-SA というライセンスは, クレジットを表示し, 非営利で公開し,  かつ自らがその作品に何か手を加えた場合には同様に BY-NC-SA のライセンスで公開する, というルールです.

このライセンスについての知識を持っていれば, どんどん他の作品を真似ながら技術を習得できていたのにと思いました.
ぜひ, この記事を見た方には上手く真似をしながら技術を学んでいただきたいです.


もう1つだけ, 少し宣伝チックになるのですが, 一昨年からデイリーコーディングイベントの #minacoding を開催しています.
2024年以降も6月に開催する予定ですので, ぜひご参加ください..!!

デイリーコーディングについてはこちらの高尾さんの記事がとってもためになります.


3. 継続と発展

このあたりからは私も全然わかっていません.
ただ, 憶測と想像と自らがこれからやりたいことを書いていきたいと思います.


3-a. 仕事にしたいかどうかという観点

現在, 私が調べた範囲では, p5.js や processing が直接仕事につながるということは, 教育分野以外で多くなさそうでした. (教育はありそう.)
他方, unity や shader, touch designer まで技術を広げると, インタラクティブエンジニアとしての職がちらほら見え始めます.

つまり, 広義の意味のメディアアートまで世界を広げないとエンジニアとしての職は多くなさそうということです.
これは, ここまで難しい技術やご近所の技術を触ることに挫折していたり, 毛嫌いしていた人も学ばねばならないということを意味します.

そもそも毛嫌いしていたら仕事にするのも難しいところな気はしますが, 少し自分のキャリアとメディアアートについて考えてみるフェーズなのかもしれないなと思うところです.

学生ですと, インターンがとても良い機会だと思います.
これは自らの体験談です.
shaderはインターンでメンターの方に聞きまくった結果, ハードルを1/10まで下げてもらえました.笑


3-b. どちらにせよ, 楽しみ続けたい

最後は完全に私の私見になりますが, 直接仕事にはなっていないからこその p5.js や processing の魅力はあると思います. ( NFTなど作品を販売する手段はあれど. )

高尾さんが提唱しているdailycodingのように, 生活に根付いたコードというのは, これらの言語の最大の個性だと思うんです.

音楽ライブで熱狂し, お笑いの寄せで笑うように, コードを書いて, 見て, 感情を動かすというのは, 社会生活の一部となりうるのではないかと思います.

creative coding に出会って初めの方に作ったポテト



現在, 5522文字と出ています.
さすがに, とても長くなってしまいました….笑

ただ, これらはどれも, 過去の私に伝えたいような内容です.
私のように, creative coding に出会って魅力を感じた全ての人に, 一緒に楽しんでもらえるような, そして共に楽しめるような, 1つのロードマップを示せていれば幸いです.


最後に, 私のXのアカウントです.笑
私も日々作品を作ったらアップしたり, こんな記事を投稿したり, たまにお笑いについてTweetしていますので, ここまで読んでくださった方とは繋がれれば幸いです.


本当にここまで読んでくださりありがとうございました !!


この記事が気に入ったらサポートをしてみませんか?