Help me understand random() please

Programming Questions

bergstrom..

Help me understand random() please

in Programming Questions • 1 year ago

This is what I started with;

void setup() {
size(600,250);
smooth();
}
void draw() {
background(0);
drawRect(200, 125, 50);
drawRect(220, 125, 100);
drawRect(240, 125, 150);
}
void drawRect(float x, float y, float g) {
fill(0, g, 0);
for (int i = 0; i < 100; i++) {
float h = random(10, 200);
rect(x, y, 15, h);
}
}

So I'm trying to create a bar graph that is randomly generated within processing. I figured this would be a more easier task than trying out external data sources.

I got the random() function from the references page and edited it according to what I thought would be right. Though currently as it sits, it does kind of randomly generate a random height of sorts... Except it's not how I wanted the "random height" just seems to be three bars the exact same height with random black lines flashing inside of them... So I figured that I did use the random() function properly more or less.

I would like some explanation though,

for (int i = 0; i < 100; i++) {

This line here from my un knowing grasp seems to be generating between 0 and 100? I don't understand what this does at all, so I decided to wing it and get rid of the top line and just stick with:

float h = random(10, 100);

it seems to actually generate a height, as soon as I drop noLoop(); into setup. But it seems to be generating this height in a backwards way with the bar graph being upside down, I figured that if I set random(10, 200); to random(-10, -200) that it would fix that there problem but that does not seem to be the case.

So as of now this is what I have...

void setup() {
size(600,250);
smooth();
noLoop();
}

void draw() {
background(0);
drawRect(200, 125, 50);
drawRect(220, 125, 100);
drawRect(240, 125, 150);
}

void drawRect(float x, float y, float g) {
fill(0, g, 0);

float h = random(-10, -200);
rect(x, y, 15, h);

}

:D Any help would be cool, I'll still be screwing around seeing if I can fix this.

Replies(9)

asimes

Re: Help me understand random() please

1 year ago

This is a for loop

for (int i = 0; i < 100; i++)

It makes a temporary variable 'i' and sets it to 0. Then it runs the code inside the loop some number of times. In this case it is 100 times and 'i' gets incremented every time. Run this and see what it does:

for (int i = 0; i < 100; i++) {
println(i);
}

In your code it doesn't affect random in any way other than that it runs random 100 times. There are multiple ways to use random, the most useful for your purpose is probably this form:

random(yourMinimumRange, yourMaximumRange);

This will return a float (a number that has fractional / decimal information) that is between a range. Try this code out:

void setup() {
size(200, 200);
}
void draw() {
background(0);
drawSomeRects();
}
void drawSomeRects() {
for (int i = 0; i < 10; i++) {
rect(i*20, 0, 10, random(200));
}
}

On a side note you don't need smooth() when drawing rects().

EDIT: I just realized my example doesn't use what I wrote would be the most useful form for random, sorry. The one I used gives a number between 0 and 200. It is 0 because I didn't give a first argument. It is the same as writing random(0, 200);

bergstrom..

Re: Help me understand random() please

1 year ago

With that script how would I go about editing the spacing between the bars and the width of them?

eightohni..

Re: Help me understand random() please

1 year ago

It's where you are drawing the rectangles. So within the rect() function. The function has following parameters.

rect(x, ,y ,w, h)

x = position on the x-axis

y =position on the y-axis

w = width

h = height

So here we have one answer. If you change the variable "w", then you can change the width of the bar.

Let's break down above following and see what it's doing.

for (int i = 0; i < 10; i++) {
rect(i*20, 0, 10, random(200));
}

asimes gave a nice explanation of how the for loop works. In short, the variable "i" starts at 0 and counts up until it reaches 9. In total that's 10 times it runs through the loop (0,1,2,3,4,5,6,7,8,9). L et's check how the changing variable i affects the x-parameter in rect():

0*20 = 0

1*20 = 20

2*20 = 40

etc.

So for every loop, the x-coordinate of the bar you are drawing is moved growing/moving to the right. So the 20 actually defines what the interval is between the bars. If you change that value, the bars will be closer or farther apart.

That will work fine, but what if you decide to change the width of the bars or the distance in between them. Remember you are drawing 10 bars. But changing the above values could result in drawing some bars off-screen. Let's try to prevent this. Here's another different way to write the for loop:

for (int i = 0; i < width; i+=10) {
rect(i, 0, 10, random(200));
}

Let's see what it does. It starts the same, by initializing a variable "i" and setting it to 0. The new condition we are using is the system variable "width". This variable holds the width of the sketch, in your case it's 200. i+=10 means that every loop we are adding 10 to the variable i, instead of previously just 1. So again, "i" will start at value "0", then be "10", then "20", then "30" up until "190". That's the last value which will match our condition (190 < 200). The next one (200 < 200) would no longer be true. So that would be 20 drawn bars in total, all with a width of 10pixels and all within the canvas. In this setup, changing the value you add to i, will change the spacing between the bars.

Hope this helps.

bergstrom..

Re: Help me understand random() please

1 year ago

Well, thank you for the reply! In the mean time though before you replied I ended up with... This:

void setup() {
size(799,65);
smooth();
frameRate(5);
}

void draw() {
background(255);
drawRect(0, 0);
drawRect(5, 0);
drawRect(10, 0);
drawRect(15, 0);
drawRect(20, 0);
drawRect(25, 0);
drawRect(30, 0);
drawRect(35, 0);
drawRect(40, 0);
drawRect(45, 0);
drawRect(50, 0);
drawRect(55, 0);
drawRect(60, 0);
drawRect(65, 0);
drawRect(70, 0);
drawRect(75, 0);
drawRect(80, 0);
drawRect(85, 0);
drawRect(90, 0);
drawRect(95, 0);
drawRect(100, 0);
drawRect(105, 0);
drawRect(110, 0);
drawRect(115, 0);
drawRect(120, 0);
drawRect(125, 0);
drawRect(130, 0);
drawRect(135, 0);
drawRect(140, 0);
drawRect(145, 0);
drawRect(150, 0);
drawRect(155, 0);
drawRect(160, 0);
drawRect(165, 0);
drawRect(170, 0);
drawRect(175, 0);
drawRect(180, 0);
drawRect(185, 0);
drawRect(190, 0);
drawRect(195, 0);
drawRect(200, 0);
drawRect(205, 0);
drawRect(210, 0);
drawRect(215, 0);
drawRect(220, 0);
drawRect(225, 0);
drawRect(230, 0);
drawRect(235, 0);
drawRect(240, 0);
drawRect(245, 0);
drawRect(250, 0);
drawRect(255, 0);
drawRect(260, 0);
drawRect(265, 0);
drawRect(270, 0);
drawRect(275, 0);
drawRect(280, 0);
drawRect(285, 0);
drawRect(290, 0);
drawRect(295, 0);
drawRect(300, 0);
drawRect(305, 0);
drawRect(310, 0);
drawRect(315, 0);
drawRect(320, 0);
drawRect(325, 0);
drawRect(330, 0);
drawRect(335, 0);
drawRect(340, 0);
drawRect(345, 0);
drawRect(350, 0);
drawRect(355, 0);
drawRect(360, 0);
drawRect(365, 0);
drawRect(370, 0);
drawRect(375, 0);
drawRect(380, 0);
drawRect(385, 0);
drawRect(390, 0);
drawRect(395, 0);
drawRect(400, 0);
drawRect(405, 0);
drawRect(410, 0);
drawRect(415, 0);
drawRect(420, 0);
drawRect(425, 0);
drawRect(430, 0);
drawRect(435, 0);
drawRect(440, 0);
drawRect(445, 0);
drawRect(450, 0);
drawRect(455, 0);
drawRect(460, 0);
drawRect(465, 0);
drawRect(470, 0);
drawRect(475, 0);
drawRect(480, 0);
drawRect(485, 0);
drawRect(480, 0);
drawRect(485, 0);
drawRect(490, 0);
drawRect(495, 0);
drawRect(500, 0);
drawRect(505, 0);
drawRect(510, 0);
drawRect(515, 0);
drawRect(520, 0);
drawRect(525, 0);
drawRect(530, 0);
drawRect(535, 0);
drawRect(540, 0);
drawRect(545, 0);
drawRect(550, 0);
drawRect(555, 0);
drawRect(560, 0);
drawRect(565, 0);
drawRect(570, 0);
drawRect(575, 0);
drawRect(580, 0);
drawRect(585, 0);
drawRect(590, 0);
drawRect(595, 0);
drawRect(600, 0);
drawRect(605, 0);
drawRect(610, 0);
drawRect(615, 0);
drawRect(620, 0);
drawRect(625, 0);
drawRect(630, 0);
drawRect(635, 0);
drawRect(640, 0);
drawRect(645, 0);
drawRect(650, 0);
drawRect(655, 0);
drawRect(660, 0);
drawRect(665, 0);
drawRect(670, 0);
drawRect(675, 0);
drawRect(680, 0);
drawRect(685, 0);
drawRect(690, 0);
drawRect(695, 0);
drawRect(700, 0);
drawRect(705, 0);
drawRect(710, 0);
drawRect(715, 0);
drawRect(720, 0);
drawRect(725, 0);
drawRect(730, 0);
drawRect(735, 0);
drawRect(740, 0);
drawRect(745, 0);
drawRect(750, 0);
drawRect(755, 0);
drawRect(760, 0);
drawRect(765, 0);
drawRect(770, 0);
drawRect(775, 0);
drawRect(780, 0);
drawRect(785, 0);
drawRect(790, 0);
drawRect(795, 0);
}

void drawRect(float x, float y) {
float r = random(20, 100);
float g = random(20, 230);
float b = random(20, 80);
fill(r, g, b);
stroke(255);
float h = random(10, 65);
rect(x, y, 5, h);
}

I find it rather amusing now, I was quite proud of figuring out the random colours thing...
EDIT/ Now that I've used your code and threw in my random colours tidbit... I like my ridiculous sketch better. Haha! Though mine does have some sort of bug with two of the bars generating two different colours at the same time that are separated by a white line. Rather odd.

fridddd

Re: Help me understand random() please

1 year ago

Damn, that is a lot of code...

Although it doesn't look friendly, the for-loop really is your friend...

FRid

void setup() {
size(799,65);
smooth();
frameRate(5);
}

void draw() {
      background(255);
      for(int i=0;i<width;i=i+5) {

            drawRect(i,0);
      }

}

void drawRect(float x, float y) {
float r = random(20, 100);
float g = random(20, 230);
float b = random(20, 80);
fill(r, g, b);
stroke(255);
float h = random(10, 65);
rect(x, y, 5, h);
}

bergstrom..

Re: Help me understand random() please

1 year ago

Heh gotta love doing it the hard way. :) Thanks Frid.

