Processing:point,strokeを使ったグラデーション

pointとstrokeを使う形でグラデーションを作りたいです
緑黒赤

水青紫

こんな感じのグラデーションです
【ヒント】
・サイズは 512x256 ・stroke() : 色を指定する・point() : 「点」を描く
こんなヒントを貰いました
右の正方形と左の正方形で分けて考えるっぽいです

processing
1size(512,256);
2colorMode(RGB);
3
4for(int x = 0;x =< width;x =+ 1){
5for(int y = 0;y =< hight;y =+ 1){
6point(x,y)
7}
8}//真っ黒

行動規範の内容に同意します

回答1件

ベストアンサー

strokeとpointを使う

これだけのヒントでこの問題が解けるかというとちと厳しい気がします。strokeに指定すべき色をどのように計算すればよいかがわかっていればよいですが、そこがわからないと歯がたたないのではないでしょうか？

そこでさらなるヒントを挙げてみます。（質問者さんがどこまでわかっているか質問から不明なので一通り挙げておきます）

(A) ある値v1からv2まで滑らかに変化させるためには補完を用いる

もっとも単純な補完は線形補完です。ちなみにprocessingには線形補完の計算をしてくれるmap関数が用意されてますので線形補完なら手軽に行えます。

(B) 色を滑らかに補完するにはR, G, Bそれぞれの成分に対してそれぞれ補完する
(C) 充填対象の四角形の四隅の値による平面の補完は水平方向と垂直方向に分けて考える

(C)について若干補足します。

text
1P00---- P_Top ---- P10
2|         |        |
3*  ----   P   ---- *
4|         |        |
5P01 --- P_Bottom - P11

四角形の領域がありその四隅P00, P10, P01, P11の色が既知だとしましょう。求めたい点Pの色を補完するにはまずPと同じx座標の点のうちP_TopとP_Bottomの2点の色を求めます。P_TopはP00とP10から(x座標に応じて)補完し、P_BottomはP01とP11から(x座標に応じて)補完します。最後にP_TopとP_Bottomから(y座標に応じて)Pの色を補完します。つまり水平方向に補完してからその結果を用いて垂直方向に補完するわけです。なお補完順番は水平＝＞垂直でも垂直＝＞水平でも同じ結果になります。

これらが理解できれば下のようなものが得られると思います。

さらなる配慮：

上の図は線形補完を用いたものですが、左右の矩形領域が接合する境界線近辺で色が急激に変化しておりそこが滑らかでないと感じると思います。(C)を用いて計算すると図形の左半分の領域の場合PLの点として、右半分はPRのように補完するわけですが補完のもととなる四隅の色が違うためP10-P11の直線上で水平方向での色の変化が急激に変化してしまうためこのような不連続さが生じるのですね。

text
1P00---- P_TopL---- P10---- P_TopR---- P20 
2|         |        |         |        |
3*  ----   PL  ---- *  ----   PR  ---- *
4|         |        |         |        |
5P01---- P_BottomL- P11---- P_BottomR- P21

これを防ぐにはいろいろ考え方があると思いますが、補完方式を線形補完から別の補完に代えるのが手軽と思います。例えば線形補完（直線的な補完）の代わりに三角関数のように位置によって変化量（微分）が０となるようなものを用い、補完領域の端で変化量が０となるようにすれば全体が滑らかにつながります。試しに三角関数を用いて補完してみると次のようになります。