2d Array Movement problem

Programming Questions

bittt0r

in Programming Questions • 3 years ago

Hi All,

I'm working with 2d matrix movement and I haven't been able to fix a problem, the idea is to move some "dots" manipulating a 10x10 matrix.

For the moment I'm working with a 200x200 array (I have to fix it) but I have other "newbie" problems:

1. When the dots start to move the bottom row is not included, and I can't get why...

2. The movement doesn't start with the first click of the mouse, only with the second, and that brings me other further problems when extending the code.

3. The idea is to do one movement per click, but the loop is so quick that with every click the dots move 3 or 4 spaces.

Here is a functional short extract:

int[][] dotMatrix;
void setup() {
size(200,200);
background(200);
noStroke();
smooth();
dotMatrix = new int[200][200]; // matrix size (to fix)
dotMatrix[70][70] = 1; // feed matrix
dotMatrix[90][70] = 1;
dotMatrix[70][90] = 1;
matrix();
}
void matrix() { // draw main matrix
for (int i = 10; i <= 200; i = i+20) {
for (int j = 10; j <= 200; j = j+20) {
ellipse (i, j, 18, 18);
}
}
}
void transpUp() { // movement operation
int translator = 20;
for (int o = 10; o <= 190; o = o+translator) {
for (int p = 10; p <= 190; p = p+translator) {
int control = p;
if (dotMatrix[o][p] == 1) {
fill(255);
ellipse(o,p,18,18);
if (control <= 10) {
control = control + 200;
}
int pp = control-translator;
dotMatrix[o][pp] = 1;
ellipse(o,p,18,18);
dotMatrix[o][p] = 0;
}
}
}
}
void draw(){
for (int i = 10; i <= 190; i = i+20) {
for (int j = 10; j <= 190; j = j+20) {
if (dotMatrix[i][j] == 1) {
fill(200);
ellipse(i,j,18,18);
} else {
dotMatrix[i][j] = 0;
}
}
}
if ((mousePressed)) { // active movement with mouse
transpUp();
}
}

Any help or comment is welcome !! thanks a lot.

Replies(13)

guy_yitzh..

Re: 2d Array Movement problem

3 years ago

Two comments:

* If you want the movement to happen once per mouse click you should probably put it in a mouseReleased() method:

void mouseReleased() {
transpUp();
}

otherwise transpUp() is called every time the draw function is called and the mouse button is pressed (which is why you see it happening 3 or 4 times quickly)

* You should probably separate your drawing code and matrix movement code. Have transpUp() simply prepare the matrix for drawing (i.e. only set the relevant values to 0 or 1), and have draw() only go over the matrix and draw the correct ellipses. In other words, don't set matrix values in draw(), and don't draw in transpUp().

bittt0r

Re: Re: 2d Array Movement problem

3 years ago

Thanks a lot, the mouseReleased() was just what I needed. And separating the codes is better. That definitely fixed my problems 2 and 3.

Any idea on why the bottom row is not included in the loop? When the figure reaches the upper limit and restarts from the lower part the draw starts in the second row... that's my main brainteaser now.

guy_yitzh..

Re: 2d Array Movement problem

3 years ago

One more comment - in your draw method, call eliipse() for both the full values (value == 1) and the empty (value == 0), but with a different fill color. Otherwise you constantly add new full values, without erasing the newly emptied values.

bittt0r

Re: Re: 2d Array Movement problem

3 years ago

Thanks, I'll fix it.

bittt0r

Re: Re: 2d Array Movement problem

3 years ago

wow... that made a big difference, thanks a lot

bblochl

Re: 2d Array Movement problem

3 years ago

Obviously you are not familiar with loops. I would recommend you first to do some training and then begin to build cathedrals.

For a programing professional the debugging abilities of processing are close to nothing. Some hints for debugging your code. Do some control outputs, may be like this:

void transpUp() {                                                   // movement operation
       int translator = 20;
       for (int o = 10; o <= 190; o = o+translator) {
         for (int p = 10; p <= 190; p = p+translator) {
              int control = p;
              if (dotMatrix[o][p] == 1) {
                 fill(255);
                 ellipse(o,p,18,18);
                 if (control <= 10) {
                     control = control + 200;
                 }
                 int pp = control-translator;
                 dotMatrix[o][pp] = 1;
                 ellipse(o,p,18,18);
                 dotMatrix[o][p] = 0;
                 println("inner loop o = "+ o + ", p = " + p);

             }
              println("outer loop p = " + p);
         }
         println();
       }

}

