Why does the square stay in the previous position

Processing Coding Questions
1

when the square moves it also stays in the previous position. noStroke(); dit not solve it

PVector pos1;
PVector pos2;
PVector pos3;
PVector pos4;
PVector pos5;
PVector pos6;
PVector pos7;
PVector pos8;
PVector pos9;

int cur= 1;

void setup() {
  
  pos1= new PVector(0, 0);
  pos2= new PVector(0, 0);
  pos3= new PVector(0, 0);
  pos4= new PVector(0, 0);
  pos5= new PVector(0, 0);
  pos6= new PVector(0, 0);
  pos7= new PVector(0, 0);
  pos8= new PVector(0, 0);
  pos9= new PVector(0, 0);
  
  size(400, 400);
    strokeWeight(10);
  noFill();
  rect(0, 0, 100, 100);
  rect(100, 0, 100, 100);
  rect(200, 0, 100, 100);
  rect(300, 0, 100, 100);

  rect(0, 100, 100, 100);
  rect(100, 100, 100, 100);
  rect(200, 100, 100, 100);
  rect(300, 100, 100, 100);

  rect(0, 200, 100, 100);
  rect(100, 200, 100, 100);
  rect(200, 200, 100, 100);
  rect(300, 200, 100, 100);

  rect(0, 300, 100, 100);
  rect(100, 300, 100, 100);
  rect(200, 300, 100, 100);
  rect(300, 300, 100, 100);
}
void draw() {
  
    if (frameCount%120 == 0 && cur==1) {
    pos1.y=pos1.y+100;
  }
  
  fill(255);
 rect(pos1.x,pos1.y,100,100);
 rect(pos2.x,pos2.y,100,100);
 rect(pos3.x,pos3.y,100,100);
 rect(pos4.x,pos4.y,100,100);
 rect(pos5.x,pos5.y,100,100);
 rect(pos6.x,pos6.y,100,100);
 rect(pos7.x,pos7.y,100,100);
 rect(pos8.x,pos8.y,100,100);
 rect(pos9.x,pos9.y,100,100);
}
2

One square moves, but the other 8 do not. Those other 8 squares look the same as the first one.

You should also call background(0); at the start fo draw() so you don’t get confused by previously drawn frames.

3

after the second movement this still happens though, there should’nt be any squares there

4

Before you try doing NINE things, just try doing ONE thing.

Have ONE square.

PVector pos1;

void setup() {  
  size(400, 400);
  pos1 = new PVector(0, 0);  
}

void draw() {
  background(0);
  // Move the square over every 120 frames.
  if (frameCount%120 == 0) {
    pos1.y=pos1.y+100;
  }  

  // Draw the square at the given positon.
  strokeWeight(10);
  noFill();
  fill(255);
  rect(pos1.x,pos1.y,100,100);
}

The background(0); call in draw() is VERY important. It stops previously drawn frames from appearing again. The canvas is not cleared for you automatically! You should redraw everything in your canvas every frame. Do not rely on previously drawn elements - as you yourself have experienced, this can be quite confusing!

1 Like
5

thank you,
how can I check if there is a square below the one moving at the moment, and stop it from moving if this is the case?

PVector pos1;
PVector pos2;
PVector pos3;
PVector pos4;
PVector pos5;
PVector pos6;
PVector pos7;
PVector pos8;
PVector pos9;

boolean al1 = true;
boolean al2 = false;
boolean al3 = false;
boolean al4 = false;
boolean al5 = false;
boolean al6 = false;
boolean al7 = false;
boolean al8 = false;
boolean al9  = false;

color white= color(255,255,255);

void setup() {  
  size(400, 400);
  pos1= new PVector(0, 0);  
  pos2= new PVector(0, 0);
  pos3= new PVector(0, 0);
  pos4= new PVector(0, 0);
  pos5= new PVector(0, 0);
  pos6= new PVector(0, 0);
  pos7= new PVector(0, 0);
  pos8= new PVector(0, 0);
  pos9= new PVector(0, 0);
}

void draw() {
  background(172);

  if (pos1.y==300 && pos1.x != 300) {
    al1=false;
    al2=true;
  }
  if (pos2.y==300 && pos2.x != 300) {
    al2=false;
    al3=true;
  }
  if (pos3.y==300 && pos3.x != 300) {
    al3=false;
    al4=true;
  }
  if (pos4.y==300 && pos4.x != 300) {
    al4=false;
    al5=true;
  }
  if (pos5.y==300 && pos5.x != 300) {
    al5=false;
    al6=true;
  }
  if (pos6.y==300 && pos6.x != 300) {
    al6=false;
    al7=true;
  }
  if (pos7.y==300 && pos7.x != 300) {
    al7=false;
    al8=true;
  }
  if (pos8.y==300 && pos8.x != 300) {
    al8=false;
    al9=true;
  }
    if (pos9.y==300 && pos9.x != 300) {
    al8=false;
    al2=true;
  }
  
  
  


  // Move the square over ever 120 frames.
  if (frameCount%120 == 0&&al1== true) {
    pos1.y=pos1.y+100;
  }  
  if (frameCount%120 == 0&&al2==true) {
    pos2.y=pos2.y+100;
  }  
  if (frameCount%120 == 0&&al3==true) {
    pos3.y=pos3.y+100;
  }  
  if (frameCount%120 == 0&&al4==true) {
    pos4.y=pos4.y+100;
  }  
  if (frameCount%120 == 0&&al5==true) {
    pos5.y=pos5.y+100;
  }  
  if (frameCount%120 == 0&&al6==true) {
    pos6.y=pos6.y+100;
  }  
  if (frameCount%120 == 0&&al7==true) {
    pos7.y=pos7.y+100;
  }  
  if (frameCount%120 == 0&&al8==true) {
    pos8.y=pos8.y+100;
  }  
  if (frameCount%120 == 0&&al9==true) {
    pos9.y=pos9.y+100;
  }  


  //draw the square at the given position.
  fill(255);

  rect(pos1.x, pos1.y, 100, 100);
  if (al2==true) {
    rect(pos2.x, pos2.y, 100, 100);
  }
  if (al3==true) {
    rect(pos3.x, pos3.y, 100, 100);
  }
  if (al4==true) {
    rect(pos4.x, pos4.y, 100, 100);
  }
  if (al5==true) {
    rect(pos5.x, pos5.y, 100, 100);
  }
  if (al6==true) {
    rect(pos6.x, pos6.y, 100, 100);
  }
  if (al7==true) {
    rect(pos7.x, pos7.y, 100, 100);
  }
  if (al8==true) {
    rect(pos8.x, pos8.y, 100, 100);
  }
  if (al9==true) {
    rect(pos9.x, pos9.y, 100, 100);
  }
  // Draw the grid.
  strokeWeight(10);
  noFill();

  rect(0, 0, 100, 100);
  rect(100, 0, 100, 100);
  rect(200, 0, 100, 100);
  rect(300, 0, 100, 100);

  rect(0, 100, 100, 100);
  rect(100, 100, 100, 100);
  rect(200, 100, 100, 100);
  rect(300, 100, 100, 100);

  rect(0, 200, 100, 100);
  rect(100, 200, 100, 100);
  rect(200, 200, 100, 100);
  rect(300, 200, 100, 100);

  rect(0, 300, 100, 100);
  rect(100, 300, 100, 100);
  rect(200, 300, 100, 100);
  rect(300, 300, 100, 100);
}