Colour transparency

Processing Coding Questions
1

My code for colour looks like this:

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?

2

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

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:

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);
2 Likes
3

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: ```

4

try online change:

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);
}
1 Like
5

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

6

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.

1 Like
7

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
image992×129 3.64 KB

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:

Except it would work =):

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.

2 Likes