как использовать ArrayList в обработке?

Вы упомянули итерацию, которая смущает вас. Это простой цикл for. Если у вас возникли проблемы с их пониманием, они выглядят сложнее по сравнению с другими операторами, но это только потому, что цикл делает 3 вещи одновременно:

1. Инициализировать счетчик
2. Сравните текущее значение счетчика с пределом (логическое выражение)
3. Увеличивает счетчик

В вашем коде есть два цикла:

 for(int i = drawings.size()-1;i>0;i--)

а также

for(int i=0;i<drawings.size();i++)

Первый цикл считается в обратном порядке, поэтому:

1. счетчик инициализируется максимальным значением (i = drawings.size())
2. ограничение равно 1 (i>0)
3. счетчик уменьшается (i--) (или увеличивается на -1, если хотите)

drawings.size() просто извлекает размер списка массивов (аналогично свойству длины массива). Проще говоря, первый цикл начинается с последнего элемента, добавленного в список (самого последнего), чей индекс равен размеру списка -1, и он останавливается на 2-м элементе, чей индекс равен 1 (поскольку массивы/массивы списки начинают индексацию с 0).

Второй цикл проще, так как он считает от 0 до размера списка массива, в основном все элементы списка в том порядке, в котором они были сохранены (от самого старого к самому новому).

В первом цикле похоже, что вы сдвигаете все элементы, кроме первого, на один. Вы должны попробовать это так:

  for (int i = drawings.size()-1;i>0;i--) {
    Drawing current  = drawings.get(i);//store the current drawing
    Drawing previous = drawings.get(i-1);//store the previous drawing
    current  = previous;//point the current to the previous
  }

И вот ваш листинг кода с исправленными ошибками:

ArrayList <Drawing> drawings = new ArrayList <Drawing>();
color c = color(0,0,192);

void setup() {
  size(400, 400);
  background(255);
  colorMode(HSB);
}

void draw() {
}

void mouseDragged() {

  drawings.add(new Drawing(mouseX, mouseY));

  for (int i = drawings.size()-1;i>0;i--) {
    Drawing current  = drawings.get(i);//store the current drawing
    Drawing previous = drawings.get(i-1);//store the previous drawing
    current  = previous;//point the current to the previous
    //drawings.get(i) = drawing.get(i-1);
  }

  for (int i=0;i<drawings.size();i++) {
    fill(c, 100);
    drawings.get(i).display();
  }
}


class Drawing {
  float x, y, r;
  color c;

  Drawing(float ax, float ay) {
    x=ax;
    y=ay;
    r=random(2, 20);
    c=color(random(100, 200), 255, 255);
  }  

  void display() {
    fill(c, 100);
//    ellipse(drawing[i], r, r);
    ellipse(x,y,r,r);
  }
}

ОБНОВЛЕНИЕ

Из-за обратного цикла я предположил, что вам нужно сохранить список рисунков и сместить его, например:

ArrayList <Drawing> drawings = new ArrayList <Drawing>();

void setup() {
  size(400, 400);
  smooth();
  noStroke();
  colorMode(HSB);
}

void draw() {
  background(0,0,255);
  for (int i=0;i<drawings.size();i++){
    drawings.get(i).display();
  }
}

void mouseDragged() {

  for (int i = drawings.size()-1;i>0;i--) {
    drawings.get(i).copy(drawings.get(i-1));
  }
  drawings.add(0,new Drawing(mouseX, mouseY));

}


class Drawing {
  float x, y, r;
  color c;

  void copy(Drawing copyFrom){
    x = copyFrom.x;
    y = copyFrom.y;
    r = copyFrom.r;
    c = copyFrom.c;
  }

  Drawing(float ax, float ay) {
    x=ax;
    y=ay;
    r=random(2, 20);
    c=color(random(100, 200), 255, 255);
  }  

  void display() {
    fill(c, 100);
    ellipse(x,y,r,r);
  }
}

Если вы просто хотите нарисовать линию между объектами Drawing на основе расстояния, вы можете сделать это без обратного цикла:

ArrayList <Drawing> drawings = new ArrayList <Drawing>();

void setup() {
  size(400, 400);
  background(255);
  colorMode(HSB);
}

void draw() {
}

void mouseDragged() {

  drawings.add(new Drawing(mouseX, mouseY));

  for (int i=0;i<drawings.size();i++) {
    Drawing curr  = drawings.get(i);
    if(i > 0){                                    //if the current index is greather than 0
      Drawing prev = drawings.get(i-1);           //we can access the previous
      if(dist(curr.x,curr.y,prev.x,prev.y) < 20) {//check the distance, if it's within a certain threshold
        line(curr.x,curr.y,prev.x,prev.y);        //draw the line
      }
    }
    curr.display();
  }
}


class Drawing {
  float x, y, r;
  color c;

  Drawing(float ax, float ay) {
    x=ax;
    y=ay;
    r=random(2, 20);
    c=color(random(100, 200), 255, 255);
  }  

  void display() {
    fill(c, 100);
    ellipse(x,y,r,r);
  }
}

На самом деле, поскольку вы не очищаете фон, вам вообще не нужен список. Все, что вам нужно, это ссылка на предыдущий объект Drawing, чтобы вы могли проверить расстояние и нарисовать линию:

Drawing prev;//variable to store the previous drawing

void setup() {
  size(400, 400);
  background(255);
  colorMode(HSB);
}

void draw() {
}

void mouseDragged() {

  Drawing curr = new Drawing(mouseX, mouseY);//create a new drawing
  curr.display();//display it
  if(prev != null){//check if there was a previous one
    if(dist(curr.x,curr.y,prev.x,prev.y) < 20) {//if so, check if the distance is within the threshold
       line(curr.x,curr.y,prev.x,prev.y);//then simply draw a line
    }
  }
  prev = curr;

}


class Drawing {
  float x, y, r;
  color c;

  Drawing(float ax, float ay) {
    x=ax;
    y=ay;
    r=random(2, 20);
    c=color(random(100, 200), 255, 255);
  }  

  void display() {
    fill(c, 100);
    ellipse(x,y,r,r);
  }
}

ХТН