Thanks for improving your question. This is much easier to answer than before!
The first step you should get into the habit of doing is describing exactly what your goal is. You've posted a picture, and that's great, but what exactly is happening in that picture? Can you describe exactly what's different about that picture from what happens in your code? Try writing out a series of steps, in English, that would create a picture like that. When you have those steps, it'll be much easier to start thinking about code.
I would say that the line looks like each point has a random fluctuation added to it. So the steps might be:
- Draw a single line by starting at one end and moving the pen a little bit down the line to draw a dot.
- Before you draw each dot, move the pen randomly a tiny bit: if you're drawing a vertical line, move the pen left or right; if you're drawing a horizontal line, move the pen up or down.
- Repeat that process to draw the lines with the spacing in the picture.
Now that you've got those steps, you can start thinking about code.
Okay, so you've got two nested for
loops. The first one draws the vertical lines, and the second one draws the horizontal lines. Let's focus on one at a time. I'm going to change the variable names so it's a little clearer.
for (int x=0; x<width; x+=width/verticalNumberLines)
{
for (int y=0; y<height; y+=space) // j=j+numero variabile
{
point(x, y);
}
}
This one draws the vertical lines. First you create a loop that iterates over the x
values of the lines, and then for each x
value you create a loop that iterates over the y
values of the line. But notice that this will only ever create evenly-spaced lines, as there isn't any logic for altering the space between the points!
There are three ways you can approach the problem:
- You could add a random value to each point. This is easy but unpredictable.
- You could use
sin()
or cos()
to add a fluctuation to your line. This is also pretty easy but it results in predictable patterns.
- You could also set up your own variable that you fluctuate. This gives you the most control, but it involves creating another variable.
Let's go with the random approach, and just add a random value to every point:
for (int x=0; x<width; x+=width/verticalNumberLines)
{
for (int y=0; y<height; y+=space) // j=j+numero variabile
{
point(x + random(-2, 2), y);
}
}
The only thing that's changing is this line:
point(x + random(-2, 2), y);
Now we're adding a random value between -2
and 2
to the x
value of the coordinate. This will result in random left and right fluctuations to your vertical lines.
You could do the same thing to your horizontal lines:
point(x, y + random(-2, 2));
This results in an image that looks like this:
You might have to play with the spacing of your dots to make it look exactly the way you want, but this should get you started. And the above process of describing the problem in more detail and then breaking it down into smaller steps should help you with future problems.