スクリーンショット_2019-10-17_9

円周方向のグラデーションを作る方法

亀の歩み#11
亀の歩みと称して、ジェネラティブアートの練習を投稿しているのですが、今回は「円周方向のグラデーション」を作ってみました。

元々は「円のstrokeをグラデーションさせたい!」と思っていたのですが、そのような標準メソッドもなく、それを実現しているネット記事もパッと見ありませんでした。

そこで、自作してみることにしました!

スクリーンショット 2019-10-17 9.29.08

今回の基本的な方針として取ったのは、円周上に点を打っていき、その色をグラデーションさせる、というものです。
なので、顕微鏡で見ると円周は実は滑らかではないはずですが、点を打つ頻度を非常に細かくしているので、一見普通の円に見えます。

描画する点の半径を小さくすることで、strokeがグラデーションしているようにも見えます。

スクリーンショット 2019-10-17 9.13.38

今回は自作して作ってみましたが、こうした円周上のグラデーションは企業のロゴとかでよく見るような気もするので、もっと一般的な実現方法があるのかもしれません。

もしご存知の方がいれば、コメントなどぜひお願いします!

(それでも、やりたいことを自己流ですぐに実装ができるのも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);
 }
}

この記事が気に入ったらサポートをしてみませんか?