クリエイティブコーディング1年目のまとめ
はじめに
こんにちは。やまのたみ(Twitter：@ymntmtmy)と申します。
私事ですが、趣味としてクリエイティブコーディングを行い、SNSに投稿するという活動を始めて1年続けることができました。
単純なプログラムですし稚拙なところだらけですが、SNSでのいいねや拡散、お褒めのコメントなどいただくことがあり、とても嬉しく思っています。
まだまだ未熟な身ではありますが、わかったこと、心がけていること、これからの抱負といったことを振り返りとして、まず自分自身のために書いてみようと思います。そして、私自身非常にたくさんの方々(ブログ記事、書籍など)にお世話になっているので、私もクリエイティブコーダーのはしくれとして文章を残したいと思います。なにかの参考になりましたら幸いです。
こちらの記事は「Processing Advent Calendar 2022」の3日目の記事です。
クリエイティブコーディングのおもしろいところ
まず初めに、私が思うクリエイティブコーディングの魅力について書きます。
私はプログラミングの教育を受けたことがない、それどころか学生時代は理系科目全般が苦手だった「ド文系」の人間です。なので、このような分野に挑戦するとは全く思っていませんでしたし、こんなに続けられるとも考えていませんでした。
それにも関わらず1年間続けてこられたのは、コミュニティの方々にたくさんお世話になっていて楽しく取り組めているというのと、クリエイティブコーディングに興味を持ち、始めた理由が今でもそれほど裏切られていないということがあります。
以下にその理由を二点挙げます。
1.他の創作活動にはない面白さを感じたから
2.プログラミングで表現することが自分に合っていると思ったから
1について
私はゼミで作品制作も含めた現代美術について学んでいましたが、期末ごとに行っていた個人制作にはとても頭を悩ませていました。個人制作の課題はテーマが自由で、絵、映像、インスタレーションなど最終的な作品の形も、学生それぞれに委ねられていました。私はあまり優秀な学生ではなく、テーマもアウトプットもより斬新なアイデアや形態の作品が評価される、言い換えるとその人の素の実力が作品の出来を左右するのではないかと感じていました。ゼミに所属していた2年間の中で納得する作品を作れず、表現することに少し疲れてしまったところがありました。
クリエイティブコーディングをやってみて、成果物の形が有限(静画、動画など)であったり、アイデアやひらめきといったあいまいな要素の影響が少なく、より多くの機能の実装方法を学ぶ、プログラムの書き方を洗練させていくといった具体的な方法(継続的に勉強すること)により、実力を上げられるのが良いなと思いました。
違う視点から考えてみると、プログラミングにおいて人間は指示する立場でしかなく、実際に作品を作ってくれるのはコンピュータです。個人制作はコンセプトの考案から制作まで一人で行っていたので大変でしたし、チームでは関係者が増え、連携を取って制作を進めていくのでとてもハードでした。クリエイティブコーディングは一人で取り組める一方、コンピュータがお手伝いをしてくれているようでとても心強いです。
2について
私は幼少期より、ダンス(バレエ、ジャズダンス)や楽器(吹奏楽など)といった様々な表現活動を習い事、部活、課外活動、サークルといった場で行ってきました。どれもとても楽しかったのですが、周りと比べずやりたいことを追求したり、つらいことがあるときに没頭してストレスの解消をしたりする手段として考えると、どれもいまいちしっくりきませんでした。
例えば、バレエは生まれ持った体型など才能が必要な世界だと感じ、踊っているときの楽しさよりできないことが多いことによるストレスが勝って辞めてしまいました。またバンドでギターを弾いたり、ジャズダンスにも挑戦したりしてみましたが、私はあまり社交的な人間ではないので、他の人と協力しなければならないという雰囲気が合わず挫折してしまいました。
対してプログラミングは、最低限パソコンがあればいつでもどこでもできるというところと、基本的に一人で行う作業だというところに魅力を感じました。また調べるうちに、クリエイティブコーダーの方々が繋がりコミュニティを形成しているということを知り、始めるにあたってそれほど不安がなさそうで良いと思いました。
さらに付け加えると、私はサカナクションというバンドがとても好きなのですが、ライブでアンリアレイジのVJや映像を観る機会があって、ジェネレーティブアート/メディアアートといった分野に興味を持っていたという点も大きいです。(これが一番大きい理由かもしれません…)
クリエイティブコーディングに出会ってから、創作や表現活動をする際に抱えていたもやもやが少し晴れたと感じています。
創作以外のところで悩むことがそれほどなく、やりたいことに専念できるという点で、趣味にしてみてとてもよかったです。
私がみつけたお気に入りの表現
ここからは、1年やってきた中でよく使っている好きな表現の方法や書き方を紹介していきたいと思います。
項目は以下の通りです。
1.rotateとtranslateでぐるぐるさせる
2.noiseで繊細な線を描く
3.図形をいっぱい描く
1.rotateとtranslateでぐるぐるさせる
rotateとtranslateを覚えてからコード画を描くのがとても楽しくなったので、一番最初に紹介します。
まず、Processingのリファレンスによるとrotate関数は以下のようなものです。
Rotates a shape the amount specified by the angle parameter. Angles should be specified in radians (values from 0 to TWO_PI) or converted to radians with the radians() function.
DeepLによる日本語訳：angle パラメータで指定された量だけ、図形を回転させます。角度はラジアン（0からTWO_PIまでの値）で指定するか、 radians()関数でラジアンに変換する必要があります。
rotateを使うと図形を回転させることができます。[1]
ですが、rotateの変数によっては画面外まで回転してしまって、何も映らなくなってしまうことがあります。そんなときはtranslateを使って、図形をいい感じの位置に戻します。
Processingのリファレンス上で、translate関数は以下のように説明されています。
Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation, and the z parameter specifies translations toward/away from the screen. Using this function with the z parameter requires using P3D as a parameter in combination with size as shown in the above example.
DeepLによる日本語訳：表示ウィンドウ内のオブジェクトの移動量を指定します。x パラメータで左右の移動量、y パラメータで上下の移動量、z パラメータで画面の方向・方向の移動量を指定します。この機能をzパラメータで使用する場合は、上記の例のようにP3Dをパラメータとしてサイズと組み合わせて使用する必要があります。
この二つの関数の組み合わせで様々な絵が出来るので、今年はいろいろな書き方を試していました。
直近のお気に入りのコード画とそのプログラムは以下になります。（setupは省略）私は基本Processingではsize(1000, 1000)を指定し正方形のコード画を描いているのですが、このときはtranslateのwidth(二つ目)の変数を50に指定したところ、対照的な構図になるということを発見しました。
float myNoise=1000;
float start=0.0;
float step=1000;
void draw() {
myNoise=start;
for (int x=0; x<300; x+=10) {
float y=noise(myNoise)*x;
for (int a=0; a<1100; a+=4) {
circle(a-1000, y*0.01, random(15));
rotate(0.1);
translate(0, -50);
myNoise+=step;
}
}
}
また、translateのどちらかの変数をマイナス値にすると、画面移動のパターンが変わるので、その実験をしたりしていました。
あとは、たまにrectModeやellipseModeを使って、図形を描く関数のそれぞれの変数の意味を変えてしまうことで、挙動が変わるのも面白いなと思いました。
rotateとtranslateは扱いが非常に難しいですが、使うときと使わないときで構図が全く異なってくるのが興味深いので、これからもたくさん使っていきたいです。
2.noiseで繊細な線を描く
noiseはクリエイティブコーディングを始めたころから使っていて、randomよりもなめらかで繊細な感じになるのでとても好きな関数です。
Processingのリファレンス上におけるnoiseの説明は以下の通りです。
Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural, harmonic succession of numbers than that of the standard random() function. (以下省略)
DeepLによる日本語訳：指定された座標におけるパーリンノイズの値を返します。パーリンノイズは、標準の random() 関数よりも自然で調和的な数値の連続を生成するランダムシーケンスジェネレータです。
リファレンスにもある通り、パーリンノイズを使うとより自然な見た目にすることができます。[2]
randomという乱数を生成する関数もあり、ランダムな数値を使いたいと思った時にどちらの関数を選ぶか考えるのは大変ですが、同時に面白い時間でもあります。
直近でプログラムしたものから以下を例に挙げます。
float myNoise=0.01;
float start=0.0;
float step=0.01;
void draw() {
myNoise=start;
for (int x=0; x<5000; x+=10) {
float y=noise(myNoise)*x;
bezier(width, y, y, y, y, y, y, height);
myNoise+=step;
}
}
ここで出てきたyの値をnoiseではなく、randomにしてみるとどうなるか気になりました。試しに元々のプログラムと同じような条件でrandomの値を設定して、結果を出力してみました。
/*float myNoise=0.01;
float start=0.0;
float step=0.01;*/
void draw() {
myNoise=start;
for (int x=0; x<5000; x+=10) {
//float y=noise(myNoise)*x;
float y = random(5000);
bezier(width, y, y, y, y, y, y, height);
myNoise+=step;
}
}
randomを使ってみたコード画
人により好みは別れると思いますが、randomとnoiseで出力される数値の違いが分かりやすく現れたと思います。個人的にはrandomを使うと線の間はより規則正しく、noiseは細かい値が出ているのかな？と感じます。
私は以下の通り、滑らかな線を引きたいとき、図形の配置を工夫したいときなど様々なシーンでnoiseを使っています。自分で言うのもなんですが、やまのたみのコード画らしさはnoiseによってもたらされていると言っても過言ではないかもしれません。
プログラミングのことをもっと知ってできることが増えていっても、使い続けたいお気に入りの関数の一つです。
float myNoise=0.0;
float start=0.0;
float step=0.01;
void draw() {
myNoise=start;
for (int x=0; x<1000; x+=1) {
float y=noise(myNoise)*x*1.4;
rect(width-y, height-y, y*2, y*2);
rotate(0.01);
translate(0.1, 0.01);
myNoise+=step;
}
}
float myNoise=0.0;
float start=0.0;
float step=0.01;
void draw() {
myNoise=start;
for (int x=0; x<10000; x+=1) {
float y=noise(myNoise)*500;
rectMode(CORNER);
square(y*4, y*2, random(10));
rotate(random(0.01));
translate(1.2, 2);
myNoise+=step;
circle(random(width), random(height/2), random(2));
}
}
3.図形をいっぱい描く
図形をたくさん描くのが好きです。for文で繰り返し回数を1,000回以上設定し、その値の中で図形を配置するというやり方をしています。
私は、人間がするには面倒だったり不可能だったりすることをコンピュータに素早く代行してもらえるのがクリエイティブコーディングの利点の一つだと思っています。数千個の図形や線をまっすぐ正確に描くのは、人間にとってとても難しいことではないでしょうか。せっかく便利な道具があるので、クリエイティブコーディングの場では積極的にコンピュータに頼っていきたいという気持ちがあります。
余談
図形をたくさん描くぶん、それぞれの図形の線は細くするのが私なりのこだわりです。具体的にはstrokeWeightの値を小さくするのが好きです。基本的にstrokeWeightの値は1以下にしていて、0.1から0.8の間にすることが多いです。
しかし、太い線の可能性も模索したいという思いはあり、あえて大きい値にしてみることもあります。
strokeWeight(5);
void draw() {
for (int x=0; x<10000; x+=1) {
ellipse(random(x), random(x), random(x), random(x));
}
}
例えばこのコード画では、四角形を幅・高さともに10,000の値の中でランダムに配置しています。AltEdu2022[3] にて「「デジタル」を感じるようなコードを書いてください。」というお題の時に描いたものでしたが、当時このようなことを考えていたようです。(ふざけた文章で申し訳ないです…)
デジタルを感じるようなコードを書く回…………………
わたしはデジタルを感じさせないような出力をしたい思いがあり正直とてもくるしみましたが、やっぱり人間ができないことをササっとできちゃうのがデジタルかなぁと思い、ありえん数の円をかくように命令してみました！なかなかよさげにできた
(https://twitter.com/ymntmtmy/status/1492399760913084416)
言葉足らずなツイートですが、上に書いた通り、人間にできないことをしてくれるのがコンピュータのいいところだ、と言いたかったんだと思います。マシンには負荷をかけてしまいますが、これからもたくさん繰り返しをしていきたいです。
お気に入りの表現については以上となります。
これからの抱負
本記事の締めくくりとして、クリエイティブコーディング2年目の目標をいくつか挙げてみます。
1.とにかく続ける
2.プログラミング初心者を脱出する
3.いろいろな表現に挑戦する
1.とにかく続ける
誰かに強制されたというわけではないので始めるのもやめるのも自由なのですが、単純に楽しいので、2年目もマイペースにやっていけたらいいなと思います。
来年の初めに環境が大きく変わる予定でしばらくバタバタしてしまうと思いますが、暇を見つけてできることをしていきたいです。
2.プログラミング初心者を脱出する
1年目は内心初心者気分だったこともあり、情報収集や勉強を十分にしていなかった面がありました。
ですが、Twitterのフォロワーさんが少しずつ増えていく中で、「クリエイティブコーディングをしている人」とみなされているという自覚が湧いてきました。そして、自分が取り組んでいることにもっと詳しくなるべき、詳しくなりたいという思いが芽生えてきました。
仕事ではないのでマイペースでいいとは思うのですが、「クリエイティブコーダーである」という自覚を持ち、あまり言い訳をせずにやっていきたいと思います。
3.いろいろな表現に挑戦する
1年目で書いたプログラムはどれも単純で、短いものが大半でした。単純なものでも面白いのですが、自分の関数やクラスを作るなど手の込んだプログラムにすることで、今まで見たことのないような絵を作れるのではないかと思っています。そしてそのために、具体的な手順を踏んで勉強していきたいです。
例えば、OpenProcessingにある他の人のプログラムを読んでみる、今回のように技術記事を書いて発信してみるといった手段をとりたいです。
おわりに
Zenn記事執筆だけでなく、クリエイティブコーディングについて記事を書くのが初めてだったので大変でしたが、無事に書き上げることができて良かったです。
長文で読みにくいところも多々あったと思いますが、読んでくださってありがとうございました。これからも良い作品を作れるよう頑張ります。
-
正確には画面を回転させているようです。deconbatchさんのこちらの記事を参考として紹介します。https://note.com/deconbatch/n/n5bedb11aa49c ↩︎
-
パーリンノイズ - Wikipedia ↩︎
-
「AltEdu2022」は2022年2月に28日間にわたって行われた、運営様より与えられたお題に沿って絵を描く「クリエイティブコーディングのお祭り」です。楽しかったです。 ↩︎
Discussion