見出し画像

ぼんやり光る効果を出す簡単な方法 その1 : Processing Tips

発光効果、グロウ(glow)効果。
電球や星、ホタルなど、それ自体が光っているような効果を出したいことってありますよね?

このノートでは、Processing で超かんたんに発光効果を出す方法を解説します。

但し! この方法は deconbatch の我流 Tips です。 他にもっといい方法があるかもしれません(きっとある)ので、その点ご了承ください。
いい方法見つけたら私にも教えてくださいね♥

この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨

画像1

blendMode(SCREEN) を使おう。

発光効果を得るために必要なもの。 それはズバリ、
blendMode(SCREEN)
です!

他に必要なものはズバリ、
ない
です!

実も蓋もない感じですが、実際そうなのです。
極端な話、blendMode(SCREEN) さえ入れれば何でもかんでも光ります!

blendMode(ADD) も似た効果がありますが、こちらは逆光のように白光りしがちで blendMode(SCREEN) の方が使いやすいと思います。

blendMode(SCREEN) を入れると、その後に描画される図形は重なった部分の色が足されます。
blendMode() を何も指定しない場合は blendMode(BLEND) モードとなり、図形は単に上書きされてしまいます。

何も指定せずに描画

画像2

blendMode(SCREEN) を入れてから描画

画像3

  // blendMode(SCREEN) sample
 blendMode(SCREEN);
 strokeWeight(50);
 noFill();

 stroke(0, 100, 50, 100);
 ellipse(-80, -50, 120, 120);

 stroke(270, 100, 50, 100);
 ellipse(50, 50, 220, 220);

 stroke(160, 100, 50, 100);
 ellipse(-50, 50, 180, 180);

私、Processing を始めて blendMode(SCREEN) を知らずに一生懸命頑張っていたのですが、全く光らせることができませんでした。

ここまで blendMode() のざっくりした説明しかできていません。詳細はこちらのマニュアルを参照ください。

blendMode() には他にもモードがありますので、試してみてください。思いもかけない効果が得られて、新しいアイデアが浮かぶかも。


画像4

しかし、これだけだと「ぼんやり光る効果」な感じがしませんね。
blendMode(SCREEN) を入れた上で、描画の仕方にひと工夫加えるといい感じに「ぼんやり光る効果」を出せますよ。
そのひと工夫については続編の その2 にて!

ここでこの記事はおしまいです。もしこの記事がお気に召しましたら投げ銭お願いします。😉✨

ここから先は

0字

¥ 100

期間限定 PayPay支払いすると抽選でお得に!

この記事が面白かったらサポートしていただけませんか? ぜんざい好きな私に、ぜんざいをお腹いっぱい食べさせてほしい。あなたのことを想いながら食べるから、ぜんざいサポートお願いね 💕