Zenn
Open49

プログラムでの描画や画像編集ソフトで光・グロー・光らせる系、パーティクルを扱う話も

Yosuke ToyotaYosuke Toyota

●Photoshopの描画モード(ブレンドモード)を理解するための、画像合成は計算だという話 | 俺CG屋
　http://www.cg-ya.net/2dcg/aboutimage/composite-is-math/

●ゲーム開発者を目指す学生のためのPhotoshopクソコラ講座④ 描画モード
　https://www.picola.co.jp/post/picolabo08-photoshop4
＞ 加算すると白に近い部分から光り、乗算すると暗い部分が暗くなりつつなじみます。
＞ 攻撃に関わるエフェクトだけ不透明度100％近くのまま、エネルギー的なエフェクトや砂埃の不透明度を下げ、一部「スクリーン」に変更しました。（ついでに色も変えてます）
＞ スクリーンは乗算の逆で、明るい部分が明るくなりつつなじむイメージ デス。

●Flame Cartoon png download - 6501558 - Free Transparent Text png Download. - CleanPNG / KissPNG
　https://www.cleanpng.com/png-text-illustration-yellow-light-effect-397743/
●Light Blue Background png download - 497566 - Free Transparent Light png Download. - CleanPNG / KissPNG
　https://www.cleanpng.com/png-lightning-transparency-and-translucency-light-effe-242204/
●Lightning Cartoon png download - 10241658 - Free Transparent Electricity png Download. - CleanPNG / KissPNG
　https://www.cleanpng.com/png-portable-network-graphics-clip-art-electricity-sup-7154256/
●Texture Background png download - 10001000 - Free Transparent Blue png Download. - CleanPNG / KissPNG
　https://www.cleanpng.com/png-blue-sky-circle-pattern-energy-ball-effects-350608/

Yosuke ToyotaYosuke Toyota

●カラー値計算
　https://tomari.org/main/java/color/ccal.html

RGBからHSVへの変換計算式
色相を求める
R・G・Bのうち、最も大きな値をMAX、最も小さな値をMINとして
Rが最大値の場合色の相 H = 60 × ((G - B) ÷ (MAX - MIN))
Gが最大値の場合色の相 H = 60 × ((B - R) ÷ (MAX - MIN)) +120
Bが最大値の場合色の相 H = 60 × ((R - G) ÷ (MAX - MIN)) +240
R・G・Bが同じ値の場合の色相 H = 0
彩度を求める
R・G・Bのうち、最も大きな値をMAX、最も小さな値をMINとして
彩度 S = (MAX - MIN) ÷ MAX
明度を求める
R・G・Bのうち、最も大きな値をMAXとして
明度 V = MAX

Yosuke ToyotaYosuke Toyota

●Glowing canvas element
　https://codepen.io/DanielTate/pen/nzZWrK
shadowBlur
shadowColor

●shadowBlur shadowColor p5.js - Google 検索
　https://www.google.com/search?q=shadowBlur+shadowColor+p5.js

●今、p5.jsのdrawingContextがアツい！ : だらっと学習帳
　http://blog.livedoor.jp/reona396/archives/55828329.html

// 直線に色付きのぼやけた影をつける
drawingContext.shadowBlur = 30;
drawingContext.shadowColor = color(255, 0, 255);

stroke(0, 0, 200);
strokeWeight(20);
line(width * 0.25, height * 0.75, width * 0.75, height * 0.75);

Yosuke ToyotaYosuke Toyota

●ヒストグラムについて - Qiita
　https://qiita.com/edo_m18/items/c10cdf2513a5eb6b2d54

spreadRGB
/**

  • Spread RGB.

  • @param {Number} min

  • @param {Number} max

  • @param {Array} src

  • @param {Array} dst
    */
    function spreadRGB(min, max, src, dst) {
    var ratio = 255 / (max - min);

    for (var i = 0, l = src.length; i < l; i += 4) {
    dst[i + 3] = 255;
    for (var j = 0; j < 3; j++) {
    if (src[i + j] < min) {
    dst[i + j] = 0;
    }
    else if (src[i + j] > max) {
    dst[i + j] = 255;
    }
    else {
    dst[i + j] = (src[i + j] - min) * ratio;
    }
    }
    }

    return dst;
    }

Yosuke ToyotaYosuke Toyota

●Webサイトに華やかな表現を！ HTML5用パーティクルライブラリ「ParticleJS」を公開 - ICS MEDIA
　https://ics.media/entry/11172/

＞ 炎
●ParticleJS - マウス追従
　https://ics-creative.github.io/ParticleJS/docs/examples/mouse-tracking.html

●ics-creative/ParticleJS: HTML Canvas向けパーティクルライブラリ「ParticleJS」のリポジトリ
　https://github.com/ics-creative/ParticleJS
●ParticleJS | ParticleJS
　https://ics-creative.github.io/ParticleJS/docs/

Yosuke ToyotaYosuke Toyota

●youさんはTwitterを使っています: 「【 #p5js でグローエフェクト（ブラーと合成を活用した方法）】 先ほどは静止画で試していた p5.js でのグローエフェクト。 パラメータが時間変化するようにして、「グローエフェクトの光り具合を変える」というのも試してみた！ なかなか良い感じになってる気がする！ / Twitter
https://twitter.com/youtoy/status/1557735550266019842