# Help with Opacity(Transparency)

**URL:** <https://discourse.processing.org/t/help-with-opacity-transparency/32445>\
**Category:** Coding Questions\
**Created:** [September 27, 2021, 4:24pm UTC](https://discourse.processing.org/t/help-with-opacity-transparency/32445 "2021-09-27T16:24:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [September 27, 2021, 4:24pm UTC](https://discourse.processing.org/t/help-with-opacity-transparency/32445/1 "2021-09-27T16:24:11Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/67f88d38e931eb99264710a255cfe192186a10b4.jpeg)

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

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [September 27, 2021, 5:13pm UTC](https://discourse.processing.org/t/help-with-opacity-transparency/32445/2 "2021-09-27T17:13:37Z")

</div>

Cool project! I took a look at the `fill()` function’s [documentation](https://p5js.org/reference/#/p5/fill) and found that adding a fourth argument changes the alpha (transparency) value of the color.

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [September 27, 2021, 6:01pm UTC](https://discourse.processing.org/t/help-with-opacity-transparency/32445/3 "2021-09-27T18:01:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [September 27, 2021, 10:07pm UTC](https://discourse.processing.org/t/help-with-opacity-transparency/32445/4 "2021-09-27T22:07:40Z")

</div>

For a quick test, try changing line 71 from

```javascript
fill(0, 255, 255);

```

to

```javascript
fill(0, 255, 255, 100);

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 27, 2021, 11:49pm UTC](https://discourse.processing.org/t/help-with-opacity-transparency/32445/5 "2021-09-27T23:49:47Z")

</div>

Hello,

I experimented a little!

Example code:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e72e4ae6906932d887e8e449d9f61b94ba76132a.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [September 28, 2021, 12:07am UTC](https://discourse.processing.org/t/help-with-opacity-transparency/32445/6 "2021-09-28T00:07:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [September 28, 2021, 12:19am UTC](https://discourse.processing.org/t/help-with-opacity-transparency/32445/7 "2021-09-28T00:19:45Z")

</div>

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…