見出し画像

クリエイティブコーディングとはどんな活動で、どんな所が面白いのか語らせてくれ！

reona396

こんにちは！
クリエイティブコーディング歴10年くらいのクリエイティブコーダーのreona396 / レオナと申します！

ステイホームするようになって、離れた所に住んでいる家族や友人と以前よりも連絡をとるようになりました。
中には10年ぶりに話した人まで！しかもそんな人が何人も！
そして気がついたのです…久々に話す友人に「実はこの10年、クリエイティブコーディングに打ち込んでたんだよね」と伝えようにも、そもそもクリエイティブコーディングってまったく分野を知らない方には伝えにくい！

というわけでこの記事では、クリエイティブコーディング大好きな私がプログラミングにあまり詳しくない家族や友人に伝えるつもりで、クリエイティブコーディングの魅力を紹介します！

クリエイティブコーディングの「コーディング」とは

クリエイティブコーディングとは、簡単にいうとプログラミングで絵やアニメーションやサウンドなどなど楽しいものを楽しく作る活動です。
「クリエイティブ」だから何かを作る活動っていうのはイメージがつきやすいですね。
「コーディング」とは「コードを作成する」ことを指します。
そしてその「コード」とは、コンピュータを動かす手順を数字や文字で書いたものです。

クリエイティブコーディング作品とはたとえば、こんな感じです！
「Run Pen」ボタンを押してみてください！

お花のネオンサインみたいなアニメーションが再生されたでしょうか？
この記事のためにクリエイティブコーディングでアニメーションを作ってみました！

このアニメーションはコードで作られています。
上にある「JS」ボタンを押すと、私が書いたコードが表示されます。
この文字のならびがアニメーションの設計図となっているのです。
専門用語で言うと、書いたコードを「実行」したら、このようにアニメーションが「実行結果」として表示された…というのがこの作品のしくみです。

このような感じで、コードで絵やアニメーションなどを作るジャンルを「クリエイティブコーディング」といいます。
絵やアニメーションの他にも、音楽を作ったり、3Dプリンターや織り機で作品を出力するなど、コードから幅広い表現が展開されています。

プログラミングで絵を描くイメージ。左側のコードから右側のお花の模様が出力されます。

私個人の話をすれば、クリエイティブコーディングで絵やアニメーションを作るのが好きです！
今までにもたくさん作品を制作して、インターネットで公開してきました。
TwitterやInstagramにも画像や動画として投稿しています。
いくつか下に載せてみました！
ぜひ動画の再生ボタンを押して見てみてください！

(3つ目に掲載した作品は特にお気に入りで、このnote記事のヘッダー画像にも設定しています！)

どの作品にも、設計図であるコードがあります。
私はそのコードを作る人なので、コーダーと呼ばれます。
つまり私はクリエイティブコーダーなのです！

プログラミングで絵を描くってどんな感じ？

では、どんな感じでプログラミングでお絵かきしているのか、コードと実行結果を並べながら説明しますね。
プログラミングで使う言葉には色々な種類があるのですが、今回は私イチオシの「p5.js」を使って説明します。

プログラミングで絵を描くということは、コンピュータに絵を描いてもらうということです。
コンピュータといえば正確性！
「ゆがみのない、まんまるな円を、きっちり画面中央に描け！」と命令すれば一瞬のうちに描いてくれます。
どうやってコンピュータに命令するのかというと、コードを書いて命令します。
こんな感じです。

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background("lightgray");
    circle(200, 200, 250);
}

書くコードはたったこれだけです！

もしよかったら、上の黒い背景に書いているコードを↓のwebサイトの文字が打てる所にコピペして、左上の▶マークの再生ボタンを押してみてもらえませんか？
https://editor.p5js.org/

画像5

右側にまんまる円が表示されたでしょうか？
今やったことがまさにコードの「実行」です。
コードという文字のならびを入力して、▶ボタンを押して「実行」するとその「実行結果」が出てくるというしくみです。

