MYJLab Advent Calendar 2022、8日目の記事です。
前回は@toshiki19さんのコムドットのヤマト風のTwitterつぶやきを自動生成してみようと思ったでした。
8日目の今日はジェネラティブアートのお手軽体験サービスを紹介します。
ではいきましょう
背景
最近JavaScriptをさわる機会が増え、何か面白そうなサービスとかライブラリないかなと調べていたところでした。そこで出会ったのがジェネラティブアートです。簡単にできそうなのないかな。
ジェネラティブアートとは
プログラムによって描かれた芸術作品のことを指します。懐かしの\sinや\cosなどを使って書いたり、乱数使って書いたりして作っていきます。コードの組み合わせによって思いがけない作品ができるかもしれないという面白さがあります。
なんとジェネラティブアートは国際会議も開催されているみたいですね
->> http://www.generativeart.com/
お手軽に体験できるサービス
ジェネラティブアートをブラウザで体験できるサービスを2つ紹介します
- Dwitter
- tixy.land
Dwitter
Dwitterは、ブラウザでデジタルアートを作ることができるサービスです。
140文字以内でコードを書くという制限の中で作り出します。サービス内で自分の作品も投稿できたり、GIFに書き出すこともできます。
作品を見てみる
以下のURLから入ります
https://www.dwitter.net/d/26520
140文字以内でこんな素敵な作品を作ることができます。
文字数制限があるため難しい部分もありますが、制限があるなかでいかに面白い作品を作れるかを考えるのは面白そうですね。
使い方
- 以下のリンクから入る
https://www.dwitter.net/ - 右上の「New dweet」と書かれたオレンジ色のボタンを押す。ボタンを押すとコードを記述する蘭とキャンバスが出てきます
- コードを書く
1~３まで終えると自動実行されてキャンバスに実行結果が流れます
コードを記述する欄にはサンプルコードが書かれているのでそれを元に作って行くのも良いですね。そしてショートハンドもあります。
u(t) is called 60 times per second.
t: Elapsed time in seconds.
S: Shorthand for Math.sin.
C: Shorthand for Math.cos.
T: Shorthand for Math.tan.
R: Function that generates rgba-strings, usage ex.: R(255, 255, 255, 0.5)
c: A 1920x1080 canvas.
x: A 2D context for that canvas.
私もサンプルコードに乱数を足して四角形をチカチカさせて遊びました。そのときのコードはこちらです。
function u(t) {
c.width=1960 // clear the canvas
for(i=0;i<5;i++)
x.fillRect(40+i*200+C(t)*30,Math.random()*10**2,Math.random()*10,200)// draw 50x200 rects
} // 140/140
tixy.land
tixy.landはアニメーションをプログラムできるサービスです。これもブラウザで利用可能です。 16×16のドットの中でアニメーションを作ります。コードを書き終えた後にエンターキーを押すとURLが生成されます。共有もしやすいですね。
使い方
URLを踏むとアニメーションとコードが出てきます。コード部分を編集すると自動実行されます。お手軽ですね。
使ってみる
分子をyからxに変えてみる
Math.sin(x/8+t)
動きが縦方向から横方向に変わりました
以下から見ることができます
もう1つ。流れを早くしてみよう。
Math.sin(x/8+t*2)
まとめ
以上ジェネラティブアートのお手軽サービスの紹介でした。ブラウザで体験ができるのはとてもお手軽でありがたいですね。他の人が制作した作品も見ることができるので、見るだけでも楽しいですし勉強になります。
とてもざっくりとした内容で短い記事でしたが見ていただいでありがとうございました。
明日の記事もお楽しみに