質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

Q&A

解決済

3回答

3262閲覧

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

likuson

総合スコア34

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

0グッド

0クリップ

投稿2020/05/13 12:57

前提・実現したいこと

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

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

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

該当のソースコード

processing

1void setup() { 2 size(512,512); 3 background(0); 4 noStroke(); 5} 6 7void draw(){ 8 int i,j; 9 for(j=0; j<256 ; j++){ 10 for(i=0; i<256 ; i++){ 11 v_pixel(2, i, j, i, i, i); 12 } 13 } 14} 15 16 17 18void keyPressed(){ 19 if( key== 's' ) { 20 saveFrame("Result.jpg"); // Save File Name 21 } 22} 23// 24void v_pixel(int n, int x, int y, int r,int g, int b) 25 { 26 if(n==1) 27 { 28 stroke(color(r,g,b)); 29 point(x,y);} 30 else 31 { 32 fill(r,g,b); 33 rect(x*n,y*n,n,n); 34 } 35 }

試したこと

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SHOMI

2020/05/13 13:33 編集

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

2020/05/13 13:36

はい、そうです。
guest

回答3

0

ベストアンサー

私だったらこう描く。

Processing

1void setup() { 2 size(512, 512); 3 noStroke(); 4} 5 6void draw() { 7 for (int bright=0; bright<256; bright++) { 8 fill(bright); 9 rect(0, 0, map(bright, 255, 0, 1, width), map(bright, 255, 0, 1, height)); 10 } 11}

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

投稿2020/05/13 22:18

編集2020/05/13 22:29
thkana

総合スコア7610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

processing

1void setup() { 2 size(512,512); 3 background(0); 4 noStroke(); 5} 6 7void draw(){ 8 int i,j; 9 for(j=0; j<256 ; j++){ 10 for(i=0; i<256 ; i++){ 11 double gray = 255 - sqrt((i * i) + (j * j)); 12 13 if (gray < 0) { 14 gray = 0; 15 } 16 v_pixel(2, i, j, (int)gray, (int)gray, (int)gray); 17 } 18 } 19} 20 21 22 23void keyPressed(){ 24 if( key== 's' ) { 25 saveFrame("Result.jpg"); // Save File Name 26 } 27} 28// 29void v_pixel(int n, int x, int y, int r,int g, int b) 30 { 31 if(n==1) 32 { 33 stroke(color(r,g,b)); 34 point(x,y);} 35 else 36 { 37 fill(r,g,b); 38 rect(x*n,y*n,n,n); 39 } 40 }

投稿2020/05/13 16:25

hytNInE

総合スコア133

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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


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


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

Processing

1void draw(){ 2 int x,y; 3 for(x=0; x<256 ; x++){ 4 for(y=0; y<256 ; y++){ 5 float distance_white = sqrt(x*x+y*y); 6 float distance_black=0; 7 if(0==y) { 8 distance_black = (255-x); 9 } 10 else if(0==x) { 11 distance_black = (255-y); 12 } 13 else if(x < y) { 14 distance_black = sqrt(sq(255*x/y-x) + sq(255-y)); 15 } 16 else { 17 distance_black = sqrt(sq(255*y/x-y) + sq(255-x)); 18 } 19 int gray; 20 if(0==distance_black){ 21 gray=0; 22 } 23 else if(0==distance_white){ 24 gray=255; 25 } 26 else{ 27 gray=int(255*distance_black/(distance_black+distance_white)); 28 } 29 v_pixel(2, x, y, gray, gray, gray); 30 } 31 } 32}

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

Processing

1void draw(){ 2 int x,y; 3 for(x=0; x<256 ; x++){ 4 for(y=0; y<256 ; y++){ 5 int gray = 255 - max(x, y); 6 v_pixel(2, x, y, gray, gray, gray); 7 } 8 } 9}

描画結果
描画結果

投稿2020/05/13 13:58

編集2020/05/14 05:16
SHOMI

総合スコア4079

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問