つまり、今入力したこのコードは…

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background("lightgray");
    circle(200, 200, 250);
}

この実行結果と結びついている、ということです。

画像3

コードの中に circle という文字がありますね。
circle→サークル→円、ということでこのようなまんまるな円が描けました。
「コードという文字や数字のならびを入力して、その結果として絵が出てくる」という結びつきが伝わったでしょうか。

さて、円の背景の色は今は明るい灰色ですね。
先ほどのコードに、

background("lightgray");

という文章がありますが、まさしくここで背景色を決めています。
background→バックグラウンド→背景、なので背景色を指定するための書き方です。
背景色を設定してね→設定したい色はlightgray(明るい灰色)だよ、とコンピュータに命令しているのです。

灰色が気に入らなければ一瞬で色を変えられます。
ちょっとコードを書きかえてみましょう。
背景色を設定しているコードを…

background("lightgray");

こんな感じで書きかえてみます。

background("skyblue");

この状態でまた実行してみましょう。
▶ボタンを押して実行してみると…

画像5

背景の色が水色に変わりました！
ライトグレーをスカイブルーに書きかえたから水色になったんですね。(正確にいうと空色？)
文字を書きかえるだけであっという間に色が変わりましたね！
絵の具じゃないので手も汚れません。
コード全体をおさらいすると、こんな感じです。

function setup() {
   createCanvas(400, 400);
}

function draw() {
   background("skyblue");
   circle(200, 200, 250);
}

では今度は図形をまんまる円ではなく、正方形にチェンジしてみます。
コードのこの部分を…

circle(200, 200, 250);

こんな感じで書きかえてみます。

square(200, 200, 250);

正方形なのでsquareという言葉を使います。
実行してみると…

画像5

…ちょっと位置が微妙ですね。
どうやら正方形が右下にずれてしまっているようです。
位置をいい感じの位置に調整するために、こんな感じで数字を書きかえてみます。

square(75, 75, 250);

この状態でまた実行ボタン(▶)を押してみると…

画像9

ちょうどいい位置に正方形が描かれるようになりました！
先ほど書きかえた数字は、実は正方形の位置を指定しているんです。
この数字を書きかえたので、正方形が移動したんですね。
コード全体をおさらいするとこんな感じです。

function setup() {
   createCanvas(400, 400);
}

function draw() {
   background("skyblue");
   square(75, 75, 250);
}

ちなみにcircleやsquareで書いている数値の意味はそれぞれこんな感じです。

circle(横の位置, 縦の位置, 大きさ);
square(横の位置, 縦の位置, 大きさ);

ということは、次のように書きかえたらどのような実行結果になるでしょうか？

square(75, 75, 50);

あるいは、このように書いたらどうなるでしょう？

square(300, 75, 50);

色々な数字を入れて実行して、ぜひ遊んでみてください！

コードと実行結果の結びつきについて、簡単に例を通して体験してみました。
クリエイティブコーディングで絵を描くというのはこんな感じで、コードを入力して形や色をこねくりまわして、自分なりにいい感じの見た目を作っていきます。
コンピュータは正確なまんまる円も一瞬で描けますし、色を変えたいと思えば一瞬でできるし、形だって簡単に変えられます。
その気軽さが楽しいんです！
簡単に！
一瞬で！
何度も！
書いたり消したり試したりできる！
だから、自分の中でベストな色や形を探るのが面白いんです！

そして先ほど体験していただいた通り、コードをコピペするだけでいつでも同じ状態の作品を実行することができます。
私が書いた円を描くコードをコピペしてボタンを押したら、お手元でも同じように円が描かれましたよね。
このように、コピペすればすぐに同じ結果を得られるというのもクリエイティブコーディングの特徴のひとつです。
絵描きさんの絵をマネして描いたり、ピアニストをマネして演奏してもすぐに同じレベルになるのは難しいですが、コードであればコピペすれば同じものが動きます。
また、書いたコードを保存しておけば、あとで何度でも同じ結果を得ることができます。