eightohni..

Re: Help me understand random() please

1 year ago

OK, your code does work fine. And it is a really great place to start to learn about "programming thinking".

So could you now please make a sketch with 500 bars? Yeah, that would be quite tedious, having to manually write all the lines of code.

Every time you come across something like the many similar drawRect() calls you have built into your sketch, you know that you can likely simplify it. Take a look at the following code. It does the exact same thing like the above code, but by utilizing a for loop and the variable "i" in a clever way, you have a lot less hassle when applying changes to your sketch.

void setup() {
size(799, 65);
smooth();
frameRate(5);
}
void draw() {
background(255);
for (int i=0; i<width; i+=5) {
drawRect(i, 0);
}
}
void drawRect(float x, float y) {
float r = random(20, 100);
float g = random(20, 230);
float b = random(20, 80);
fill(r, g, b);
stroke(255);
float h = random(10, 65);
rect(x, y, 5, h);
}

The key is to try to build your sketch with relative values and not with absolute values. Instead of having lots of lines of code with absolute pixel values, you have one for loop where the variable "i" changes relative to the number of loops. Same holds true for the system variable "width". By using this, you can just change the size of your sketch in the setup() and the for loop will adapt it's test condition accordingly.

eightohni..

Re: Help me understand random() please

1 year ago

Damn, too slow! :D

And yeah, the "hard way" is what we all did in the beginning. All a matter of experience.

asimes

Re: Help me understand random() please

1 year ago

All of these sketches still have smooth()... which has no visible effect on rect(). Leave smooth() for sketches where you are using ellipse() or custom shapes.

EDIT: Also, try to limit your arguments for drawRect. Even in your "long hand" form 'y' was 0 every time. That means drawRect() only needs one argument, 'x'.

Top Reply