こんにちは、かまやんです。
今回は、残像を描く処理を解説していきます。
残像があると、パっっと消えるよりなんだか動きがあってカッコいいですよね。
では行きましょう!
残像を描く
残像を描くにあたって、残像ってどんな感じかっていうと、描いたものが、徐々に消えていく感じをイメージしてください。
大切なのは、「徐々に消えていく」というところ。
徐々に消えるというのは、すなわち、徐々に背景色になっていくっていうことです。
これ重要なポイントです。
徐々に背景色にしていく処理を書けば、残像(徐々に消えていく)のを表現できるわけです。
では、それをやっていきましょう
徐々に消える処理は、徐々に背景色で塗りつぶす処理
では、徐々に背景色になるっていうのはどういうことかって言うと、徐々に背景色で塗りつぶす処理です。
背景色に透明度の要素(alpha要素)を付加させることで、徐々に塗りつぶすが実現します。
ソースコードはこんな感じになります。
let win = app.window_rect()
draw.rect()
.wh(win.wh())
.rgba(0.0, 0.0, 0.0, 0.5);
1行目で、ウィンドウサイズを取得します。
2行目は、四角を描くぞ!と宣言
3行目、四角のサイズは、ウィンドウ全体
4行目、色は、透明度0.5の黒
まぁこんな感じです。
これで、残像を描く処理ができます。
実例
これの原型は、マンデルブロ集合の式をちょっと変化させてz=z^6+cっていう式にしたものです。
その図を、毎フレーム事に少しずつ回転させる命令を与えて、回してます。
ソースコードはこんな感じ。
let win = app.window_rect();
draw.rect().wh(win.wh()).rgba(0.0, 0.0, 0.0, 0.4);
draw.to_frame(app, &frame).unwrap();
let draw = app.draw().rotate(app.time);
let step = 600;
mandelbrot(&draw, step);
draw.to_frame(app, &frame).unwrap();
上の3行が残像を描く処理、下の4行が、回転とマンデルブロ集合の描画処理
2回、draw.to_frame()をやってますが、これは、残像を描くためのスクリーンを回転しないようにするためにやってます。
黒だとそんなに目立たないですが、例えばこのソースコードをちょっと色を変えて
let win = app.window_rect();
let draw = app.draw().rotate(app.time);//最初に回転させちゃった
draw.rect().wh(win.wh()).rgba(0.3, 0.0, 0.2, 0.4);
//ここにはdraw.to_frame(app, &frame).unwrap();があったよ
let step = 600;
mandelbrot(&draw, step);
draw.to_frame(app, &frame).unwrap();
こんな風に書き換えると
こんな感じになっちゃうんだね。
スクリーンごと回転しちゃってるでしょ?
最初のコードのままでやると
こうなります。
スクリーン回転してないでしょ?
スクリーンを描く
回転したものを描く
これを面倒だけど2回に分けてちゃんと描くことで、完成度がガラリと変わります。
まとめ
今回は、rust nannouで残像を描く方法を解説しました。
そして、残像を描くときにスクリーンをどう考えるといいのかにも触れました。
回転しないなら、大きな問題はないかもしれませんが、回転したり縮小したり拡大したりと、スクリーンが影響するような動きがある場合は、面倒だけど毎度描きだす方法をとるのがいいかもしれません。
もしかしたら、ほかにもっといい方法があるかもしれませんが、僕はこういう風にやってます。
ではまた!
コメント
[…] これは、rust nannouで残像を描く処理でやり方を紹介しています。気になる方は確認してください。 […]