過去の自分が書いたコードをちょっとずつ修正して別の作品にするという作り方もできます。
さきほどコードを実際に書いた時に、色や形の指定を変更して結果の見た目を変えましたよね。
こんな感じで、少しずつ変更を加えて作品を作り上げていくというような楽しみ方もあります。

クリエイティブコーディングならこんなこともできる！

前章でコードと見た目の結びつきについて説明しました。
次はこのしくみを応用して作れるものについてご紹介します。

前章ではまんまるな円や正方形を描くしくみを説明しました。
数字で図形の位置や大きさを変えられるんでしたね。
ところで、図形を描くごとにちょっとずつ図形の位置をずらしたらどうなるでしょう？
図形を描く→ちょっと位置をずらす→ずらした状態の図形を描く→さらにちょっと位置をずらす→また描く→ずらす→描く→…
パラパラ漫画のような状態です。
…そう！動いて見えるようになります！
クリエイティブコーディングでは図形を動かしてアニメーションを作ることができるんです。
いくつか作品例をあげます。
ぜひ再生ボタンを押して見てみてください！！

こんな感じで、色々な形の図形を動かしてアニメーションが作れるんです。
コードという文字や数字のならびから映像が作れるって面白いと思いませんか？！

コンピュータを利用するアートならではの表現についても語らせてください！
クリエイティブコーディングで絵やアニメーションを作るジャンルのひとつとして「ジェネラティブアート」があります。
コンピュータから得られる乱数や、アルゴリズムやプログラムの構造を利用して、制作者自身も想像がつかないような結果を生成するアート手法です。

乱数を利用したアート手法の例をあげます。
乱数とはランダムな数値のことです。
たとえばコンピュータがサイコロを持っていて、そのサイコロで1〜6の数字を出すとしましょう。
あくまでサイコロの出目なので、コンピュータを操作している私たち人間は出目をあやつることはできません。
そういう点で出目はランダムといえますね。

サイコロの出目にそってお絵かきする方法について考えてみます。
1が出たら線を右方向に引く、2が出たら左方向に引く、3が出たら上方向に引く、4が出たら下方向に引く、5と6が出たらもう一度サイコロを振りなおすとすれば、どうなるでしょう？
コードでアニメーションを作って再現してみました。

画像8
サイコロの出目にそって線を描くアニメーション

面白い模様になりましたね！
しかし、サイコロの出目は振るたびに変わるため、ある時はこんなパターンになる時もあれば…

画像7
サイコロの出目にそって線を描くアニメーション(パターン2)

こんなパターンになる時もあるでしょう。

画像8
サイコロの出目にそって線を描くアニメーション(パターン3)

毎回、コンピュータが振るサイコロの出目次第で見た目が変わってしまいます。
手書きで絵を描く時は「ここに線を引くぞ！」と自分の意志で線を引きますが、コンピュータのサイコロまかせだと、どんな絵になるのか想像もつきません。
この「想像もつかなさ」がジェネラティブアートの面白さなんです！
毎回違うパターンの絵が生み出されたり、あるいは上記のサイコロの出目の作品のようにアニメーションと融合して「線がこれからどちらへ進むかすらわからない」不安定な時間経過を楽しんだり…。
不思議で面白いアート手法なんです！

今までの作品の中から、お気に入りのジェネラティブアートを貼っておきます。

さて、また別のクリエイティブコーディングの面白い要素についてご紹介しますね！
次は「インタラクティブ」な作品についてです。
コンピュータを操作する時、よくマウスやキーボードを使いますよね。
スマホであればスマホをタップしたり、音声入力であればマイクを使いますね。
クリエイティブコーディングには、こういった機械に対する入力を作品に取り込んで変化を起こす手法もあります。
「相互作用」という意味でインタラクティブな作品、あるいはインタラクションと呼ばれます。

