こんにちは、中高生Rubyプログラミングコンテスト クリエイティブコーディング部門 審査委員の小芝（chobishiba）です。今年から新設されたクリエイティブコーディング部門を紹介します。
クリエイティブコーディングとは
クリエイティブコーディングとは、簡単にいうと「コードでビジュアルアート作品を作る」ことです。
たとえば以下のようなビジュアルも、すべてコードで作れます。
実際のコードはこちらです。
- 左：Ruby gem
- 中央：花・うさぎ・くま・雪だるま
- 右：青い模様
クリエイティブコーディング部門とは
今年から新設された、Rubyを使ったビジュアルアート作品で応募できる部門です。
- テーマ：「ルビー」
- 使用ツール：rbCanvas/p5（ブラウザ上でRubyを使ってグラフィックを描けるツール。詳しくは後述します）
- 応募締切：2026年9月30日（水）
テーマの「ルビー」は、宝石のルビー、プログラミング言語のRuby、ルビーという色や言葉。そのどれを出発点にしてもかまいません。テーマの解釈に正解も間違いもありません。
応募のときには、テーマをどう解釈したか、作品にどんな工夫を込めたかを書く欄があります。うまく書こうとしなくて大丈夫です。あなたの考えたことが伝われば十分です。
最終審査会でのプレゼンテーションはありません。提出した作品と応募書類で審査され、受賞作品はコンテスト公式ウェブサイト等で展示・公表されます。
詳しい応募条件や審査方法は「募集要項」をご覧ください。
さわってみよう
クリエイティブコーディングがどんなものか体験できるサンプルページを用意しました。
左に表示されるコードの実行結果が、右に表示されます。変数を動かして、自分の気に入った組み合わせを探してみてください。
このように同じロジックでも、変数の値を少し変えるだけで表現が変化します。これもクリエイティブコーディングの楽しさのひとつです。正解はありません。試行錯誤しながら、自分がいいと思う表現を見つけていきます。
どうやって作る？
p5.jsの便利な関数を活用しながら、Rubyの構文で作品を作っていきます。p5.jsを使わなくても描けますが、描画に便利な関数がひととおりそろっているので、使うとグラフィックが作りやすくなります。
p5.jsとは： Processingという、美術やデザインでの利用を想定して作られた、ビジュアル生成が簡単にできるプログラミング環境があります。それをJavaScriptのライブラリにしたものがp5.jsです。
Webエディタがあるので、PCに何かをインストールする必要はありません。rbCanvas/p5を使ってやってみましょう。
トップページにはバージョンが2つ並んでいますが、最新版の「ver. 0.5.1」のほう（βではないほう）をクリックしてください。左側がエディタ、右側に実行結果が表示されます。
サンプルコードがすでに書かれているので、画面左上の実行ボタン（▶）を押すと右に実行結果が表示されます。
詳しい使い方は「rbCanvas/p5エディタの使い方」にあります。
自分でも描いてみよう
まずは円を1つ描く
def setup
createCanvas(300, 300)
end
def draw
fill(255, 0, 0)
circle(150, 150, 100)
end
ランダムに配置する
基本の形は円のコードと同じで、繰り返し（times）とランダム（rand）が増えています。
敷き詰める
今度は円を規則正しく並べています。色は、決めた4色の中からランダムに選んでいます。
フラクタルにする
大きな円の中に半分の大きさの円を描いて、その円の中にまた半分の円を……と繰り返していくと、こんな模様になります。ここでも使っているのは、円と繰り返しだけです。
このように円1つでもさまざまなことができますが、円以外にも三角も四角も直線も描けますし、組み合わせることもできます。静止画だけでなくアニメーションや、クリックしたときに反応するようなインタラクティブなもの、実行するたびに結果の変わるものも作れます。
そういった描画を簡単にする関数がたくさん用意されています。どんなものがあるかは「rbCanvas/p5のAPIリファレンス」で調べられます（エディタ左上の「Help」ボタンからも同じものが開きます）。サンプルコード付きなので、コピーしてそのまま動かせます。
p5.jsの世界をもっと見てみたい人は、「p5.js公式リファレンス」ものぞいてみてください。こちらの構文はRubyに読み替えて使ってください。
作品が完成したら
作品が完成したら、rbCanvas/p5のエディタからHTMLファイルをダウンロードしてください。ダウンロードしたHTMLファイルが、応募時の提出物となります。
提出前に、ダウンロードしたHTMLファイルをブラウザで開き、作品が正しく動くことを確認しておきましょう。
あなたの作品を待っています
まずは気軽に、描いてみたいものをスケッチするところから始めてみてください。最初から描きたいものを決める必要はありません。
1つ円を描いてみた。じゃあ2つにしたらどうなる？ ランダムに配置したら？ 規則正しく並べたら？ 色を変えたら？
「こっちのほうがより好きだな」「自分はこうしたいと思っているんだな」と、コードを書きながら自分の好きを突き詰めてみて、Rubyで自分だけの世界を創り出してください。
そうしてできた作品を、ぜひ応募してみてください。このコンテストを通じてRubyで何かを作る楽しみを感じてもらえればうれしいです。あなたの応募を待っています！