Then you get the following output in the console window:

outer loop p = 10
outer loop p = 30
outer loop p = 50
outer loop p = 70
outer loop p = 90
outer loop p = 110
outer loop p = 130
outer loop p = 150
outer loop p = 170
outer loop p = 190

outer loop p = 10
outer loop p = 30
outer loop p = 50
outer loop p = 70
outer loop p = 90
outer loop p = 110
outer loop p = 130
outer loop p = 150
outer loop p = 170
outer loop p = 190

outer loop p = 10
outer loop p = 30
outer loop p = 50
outer loop p = 70
outer loop p = 90
outer loop p = 110
outer loop p = 130
outer loop p = 150
outer loop p = 170
outer loop p = 190

outer loop p = 10
outer loop p = 30
outer loop p = 50
inner loop o = 70, p = 70
outer loop p = 70
inner loop o = 70, p = 90
outer loop p = 90
outer loop p = 110
outer loop p = 130
outer loop p = 150
outer loop p = 170
outer loop p = 190

outer loop p = 10
outer loop p = 30
outer loop p = 50
inner loop o = 90, p = 70
outer loop p = 70
outer loop p = 90
outer loop p = 110
outer loop p = 130
outer loop p = 150
outer loop p = 170
outer loop p = 190

outer loop p = 10
outer loop p = 30
outer loop p = 50
outer loop p = 70
outer loop p = 90
outer loop p = 110
outer loop p = 130
outer loop p = 150
outer loop p = 170
outer loop p = 190

outer loop p = 10
outer loop p = 30
outer loop p = 50
outer loop p = 70
outer loop p = 90
outer loop p = 110
outer loop p = 130
outer loop p = 150
outer loop p = 170
outer loop p = 190

outer loop p = 10
outer loop p = 30
outer loop p = 50
outer loop p = 70
outer loop p = 90
outer loop p = 110
outer loop p = 130
outer loop p = 150
outer loop p = 170
outer loop p = 190

outer loop p = 10
outer loop p = 30
outer loop p = 50
outer loop p = 70
outer loop p = 90
outer loop p = 110
outer loop p = 130
outer loop p = 150
outer loop p = 170
outer loop p = 190

outer loop p = 10
outer loop p = 30
outer loop p = 50
outer loop p = 70
outer loop p = 90
outer loop p = 110
outer loop p = 130
outer loop p = 150
outer loop p = 170
outer loop p = 190

Now you can fiddle out, if that is what you expected. Clearly not! Think about your loop construction. I would check the if's in the inner loop as well. But that is your code and your bussiness.

Good luck!

bittt0r

Re: Re: 2d Array Movement problem

3 years ago

Thanks, nice debugging tip.

guy_yitzh..

Re: 2d Array Movement problem

3 years ago

regarding the bottom row - it will be easier to debug if you post your current code

bittt0r

Re: Re: 2d Array Movement problem

3 years ago

Here is a fixed sample (my main code is a buggy "cathedral"), if anyone can help me to figure out why the bottom row is missing it would be great.

What I've tried was to increase the factor of line 32 from 200 to 220 (after increasing the array size also) but the figure disappears... I don't get why

int[][] dotMatrix;
void setup() {
size(200,200);
background(200);
noStroke();
smooth();
dotMatrix = new int[200][200]; // matrix size (to fix)
dotMatrix[70][70] = 1; // feed matrix
dotMatrix[90][70] = 1;
dotMatrix[70][90] = 1;
matrix();
}
void matrix() { // draw main matrix
for (int i = 10; i <= 200; i = i+20) {
for (int j = 10; j <= 200; j = j+20) {
ellipse (i, j, 18, 18);
}
}
}
void transpUp() { // movement up operation
int translator = 20;
for (int o = 10; o <= 190; o = o+translator) {
for (int p = 10; p <= 190; p = p+translator) {
int control = p;
if (dotMatrix[o][p] == 1) {
fill(255);
ellipse(o,p,18,18);
if (control <= 10) {
control = control + 200;
}
int pp = control-translator;
dotMatrix[o][pp] = 1;
ellipse(o,p,18,18);
dotMatrix[o][p] = 0;
}
}
}
}
void figure() {
for (int i = 10; i <= 190; i = i+20) {
for (int j = 10; j <= 190; j = j+20) {
if (dotMatrix[i][j] == 1) {
fill(200);
ellipse(i,j,18,18);
}
}
}
}
void mouseReleased() { // active movement with mouse
transpUp();
}
void draw(){
figure();
}

