# Colour transparency

**URL:** <https://discourse.processing.org/t/colour-transparency/6052>\
**Category:** Coding Questions\
**Created:** [November 28, 2018, 11:23pm UTC](https://discourse.processing.org/t/colour-transparency/6052 "2018-11-28T23:23:48Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![CowPieForever](https://avatars.discourse-cdn.com/v4/letter/c/f14d63/32.png) [@CowPieForever](https://discourse.processing.org/u/CowPieForever)\
**Post date:** [November 28, 2018, 11:23pm UTC](https://discourse.processing.org/t/colour-transparency/6052/1 "2018-11-28T23:23:48Z")

</div>

My code for colour looks like this:

```auto
stroke(random(127.5,255),random(127.5,255),random(127.5,255));
fill(random(127.5,255),random(127.5,255),random(127.5,255));

```

Since I’m using the random function, it doesn’t follow the usual specific colour RGB format that you would usually type. Because of this, adding transparency in the usual alpha position (r,g,b,alpha) won’t work. I tried (random(127.5,255,alpha)) (because it’s the only way I could think of. also, 127.5,255 is my colour range), but it doesn’t work and it gives me an error. How do I add transparency to my random colours?

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [November 29, 2018, 12:12am UTC](https://discourse.processing.org/t/colour-transparency/6052/2 "2018-11-29T00:12:34Z")

</div>

Think about it this way: you’re really generating 3 separate values and passing them into the `stroke()` or `fill()` functions:

```auto
var myRed = random(127.5,255);
var myGreen = random(127.5,255);
var myBlue = random(127.5,255);
stroke(myRed, myGreen, myBlue);

```

Hopefully that’s a little easier to understand. To pass an alpha value into the `stroke()` function, you’d create a 4th random value:

```auto
var myRed = random(127.5,255);
var myGreen = random(127.5,255);
var myBlue = random(127.5,255);
var myAlpha = random(127.5,255);
stroke(myRed, myGreen, myBlue, myAlpha);

```

---

<div class="post-metadata">

**Author:** ![djokjula](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/djokjula/32/2544_2.png) [@djokjula](https://discourse.processing.org/u/djokjula)\
**Post date:** [November 29, 2018, 12:17am UTC](https://discourse.processing.org/t/colour-transparency/6052/3 "2018-11-29T00:17:13Z")

</div>

Why doesn’t adding alpha as the third parameter to `stroke()` and `fill()` work? How have you tested this?

P.S. You can use markdown for code snippets: ```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 29, 2018, 12:22am UTC](https://discourse.processing.org/t/colour-transparency/6052/4 "2018-11-29T00:22:33Z")

</div>

try online change:

```auto
color my_c;
float myRed = random(127.5, 255);
float myGreen = random(127.5, 255);
float myBlue = random(127.5, 255);
float myAlpha = random(127.5, 255);

void setup() {
  size(250, 250);
  my_c = color(myRed, myGreen, myBlue, myAlpha);
  println("use: mouseX for transparency");
}

void draw() {
  background(200, 200, 0);
  fill(0, 200, 0); // green rect below
  rect( width/2-25, height/2-25, 50, 50);
  myAlpha = mouseX;
  my_c = color(myRed, myGreen, myBlue, myAlpha);
  fill(my_c);
  rect( width/2, height/2, 50, 50); // tranparent rect over
  fill(0);
  text( "color( "+nf(myRed,1,1)+" , "+nf(myGreen,1,1)+" , "+nf(myBlue,1,1)+" , "+nf(myAlpha,1,1)+" )",10,20);
}

```

> **[color\_transparency - OpenProcessing](https://www.openprocessing.org/sketch/635692)**
>
> test transparency by mouse

---

<div class="post-metadata">

**Author:** ![CowPieForever](https://avatars.discourse-cdn.com/v4/letter/c/f14d63/32.png) [@CowPieForever](https://discourse.processing.org/u/CowPieForever)\
**Post date:** [November 29, 2018, 1:52am UTC](https://discourse.processing.org/t/colour-transparency/6052/5 "2018-11-29T01:52:50Z")

</div>

I would would I type this out? I’m new to this so I’m not really sure how to do much except the basics

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [November 29, 2018, 2:28am UTC](https://discourse.processing.org/t/colour-transparency/6052/6 "2018-11-29T02:28:07Z")

</div>

Try to get something simpler working. Use hard-coded values first. Can you make something that’s red and transparent? Can you give it a random transparency? Work forward in small steps, and let us know if you get stuck on a specific step. Good luck.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [November 29, 2018, 6:30am UTC](https://discourse.processing.org/t/colour-transparency/6052/7 "2018-11-29T06:30:12Z")

</div>

> [@CowPieForever](#):
>
> it doesn’t follow the usual specific colour RGB format that you would usually type

Actually it does. It is just that instead of putting numbers directly you are using functions that are generating numbers. Look at this badly done image:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0bffbd9d7a3d98e9bb580d48ab3b75bbf7a3a6d9.png)

So as you can see it uses the standard way of stating a color. Now to add some transparency, you need to do exactly what you said:

> [@CowPieForever](#):
>
> adding transparency in the usual alpha position (r,g,b,alpha)

Except it would work =):

```auto
stroke( random(127.5,255) , random(127.5,255) , random(127.5,255) , alphaValue);

```

Just to precise things a bit, when you do this: `random(127.5,255,alpha)` you are adding a third parameters to the `random` function which takes only 2 parameters at max, you are not adding it to your `fill` or `stroke` functions.