Nested loops in p5.js

var col
var col2
var on = false
function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  
  col2 = {
    locationX: random(width),
    locationY: random(height),
    size: random(5, 10)
  }

  background(0, 0, 35, 25);
  noStroke()
  ellipse(col2.locationX, col2.locationY, col2.size, col2.size)
  
  col = map(mouseX, 0, 400, 0, 255)
  
  
  for(var x = 0; x <= mouseX; x += 50){
    for(var y = 0; y <= mouseY; y += 50){
      fill(225, 0, 0)
      noStroke()
      ellipse(x, y, 5, 5)
      if(on){
        fill(random(col))
        ellipse(x, y, 25, 25)
         }
    }
  }
  
}

function mousePressed(){
  on = !on
}