bittt0r

Re: 2d Array Movement problem

3 years ago

fixed... was a problem of array size and number of iterations in the for loop... here is a working version:

(next step: reduce the loops)

THANKS EVERYONE !!

int[][] dotMatrix;
void setup() {
size(200,200);
background(200);
noStroke();
smooth();
dotMatrix = new int[250][250]; // matrix size (to fix)
dotMatrix[70][70] = 1; // feed matrix
dotMatrix[90][70] = 1;
dotMatrix[70][90] = 1;
matrix();
}
void matrix() { // draw main matrix
for (int i = 10; i <= 200; i = i+20) {
for (int j = 10; j <= 200; j = j+20) {
ellipse (i, j, 18, 18);
}
}
}
void transpUp() { // movement up operation
int translator = 20;
for (int o = 10; o <= 220; o = o+translator) {
for (int p = 10; p <= 220; p = p+translator) {
int control = p;
if (dotMatrix[o][p] == 1) {
fill(255);
ellipse(o,p,18,18);
if (control <= 10) {
control = control + 220;
}
int pp = control-translator;
dotMatrix[o][pp] = 1;
ellipse(o,p,18,18);
dotMatrix[o][p] = 0;
}
}
}
}
void figure() {
for (int i = 10; i <= 220; i = i+20) {
for (int j = 10; j <= 220; j = j+20) {
if (dotMatrix[i][j] == 1) {
fill(200);
ellipse(i,j,18,18);
}
}
}
}
void mouseReleased() { // active movement with mouse
transpUp();
}
void draw(){
figure();
}

bblochl

Re: 2d Array Movement problem

3 years ago

Just for fun I have a Q&D solution, not a cathedral, just a derelict barn. ;-)

May be you are/was keen to use an array? Arrays are not necessary to move some patterns, as I printed out in a posting back some time.

Your solution needs nearly 3 times more time than the barn-solution (2.915ms to 1.158 ms) Not so much for some fun code, an eternity for a professional code!

int xpos = 70;
int ypos= 70;

void setup() {
   size(200,200,P2D);
   background(200);
   noStroke();
   smooth();
   // fill the playing field
   for (int i = 10; i <= 200; i = i+20) {
     for (int j = 10; j <= 200; j = j+20) {
       ellipse (i, j, 18, 18);
     }
   }
   // startposition
   fill(100);
   ellipse(xpos,ypos,18,18);
   ellipse(xpos+20,ypos,18,18);
   ellipse(xpos,ypos+20,18,18);
     int start = millis();
   for (int i=0; i< 1000; i++) transpUp();
          int end = millis();
           println((end-start)/1000.0 + " milliseconds for each transUp()");
           // 1.158 ms compared to
           //for every mouseclick you need 100 loopcycles, 2.915 ms each mouseclick
}

void transpUp() { // movement up operation
   fill(255);
   ellipse(xpos,ypos,18,18);
   ellipse(xpos+20,ypos,18,18);
   ellipse(xpos,ypos+20,18,18);
   if (ypos <= 10) ypos =170;
   else ypos = ypos-20;;
   fill(100);
   ellipse(xpos,ypos,18,18);
   ellipse(xpos+20,ypos,18,18);
   ellipse(xpos,ypos+20,18,18);
}

void mouseReleased() {      // active movement with mouse
   transpUp();
}

void draw(){
   //figure();
}

The move from top to bottom would need some fine tuning in my and your solution as well.

Have fun!

bittt0r

Re: Re: 2d Array Movement problem

3 years ago

Thanks, it works great !!
cheers

bblochl

Re: 2d Array Movement problem

3 years ago

Sorry, I made a mistake.

The timing is

1.158 ms (my solution)
24.62 ms (the array-solution)

The array solution has the overhead to multiple look for some objects the position you know in advance!

Top Reply