Unexpected result with random pattern

p5.js Beginners
1

Hello,
I thought every time I ran the code, the black boxes would appear like this. (image 1 and 2) But they are doing it like this (image 3) or anything but this.
Does anyone know why?

unknown3
unknown31762×569 74.9 KB

function blacksquare1() {

fill(0)
square(204, 204, grid)
}

function blacksquare2() {

fill(0)
push()
square(102, 102, grid)
square(204, 102, grid)
square(306, 102, grid)
square(306, 204, grid)
square(306, 306, grid)
square(204, 306, grid)
square(102, 306, grid)
square(102, 204, grid)
pop()

}
var canvasWidth = 512;
var canvasHeight = 512;
var elementsNumber = 5;
var grid = canvasWidth / elementsNumber;

var posX;
var posY;

var formes = 0; //variable del if

function setup() {
createCanvas(canvasWidth, canvasHeight);

}

function draw() {
noLoop()

background(255)

for (i = 0; i < canvasHeight / grid; i++) {
for (j = 0; j < canvasWidth / grid; j++) {
coordenadaX = i * grid;
coordenadaY = j * grid;

  noStroke()


  fill(200);
  triangle(coordenadaX, coordenadaY, coordenadaX, coordenadaY + grid, coordenadaX + grid, coordenadaY)



  fill(100);

  triangle(coordenadaX, coordenadaY + grid, coordenadaX + grid, coordenadaY, coordenadaX + grid, coordenadaY + grid)

  } 

  formes = int(random(0, 2))
  noStroke()


  if (formes == 1) {
    blacksquare1()


  } else if (formes == 0) {
    blacksquare2()








  
}

}
}

2

Hi @xiquip,

This statement is contained in one of your loops:

    formes = int(random(0, 2))

Are you sure that the closing } for that loop is in the correct place?

HINT (added on April 5, 2021):

Starting with your original code posted above, you only need to move one closing bracket to get the script to work correctly. If your code is properly indented to correspond to its block structure, the problem may be easy to see.

1 Like
3

Thank you! But I can’t figure out which closing bracket do I have to erase…

Ive erased this closing brackets but it keeps doing image 3 sometimes, not that often as before though
}

formes = int(random(0, 2))
  noStroke()


  if (formes == 1) 
    blacksquare1()


   else if (formes == 0) 
    blacksquare2()








  
}

}

4

Your program does not contain a syntax error, and the JavaScript interpreter does not report a runtime error, so the code executes without any complaint at all from the interpreter. However, it does not produce the desired result. This means it has a logic error.

There are many possible causes of a logic error, including a mathematical mistake, or inclusion of a statement in a block where it should not be included. The problem with your original code is the latter.

In a program that does not contain any syntax error, a closing curly brace closes the most recent opening curly brace that has not yet been closed. Your script ends with three curly braces, and you can use that rule to figure out which blocks each one of them closes.

I have copied those three closing braces here, removed blank lines, and adjusted their indentation. Comments have been added to indicate which blocks they close:

    } // closes the else if block
  } // closes the i loop (outer loop) block
} // closes the draw() function block

Notice that the one in the middle closes the loop block that begins with this header:

for (i = 0; i < canvasHeight / grid; i++) {

The block should instead have been closed right before this statement, which should execute only once when the program runs, rather than repeatedly:

formes = int(random(0, 2))

So, start with the original code that you posted, remove that closing bracket from where it is, and place it just before the statement that assigns a random value to formes. Instead of being included in the loop, every statement beginning with that one should be outside the loop.

Please let us know how it works out.

1 Like
5

Now it works. Thank you very much for the detailed explanation. You’re very kind.

I had to read the message several times. I was processing in my head why there was a syntax error. This is harder than I imagined and I don’t know if I fully understood the problem. In summary, what I have understood so far is … closing the bracket after the random function isolates the rest of the instructions so that they are not repeated, right?

This university subject is online and they do not explain anything. They only send us exercises so that we can find the solution online. I am learning more here than in class infinitely.

1 Like
6

Just to make sure that the bracket was moved correctly, below is your original code with that change made. Some comments have been added, and the indentation has been adjusted. Semicolons have been added at the end of some statements.

function blacksquare1() {
  fill(0);
  square(204, 204, grid);
}

function blacksquare2() {
  fill(0);
  push();
  square(102, 102, grid);
  square(204, 102, grid);
  square(306, 102, grid);
  square(306, 204, grid);
  square(306, 306, grid);
  square(204, 306, grid);
  square(102, 306, grid);
  square(102, 204, grid);
  pop();
}
var canvasWidth = 512;
var canvasHeight = 512;
var elementsNumber = 5;
var grid = canvasWidth / elementsNumber;

var posX;
var posY;

var formes = 0; //variable del if

function setup() {
  createCanvas(canvasWidth, canvasHeight);
}

function draw() {
  noLoop();
  background(255);

  for (i = 0; i < canvasHeight / grid; i++) {
    for (j = 0; j < canvasWidth / grid; j++) {
      coordenadaX = i * grid;
      coordenadaY = j * grid;
      noStroke();
      fill(200);
      triangle(coordenadaX, coordenadaY, coordenadaX, coordenadaY + grid, coordenadaX + grid, coordenadaY);
      fill(100);
      triangle(coordenadaX, coordenadaY + grid, coordenadaX + grid, coordenadaY, coordenadaX + grid, coordenadaY + grid);
    } // closes the j loop (inner loop) block

  } // closes the i loop (outer loop) block; THIS BRACKET WAS MOVED
  
  formes = int(random(0, 2));
  noStroke();

  if (formes == 1) {
    blacksquare1();
  } else if (formes == 0) { // closes the if block; opens the else if block
     blacksquare2();
  } // closes the else if block
} // closes the draw() function block

Notice that the bracket now occurs before this statement:

  formes = int(random(0, 2));

Now that statement is outside of the outer loop. Consequently, it and the statements that follow it only run once.