Drawing new shapes is causing the older shapes to disappear

p5.js Coding Questions
1

Hello

i’m working on a complex visualisation project, using p5.js i want to create multiple clusters of shapes to visualise all sorts of data, so i’m looping through the data, checking the objects specified by user and drawing them to canvas, this happens in a nested for loop…the problem i’m facing is when an inner loop is done drawing a cluster of shapes and the overall loop continues and re-enters the inner loop again to draw the next cluster, the older cluster of drawn shapes disappears…i don’t understand why, i thought this had to do with that the shapes are related to the inner loop context/scope and tried to recreate the problem based on that but it appears that this is not the case.

this code for example works perfectly, it draws 5 circles on 20 lines, run by a nested loop

function setup() {
   createCanvas(window.innerWidth, window.innerHeight).parent('myContainer');
}

function draw() {

   background(220);
   x = 100;
   y = 100;
   for (let i = 1; i <= 20; i++) {
       for(let j=1;j<=5;j++){
        fill(color(0, 255, 0));
        stroke(0);
        ellipse(x, y, 80);

        x += 90;
       }
       x = 100;
       y += 90;
   }
}

while in my code, after the inner loop moves to the next cluster the previous shapes just disappear and only the last cluster is shown…i did a lot of console logging and debugging and made sure that every cluster is actually getting drawn but it just disappears when a new one is created…can anyone please help?
is there anyway to emphasise the library to draw a NEW separate shape…like this?

new ellipse(x,y,rad)

this is my project’s code, it shows where the bug happens although i can’t disclose it any further:

function setup() {
  createCanvas(viewWidth, viewHeight).parent('myContainer');
}

function draw() {
//code...
  var objects_len = objects.length;
  for (var cluster_index = 1; cluster_index < cluster_len; cluster_index++) {
    array_center = partition(cluster_index - 1, cluster_len - 1);
    for (var object_index = 0; object_index < objects_len; object_index++) {
      if (!objects[object_index].deleted) {
        draw_simple_object(objects[object_index], data, cluster_index, array_center, cluster_len);
      }
    }
    addClusterName(cluster_index, data, array_center);
  }

function draw_simple_object(object, data, cluster_index, array_center, cluster_len) { 
.
.
.
//this is where the drawing happens
    var center_shape = [array_center[0] + object.centerOffsetX * array_center[2], array_center[1] + object.centerOffsetY * array_center[3]];
if (object.shape === 'ellipse' && enable) {
      var size_min = Math.min(array_center[2], array_center[3]) * 2;
      fill(colorFill);
      stroke(object.colorBorder);
      ellipse(center_shape[0], center_shape[1], size_min * width * proportion, size_min * length * proportion);
}
.
.
.
}
}

please help me

2

Hello, @uniqueNoSpaces, and welcome to the Processing Forum!

Each time your inner loop has completed all its iterations, you make this function call:

    addClusterName(cluster_index, data, array_center);

What happens inside that function? For instance, does it call the background() function anywhere? If so, it would erase what was previously drawn.

1 Like
3

Hey, thanks for your reply!
this function simply draws text using the text() function…it goes like this:

    textSize(14);
    fill('#000000');
    textAlign(CENTER);
    textStyle(BOLD);
    text(name, x, y);

and i made sure i’m not changing the background in my draw function too

1 Like
4

UPDATE:
i was using the function resizeCanvas inside the draw function which was causing this to happen…so i have to remove it to fix this problem…although it’s extremely important for the program to be able to resize the canvas during draw/runtime.

1 Like