array return inconsistancy (p5js)

Question

In the drawing program, the line coordinates are stored in an array so that the drawing can be redrawn. Occasionally, the image that is returned is not fully complete and sections of the lines are missing until the mouse is pressed (this is in p5js). I am unsure how to resolve this issue (sorry, I'm kinda new to this).

let lineCor = [];
let state = "help";
let r, g, b;
let symmetry = 8;
let angle = 360 / symmetry;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(220);
  r = 50;
  g = 0;
  b = 0;
}

function draw() {
  helpScreen();
  copyDrawing();
}

function copyDrawing() {
  if (state === "draw") {
    
    push();
    angleMode(DEGREES);
    translate(windowWidth / 2, windowHeight / 2);
    displayImg();
    pop();
    
    if (mouseIsPressed) {
      let linePos = {
        x: mouseX - windowWidth / 2,
        y: mouseY - windowHeight / 2,
        px: pmouseX - windowWidth / 2,
        py: pmouseY - windowHeight / 2,
      };
      lineCor.push(linePos);
    }
  }
}

function displayImg() {
  stroke(r, g, b);
  for (let i = 0; i < symmetry; i++) {

    for (let n = 0; n < lineCor.length; n++) {
      rotate(angle);
      line(lineCor[n].x, lineCor[n].y, lineCor[n].px, lineCor[n].py);
      push();
      scale(1, -1);
      line(lineCor[n].x, lineCor[n].y, lineCor[n].px, lineCor[n].py);
      pop();
    }
  }
}

function mouseWheel() {
  if (event.deltaY > 0) {
    if (r < 255) {
      r += 10;
    } 
    else if (g < 255) {
      g += 10;
    } 
    else if (b < 255) {
      b += 10;
    }

  } else {
    if (r > 0) {
      r -= 10;
    } 
    else if (g > 0) {
      g -= 10;
    } 
    else if (b > 0) {
      b -= 10;
    }
  }
}

function helpScreen() {
  if (state === "help") {
    background(160);
    textAlign(CENTER, CENTER);
    textSize(windowWidth * 0.04);
    text("Welcome to this kaleidiscope drawing program", windowWidth / 2, windowHeight / 3);
    textSize(windowWidth * 0.015);
    text("To change color, scroll the mousewheel. Press 's' to start drawing. Press 'c' to clear the screen. Press 'h' to return to return to this help screen.", windowWidth / 2, 1.5 * windowHeight / 3);
  }
}

//commands for the keybinds
function keyTyped() {
  if (key === "c") {
    setup();
    lineCor = [];
  }

  if (key === "h") {
    setup();
    state = "help";
  }

  if (key === "s") {
    setup();
    state = "draw";  
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>

Answer 1

The problem is here:

for (let i = 0; i < symmetry; i++) {
  for (let n = 0; n < lineCor.length; n++) {
    rotate(angle);
    line(lineCor[n].x, lineCor[n].y, lineCor[n].px, lineCor[n].py);
    push();
    scale(1, -1);
    line(lineCor[n].x, lineCor[n].y, lineCor[n].px, lineCor[n].py);
    pop();
  }
}

While debugging, I found out that the problem occurs because of background(), which had to mean that not all lines were drawn. And after further experimenting, I found out that it only occurs when lineCor has an even number of elements. Why would that be?

Because of the rotate(). You see, the rotating should only occur 8 times (let symmetry = 8), but in your code, it happens for every single line. When lineCor.length is even, this causes it to draw lines in the same place multiple times (making it look like some lines weren't drawn at all).

This is easily fixed by moving the rotate() to the outher for-loop.

for (let i = 0; i < symmetry; i++) {
  rotate(angle);      
  for (let n = 0; n < lineCor.length; n++) {