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>

I can't seem to reproduce the error. Can you eloborate? When exactly do lines "go missing"? Does it happen randomly? — Dietrich
– Dietrich, Commented Sep 23, 2020 at 5:14
The problem is with the interaction between the "help" and "draw states". Ideally, given that the canvas is not cleared using the clear function, the drawing should be redrawn when you switch from the help screen with instructions back into the canvas. However, sometimes the lines that are redrawn have segments that are not fully filled in unless you left-click the mouse again. Items in the array do not seem to be deleted. Additionally, the drawing is sometimes replicated while other times, there will be segments missing. — vw03
– vw03, Commented Sep 23, 2020 at 22:50
To replicate the error, start drawing and press "h" to arrive on the help screen. Then press "s" once again to return to your drawing which should be saved in the array. You may need to do this a few times as the error is inconsistent as to when it occurs. — vw03
– vw03, Commented Sep 23, 2020 at 22:51

Dietrich · Accepted Answer · 2020-09-24 05:50:21Z

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++) {

Collectives™ on Stack Overflow

array return inconsistancy (p5js)

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related