p5.js もバージョンが上がって知らない関数が増えてきました。この辺でおさらいして、記録をブログに残しておこうと思います。
まずは alpha() 関数の使い方をおさらいして、作例コードを書いて知識の定着を図ります。誤りや、勘違いがあるかもしれません。何かあれば、ご指摘をいただけると嬉しいです。
p5.js は、バージョン 1.5.0 を使用しています。
alpha() | p5.js 公式リファレンス
alpha() 関数の意味と使い方
説明
指定された色のアルファ値、つまり透明度の数値を取得します。
透明度は 0 が全くの透き通った透明で、値が大きくなるにつれて透明ではなくなっていきます。なので「不透明度」と呼ぶべきなのだろうと思います。
書き方
alpha(c)
パラメータ
c：下記のいずれか
- p5 の Color オブジェクト 例：color(0, 126, 255, 102) （102 がアルファ値）や、 get() で取得した画面上の色 など
- 文字列での色指定 例："#007EFF66" （66 がアルファ値）、 例："rgba(0, 126, 255, 0.4)" （0.4 がアルファ値）など
- 数値の配列による色指定 例：[0, 126, 255, 102] （102 がアルファ値） など
返り値
アルファ値の数値
colorMode() を指定しない、あるいは colorMode(RGB, 255); とした場合、0 から 255 の間の数値が返ってきます。
colorMode(HSB, 255); とした場合も同様。 colorMode(HSB, 360, 100, 100, 100); であれば 0 から 100 の間の数値が返ってきます。
p5.js 公式リファレンスのコード例の補足
ポイントは、 fill() に alpha(c) をセットするからといって透明度がセットされるわけじゃないところでしょうか。私はパッと見、黒色で透明度 102 の fill となり、それで灰色に見えるんだなと勘違いしてしまいました。
noStroke();
let c = color(0, 126, 255, 102); // 透明度 102 の水色
fill(c);
rect(15, 15, 35, 70); // 左側に透明度 102 の水色の四角形
let value = alpha(c); // Sets 'value' to 102
fill(value); // fill(102) と同じ、つまり透明度無しの灰色
rect(50, 15, 35, 70); // 右側に透明度無しの灰色の四角形
alpha() を使った作例
描画された円の中で、どれが透明度を持っているかを勘で当てるゲームです。
円をクリックしながら先に三回当てるか、五回外すかで勝敗が決まります。結果表示はコンソールに表示されます。と書くとあまり面白くなさそうですが、実際に遊んでみると、確かに面白くないです。
かならず透明度のある円が出るとは限らないので、何をどうしても絶対に勝てないこともあります。仕様上のバグもあります。 マウスでなぞってバグを見る → alpaVal に 255 か 0 を設定するとゲームが成り立たない
/**
* p5.js alpha() 関数の作例
* 透明度有りはどれだ？ゲーム
*
* @author @deconbatch
* @version 0.1
* @license CC0
* p5.js 1.5.0
* created 2023.01.19
*/
const w = 640;
const h = w;
const alphaVal = 100;
const borderWin = 3;
const borderLose = 5;
let right = 0;
let wrong = 0;
function setup() {
createCanvas(w, h);
pixelDensity(1);
noLoop();
resetScore();
arrange();
}
function resetScore() {
right = 0;
wrong = 0;
}
function arrange() {
//background(240); // 円そのものの透明度を取得できない
//background(240, 0); // 前のターンの円が消えない
clear();
for (let cNum = 0; cNum < 10; cNum++) {
if (random(1.0) < 0.5) {
fill(0, alphaVal);
} else {
fill(255 - alphaVal);
}
circle(random(w), random(h), 50);
}
}
function mouseClicked() {
const clickedVal = alpha(get(mouseX, mouseY));
console.log("alpha=" + clickedVal);
if (clickedVal == alphaVal) {
right++;
} else {
wrong++;
}
if (right >= borderWin) {
console.log("You won!");
resetScore();
}
if (wrong >= borderLose) {
console.log("You lost.");
resetScore();
}
arrange();
}
あと書き
一からおさらいとはいえ、alpha() なんて、やったところでどうなんだろう？と思っていましたが、文字列や数値配列での色指定で透明度をどう書くかを知らなかったり、作例コードを書いてみて、background() だと役に立たない場合があるなどの学びがありました。何でもやってみるもんですね。
