見出し画像

CreativeCodingはじめの１年の記録

senbaku


本記事は，Processing Advent Calendar 2020の10日目の記事です🎉

自己紹介

　こんにちは。センバクです👻

　大学、大学院では民俗学と有職故実をかじって水引の研究をしていました。現在は子育てをしながら主婦をしています。スター・ウォーズ、カメラマニアで、本と珈琲を愛しています。子供の頃から絵を描くのを趣味としてきました。

はじめに


　Processingに私が出会ったのは去年のクリスマスイブでした。なのでほぼ一年たったことになります。いいタイミングなので、一年を振り返ってみようと思います。

　他の人はどうやってCreativecodingに出会って、学んだんでしょう？　(気になりますよね。私も気になるのでこの記事を見た他の方も書いてみてください！楽しみにしています。)

　わたしは学習計画などは練らずにただただ進んできました。どう訓練したらいい作品が作れるようになるかの見本は見つかりませんでしたし、そもそも面白そうなことを試して学んでいく過程が楽しく、楽しむのが目的だからです。わたしの学習方法は振り返ってみるとただただ「面白い！と思ったことをたのしんでやる」だったので、人の役には立たないかも知れません。参考までにお楽しみください！（本が好きなので、その時参考にしていた本を📕マークをつけて示しました）

Processingやろうとおもったきっかけ


　わたしがProcessingに出会ったきっかけは、『プログラム×工作でつくるmicro:bit』という本でした。このなかのmicro:bitをパソコンにつなげて傾けるとsonicPiから音がなって、Processingで表示した鍵盤の絵が変化するという演習を子供にせがまれてやり、このProcessingっていうのはなんだろう？と興味を持ちました。

　"Processing"でwebを検索し、OpenProcessingを見つけて驚きました。コードで絵をかける…しかも絵というよりもアートというレベルの作品たち。作品の多くが動く、ということも魅力でした。絵を描く身として、アニメーションには憧れていましたが、一枚ずつ描く根気か、特別なソフトウェアが必要だと思っていたからです。わたしは夢中でOpenProcessingを眺め、webでクリエイティブコーディングの記事をあさりました。

いつやってるの？

　新型コロナウィルスによる幼稚園休園時期は、子供がゲームをしている、30分x3回の時間+子供が寝た夜の時間をコーディングの時間に当てていました。　

　4月に行われたDailyCodingChallenge中は、この時間の中で、デイリーコーディングの作品は午後〜作り朝投稿、午前中はシフマン先生の動画などを見て新しいことをする、というサイクルを作りやっていました。

　幼稚園再開後は、家事等の終わったあとの時間と子どもの寝たあとの時間を使っています。

アーガイブ&SNSはどう使ってる？


twitter こんなことしたよ、たのしい！と逐次ツイートしています。同じようにCreativeCodingをしている方々とわいわい交流できて、モチベーション維持の助けになっているようにかんじます。
twitterのモーメント 週間まとめを10月末から、一週間ごとに作品をまとめてのせています。twitterの普段のツイートでは制作中の楽しさのシェアが目的ですが、これは人に作品を見てもらうことを目的にしています。
OpenProcessing 作品をサムネイルで見渡せるので、いっぱい作ったなあ、と見て嬉しい。ちょっと重いのが玉に瑕。動く作品をシェアしたいときによくアップロードしてリンクを張ります。
dropbox paper 作品メモを残しています。表に、日付/目標/画像/ファイルのURL/レファレンスにしたもの/メモ　を記録しています。あの作品で使ったアレはなんだっけ？みたいなのがサッと探せて便利です。


Codingの基本の学習


　プログラミングはほどんどしたことがなかったので、コードの基本的な書き方をこの二種類の動画を見て学びました。

ダニエル・シフマン先生のp5.jsチュートリアル
1月の終わりくらいからやりました。本やweb記事を読んでいろいろ試していましたが、理解が虫食い状態で、「for~のやつ、これはよくわからないけど呪文」みたいな感じだったので、最初から最後まで見ました。当初ipadでProcessing for iOSというappを使ってかいていましたが、これを見るようになって、p5.js web editorを使うようになりました。

