A newbie needs help

p5.js Beginners
1

Hello Im dont have a clue about programming and at school they gave us some exercises
Anyone knows how to set a random value to an alpha? For example, a circle, triangle or square.

for example , I assign a variable to some parameters like
var triangleOpacity = 0;
var triangle X =
var triancle Y =
var triangle size =
fill(‘yellow’);

triangle(triangleX-triangleSize/3,triangleY, triangleX+triangleSize/3,triangleY, triangleX,triangleY-triangleSize/2 );
}

2

Hello, @xiquip, and welcome to the Processing Forum!

Be careful with spelling in your program. Notice that you have this:

var triancle Y =

Please fix the spelling, and be aware that the name of a variable cannot include a space.

A useful resource for p5.js programmers is the p5.js Reference.

That reference contains this: Reference: random(). An alpha value can range from 0 to 255, inclusive. It should be a whole number.

Let’s first see if you can use the information in the reference to assign an appropriate random number to triangleOpacity in your program. That will serve as the alpha value. Please post the statement that accomplishes that task here, and we will help you with refining it, as necessary.

For your program to execute, you will need to correct all the spelling mistakes, as well as assign values to all the variables. For example, you can do this:

  var triangleX = 120;

Edited on March 25, 2021 to add the following:

Your posted code is difficult to read, since it is not formatted properly for posting. See Guidelines—Asking Questions for lots of useful advice, including information on how to format code for posting.

3 Likes
3

Thank you @javagar very much!

var triangleX = 150;
var triangleY = 300;
var triangleSize = 300;
var triangleOpacity = 10;

function setup() {
createCanvas(400, 400);
noLoop();
}

function draw() {
background(220);
noStroke();

fill(255, 211, 25, triangleOpacity);
triangleOpacity = random (0, 255) // Is this ok? Im not sure
triangle(triangleX-triangleSize/3, triangleY, triangleX+triangleSize/3 ,triangleY, triangleX,triangleY-triangleSize/2 );

4

Thanks for posting your revised code.

Does it run and draw a triangle now?

This statement should be moved so that it executes before you call the fill() function:

triangleOpacity = random (0, 255) // Is this ok? Im not sure

Then the new value for triangleOpacity will always get used for the color.

With the random() function, the upper bound is exclusive. So in this case, you may want to use random(256) so that a result of 255 is possible. This would be even better:

  var triangleOpacity = floor(random(256));

Does your entire triangle show up on the screen? If part of it gets cut off as you are developing the program, you may want to adjust the arguments passed to the the createCanvas() function to make the canvas larger.

You may benefit by drawing a line on the screen before you draw the triangle. Then, whenever the triangle has some transparency, the line will show through it. You can use the p5.js Reference page to get information about drawing a line.

2 Likes
5

Thank you very much @javagar Now it works!
Thanks again for the quick answer

1 Like
6

Best of luck with all your work, @xiquip! Build your skills by continuing to make good use of the p5.js Reference, and have fun being creative. :smile:

2 Likes