Dynamically update alpha in color()

p5.js Coding Questions
#1

So, what if I wanted to dynamically change each individual rgba argument of color(), can I say this.col.r = 200; , or some equivalent?

let btn;

function setup() {
	createCanvas(400, 400);
	btn = new Btn(color(50, 127, 219, 255));
}

function draw() {
	clear();
	btn.run();
}

class Btn {
	constructor(_col) {
		this.col = _col;
		this.pos = createVector(width >> 1, height >> 1);
		this.r = 33;
	}

	display() {
		if (this.hover()) {
			fill(this.col, this.col.a); // this is ignoring alpha
			if (this.col.a < 255) {
				this.col.a += 0.3;
			}
		} else {
			noFill();
			strokeWeight(3);
			stroke(this.col);
			this.col.a = 0;
		}
		ellipse(this.pos.x, this.pos.y, this.r);
		return this;
	}

	hover() {
		let d = dist(mouseX, mouseY, this.pos.x, this.pos.y);
		if (d <= this.r >> 1) {
			return true;
		} else {
			return false;
		}
	}

	run() {
		return this.display().hover();
	}
}
1 Like
How to fill with HEX color in p5.js
#2

A p5.Color obj got some undocumented array properties which it uses to store colors in diff. standards. :paintbrush:

For RGBa, I believe it’s stored in the p5.Color::levels[] property. :pirate_flag:

1 Like
#3

So I see I can set the alpha via setAlpha(), how would you get/check the current alpha?

...

this.a = 255;

if (this.col.alpha > 255) {  // <---?
 this.col.setAlpha(this.a +=13); // this.a is just bc i don't know how to get the alpha in order to update the value
}

live version to play with …

#4

I’ve already told you about p5.Color::levels[] for RGBa. :paintbrush:

For more undocumented properties, go to: :running_man:

You can even find “secret” methods like p5.Color::_getAlpha() there: :secret:

2 Likes
#5

thanks @GoToLoop, i will dig into this and try to figure it out. i appreciate the help.

#6

figured it out, thanks again … pointing me to that doc was very helpful.