ただ見てコードをかくだけではなく、持ってる知識も使ってアレンジして遊びました。授業中の落書きみたいでたのしい。


@takawoの先生の 公開講座「クリエイティブコーデイング：2020」
3月にリアルタイムで視聴しました。はじめてクリエイティブコーディングをする学生さんのための講義で、丁寧でわかりやすかったです。見た時期的に復習にもなりましたし、知らないこともあって良かったです。子供とワイワイ見ました。

　あとは、わからないことがあったらその都度p5.jsのレファレンスページで調べています。webで検索したり、本に書いてあることが思い出されるものであれば本をめくります。

👻　今年はなにかしら独学された方の記事をいくつか読みましたが、学んだことを自分なりにアレンジする、ということが書かれていることが多かったように思います。自分だったらこれをこう変えたほうが可愛いな、かっこいいな、こうしたいな〜と手を動かしながら見ているのを、自分不真面目だなあ！　と感じていたのですが、もしかしたらいい方法なのかもしれません。

1月　発見、探索

画像1

・Processingって何？と調べる
・『Processingをはじめよう』『ジェネラティブ・アート processingによる実践ガイド』を最初からコードを写して動かしてみる(途中であきた）
・趣味としてのクリエイティブ・コーディング(@deconbatchさんのnote記事)noteを見ながらやってみた
・ダニエル・シフマン先生のp5.jsチュートリアルを最初から終わりまで、見ながらコード描く


書籍やwebを中心に調べ、パラメータを弄って遊ぶことが多かったです。数値くらいしかいじれませんでした😫　でも楽しい！

📕『Processingをはじめよう』(Casey Reas , Ben Fry 著.オライリージャパン.2016) 📕『ジェネラティブ・アート processingによる実践ガイド』(マット・ピアソン著.ビー・エヌ・エヌ新社.2014)

2~3月　コミュニティの発見と交流

画像2

・PCDtokyoに参加した
・twitterでerase()やdrawingContext()が流行ったのでやってみた
・SNSで質問するとアドバイスが貰えたりしてうれしい！

Processingコミュニティの交流イベントが開催されることを聞きつけ、ドキドキしながら申し込みました。Processingのことまだ良くわからない状態でしたが大変刺激をうけ、モチベーションうなぎのぼりでした。

　twitterでProcessingやp5.jsの方たちをフォローして見始めましたが、2月はerase()が話題になっていました。3月はdrawingContextが。いろいろな人が挑戦していて面白そうだったので一緒になって取り組んでみると、アドバイスをもらえたり、わいわい知識が共有できてたのしいことを知りました。わからないこともtwitterでつぶやくと、だれか助けてくださったりするので、私はずっとできなかった「わからないことをそのままにしないで質問する」ことがなんとなくできるようになりました（！）

📕『Generative Design with p5.js』(Benedikt Gross, Hartmut Bohnacker, Julia Laub著.ビー・エヌ・エヌ新社.2018) と、📕『数学から創るジェネラティブアート』(巴山竜来著.技術評論社.2019)　を手に入れる。全然理解できなかったが、こんな事もできるのか〜とわくわくしながらページを捲りました。

👻　よく理解していないことがたくさんあるなあ、と感じていて、「やりたいこと、わかっていないことリスト」をつけていました。今日何しようかな？と思ったときはそこから選んでやればいいのでいい羅針盤です。今も書いています。今はあわせて「わかったことリスト」も書いています。わかったことリストが増えていくのはうれしいです☺️

4〜5月　挑戦

画像3

・VScode、Gitを使い始める
・DailyCodingChallengeに参加
・LTやzine寄稿
・@takawo先生の勉強会に参加

4月、5月は新しいことへの挑戦の時期でした。やったことないことばかりでワクワクしていました。やるぞ、やるぞと前のめりな気持ち。

VScode、Git

　バージョン管理をやってみたい…と思い、tmbrtextの開発者でもある主人に使い方を教わりました。iPadで制作していましたが、これを気にパソコンで書くようになりました。快適！

DailyCodingChallenge　

PCD_tokyoさん主催のDailyCodingChallengeに参加しました。4/1から、あいうえお表の順に、お題が出されそれに沿って作品を作って発表するというものでした。

　技術的にもまだわからないことが多く、参加しきれるのか不安でしたが、なんとかやり遂げました。途中「表現の幅を広げるための勉強を今はすべきだったのでは？？」と葛藤することもありましたが、結果としては、表現したい絵を創るために色々な技術を勉強し、反復して書き、成長できたと思うので、最後まで参加してとても良かったと思います。「senbakuさんの作品はすぐわかりますね」と褒めてもらい、自信がつきました。

　企画に参加する上で、「人に見せること」を意識しました。一枚の絵で可愛いこと。テーマを端的に表現できていること。そして、途中で日本以外の人も見ていることに気がついたので、英語でも説明文を書くようにしました。また、配色が苦手だったので、coolors(https://coolors.co/) を参考にするようにしました。色がいいだけで格段に可愛い絵ができるようになりました。（はじめたばかりの人ほど、配色と配置に気を使うと良いと思いました）

LT、Zine寄稿
お誘いいただき、PCHJ#01でライトニングトークをさせていただきました。初LT。自分が登壇者になることがあるとは思いもしませんでした。人前で話すのは苦手ですが、面白そう！と思い勇気を出してチャレンジしました。

★Processing Community Hangout Japan #01：LT発表「Daily Coding Challengeに参加して」のスライド


★Processing Community Japanによる PCJ ZINE vol.0　テーマは「わたしの #dailycoding 」とのことで、LTの補足をしたかったので考えていることをゆっくりまとめて寄稿しました。

勉強会参加
@takawo先生が主催しているオンライン勉強会（もくもく会？）に参加しました。StayHome中で外に出られない日々が続く中で、毎週とても楽しみにしていました。フィードバックが得られてとてもうれしく、もらったアドバイスをもとに勉強したり制作したりしました☺

👻　コードで絵を描く、ということを中心に人とのつながりができ始めて、制作に打ち込んだ高校時代の美術部を思い出して胸が熱くなりました。

5~6月 物理やる

画像4

・『Nature of Code』

　5〜6月はひたすらNature of Codeを読みながら勉強していました。高校から文系コースだったので、数学、物理学は全然やっていませんでした。フロンティアです！知らないことばかりでたのしい。
　画面上のものを動かす手段がそれまでのrotate、sin/cos、ランダムウォークから一気に広がりました。質量や重力、加速度などをものに与えることができる。お互い引き合ったり、反発し合ったりもできます！　私はまだparticleの章までしかやっていないけれど、かなり表現力が上がる印象です。

　途中までなら、シフマン先生がp5.js版も動画を作ってくださっています。

📕『Nature of code』(ダニエル・シフマン著.ボーンデジタル.2014)---紙の本は手に入りにくいのですが、PDFならすぐ手に入りました。

7~8月 数学がたのしい

画像5

・『数学デッサン教室』
・ちょっと違うこともしてみる

数学ブーム
　takawo先生の会で教えていただいた『数学デッサン教室』がとても良くて、自然の形、例えば貝殻の形状が数式で表せて、しかもその数式がわかればコードで再現するのも容易、というのがわかり感動と興奮をいだきました。数学っておもしろい…。

📕『数学デッサン教室』(瑞慶山 香佳 著.技術評論社.2019)

📕『数学から創るジェネラティブアート』(巴山竜来著.技術評論社.2019)も読み返してみたらなんとなくわかるようになってきていて、成長を感じました…。

📕『アートを生み出す七つの数学』(牟田 淳.オーム社.2013)

📕『作って動かすAlife』(岡,瑞起,他.オライリー.2018)　twitterでおすすめしてもらった本です。Pythonなので理解しきれてませんが、わくわくします。

いろんなことにちょっとずつ手を出した

　7〜8月は数学で遊びながら、いろんなことをしました。csvファイルを用いた作品を時間をかけて作ったり、ホームページの作り直し、Blenderでモチーフを作ってp5jsで使ってみるなど。

　あとマークダウン記法を覚え、カンペを作りました。よく使う色やコードや投稿タグなどをまとめてあり、サッと使えて便利になりました。


9月　creativeCodingの歴史が気になる。

画像6

・酒井さんのMIT宿題配信を見始める。
・メディアアート史のオンライン講義受ける


　酒井さん(@yasushisakai)の"Zachの宿題をやる配信"を見始める。

　クリエイティブコーディングの歴史、私の今の立っている位置、何も知らないことを発見しました。

　クリエイティブコーディングの勉強ってコードのことだけだと片面だけなのかもな、と感じました。結局私達が描いているのは絵なんですよね。人間は遠い昔から絵を描いてきたわけで、連綿と連なる歴史が否応にあり、それを知った上で自分の立っているところを語れたらいいな、作品を作れたら良いな、と思いました。何事も全部はなかなか知れないので、まずはもっとちゃんとクリエイティブコーディングが歩んできた歴史知っておきたいな〜。

高橋裕行氏のメディア・アート史のオンライン講義うける。


　あと９月はインフォグラフィックスやデータビジュアライゼーションなどに興味をもちました。ただデータを扱うのは自分にはまだ時期尚早なのか難しく、今後の楽しみにとっておきます。

📕『インフォグラフィックスの潮流』こういう本がProcessing、あるいはCreativeCodingにもあるといいのになあ、と思う。体系的な歴史の本。

📕『JavaScript本格入門』これはもっと早く買っても良かったなあ、と感じた本。

10月〜自由時間

画像7

・自分の作品の週間まとめ作成
・幼稚園ママさんたちにCreativeCodingをプレゼンした

作品まとめ

　twitterのモーメントに作品まとめを制作して公開することにしました。作ったものをぱっと見られるのは、人に見せる目的で作ってはいるものの、自分が励まされます。

スクリーンショット 2020-12-10 9.15.57

(https://twitter.com/i/events/1328139494554443776)
　ただ、週間まとめはやや検討が必要な気がします。これ作らなくちゃと思うと焦るので、たのしくない。アウトプットをまとめながら作品作っている人、尊敬します…。

プレゼン

幼稚園のクラス親睦会でクリエイティブコーディングを紹介し、おすすめするプレゼンをしました。30分でスライドを作り、５分間の発表でしたが、かなり好評でした。小学校で子供のプログラミング教育が始ま（る？った？）影響なのか、「子供もできそうか？」「スマホでもできるのか？」と質問がたくさん来ました。　私は小学生の時に絵を描きはじめてハマりましたが、鉛筆、Gペン、コピック、アクリルガッシュ、フォトショップ…この並びにp5.jsの選択肢があったのなら！と思うとドキドキしますね。ちょっとハードルの高い選択肢かもしれませんが！

12月現在


📕『Generative Design with p5.js』(Benedikt Gross, Hartmut Bohnacker, Julia Laub著.ビー・エヌ・エヌ新社.2018) 2月の段階ではさっぱりでしたが、すこし読める様になってきたかも！

　このわからなかったものがちょっとわかるようになってきている、という変化がとても嬉しいです。

おわりに

　割と好きなようにコードを描くことができるようになって来ていると思います。どんどん手を動かして、自分のスタイルやテーマを見つけていきたい！　まだまだ「やりたいこと・わからないことリスト」にいっぱいやりたいことが書いてあるので、この先もしばらくたのしいたのしいとコードを書いていくと思います。

　コードを書くことに限らず、人前で発表したり、交流をする、数学や物理学、英語に興味を持つ、など今まで自分がするとは思っていなかったもの、苦手だと思っていたものが、キラキラと光って「面白そう、やってみたい」ことに変わっていった今年は本当に素晴らしい一年でした。Processing、p5.js、それを取り巻くすべてのものに感謝です🥳

また来年もどうぞよろしくおねがいします！




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