亀の歩み#13
亀の歩みと称して、ジェネラティブアートの練習を投稿しているのですが、今回は「円の中央や縁ではない点を発端としたグラデーションを表現したい」というモチベーションの下、作成しました。

大概、円のグラデーションと検索して出てくるのは、
1. 中央から広がるタイプ
2. 円周の縁から広がるタイプ
の2種類です。

しかし、やっぱりグラデーションを自由自在に操りたい！

そこで、今回は2ステップに分けてこれを実現しました。
まず、グラデーションの発端となる点を円の中央にした、タイプ１のグラデーション円を先に描画します。
次に、その上から、「本当に描画したい円」以外を塗りつぶすように上から描画します。

これで、無理やりグラデーションの発端と円の中心がズレた円が完成しました！

3Dみたいな月になりましたね！
めでたしめでたし。

ソースコード

int circleRad = 500;
float circleStrokeWeight = 1.0;
float circleStrokeCount = circleRad/circleStrokeWeight;
int frameRad = 300;
float gridStep = 1.0;
color startColor = color(255, 255, 255);
color endColor = color(239, 234, 95);
void setup() {
 size(800, 800);
 ellipseMode(RADIUS);
 noLoop();
}
void draw() {
 float gridYcount = height/gridStep;
 float gridXcount = width/gridStep;
 
 strokeWeight(circleStrokeWeight+1);
 noFill();
 
 for (int i=0; i<circleStrokeCount; i++) {
   float rad = i*circleStrokeWeight;
   color circleStrokeColor = lerpColor(startColor, endColor, i/circleStrokeCount);
   stroke(circleStrokeColor);
   
   pushMatrix();
   translate(width*5/8, height*5/16);
   ellipse(0, 0, rad, rad);
   popMatrix();
 }
 
 noStroke();
 fill(50);
 
 for (int gridY=0; gridY<gridYcount; gridY++) {
   for (int gridX=0; gridX<gridXcount; gridX++) {
     // farther than circleRad then draw
     float disDiff = (sq(gridX*gridStep-width/2) + sq(gridY*gridStep-height/2)) - sq(frameRad);
     if (disDiff>0) {
       rect(gridX*gridStep, gridY*gridStep, gridStep, gridStep);
     }
   }
 }
 
}