Help with Opacity(Transparency)

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.

This is the link to the code.

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.

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.

For a quick test, try changing line 71 from

fill(0, 255, 255);


fill(0, 255, 255, 100);


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);
  blendMode(BLEND);  // Default
  // Text behind circle  
  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);
  text("25", 300, 100)
  text("25", 450, 100)
  fill(255, 0, 0, 64);  //75% transparency with white background
  circle(450, 100, 70);
  text("25", 600, 100)
  fill(255, 0, 0, 128);
  circle(600, 100, 70);    


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.

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…