本日の講師は 大西拓磨先生。
同じ渋谷キャスト2階に入居する 孫正義育英財団 に採択されたアーティストです。
大西先生のワークショップでは、プログラミング言語「p5.js」を用いて、
数行のコードから絵が立ち上がっていく面白さを体験できます。
計算式と乱数がつくり出す予想外の模様や色彩は、絵を描くのが苦手な方でも思わず夢中になってしまう、
ジェネラティヴアートならではの魅力です。
arttea ワークショップ実施レポート
2026年4月26日(日)/渋谷キャスト 13階 ベースコモン
本日の講師は 大西拓磨先生。
同じ渋谷キャスト2階に入居する 孫正義育英財団 に採択されたアーティストです。
大西先生のワークショップでは、プログラミング言語「p5.js」を用いて、
数行のコードから絵が立ち上がっていく面白さを体験できます。
計算式と乱数がつくり出す予想外の模様や色彩は、絵を描くのが苦手な方でも思わず夢中になってしまう、
ジェネラティヴアートならではの魅力です。
イベントポスター
日曜日の渋谷キャスト 13階 ベースコモンには、コードに触れるのは初めてという方、久しぶりという方、p5.jsという名前に惹かれていらっしゃった方、そして大西先生のファンの方──それぞれの関心を胸に、さまざまな参加者が集いました。
artteaのワークショップは、お茶とともにはじまります。
会場に到着した参加者は、まず一杯のティーラテでひと息。
はじめましての方同士でも、お茶を片手にすると自然と会話が生まれます。お子さんもリラックスして、会場には始まる前から和やかな空気が流れていました。
お茶でリラックスしながら、ゆるやかにスタート
初めてのPCのアート制作ににこやかな表情です
お茶でひと息ついたところで、大西拓磨先生による講義がスタート。
「ジェネラティヴアートはコードに余白を委ねるアート」──先生の言葉と一緒に、p5.jsという道具を使って「コンピューターと一緒に絵を描く」という考え方が紹介されました。
画面に表示されたたった4行のコードを前に、最初の一歩を踏み出します。
講義のなかで先生からは、言語の語源やその背景にあるエピソードについても詳しく教えていただきました。ここで、その内容を少しだけ振り返ってみます。
p5.jsで何ができるのかを丁寧に解説
p5.js(ピー・ファイブ・ジェイエス)は、Processing(プロセッシング)というクリエイティブ・コーディング環境から生まれた言語です。
Processing は、アートやデザインを学ぶ人でもプログラミングで視覚表現を作りやすいように開発された言語・環境。
その考え方を JavaScript で書き、Web ブラウザ上でも動かせるようにしたものが p5.js です。
Processing の “P” + HTML5 の “5” + JavaScript の “js”
──名前の由来は、ざっくり言うとこんな流れ。
「絵を描くようにコードを書く」という Processing の精神を、ブラウザだけで気軽に体験できるようにした──それが p5.js の魅力です。
講義は、p5.jsのまっさらな初期コードからスタート。
背景に色をつける、円を描いて色をつける、その円に動きをつける──ステップごとに、画面の中の絵が「描く」から「動く」「変化する」へと変わっていきます。
「コードってなに?」「プログラミングって難しそう…」
最初は少し身構えていた参加者の方も、画面の中の数字をひとつ書きかえると円の色や大きさがその場で変わる──そのたった一度の変化を目にした瞬間に、大人の参加者もお子さんも、画面に身を乗り出すようにのめり込んでいきました。
キーワードは 「background」「random」「draw()」。
random()を使えば走るたびに違う色が出て、background()の透明度を調整すれば軌跡が残り、draw()の中で変数を少しずつ動かせばアニメーションが生まれる──たった数行のコードが、画面の中に小さな世界を生み出していきました。
まずは背景に色をつけてみる
円を描いて、色をつけてみる
そして、その絵に「動き」をつけてみる
画面の変化に、思わず声が上がる場面も
ひととおりの基礎に触れたら、いよいよ自分の作品づくりへ。
変数や色、動かし方を自分の感覚で組み合わせて、世界にひとつだけのジェネラティヴアートを生み出していきます。
参加者は、コードの意味や構造をひとつずつ確かめながら、丁寧に手を動かしていきます。「ここを変えるとどうなるんだろう」「この数字は何を決めているんだろう」──理屈と感覚を行き来しながら、画面の変化をじっくりと味わうような時間が流れていました。
その隣で、唯一お子さんとして参加していた小学生は、数字を変えることそのものを遊びのように楽しんでいました。失敗を恐れずに何度もコードを書きかえては、画面の変化を笑顔で見つめる──そのまっすぐな好奇心が会場にやわらかな風を運び、大人の参加者の表情もふっとほどけていく。世代の違う参加者が同じ画面に夢中になる光景は、見ているこちらまで嬉しくなるものでした。
分からないところは大西先生がテーブルをまわって一人ひとりにアドバイス。
子どもたちは直感で数字を変え、大人は理屈と感覚を行き来しながら──それぞれのやり方で、画面の中に自分だけの世界を立ち上げていきました。
絵が得意か苦手か、コードに慣れているかどうかに関係なく、数式を遊び道具として手にすれば、自分だけのオリジナル作品を生み出せる。その入り口に、世代を超えてみなさんがのびのびと立っていたように思います。
それぞれの画面に、それぞれの
「動くアート」が生まれていきます
経験者の方は、ゲーム感覚でより発展的な表現にも挑戦
楽しむ気持ちが、そのまま画面の中の作品に
制作の時間が終わると、画面の中にはひとりひとり違う「動くアート」が生まれていました。
同じ基本コードからスタートしても、変数や色、動きの組み合わせ方しだいで全く違う表情の作品ができあがるのが、ジェネラティヴアートの面白さです。
ここでは、4月26日のワークショップで生まれた作品を一部ご紹介します。
ぜひ再生ボタンを押して、画面の中で動き続ける世界を覗いてみてください。
▶︎ クリックして再生(音声なし/繰り返し再生)
作品 01
作品 02
作品 03
作品 04
作品 05
作品 06
作品 07
作品 08
作品 09
動画作品とあわせて、静止画として書き出された作品もご紹介します。
温かみのあるハートのジェネラティヴアート作品
黄色を基調とした、明るい色合いの作品も
世代を超えてアート制作に取り組んだ
講義の終盤には、大西先生から デジタルアートの発展的な世界 についてもお話がありました。世界中のクリエイターによる「コード × アート」の事例を交えながら、ジェネラティヴアートの奥行きに触れる時間です。
「コードはここまで自由なんだ」「もっと試してみたい」──世代を超えて発想を刺激される瞬間となりました。
あわせて、発想の参考になるアイデア集や、世界中のクリエイターの作品がまとまっているサイト もいくつかご紹介いただきました。
大西先生からは、p5.jsで描く2Dの絵にとどまらない「音楽と連動するジェネラティヴアート」や「3Dの世界に広がる表現」もご紹介いただきました。
音に合わせて図形が踊るように形を変えていく作品や、立体的に広がる幾何学模様など、コードを軸にすればアートの表現は 絵から音、平面から立体 へと自由に広がっていきます。
「自分のアイデア次第で、こんな作品も作れるんだ」──参加者の皆さんからは、ジェネラティヴアートの奥行きの深さに目を輝かせる声が次々と上がっていました。
音と連動して動くアート
3Dに広がる立体的な表現
音楽 × 3Dの幾何学模様
大西先生から、これからのアートとAIについてのお話
artteaでは、お茶を片手にアートとテクノロジーに気軽に触れられるワークショップも発信していきます。
世代や経験を問わず、誰もが「自分にも表現できる」と感じられる場をこれからも育てていきたいと思います。
現在開催中のワークショップはこちらからご覧いただけます。お気軽に覗いてみてくださいね。