3. 当日の流れ
イベントポスター
① PCセットアップとアカウント作成
会場に到着された参加者の皆さんは、まず自由なお席についてPCを開き、ワークショップに必要な環境のセットアップからスタートしました。 p5.jsのオンラインエディター(p5.js Web Editor)でアカウントを作成し、ログイン。新規スケッチを開いて、お名前を入力するなど、制作前の細かな準備をしていきます。
初めての方も多くいらっしゃいましたが、画面の見方やボタンの位置などをひととおり確認することで、続く講義にスムーズに入っていけるように整えていきました。
それぞれの席で、PCのセットアップ
会場には和やかな雰囲気が広がる
② 大西先生による基本的な講義(基礎に触れる/ティーラテを飲みながら)
セットアップが整ったところで、いよいよ大西拓磨先生による講義がスタート。 大西先生の自己紹介から始まり、建築を学んでいた背景からアートの世界へ進んだご自身のあゆみと、「コンピューターと一緒に絵を描く」というジェネラティヴアートの考え方が紹介されました。
「ジェネラティヴアートはコードに余白を委ねるアート 」という先生の言葉とともに、p5.jsで何ができるのか、その独特な魅力についても語られていきます。
大西拓磨先生による講義のはじまり
講義は、p5.jsのまっさらな初期コードからスタート。最初に登場したのは、たった4行のシンプルなコードです。
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
createCanvas(400, 400) で400×400のキャンバスを準備し、background(220) で薄いグレーの背景を塗る。 大西先生はまず、画面に表示されたこのグレー一色の四角を指して、「ここから、このキャンバスにアートを描いていきますよ」と語りかけました。
続いて、円を描く circle(x, y, 大きさ) や、色を塗る fill(r, g, b) を順に追加。「キャンバスの左上が(0, 0)、右に行くほどxが大きく、下に行くほどyが大きくなる」という座標の考え方を、実際にコードを書きかえながら確認していきます。 数値を変えるだけで、画面の中の円の位置や大きさがその場で変わる──参加者の皆さんは、コードと画面が連動する瞬間に思わず声を上げていました。
circle(x, y, 大きさ)で円を描く
fill(r, g, b)で色をつける
講義のあいだ、参加者の皆さんはティーラテを片手に、リラックスした雰囲気で耳を傾けていました。 和やかな雰囲気を交えながら学んでいくのが、artteaのワークショップらしいひとときです。
お茶と会話でリラックス
オリジナルティーラテです
本ワークショップのコンセプト 「コードを少し書くだけで、 誰でもアーティスト!」
③ 発展的な実践
基本のcircleやfillが描けるようになったら、いよいよジェネラティヴアートらしい表現へ。 キーワードは 「background」「random」「関数」 の3つ。コードを少しずつ書き足していきながら、画面の中の絵が「描く」から「動く」「変化する」へと変わっていきます。
大西先生が、テーブルをまわりながら 一人ひとりにアドバイス
random(0, 255) を使うと、毎回ランダムな数値を返してくれます。これを fill の中に入れれば、円を描くたびに色がランダムに変わる。同じコードを実行しても、走るたびに違う絵ができあがるのがジェネラティヴアートの面白さです。
background も奥が深く、毎フレーム不透明な色で塗り直せば残像は消えますが、background(0, 0, 0, 5) のように透明度を低くすると、前のフレームがうっすらと残って、絵に「軌跡」が現れます。
そして最後の鍵が、関数 を使った動き。p5.jsの draw() は1秒間に何十回も繰り返し呼び出される関数です。draw の中で y = y + 3 のように変数を少しずつ更新していけば、円がだんだん下に落ちていく、といったアニメーションが生まれます。配列で複数の点をまとめて動かせば、コードの中に小さな世界が立ち上がっていきました。
randomとbackgroundを 組み合わせると、こんな表現に
大西先生が画面をのぞき込んで、 一人ひとりにアドバイス
ここからは、自分のコンセプトをもとに作品を制作していく時間。 大西先生が大切にしていたのは、「コードは自由に遊べるもの」「正解はひとつじゃない」 という姿勢でした。基本の型を踏まえつつ、数値や色、形を自分の感覚で選んでいけば、それがそのまま作品の個性になっていく──そんなプログラミングとデザインの楽しさを、参加者一人ひとりに丁寧に伝えてくださいました。
「こうしないといけない、というルールはないですよ 」「少し変えるだけで、画面の表情がガラッと変わるのを楽しんでみてください 」と、テーブルをまわりながら声をかける大西先生。 難しいと感じていた方も、先生のひとことで気持ちが軽くなり、自由に試してみる勇気が湧いてくる時間でした。
それぞれの画面に、それぞれの 「動くアート」が生まれていきます
動くアート制作の画面に夢中!
迷ったら、先生がやさしくアドバイス
数値や色を変えながら、 自分の世界を探っていく
大西先生と一緒に、 次の一手を探る
ーー みなさん、それぞれのペースで完成に向けて楽しく制作を進めました。
夢中で作業していると、 時間はあっという間!
楽しくジェネラティヴアートが できましたね◎
④ 作品の共有や振り返り、大西先生からの共有内容
制作の時間が終わったあとは、完成した作品を全員で鑑賞し合い、それぞれが込めた思いや自己表現を共有しました。
大西拓磨先生による丁寧な講評 では、一人ひとりの作品の良いところや特徴を読み解いてくださいました。「同じ型から始めても、全く違う作品になるのが面白い 」「パラメータの選び方や数値の置き方に、その人らしさが出ている 」といった具体的なコメントに、参加者たちは真剣に耳を傾けていました。
さらに大西先生からは、ジェネラティヴアートとこれからの表現についてのお話も。「コードはこれから、誰もが自分の表現のために使う道具になっていく 」「うまく描こうとせず、自分のコンセプトを大切に、自由に試してみてほしい 」といったメッセージは、プログラミングとデザインの楽しさを、ワークショップ後も持ち帰れる言葉として残してくれました。
「普段は気づかない自分の好みや個性に気づけた 」「プログラミングは難しいと思っていたけど、コードでも表現できる 」といった声もあり、和やかで学びのある雰囲気の中でワークショップは締めくくられました。
SPECIAL TALK
大西先生 × arttea代表 対談― ジェネラティヴアート × AI のこれから ―
講評ののちには、大西拓磨先生とarttea代表 による対談の時間も設けられました。
大西先生がワークショップを通して伝えてくださったのは、「自由に試しながら、自分のコンセプトを形にしていく楽しさ 」。 その姿勢を受けて、arttea代表からは ジェネラティヴアートとAIを掛け合わせていく、これからの可能性 について語られました。
arttea代表が語ったこれからのイメージ
・コードで表現を作る楽しさを知った人が、AIと対話することで表現の幅を広げていける
・自分のコンセプトを言葉にしてAIに伝え、返ってきた提案をもとに自分の手でコードを調整していく
・そんな新しい制作のかたち が、すでに始まっている
artteaがこれから目指していきたい「お茶 × アート × テクノロジー 」の世界観と、その中でAIが果たす役割について、参加者と一緒に考えるひとときとなりました。
その流れを受けて大西先生からは、AIそのものへの言及というより、創作の根っこにある姿勢 についてのコメントがありました。 「大切なのは、自分が何を作りたいかをまっすぐ持っておくこと 」――道具やテクノロジーがどれだけ進化しても、表現の出発点は自分自身の中にある、というメッセージです。
arttea代表が描く「これからの技術との付き合い方」と、大西先生が語る「創作の根っこにある思い」。 異なる角度から語られた二つの言葉が、対話のなかで自然と重なっていく時間となりました。
創作への思いを語る大西先生
問いに耳を傾け、言葉を選ぶ瞬間
参加者も真剣に耳を傾ける
和やかな空気に包まれた会場
大西先生とarttea代表による、 ジェネラティヴアート × AIの対談
二人の対談と会場内の様子
⑤ 参加者の作品(一部抜粋)
ワークショップのなかで生まれた「動くアート」から、参加者の作品の一部を抜粋してご紹介します。 同じ基本のコードからスタートしても、色の選び方や乱数の使い方、数値の置き方ひとつで、まったく違う世界観の作品が立ち上がりました。
参加者作品の動画 ― 数行のコードから生まれる「動くアート」
▶︎ クリックして再生(音声なし/繰り返し再生)
数行のコードから生まれた、世界にひとつだけの「動くアート」たち
動画作品とあわせて、静止画として書き出された作品もご紹介します。
温かみのあるハートのジェネラティヴアート作品
黄色を基調とした、明るい色合いの作品も
⑥ 大西先生から、自由なプログラミングとアートのレクチャー
ワークショップの締めくくりには、大西先生から、ジェネラティヴアートを学んだあとにも役立つ自由なプログラミングとアートの楽しみ方 についてのレクチャーがありました。
「p5.jsはこれからも自由に触れる遊び場にしていい 」「うまく描こうとしなくていい、自分が面白いと思った数字や色を素直に試してみてほしい 」「世界中のクリエイターの作品を眺めて、いいなと思ったらコードを真似してみるところから始めてみる 」など、ワークショップ後も自分の表現を続けていくためのヒントを、参考になるサイトや具体的なツールと共にお話しいただきました。
具体的なツールやart制作のコツを、丁寧に解説していただきました
大西先生による、自由なプログラミングとアートのレクチャー
×