オレオレつぶやきProcessing

はじめに

こちらはProcessing Advent Calendar 2022の8日目の記事になります

ところで#つぶやきProcessingをご存じですか?
知らない?
そうですか...(終)

説明

#つぶやきProcessingはProcessingを使い、1ツイート(280字)に収まるプログラムで、どこまでアートを表現できるかに挑戦するものです。
とにかく短いコードで色んなものを作ります。

本編

去年に知り、時々暇があれば投稿してる訳なんですが、基本的に何か元ネタがあってそれを元に作っています。
というのも、自分が他の方のような素晴らしいものを作ることが出来ない上、あまりに難しいもの
を作り続けているとモチベーションが続かないからです。
なんだかんだで1年です。

時々どうやって考えてるんだろ...って言ってる方を見ましたので、ここで頭の中を開けてみたいと思います。
これを見て気になった方がいましたら参考にしてください。

初級編

これはめちゃくちゃ簡単で、四角を並べるだけのものです。
今見るとまだ短く出来ると思っています。
ぱっと見で同じ関数を使って並べるだけやろ！と思ったので作ってみました。

これと同じ感じで考えるのなら、オリンピックシンボルとかが近いでしょう。
丸を並べるだけなら簡単ですね。

中級編

アニメーションがあると見た目的にも「うお～」ってなります。
これはラーメンを食べてる時に思いついたやつです。
ぱっと見コードはぐちゃぐちゃですが、ただ四角と半円を並べて色を付けただけになります。

お箸を動かすのにsinを使いました。
三角関数を勉強するのを諦めたそこのあなた！こういうところで使うんですよ！
少ない図形だと、座標を動かすためのプログラムを書く文字数を確保出来ます。
例えば流れ星だと、星の形 + 端から端へ飛びながら消えていくアニメーションという感じになります。
アニメーションをつけるなら簡単な形を使う！と思うことが大切です

本当だと雷紋(ぐるぐるのやつ)も作りたかったのですが、文字数が足らずに断念。
こういう文字数が足りなかった時に、どこを削るかを考えるのも大変です。

上級編

大体Twitterで見たものを元に作ります。
ここまでくると、ただ並べるだけじゃいけなくなってきます。

こういう時に、作れるかもしれない...と思う基準として、「その図形を描画するのにどのくらいの文字数が必要か」が頭の中で大体予想しています。
例えば、ここではbezier関数を使う訳ですが、各引数に3桁の数字が入った場合、bezier(100,100,100,100,100,100,100)となり、35文字となります。
これは35/280=0.125で12.5%も使うこともなり、図形 + 動きの考えでいくと図形側に多くの文字数を要することになります。
そこで、for文を駆使して引数を変えることで、図形を描画させるための文字数を抑えて複数個の図形が描画することが出来ます。

あとはこのfor文をどうやって使うかです。
そこで出てきますは三角関数！
少ない文字数で円状に配置でき、幾何学的ものを作ることが出来ます。
三角関数を勉強するのを諦めたそこのあなた！こういうところで使うんですよ！

random関数を呼び出すことで、複雑なプログラムを書かずともそれっぽい動きを作ることが出来ます。
連続的な値を使いたいのであればnoise関数があります。

コードの詳しい説明はとある勉強会で行ったこちらのスライドが詳しいです
https://docs.google.com/presentation/d/1o0okco5c6IdmxPZBgGINTO9fAlW2P9Fzrrrxy3VqPOw

まとめ

簡単なものを作るなら、少ない種類の図形を複数回使う。
アニメーションを付けたかったら、図形と動きの文字数のバランスを考える。
もっと複雑にしたかったら、jsの仕様を知ることでもっと文字数を抑えることが出来ます。
文字数の減らし方は色んな方が記事を書いてくださってるので、それを参考にするといいと思います。

あとは何を作るかです。

毎日目にしているもの。
日頃使っているアプリのアイコン。
お茶を飲むためのコップ。
今日食べたお昼ご飯。
意外と簡単に作ることが出来る形は身近にあります。

こういう創作でマンネリ化する原因として、アイデアが思い浮かばないことだと思っています。
そのため、何か元ネタを用意してそれを真似てみるのはどうでしょうか。
別に美しいものを作る必要は無いと思っています。
数をこなすことで、いざ何かを作りたくなった時の力になると信じています。

たった、280字以下のプログラム、書いてみませんか?