newbie-question: understandig-problems with arrays

Programming Questions

9egenwind

newbie-question: understandig-problems with arrays

in Programming Questions • 7 months ago

hi,
I need your help again, I don't get the behaviour of arrays here.

int[] xpos = new int[70];
int[] ypos = new int[70];

void setup(){
size(500, 200);
smooth();
noStroke();
}

void draw(){
background (255);

for (int i=0; i< xpos.length - 1; i++) {
    xpos[i] = xpos[i + 1];
    ypos[i] = ypos[i + 1];
}

xpos[xpos.length - 1] = mouseX;
ypos[xpos.length - 1] = mouseY;

for (int i=0; i < xpos.length; i++) {
    fill (0, 0, 0, 25);
    ellipse (xpos[i], ypos[i], i / 0.75, i / 0.75);
}
}

source: http://www.creativecoding.org/lesson/basics/processing/arrays

I don't understand how the xpos and ypos-thing works.

for (int i=0; i< xpos.length - 1; i = i + 1) {
xpos[i] = xpos[i + 1];
ypos[i] = ypos[i + 1];
}

xpos[xpos.length - 1] = mouseX;
ypos[xpos.length - 1] = mouseY;

For my understanding this code effects:

xpos[0] = 1
xpos[1] = 2
xpos[2] = 3
xpos[3] = 4

[…]

xpos[29] = mouseX;

I cant comprehend why all my bubbles are following my mouse?
For me xpos[0-28] are static values and just the last value (29) is able
to follow my mouse.

Please help me, i struggle with this for hours. -,-

—

I'm also very thankful for correcting my english sentences, it's very appreciated!

Replies(2)

amnon.owed

Re: newbie-question: understandig-problems with arrays

7 months ago

The last value is literally the last value. The whole array before that are old values. The pre-last value in the array is literally the pre-last value of your mouse. The first spot in the array [0] is the oldest value in memory from that much draw() loops ago. On each draw() loop each value is copied one spot down in the array, except the value from the first spot [0] which is lost! Then a new value is added at the end. And so it continues on each draw() loop. So what you are seeing is that last position and all previous positions with a history the size of your array. Visually this looks like the bubbles are following your mouse. But actually you're just looking at the past positions of your mouse.

I've always found ArrayList's (or other specific type of Lists) much more convenient. You can do the same thing with just two lines and you don't have to manually move everything one spot in the array:

list.add(newValue); // add value at the end
list.remove(0); // remove first/oldest value

GoToLoop

Re: newbie-question: understandig-problems with arrays

7 months ago

Here's a tweaked version of mine:

/**
 * Chase-Shadow Circles
 * Regular Array Edition
 *
 * http://forum.processing.org/topic/newbie-question-understandig-problems-with-arrays
 * http://studio.processingtogether.com/sp/pad/export/ro.9GTDpA6dp4tH1/latest
 * http://www.creativecoding.org/lesson/basics/processing/arrays
 */

//import java.util.*;

final static short numCircles = 0100, 
tailIdxCircle = numCircles - 1;

final static int[] 
xPos = new int[numCircles], 
yPos = new int[numCircles];

void setup() {
  size(1000, 400);
  frameRate(100);
  smooth();
  noStroke();
  fill(0, 0100);

  mouseX = width>>1;
  mouseY = height>>1;

  Arrays.fill(xPos, mouseX);
  Arrays.fill(yPos, mouseY);
}

void draw() {
  background (-1);

               

               for (int i=0; i<tailIdxCircle;) {
  xPos[i] = xPos[i + 1];
  yPos[i] = yPos[++i];
}

xPos[tailIdxCircle] = mouseX;
yPos[tailIdxCircle] = mouseY;

               
                
  
                for ( 
                int i=numCircles; i!=0; 
  
                ellipse(xPos[--i], yPos[i], i, i) );
}

Now, even though an ArrayList would be much more convenient, it is still as slow as the version w/ regular Arrays.
remove(0); which is removing the head 1st element, is the slowest thing you can do w/ an ArrayList!
The left-shifting of all the elements would be the same as the original code is doing!

Of course, this program runs fast enough. But there's a different type of Collection which is more adequate!
ArrayDeque can add/remove from its edges w/o incurring in position shifting!

Here's an example of doing a FIFO Queue type w/ an ArrayDeque instead of ArrayList or regular Arrays:

/**
 * Chase-Shadow Circles
 * ArrayDeque Edition
 *
 * http://forum.processing.org/topic/newbie-question-understandig-problems-with-arrays
 * http://www.creativecoding.org/lesson/basics/processing/arrays
 */

//import java.util.*;

final static short maxCircles = 0100;
final static Queue<Circle>
               
                 circles = 
                new ArrayDeque(maxCircles);


                boolean isFull;

                short numCircles, sz;


                void 
                setup() {
  
                size(1000, 400);
  
                frameRate(100);
  
                smooth();

  
                noStroke();
  
                fill(0, 0100);

  
                mouseX = 
                width>>1;
  
                mouseY = 
                height>>1;
}


                void 
                draw() {
  
                background (-1);

  addCircle();

  sz = 0;
  
                for (Circle c: circles)  c.display();
}


                void addCircle() {
  
                if (isFull)                            circles.remove();
  
                else 
                if (++numCircles == maxCircles)   isFull = 
                true;

  circles.
                add( 
                new Circle() );
}


                class Circle {
  
                final 
                short x, y;

  Circle() {
    x = (
                short) 
                mouseX;
    y = (
                short) 
                mouseY;
  }

  
                void display() {
    
                ellipse(x, y, sz, sz++);
  }
}

Top Reply