白黒のグラデーションを描く

Question

前提・実現したいこと

白黒のグラデーションを作りたいです。
いまのところ左隅が黒、右隅が白のところまで出来ました。
左上(0,0)のみ白，右上(255,0)，左下(0,255)、右下（255,255）の３隅が黒のグラデーションを作りたいです。

発生している問題・エラーメッセージ

エラーメッセージはありません。

該当のソースコード

void setup() {
   size(512,512);
   background(0);
   noStroke();
}

void draw(){
  int i,j;
   for(j=0; j<256 ; j++){
     for(i=0; i<256 ; i++){
       v_pixel(2, i, j,  i, i, i);
   } 
  }
}



void keyPressed(){
  if( key== 's' ) {
    saveFrame("Result.jpg");  // Save File Name
  }
}
//
void v_pixel(int n, int x, int y, int r,int g, int b)
  {
   if(n==1)
    {
      stroke(color(r,g,b));
      point(x,y);}
     else
     {
       fill(r,g,b);
       rect(x*n,y*n,n,n);
     }
  }

試したこと

始点を原点からでなく、端からマイナスするようにプログラムを書いたのですが、真っ黒になってしまいました。

補足情報（FW/ツールのバージョンなど）

Comments

[SHOMI]

>左上(0,0)のみ白，右上(255,0)，左下(0,255)、右下（255,255）の３隅が黒のグラデーションを作りたいです。
右上，左下、右下を結んだ三角形内も左上からの距離に応じてグラデーションさせるのですか？

[likuson]

はい、そうです。

Answer 1

私だったらこう描く。

void setup() {
  size(512, 512);
  noStroke();
}

void draw() {
  for (int bright=0; bright<256; bright++) {
    fill(bright);
    rect(0, 0, map(bright, 255, 0, 1, width), map(bright, 255, 0, 1, height));
  }
}

難しいことはしていないので特に説明は要らないと思います。
一つ一つの点々を描いていくことが大切であればこの方針はダメですけどね。

Answer 2

これでどうですか？
対象の点（i, j）と左上の点（0, 0）との距離を計算してグレースケールの値を決めてます。

void setup() {
   size(512,512);
   background(0);
   noStroke();
}

void draw(){
  int i,j;
   for(j=0; j<256 ; j++){
     for(i=0; i<256 ; i++){
       double gray = 255 - sqrt((i * i) + (j * j));

       if (gray < 0) {
       	 gray = 0;
       }
       v_pixel(2, i, j,  (int)gray, (int)gray, (int)gray);
   } 
  }
}



void keyPressed(){
  if( key== 's' ) {
    saveFrame("Result.jpg");  // Save File Name
  }
}
//
void v_pixel(int n, int x, int y, int r,int g, int b)
  {
   if(n==1)
    {
      stroke(color(r,g,b));
      point(x,y);}
     else
     {
       fill(r,g,b);
       rect(x*n,y*n,n,n);
     }
  }

Answer 3

まずはバイリニア補完について調べてみるとよいと思います。
四隅からの距離で重みづけを行い色を決定します。
白い領域が左上によった形になるので想定なさっている物とは異なる結果かもしれませんが…

その後興味があればほかの画素補完についても。

---

他には描画したい点と左上を結んだ線分を延長して右もしくは下の辺に交差する点を黒とし、左上からと交差点の距離の比率で色を決めるとかですかね。

---

後者の方法での描画コード

void draw(){
   int x,y;
   for(x=0; x<256 ; x++){
     for(y=0; y<256 ; y++){
      float distance_white = sqrt(x*x+y*y);
      float distance_black=0;
      if(0==y) {
        distance_black = (255-x);
      }
      else if(0==x) {
        distance_black = (255-y);
      }
      else if(x < y) {
        distance_black = sqrt(sq(255*x/y-x) + sq(255-y));
      }
      else {
        distance_black = sqrt(sq(255*y/x-y) + sq(255-x));
      }
      int gray;
      if(0==distance_black){
        gray=0;
      }
      else if(0==distance_white){
        gray=255;
      }
      else{
        gray=int(255*distance_black/(distance_black+distance_white));
      }
      v_pixel(2, x, y, gray, gray, gray);
   } 
  }
}

長々書いたけれどこれの結果とパッと見は同じですね。

void draw(){
   int x,y;
   for(x=0; x<256 ; x++){
     for(y=0; y<256 ; y++){
      int gray = 255 - max(x, y);
      v_pixel(2, x, y, gray, gray, gray);
   } 
  }
}

描画結果