p5 set fill color using hex string and alpha

Question

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%).

It’s highly unlikely alpha is 0-255. There is no reason for it. Try float 0.5 — Radio, Nov 10 '17 at 14:27
In the future, please post a [MCVE](https://stackoverflow.com/help/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. — Kevin Workman, Nov 10 '17 at 18:27
Kevin - will do, it's been awhile since I posted a question. Thank you. Radio, alpha in p5 is a number between 0 and 255. — Kevin K, Nov 11 '17 at 08:43

score 3 · Accepted Answer · edited Feb 21 '19 at 02:48

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>

score 2 · Answer 2 · answered Nov 10 '17 at 18:27

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.

as the answer below shows you can create a color with a string and then set the alpha in a separate call. — Charlie Wallace, Feb 21 '19 at 01:18

score 1 · Answer 3 · answered Nov 11 '17 at 09:57

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>

I believe it would be better to set the alpha value by calling setAlpha instead of directly accessing the _array member. See the answers below. — Charlie Wallace, Feb 21 '19 at 01:20

score 1 · Answer 4 · answered Jun 19 '19 at 21:58

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>

p5 set fill color using hex string and alpha

4 Answers4

Linked