Delete leftmost circle on the canvas

Processing Beginners
1

I was able to write a code that draws different circles on a canvas and i need to find a way i could delete the leftmost circle when any key is pressed. i’ve been at this for hours and i feel like i am close to the answer. i am most klikely going to look for the array whenever a key is pressed and delete the array position.

float colour = random(256);
final int DIAM = 20;
final int MAX_NUM = 1000;
int numPointsX = 0;
int numPointsY = 0;
int [] xPos = new int[MAX_NUM];
int [] yPos = new int [MAX_NUM];
boolean start = false;


void setup() {
  size (500, 500);
}

void draw() {
  background(150);
  fill(random(256), random(256), random(256));
  for (int i=0; i<numPointsX; i++) {     
    circle(xPos[i], yPos[i], DIAM);
  }


  println(xPos[0]);
}

void mouseClicked() {
  insertXandY();
}

void insertXandY() {
  int x = mouseX;
  int y = mouseY;


  xPos[numPointsX] = x;
  yPos[numPointsY] = y;

  numPointsX += 1;
  numPointsY += 1;
  start = true;
}









void printArrays() {
  println("X Positions");
  for (int i = 0; i < 20; i++) {
    println("\t" + xPos[i]);
  }
}

void keyPressed() {
  if (key == 'p') {
    printArrays();
  }
}
2

Hi @processingboy1, I tried your code but it doesn’t have ‘circle’ defined. I think you must have a class in another tab. You mentioned ‘canvas’ but in Java Processing there isn’t a ‘canvas’ where there is a createCanvas in P5.js. Your sketch draws all the circles on each draw(), so maybe you want to skip drawing the leftmost one? So you’d have to run through the array, find the leftmost, and not draw it. Along with your arrays of xPos and yPos you could have an array of booleans for visible/not on each circle.

1 Like
3

Good answer here!

Let me add some ideas.

these two arrays are parallel.

You could add a 3rd array: boolean[] isAlive = new boolean [MAX_NUM]; that is initially true for all (init it in setup() in a for-loop).

When you display the circles, add a line of code to check whether the circle is alive:

  for (int i=0; i<numPointsX; i++) {     
    if(isAlive[i])
         circle(xPos[i], yPos[i], DIAM);
  }

Kill a circle

Now, when you want to check for the leftmost circle and you found it,
set isAlive[resultIndex] = false;

  • Then the circle won’t show anymore (when your first line in draw() is background()).
  • The circle is technically still there though.

How to find the leftmost circle

you can start the search when for example space bar or any key (as you said) has been pressed.

(it can’t be done throughout because the first (or every) circle is the leftmost circle and will be killed immediately)

(we can’t kill throughout the search because we first have to finish every comparison to see which circle is leftmost so we store the results)

  // search leftmost circle
  float leftmostX = width+100; // store the leftmost value (must be very big initially)
  int resultIndex = -1;     // and its index (-1 says: not a valid result)

  for (int i=0; i<numPointsX; i++) { 
    // Is it smaller?     
    if(xPos[i]<leftmostX) {  // compare to the value that is up to now the leftmost value
       // it is smaller (more left) so it is better
       leftmostX=xPos[i];   // we set the new best value
       resultIndex=i;   // and store the new best index
    }//if
  }//for

  // kill it 
  if (resultIndex>-1)
      isAlive[resultIndex] = false;

I hope this helps.

Chrisir