例としてこんな作品を作ってみました。
「Run Pen」ボタンを押して、模様の上でマウスカーソルを動かしてみてください。
スマホからであれば、タップしたり、指を押したまま動かしたりしてみてください。

カーソルや指の動きで模様が変わりましたね！
カーソルや指の動きが「入力」で、作品の見た目という「出力」が変わるインタラクティブなクリエイティブコーディング作品です。

最近、私が特に注目している「入力」方法は人間の体です。
コンピュータが映像から「人間の体のどこの部分か？」を検知してくれる技術があるのですが、これをクリエイティブコーディングに取り入れて作品を制作するのが好きです！
たとえば、この作品はwebカメラで手の形や動きを検知して、アニメーションと連動させています。

こちらの作品は映像からダンサーの体の形を検知して、手の動きにあわせてアニメーションをつけた作品です。

こんな感じで、「入力」に応じて「出力」が変わる…つまりマウスカーソルの位置や手の動きで作品に干渉して、作品の見た目や動作が変わるのが「インタラクティブ」な作品です。
デジタルならではの面白さがあると思っています！

クリエイティブコーディングで制作された絵も、アニメーションも、ジェネラティブアートも、インタラクティブな作品も、しくみはコードでできています。
コードという文字のならびからこんなに色々なものが作れる、そんな可能性の幅広さが最高に面白いんです！！
レシピを見ておいしい料理を作ったり、平面的なパーツを組み合わせてかっこいいプラモデルを作ったりする楽しさとも似ているな〜と思っています。

クリエイティブコーディングのいいところ

ここまで私の過去の作品をいくつか例としてあげてきましたが、実はどれもパソコン1台で作ったものなんです。
つまり、パソコンと電気代さえあればお金はそこまでかからないというのもクリエイティブコーディングの魅力なんです。
無料でインターネット上に公開・配布されているプログラミングのツールもあります。
配布されているツールはたいてい、丁寧な説明書を同じくネット上に書いていてくれているので悩んだり迷ったりせずに使うことができます。
プログラミングの勉強も、はじめから高い本を買う必要はそこまでなくて、インターネット上で公開されている資料や教材を読みこむのも勉強になります。
クリエイティブコーディングはそういう点で経済的な趣味だなぁと感じています。

パソコン1台でお手軽に取り組めるカジュアルさも、クリエイティブコーディングの楽しさのひとつです。
日記を書くように、日々クリエイティブコーディングに取り組むスタイルは「デイリーコーディング」とも呼ばれています。
パソコンを開いて、自分が昨日書いたコードをコピペして、ちょこっと色や形を変えたら…また新しい作品の完成！
そんな感じで創作活動を自分のペースでゆったりと楽しめるのもクリエイティブコーディングのいいところです。
また、コーディングはノートパソコンやキーボード付きのタブレットがあれば楽しめるので、場所を選ばないのもポイントですね。

インターネット上には、クリエイティブコーディングが好きな人同士が作品を見せあったり、ノウハウを共有しあったりする場もあります。
たとえば、コードで絵を描くしくみを解説した章で利用した「p5.js」であれば、Twitter上のハッシュタグ「#p5js」で作品のアピールや使い方の議論が展開されています。
そして面白いのは、コードのしくみを理解している人同士なら、住んでいる国や地域、使っている言葉などの壁を越えてしまうところです！
言葉や文化が違っていても、コードを読んだり作品を見ればその人が表現したいことや目指しているものがわかるんですよね…！

クリエイティブコーディングをやってみたくなったら

ここまでクリエイティブコーディングについて色々と語ってきましたが、まとめるとこんな感じです！

* クリエイティブコーディングはプログラミングで絵やアニメーションなど、楽しいものを楽しく作る活動！
* 文字や数字で書かれたコードで、図形を描いたり動かしたりできる！
* 「ジェネラティブアート」や「インタラクティブ」な作品など、デジタルならではの表現ができる！
* パソコン1台あれば楽しめるお気軽さで世界中で親しまれている！

