1

I am trying to generate a grid (that is, a number of crossing horizontal and vertical lines) made up of adjacent points (but altering the spacing between the point) and not by using the line() function.

This is my code:

int verticalNumberLines=20;
int horizontalNumberLines=20;
int space=5;
size(400, 400);
background(#99ff66);
strokeWeight(2);

for (int i=0; i<width; i+=width/verticalNumberLines)
{
  for (int j=0; j<height; j+=space) // j=j+numero variabile
  {
    point(i, j);
  }
}
for (int j=0; j<height; j+=height/horizontalNumberLines)
{
  for (int i=0; i<width; i+=space)
  {
    point(i, j);
  }
}

I would love to have this grid below (not the color) Can someone tell me where I am making the mistakes?

enter image description here

enter image description here

9
  • 1
    This really isn't how Stack Overflow works. We can't really help with general "how do I do this" type questions, and it's hard to just provide general comments on your code. Stack Overflow is designed for more specific "I tried X, expected Y, but got Z instead" type questions. So try to narrow your question down to just a couple lines of code that aren't behaving how you expect. You've also crammed quite a few questions into one post. Split them up into multiple questions so we can provide specific answers to each specific question. Commented Feb 19, 2017 at 22:29
  • Recommended reading: Stack Overflow question checklist and minimal reproducible example. Commented Feb 19, 2017 at 22:30
  • ok, now it's more clear, thank you a lot for your suggestions and the recommended reading. Commented Feb 19, 2017 at 22:42
  • I'm really not trying to be annoying, and I'd love to help you. But this post is still not very clear. You've posted your goal, and you've posted some code, but you haven't really asked a question. Like I said, this site isn't really designed for general feedback. It's for specific technical questions. Which line of code is behaving differently from what you expected? Commented Feb 19, 2017 at 23:04
  • Thank you, seriously. It's my first time and I don't know a lot of things. My fundamental question is that I would love to create a grid like in the first image (the orange and gray grid). I mean the grid itself with that kind of visual effect on the point. I tried a lot but I don't understand where I made the mistakes or where I should change the code. Can you help me? Commented Feb 20, 2017 at 12:44

2 Answers 2

1

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.

1
  • Hi Kevin, thank you a lot for all your description, it's really helpful for me. "point(x, y + random(-2, 2));" was part of the right solution that I was looking for, I managed by writing point(x+random(-3, 3), y+random(-3, 3)); I then changed verticalNumberLines= 10; and horizontalNumberLines= 10; thank you again. Commented Feb 21, 2017 at 12:22
1
/* 
This is my solution, thank you, guys! 
 Program Description: 16. Use the random() function to create some visually interesting grids (note, a grid is not any
 arbitrary pattern, see exercise 14).
 By Laura Enria 20/02/1017
 */

float verticalNumberLines= 10;                                                   // numero delle linee verticali
float horizontalNumberLines= 10;                                                 // numero delle linee orizzontali
float space= random(1, 3); //try random(1 ,5 o 20);                                 // spazio che viene a crearsi tra i punti casuale
float R= random(1, 2);
size(500, 500);                                                                  //dimensione schermo
background(#00001a);                                                             //colore sfondo
stroke(#c6ffb3);                                                                 //colore linee e punti
strokeWeight(R);                                                                 //dimensione linee e punti

for (int i=0; i<width; i+=width/verticalNumberLines)                             //Fin quando i=0 passo al secondo loop
                                                                                //fin quando j=0 e minore(<) di height(altezza) disegno il primo punto in X0 e J0 con i che ha random
{                                                                               // -3e+3 e j lo stesso, poi passo a X0 e J1,J2,J3 ect. tra un punto e l'altro c'è lo spazio ,
  for (int j=0; j<height; j+=space)                                             //il rislutato sono linee di punti poi passo alla variabile i 
  {
    point(i+random(-3, 3), j+random(-3, 3));                                                                 //disegno il punto
  }
}
for (int j=0; j<height; j+=height/horizontalNumberLines)                       //stesso ragionamento
{
  for (int i=0; i<width; i+=space)
  {
    point(i+random(-3, 3), j+random(-3, 3));                                                           //incremento la casualità della i e j
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.