Processingにおいて、背景というと何を思い浮かべますか？
backgroundを書けば、背景は描けます！
ですが、それ以外にも方法はあるんです
選択肢の一つにこれから紹介する方法も加えてみてください！
こうすると面白い！
背景は基本的にbackgroundを使えば問題ありませんでした
他には、どんな方法があると思いますか？
こんな方法があるんです！
それが
rectです！
rectは、矩形（四角形）を描くものです
こちらの記事で紹介をしているので合わせてどうぞ
試してみましょう！
こちらがbackgroundで描いているもの
こちらがrectで描いているもの
まず、rectでも代用ができるんです
この二枚、違いは全くありません
ですが、こうすると面白くなります！
どうでしょうか？
これまでと全く違う見え方ですね
これを詳しくみていきましょう
これでやる利点
backgroundよりも応用力のあるrectは利点があります
・透過度を利用できる
・複数のrectで背景を描ける
・動きを楽しくできる
backgroundではできなかったことが、rectにはできるんです
何が起こっているのか
では、これらは何が起こっているのか！
というところですが
backgroundは完全に背景を描いています
透過度をソースコードに書くことはできますが、適用はされません
毎フレームそれより背後に何も描かせない絶対的な背景を描いています
なので、透過度が適用できないのでしょう
対してrectは過去に説明したように、矩形（四角形）を描くものになっています
ということは、厳密に言えば、背景ではなくただ背後に黒の四角形を描いているだけなのです
絶対的な背景は描かないので、透過度を利用して物体の移動による軌跡を見ることもできるんです！
どうやるのか
これらの実現は簡単です！
最終的なソースコードはこちらです
void setup(){
size(1000,1000);
}
int x = 0;
void draw(){
//background(0);
fill(0,0,0,20);
noStroke();
rect(0,0,width,height);
//fill(255,20);
//noStroke();
//rect(500,0,width,height);
for(int i = 0;i < 10;i++){
stroke(255,0,0);
line(x,width/2 + random(100),x-10,width/2 + random(100));
stroke(random(255),random(255),random(255));
line(width - (x + random(100)),width/3 + random(100),width - (x-10 + random(100)),width/3 + random(100));
}
//noStroke();
//fill(255,0,255);
//ellipse(x,500,50,50);
x += 10;
if(x > width){
x = 0;
}
}
void keyPressed(){
if(key == ' '){
println("saved");
save("test.png");
}
}background(0,0,0);
↓
fill(0,0,0,20);
noStroke();
rect(0,0,width,height);
書く量は1行から3行に増えましたが、これを書くだけで良いんです！
backgroundの代わりにこの3行をコピペするだけで、綺麗な軌跡を描くことができるんです
rectは四角形です
なので、線、中身の色を指定しなければいけません
そのための
fill(0,0,0,20);
noStroke();
この2行なんです
1行目は、透過度20の黒
2行目は、枠線を描かない
という意味を持ちます
色を自由に変えて楽しんでみてください！
まとめ
背景が違うだけで、動きも楽しく見え方も綺麗になるんです
あなたの作品がより美しくなりますように
Processingで背景を描く際に、この書き方を選択肢に入れてみてください
以上です！
それでは！
コメント