これまでの文章を読んで少しでも「クリエイティブコーディングやってみたいなぁ…」と思われたならば、ぜひぜひトライしていただきたいです！！
クリエイティブコーダーは色んな人の作品を見るのが大好きなので、あなたの作品も見てみたいんです！！！

プログラミング初心者・クリエイティブコーディング初心者向けの資料であればこちらがオススメです。
どちらも日本の大学で使われている授業資料です。
ツールの使い方からプログラミングの基礎、クリエイティブコーディングの楽しみ方までしっかり解説されています。

* Processingでゼロから学ぶプログラミング・ビジュアルアート - cocopon.me
* 【2020後期】プログラミングB – Takawo Shunsuke | 高尾俊介

素敵な作品ができたら、画像や動画にしてTwitterに投稿してください！
きっと見に行きます！！
作品が完成していなくても「今、クリエイティブコーディングでこんなことにチャレンジしています」とツイートすればそれもまたクリエイティブコーディング活動のひとつです！

クリエイティブコーディング、一緒に楽しみませんか？

[追記] クリエイティブコーディング作品を鑑賞しよう！

(2021/12/30 追記)

「クリエイティブコーディング作品をもっと楽しみたい！」というあなたのために、作品鑑賞ができるサービスや検索用リンクをまとめてみました！
たくさんの作品やアーティストを発見して、楽しんでみてください！

Twitter / Instagram ハッシュタグ検索

Twitterやインスタでハッシュタグ検索をするとたくさんの作品やアーティストに出会えます。

#creativecoding - Twitter検索 / Twitter
#generative - Twitter検索 / Twitter
#generativeart - Twitter検索 / Twitter
#p5js - Twitter検索 / Twitter
#つぶやきProcessing - Twitter検索 / Twitter
#つぶやきGLSL - Twitter検索 / Twitter

#creativecodingハッシュタグ - Instagram • 写真と動画
#generativeハッシュタグ - Instagram • 写真と動画
#generativeartハッシュタグ - Instagram • 写真と動画
#p5jsハッシュタグ - Instagram • 写真と動画

「creativecoding」はまさにクリエイティブコーディングにまつわる作品や記事につけられるハッシュタグです！
「generative」「generativeart」はジェネラティブアートを投稿する際につけられているハッシュタグです。
「#p5js」はp5.jsで作られた作品や技術の話題につけられるハッシュタグです。このような特定のツール名のハッシュタグであれば、そのツールで作られた作品を探すことができるので勉強する際も参考になります。
「つぶやきProcessing」「つぶやきGLSL」は1ツイートの文字数でクリエイティブコーディング作品をつくる活動で、こちらのハッシュタグをたどると数々の力作・名作・傑作・怪作を鑑賞できます。
私が過去にチャレンジした「つぶやきProcessing」を貼っておきますね。

(3つ目の作品はジェネラティブアートでもあります。実行するたびに色んな色や模様に変化する作品です。こんな短いコードでもそんなことができるなんてロマンがあると思いませんか！？)

クリエイティブコーディング投稿サイト

Browse Sketches - OpenProcessing
NEORT | Popular Arts

OpenProcessingはp5.jsがメインの投稿サイトです。
上記リンクのページでは、このサイトの中でも評価が高い作品がピックアップされています。
NEORTは日本発のデジタルアート全般の投稿サイトです。
上記リンクではこちらもサービス内で評価の高い作品が並んでいます。
どちらのサービスもアカウントを作成すれば作品を投稿することもできるので、あなたのとっておきの一作もぜひ投稿してみてください！

更新履歴 :

  • 2021/12/30 「クリエイティブコーディング作品を鑑賞しよう！」追記

  • 2022/03/26 文章 加筆修正

  • 2022/09/08 『クリエイティブコーディングの「コーディング」とは』に画像追加、つぶやきProcessingの説明用に作品を追加

Processingとp5.jsとクリエイティブコーディングが大好きです。 めちゃくちゃ元気！