Help with Opacity(Transparency)

p5.js Coding Questions
1

I need help with how to change the opacity(transparency) of the colours used to fill
the hexagons such that when a hexagon is above a number(say 30 as in the image) the number will still be visible?

e.g I want the hexagons to be transparent so the background will be visible.

Q4NM2
Q4NM22210×776 375 KB

This is the link to the code.
https://editor.p5js.org/Chigoz/sketches/UfMtGqY3W

2

Cool project! I took a look at the fill() function’s documentation and found that adding a fourth argument changes the alpha (transparency) value of the color.

3

Thanks for your contribution and the compliment. I have changed the 4th variable on the code and it didn’t work/fix it.Noel on this forum helped me with the colour fill but the argument he used/uses is quite different from the regular one’s. This seems more advanced, I do not understand it.

4

For a quick test, try changing line 71 from

fill(0, 255, 255);

to

fill(0, 255, 255, 100);
5

Hello,

I experimented a little!

Example code:

function setup() 
  {
  createCanvas(750, 200);
  }

function draw() 
  {
  background(255); // Try backgrounds other than white and see what happens.
  
  textAlign(CENTER, CENTER);
  textSize(48);
  
  blendMode(BLEND);  // Default
  
  // Text behind circle  
  fill(0);
  text("25", 150, 100)
  fill(255, 0, 0);
  circle(150, 100, 70);
  
  // Text on top of circle  
  fill(255, 0, 0);
  circle(300, 100, 70);
  fill(0);
  text("25", 300, 100)
  
  fill(0);
  text("25", 450, 100)
  fill(255, 0, 0, 64);  //75% transparency with white background
  circle(450, 100, 70);
  
  blendMode(DARKEST);
  smooth();
  fill(0);
  text("25", 600, 100)
  fill(255, 0, 0, 128);
  circle(600, 100, 70);    
  }

image
image763×247 6.42 KB

:)

6

Thank you very much for that solution, it made the hexagon transparent but after that the hexagon is no longer draggable. Please see if you can fix it.

7

Thank you for your solution, I want the fill colour to be transparent and the number
to be in a layer below the circle fill colour…