クリックでつくる絵画

今回は、絵の中でマウスを動かすと絵が変わっていくという、なんとも不思議な海の絵です。
まずは、最初の画面の「▷ PLAY」(再生)ボタンを押してみましょう。すると、海の絵が現れます。その中で、マウスを動かしてみてください。サーファーの人の動きとともにさまざまな変化が起きていることにお気づきでしょうか?マウスの位置によって、海の状態も次々と変化するんですよ。

普段、私たちが目にする景色は、天気や時間によって変わって見えます。そのように刻々と変わる景色を1つの絵の中であらわすことができるなんて、ステキだと思いませんか? さらに、「作品の作り方を楽しもう!」のページを参考にして、画面の左側にあるプログラミングコードのピンク色の数字を変えてみましょう。すると、もっと違う動き方をする絵になります。ぜひ、自分の好きな波をつくってみてください。

作者の高尾さんは、この方法を使い日記をかくように毎日さまざまな作品を作っています。高尾さんの作品を体験していただくことで、日々見たものや感じたことは、絵具や筆で描く絵でなくても、文字で書きとどめるものでなくても、もっと多くの方法で表現できることに気づいていただけるでしょう。

「茅ヶ崎の海辺」(2021)

作品の作り方を楽しもう!

作品をつくるための7つの作業が楽しめる!高尾さんの解説付きの分かりやすいプログラミングのコード体験ページです。数字を変えたり、キャラクターを変えたり、説明をよみながら親子で取り組んでみてください。

作家よりコメント(作品に込めた想い)

こどもの皆さんに向けて

今回のテーマは「波」です。よせてはかえすあの波。茅ヶ崎は海がとてもきれいなところですよね。
海から見える景色や、みんなが知っている「えぼし岩」をプログラムで表現できたらきっとすてきです。
だから、作るものはそういうものを目指していきたいと思います。
プログラミングのコードを書きながら、海を思い出したり、窓の外を眺めたりしてもらうと良いです。
夏の海の感じだったり、今の冬の海の感じも表現できるかもしれないですね。
皆さんといつか一緒にプログラムコードづくりができることを楽しみにしています!

大人の皆さんに向けて

今回の目的は「プログラムに触れる」「プログラムを少し書き換えてみて,現れる変化を楽しむ」なので、プログラムを上から下まで全てを理解する必要はありません。僕も日々コードを書いていますが、誰かの書いたコードを読んで分からないこともよくあります。「全然わからないけど数字を変えてみたり、少し書き換えるだけですごく変わった!」というような体験から出発してプログラミングをスタートしてみてください。きっと面白いと思います。

作家プロフィール

高尾俊介(クリエイティブコーダー)

熊本県生まれ、兵庫県在住のクリエイティブコーダー。日記のように、毎日コードを書く習慣を続けるデイリーコーディングの第一人者。作品には、本人のその日の気分、体調、関心事などが反映され、人間の変動的な部分と規則的な動きをするコンピューターをつなぐことで、プログラミングの表現の幅を拡張していく作品で知られる。第24回文化庁メディア芸術祭アート部門の選考委員や甲南女子大学メディア表現学科講師も務め、新たな表現者の育成にも取り組んでいる。
http://cenkhor.org/
https://twitter.com/takawo
https://www.openprocessing.org/user/6533

作品の作り方ヒント

Q1. .この作品をつくるために使ったコンピューターソフトやアプリを教えてください。

P5.js(ピー・ファイブ・ジェー・エス)」というProcessing(プロセシング)から派生したJavaScript(ジャバスクリプト)で動くプログラミング環境を使いました。無料ではじめられる今オススメのクリエイティブコーディング環境です。
WEB: https://p5js.org/

Q2.つくるときに難しかった点や工夫した点があれば教えてください。

美術館に訪れる幅広い方々へ向けて、プログラミングで絵を描くようなことをどのように伝えると伝わりやすいのかを考えながら作りました。

Q3.このような作品を創りたい時に参考になる本やWEBサイトを教えてください。

書籍:『Generative Design with p5.js [p5.js版ジェネラティブデザイン] ―ウェブでのクリエイティブ・コーディング』
出版:株式会社ビー・エヌ・エヌ
p5.jsで「きれい」や「面白い」を作るレシピ集です。内容が少し難しいので中学生以上の方向けかもしれません。ウェブサイトにたくさんの作例が掲載されているので触ってみるだけでも楽しいと思います。

WEBの授業資料:
https://cenkhor.org/lectures/programming_b_2020/
現在大学で行っているクリエイティブコーディングの授業資料です。三角関数に関連するものもあります。今回のプログラミングに興味をもって何か始めたい場合は参考になるはずです。

教育現場や保護者の皆様へ

昨今、教育現場においてプログラミング的思考を学ぶ授業が推奨されています※1。そこで、今回はコンピュータを使った新たな表現とその楽しみ方や身につけ方について、本事業のアドバイザーである日本工業大学准教授の小林桂子さんに3回にわたるコラムを執筆していただきました。ぜひ、あわせてご覧ください。

※1 プログラミング教育に関連する資料(文部科学省ホームページより)
https://www.mext.go.jp/a_menu/shotou/zyouhou/detail/1375607.htm