int size = 60;       // Width of the shape
float xpos, ypos;    // Starting position of shape   

float xspeed = 2.8;  // Speed of the shape
float yspeed = 2.2;  // Speed of the shape

int xdirection = 1;  // Left or Right
int ydirection = 1;  // Top to Bottom

void setup()
{
  size(640, 200); //화면 크기
  noStroke(); //stroke(경계선)을사용하지 않음
  frameRate(30); //초당 표시되는 프레임 수를 지정해주는 함수. 초당 30프레임
  smooth(); //도형의 끝 부분을 부드럽게(전문용어로 "앤티-앨리어싱"이라고 한다) 그려준다.
  // Set the starting position of the shape
  xpos = width/2;
  ypos = height/2;
}

void draw() //함수(function)의 리턴값이 없다는 것을 가리키는 키워드.
{
  background(102); //프로세싱 윈도우 배경의 색상을 설정한다.
 
  // Update the position of the shape
  xpos = xpos + ( xspeed * xdirection );
  ypos = ypos + ( yspeed * ydirection );
 
  // Test to see if the shape exceeds the boundaries of the screen
  // If it does, reverse its direction by multiplying by -1
  if (xpos > width-size || xpos < 0) {
    xdirection *= -1;
  }
  if (ypos > height-size || ypos < 0) {
    ydirection *= -1;
  } //width 와 heigth 가 -1 값이 되면 튕겨진다.

  // Draw the shape
  ellipse(xpos+size/2, ypos+size/2, size, size); //타원 또는 원을 그린다.
   //타원의 가로길이(width)와 세로길이(height)가 같으면 이를 원이라고 한다.
}

일단 레퍼런스에 있는 소스를 분석해 보았다. 제일 중요한건 마지막에 있는 계산식인거 같다. 잘은 모르겠지만 xdrection 과 ydrection 값이 -1 됨으로 해서 화면끝에 부딪치면 다시 방향이 변하는거 같다. 이들 값이 바꾸어버리면 화면 밖으로 공이 나가버린다.

쩝... 혹 processing 잘 아시는 분들 있으면 많은 도움을 바랍니다. 현재 충돌부분에 관한걸 학습 중입니다^^;

핑퐁게임이나 에어하키를 만들수 있는 소스를 분석하였다. 물론 주석만 붙였음.. 난중에 써먹어보장

// Global variables for the ball
float ball_x;
float ball_y;
float ball_dir = 1;
float ball_size = 15;  // Radius
float dy = 0;  // Direction 원 방위각

// Global variables for the paddle
int paddle_width = 10; //움직이는 사각형가로
int paddle_height = 60; //움직이는 사각형세로

int dist_wall = 15; //벽과 사각형간의 간격

void setup()
{
  size(640, 360);
  rectMode(RADIUS); //rectMode() 함수를 사용해서 직사각형의 시작점을 결정할 수 있다.
  ellipseMode(RADIUS); //함수로 타원의 시작점을 변경할 수 있다.
  noStroke(); //스트로크(경계선)를 사용하지 않도록 설정한다.
  smooth(); //앤티앨리어싱을 함
  ball_y = height/2;
  ball_x = 1;
}

void draw()
{
  background(51);
 
  ball_x += ball_dir * 1.0;
  ball_y += dy;
  if(ball_x > width+ball_size) {
    ball_x = -width/2 - ball_size; //width 는디스플레이 윈도우의 가로길이 값이 담겨있는 시스템 변수.
    //즉, size() 함수의 첫번째 매개변수의 값이 입력되게 된다. 예를 들어 size(320, 240) 라고 호출한 경우, width 변수에 320이 입력된다.
    ball_y = random(0, height); //height는 디스플레이 윈도우의 세로길이 값이 담겨있는 시스템 변수.
   // 즉, size() 함수의 두번째 매개변수 값이 입력된다. 예를 들어 size(320, 240) 라고 호출한 경우, height 변수에 240이 입력된다.
    dy = 0;
  }
 
  // Constrain paddle to screen
  float paddle_y = constrain(mouseY, paddle_height, height-paddle_height); //특정 값이 최소값과 최대값을 넘지 않도록 강제한다.
//mouseY 시스템 변수로, 마우스의 현재 수직 좌표값이 담겨있다.
  // Test to see if the ball is touching the paddle
  float py = width-dist_wall-paddle_width-ball_size;
  if(ball_x == py
     && ball_y > paddle_y - paddle_height - ball_size //&&는 2개의 표현식을 비교해서 둘 다 true로 판명될 경우에만 true를 리턴한다.
     // 한 개의 표현식만이라도 false일 경우엔 false를 리턴한다. 다음에 가능한 모든 경우를 설명하였다.
     && ball_y < paddle_y + paddle_height + ball_size) {
    ball_dir *= -1;
    if(mouseY != pmouseY) {
      dy = (mouseY-pmouseY)/2.0;
      if(dy >  5) { dy =  5; }
      if(dy < -5) { dy = -5; }
    }
  }
 
  // If ball hits paddle or back wall, reverse direction
  if(ball_x < ball_size && ball_dir == -1) {
    ball_dir *= -1;
  }
 
  // If the ball is touching top or bottom edge, reverse direction
  if(ball_y > height-ball_size) {
    dy = dy * -1;
  }
  if(ball_y < ball_size) {
    dy = dy * -1;
  }

  // Draw ball
  fill(255);
  //도형 안에 채울(fill) 색상을 지정한다.
  //예를 들어, fill(204, 102, 0)라고 호출하면, 주황색으로 채워진 사각형을 그린다.
  //colorMode() 함수를 사용해서 RGB 또는 HSB 값으로 색상을 지정할 수 있다.
  //기본값은 RGB이며, 범위는 각각 0부터 255까지이다.
  //fill() 함수에 인자를 1개만 주면, 무채색을 지정할 수 있고,
  //3개의 인자를 입력하면 컬러로 지정할 수 있다.
  //그리고 4번째 인자를 입력해서 알파값을 적용할 수도 있다.
  ellipse(ball_x, ball_y, ball_size, ball_size);
  // 타원 또는 원을 그린다.
  //타원의 가로길이(width)와 세로길이(height)가 같으면 이를 원이라고 한다.
  //처음 두개의 인자에는 위치를 지정하고, 세번째는 가로길이, 네번째는 세로길이를 지정한다.
  //시작점은 ellipseMode() 함수를 사용해서 변경할 수 있다.
 
  // Draw the paddle
  fill(153);
  rect(width-dist_wall, paddle_y, paddle_width, paddle_height);
 //화면상에 직사각형을 그린다.
 //직사각형은 변이 4개이고, 각 모서리는 90도인 도형이다.
 //처음 두 인자에는 위치를 지정하고, 세번째와 네번째는 각각 가로길이(width), 세로길이(height)를 지정한다.
 //rectMode() 함수를 사용하면 위치지정모드를 바꿀 수 있다. 
}