円周方向のグラデーションを作る方法
亀の歩み#11
亀の歩みと称して、ジェネラティブアートの練習を投稿しているのですが、今回は「円周方向のグラデーション」を作ってみました。
元々は「円のstrokeをグラデーションさせたい!」と思っていたのですが、そのような標準メソッドもなく、それを実現しているネット記事もパッと見ありませんでした。
そこで、自作してみることにしました!
今回の基本的な方針として取ったのは、円周上に点を打っていき、その色をグラデーションさせる、というものです。
なので、顕微鏡で見ると円周は実は滑らかではないはずですが、点を打つ頻度を非常に細かくしているので、一見普通の円に見えます。
描画する点の半径を小さくすることで、strokeがグラデーションしているようにも見えます。
今回は自作して作ってみましたが、こうした円周上のグラデーションは企業のロゴとかでよく見るような気もするので、もっと一般的な実現方法があるのかもしれません。
もしご存知の方がいれば、コメントなどぜひお願いします!
(それでも、やりたいことを自己流ですぐに実装ができるのもProcessingの嬉しいところですね!)
ソースコード
color startColor = color(32, 178, 170);
color endColor = color(70, 130, 180);
float gradStep = 0.01;
float gradCount = TWO_PI/gradStep;
int bigRad = 300;
int smallRad = 200;
void setup() {
size(800, 800);
background(255);
noLoop();
}
void draw() {
translate(width/2, height/2);
for (int i=0; i<gradCount; i++) {
float grad = i*gradStep;
color fillColor = lerpColor(startColor, endColor, i/gradCount);
fill(fillColor);
noStroke();
ellipse(bigRad*cos(grad-PI/2), bigRad*sin(grad-PI/2), smallRad, smallRad);
}
}
この記事が気に入ったらサポートをしてみませんか?