// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 9-8: A snake following the mouse

// Declare two arrays with 50 elements.
int[] xpos = new int[50]; 
int[] ypos = new int[50];

void setup() {
  // Initialize all elements of each array to zero.
  for (int i = 0; i < xpos.length; i ++ ) {
    xpos[i] = 0; 
    ypos[i] = 0;

void draw() {
  // Shift array values
  for (int i = 0; i < xpos.length-1; i ++ ) {
    // Shift all elements down one spot. 
    // xpos[0] = xpos[1], xpos[1] = xpos = [2], and so on. Stop at the second to last element.
    xpos[i] = xpos[i+1];
    ypos[i] = ypos[i+1];
  // New location
  xpos[xpos.length-1] = mouseX; // Update the last spot in the array with the mouse location.
  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.
  • mauritus

    where did you declare xpos.length?
    what is xpos.length?
    you should explain your programs better.

  • http://www.learningprocessing.com Daniel Shiffman

    length is a “property” of an array so you can always access it with the dot syntax. See:


  • volkan ongun

    you should not copy paste everything. google it better

  • Anne

    how can i add interactivity to this “snake?”

  • Arnau Mas

    can you merge the value shifting and the drawing into one single loop?

  • shiffman

    indeed though note how the shifting has to skip the last element.

  • Arnau Mas

    and could you shift the array the other way, that is array[i] = array[i-1]. Is there a particular reason you do it from last to first (i = i+1) rather than first to last (i = i-1)’

  • shiffman

    Just style I suppose, it doesn’t matter whether you use the array front to back or vice versa.

  • Arnau Mas

    Alright, thanks!

  • Adrien

    Sometimes mistakes make interessting results : if forget to reinitiate background inside draw(), your snake will looks like an infinite 3D worm… :

    int [] xpos = new int [50];

    int [] ypos = new int [50];

    void setup () {

    size (400, 400);

    background (255);


    for (int i =0; i<xpos.length; i++) {

    xpos[i] =0;




    void draw() {

    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 [ypos.length-1]=mouseY;

    for (int i= 0; i<xpos.length; i++) {


    fill (255-i*5);

    ellipse (xpos[i], ypos[i], i, i);



    void mousePressed (){

    background (255);


  • Ibrahim

    I’m struggling a little with understanding why things are happening the way they are. Here is what I understood so far:

    1st frame (1st run through draw()):

    Background (255) -xpos[0] = 0 through to xpos[49] = 0. Same with ypos[0] -> ypos[49] = 0

    Shifting array values 1 place to the left. – All the array elements still equal to 0.

    xpos[49] = mouseX (at this point, mouseX = 0)

    ypos[49] = mouseY (at this point, mouseY = 0)

    50 ellipses are drawn. We only see the last ellipse, ellipse(xpos[49],ypos[49],49,49), because the last ellipse is drawn over them all.

    2nd frame (second run through draw()):

    Same results as the first frame, if mouse’s position is not moved. Because all the elements remain still 0, and shifting values to the left doesn’t change a thing.

    — Moving mouse position to (100,100) —–

    3rd frame:

    All the elements are 0, with the exception xpos[48]/xpos[49] & ypos[48]/ypos[49] which all equal 100 each.

    50 ellipses are drawn. We only see the last ellipse, ellipse(xpos[49],ypos[49],49,49), because the last ellipse is drawn over them all.

    Running it at frameRate(1), I don’t understand why the ellipses decrease in size and color gradually, until they disappear. Anyone care to explain?