p5 set fill color using hex string and alpha

问题

I'm trying to use hexadecimal values for colors in p5.js and I'm having trouble using it and using an alpha at the same time. I'd like to set the color with one variable and the alpha with another.

let myColor = '#FF0000';
let myAlpha = 128;
function setup() {
  createCanvas(200,200);
}
function draw() {
  fill(color(myColor), myAlpha);
  noStroke();
  ellipse(100, 100, 50, 50);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<html>
  <head></head>
  <body></body>
</html>

This works for the color, but the alpha ends up being 255 (100%).

回答1:

setAlpha() is documented on p5.Color and takes values from 0 to 255.

For your code:

let c = color(myColor);
c.setAlpha(myAlpha);
fill(c);

function setup(){
  createCanvas(300,300);
}

var alphaValue = 50;

function draw(){
  var c = color('#FF0000');
  fill(c);
  rect(100,100,100,100);
  c = color('#0000FF');
  c.setAlpha(alphaValue);
  fill(c);
  rect(150,150,100,100);
}

function mouseClicked(){
    if (alphaValue > 50){
	    alphaValue = 50;
	} else {
	    alphaValue = 255;
	}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

回答2:

From the reference:

If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.

In other words, you can't use alpha values with string color codes.

You either have to use an RGBA string or split the values into their individual number values and use the 4-arg fill() function.

Side note: in the future, please post a MCVE that we can run. In the case of P5.js, this means including a setup() and a draw() function instead of a disconnected snippet of code.

回答3:

Actually, I figured it out. p5 has a color object. The alpha is stored inside the color object at color._array[3]. You first create a color object using the string. Then you can change the alpha by changing the value in color._array[3] and then pass that color object to the fill() method.

Note: Although you typically define alpha as a number between 0-255 in p5, the color object stores the alpha as a number between 0 and 1 in this place.

let myColor = '#FF0000';
let myAlpha = 128;
function setup() {
  createCanvas(200,200);
}
function draw() {
  background(255);
  let c = color(myColor);
  c._array[3] = myAlpha / 255;
  fill(c);
  noStroke();
  ellipse(100, 100, 50, 50);
  ellipse(110, 110, 50, 50);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<html>
  <head></head>
  <body></body>
</html>

回答4:

To incorporate the alpha value to the hexadecimal color representation, you simply add two more digits to the end of the color code. The range is 0-255, but in hexadecimal that will be 00-FF. For example: a solid red would be '#FF0000FF'. See more examples below.

function setup(){
  createCanvas(300,300);
}


function draw(){
  fill('#FF0000FF');
  rect(50,50,100,100);
  fill('#00FF0040');
  rect(75,75,100,100);
  fill('#0000FF80');
  rect(100,25,100,100);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>

来源：https://stackoverflow.com/questions/47224668/p5-set-fill-color-using-hex-string-and-alpha

标签

colors

fill

p5.js