Need help with Arrays

xb23

http://www.learningprocessing.com/examples/chapter-9/example-9-8/   

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

    void setup() {
      size(200,200);

      smooth();

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

    void draw() {
      background(255);

      // Shift array values
      for (int i = 0; i < xpos.length-1; i ++ ) {


        xpos[i] = xpos[i+1];
        ypos[i] = ypos[i+1];
      }

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

      // Draw everything
      for (int i = 0; i < xpos.length; i ++ ) {
         // Draw an ellipse for each element in the arrays. 
         // Color and size are tied to the loop's counter: i.
        noStroke();
        fill(255-i*5);
        ellipse(xpos[i],ypos[i],i,i);
      }
    }

I am a complete beginner in Processing & Programming in general.

Okay, here is what I understood from this code, as I'm not here to copy & paste, and expect someone to explain everything from top to bottom without making an effort to try to understand it myself:

• The declaration and creation of xpos & ypos arrays, of length (size) 50 (i.e running from index 0 -> 49)

• Size of display window is set to 200 by 200 (w x h)

• All the elements, from xpos[0] -> xpos[49] & ypos[0] -> ypos[49] are initialised to zero. So xpos[0] = 0; xpos[30] = 0 etc

• I may have understood the next part incorrectly, but basically all the elements, from index 0 -> 48 (xpos[0] -> xpos[48]), their values are shifted 1 place. So xpos[0] = xpos[1], xpos[29] = xpos[30] etc

• At xpos[49] & ypos[49], mouseX and mouseY values are placed there, respectively. The rest of the elements value is 0.

• This is another part I'm unsure of too. Isn't the first ellipse, drawn at ellipse(xpos[0],ypos[0],0,0)? i.e ellipse(0,0,0,0)? With a fill color of (255)? If it is, as the counter increases, until xpos[49], isn't xpos[49] = mouseX? If so, and when I click play, is the ellipse at ellipse(0,0,49,49)? As xpos[49] = mouseX, and since we haven't done anything yet, mouseX = 0? And mouseY = 0.

• If that's all correctly understand, could someone explain the logic of this program, which I'm struggling to comprehend.

• Basically, at the start, all the elements in the xpos & ypos arrays are set to 0, with the exception of the last element [49], set to mouseX/mouseY. Since mouseX & mouseY both equal to 0 at the start, after the 3rd for loop finishes running, we are left with ellipse(xpos[49] = 0, ypos[49] = 0, 49,49) and fill (255-495) = 10. So a black square at (0,0), of width & height of 49.

• Then draw() runs again. Overall I'm struggling to understand this program.

GoToLoop

All the elements, from xpos[0] -> xpos[49] & ypos[0] -> ypos[49] are initialised to zero. So xpos[0] = 0; xpos[30] = 0 etc.

Lines #11 to #14 are redundant! Since the int primitive data-type has initial value = 0!

At xpos[49] & ypos[49], mouseX and mouseY values are placed there, respectively. The rest of the elements value is 0.

Basically, all values are left-shifted 1 index slot @ 60 FPS. Even though they start @ 0, they fill it up fast w/ mouse coordinates!

Some similar online examples for you to peruse: >:D<

studio.processingtogether.com/sp/pad/export/ro.9GTDpA6dp4tH1/latest
studio.processingtogether.com/sp/pad/export/ro.90vdKMfkiO$zf/latest

xb23

Lines #11 to #14 are redundant! Since the int primitive data-type has initial value = 0!

• Why was it included in the code by the author?

• It is unnecessary to initialise the elements to zero, because by default, int primitive data type have a value of 0, without being initialized? So we don't need to initialise int data because it's already 0 by default without us doing anything?

  Basically, all values are left-shifted 1 index slot @ 60 FPS. Even though they start @ 0, they fill it up fast w/ mouse coordinates!

• Each single frame, which is 1 run through draw(), the values shift 1 place to the left?

Some similar online examples for you to peruse:

Links not working, but thanks.

GoToLoop

Why was it included in the code by the author?

Either he/she simply didn't know that or wanted to highlight the importance of placing an initial value,
even though it's just a redundant 0!

So we don't need to initialize int data 'cause it's already 0 by default without us doing anything?

That is only true for structures like array slots & for field variables.
Local variables still need an explicit initial value before their usage!
Also notice that non-primitive types start out as null! So pay special attention to them! :P

Each single frame, which is 1 run through draw(), the values shift 1 place to the left?

That's the idea! :>

Links not working, but thanks.

I believe it was temporarily offline! It's online right now though!
Either way, since they're not big, I'm gonna post those 2 codes here: (*)

---

/**
 * Chase-Shadow Circles (v3.2)
 * Regular Array Edition (2013/Feb)
 *
 * Modded by GoToLoop (2013/Nov)
 *
 * forum.processing.org/topic/newbie-question-understandig-problems-with-arrays
 * studio.processingtogether.com/sp/pad/export/ro.9GTDpA6dp4tH1/latest
 * www.creativecoding.org/lesson/basics/processing/arrays
 */

final static int NUM = 0100, NEWEST = NUM - 1;
final int[] x = new int[NUM], y = new int[NUM];

void setup() {
  size(1000, 400);
  frameRate(60);

  smooth();
  noStroke();
  noCursor();
  ellipseMode(CENTER);

  fill(0100<<030);

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

  for ( int i = NUM; i-- != 0;
    x[i] = mouseX, y[i] = mouseY );
}

void draw() {
  background(-1);

  for ( int i = 0; i != NEWEST;
    ellipse(x[i] = x[i + 1], y[i] = y[i + 1], i, i++) );

  ellipse(x[NEWEST] = mouseX, y[NEWEST] = mouseY, NEWEST, NEWEST);
}

---

/**
 * Follow My Lead Closely! (v3.0)
 * by  jordanorelli (2014/Feb)
 * mod GoToLoop
 *
 * forum.processing.org/two/discussion/2846/my-first-code
 *
 * studio.processingtogether.com/sp/pad/export/ro.90vdKMfkiO$zf/latest
 */

static final int DIM = 050, GAP = 10;
final PVector[] hist = new PVector[GAP];

static final color LEADER_C = #B22222, CHASER_C = #1874CD;

int idx;

void setup() {
  size(600, 600);
  frameRate(60);
  smooth(4);
  noStroke();
  ellipseMode(CENTER);

  for (int i = GAP; i-- != 0; hist[i] = new PVector(mouseX, mouseY));
}

void draw() {
  background(-1);

  hist[idx].set(mouseX, mouseY);

  final PVector old = hist[idx = (idx + 1) % GAP];

  fill(CHASER_C);
  ellipse(old.x, old.y, DIM, DIM);

  fill(LEADER_C);
  ellipse(mouseX, mouseY, DIM, DIM);
}

---

xb23

Thanks, will try out those examples, although look quite beyond me at this stage!

xb23

Any site for a beginner, where I can practice with Arrays & processing examples/exercises?

Currently I am working on http://www.learningprocessing.com/examples/ and exercises.

Any others?

What is the best way to learn Processing? Maybe the method I'm using isn't the best! Currently I'm reading through the Learning Processing book (http://www.learningprocessing.com/buy-the-book/), chapter by chapter, and then doing the examples and exercises on the site.

Any suggestions would be appreciated!

GoToLoop

What about YouTube again?

xb23

Preferably something that I can interact with. Like http://www.w3schools.com/ , which I used for html/css/javascript.

Alastair

http://www.funprogramming.org/

xb23

Thanks.