CONTROLS

g - resets draw by replacing background

h - adds ball with blue lines attached to grid

j - adds ball with red lines attached to grid

J - adds ball with random color 

b- freezes picture 

n- speeds up balls X2

CODE:

int size =60;
PShape soccer;
float xpose, ypose;
float xpose2,ypose2;

float xspeed = 12.7;
float yspeed = 10;
float xspeed2= 8;
float yspeed2= 5;

int xdirection = 1;
int ydirection = 1;
int xdirection2= -1;
int ydirection2= -1;

void setup(){
  size(750,750);
  soccer = loadShape("soccer.svg");
  background(0);
  smooth();
  noStroke();
  frameRate(60);
  xpose = width/2;
  ypose = height/2;
}
 
  void draw(){
    if (keyPressed){
      if (key == 'y'){
        stroke(random(255),random(255),random(255));
      }
    }

    if (keyPressed){
      if (key == 'g' || key == 'G'){
        background(0,255);// i wanted the program to continue doing
        // this until another button was pressed but it only
        //works when the button was held
      }
    }
    if (keyPressed){
      if (key == 'h' || key == 'H'){// i had the same problem with 'h'
      //as i did with 'g' the button must be held in order for it
      //to work :(
        stroke(0,0,255,255);
       
    xpose2 = xpose2 +( xspeed2 * xdirection2 );
    ypose2 = ypose2 +( yspeed2 * ydirection2 );
   
    if (xpose2 > width-size || xpose2 < 0){
      xdirection *= -1;
    }
    if (ypose2 > height-size || ypose2 < 0){
      ydirection2 *= -1;
    }
   
    ellipse(xpose+size/2, ypose2+size/2,2,2);
 
       
        for(int a =0; a <= width; a = a+100){
  for (int b=0; b <= height; b = b+100){
    line(a,b,xpose+size/2, ypose2+size/2);
  }
        }
        shape(soccer,xpose+size/2, ypose2+size/2,125,100);
      }
    }
    if (keyPressed){
      if (key == 'j'){
            stroke(255,0,0,255);
       
    xpose2 = xpose2 +( xspeed2 * xdirection2 );
    ypose2 = ypose2 +( yspeed2 * ydirection2 );
   
    if (xpose2 > width-size || xpose2 < 0){
      xdirection *= -1;
    }
    if (ypose2 > height-size || ypose2 < 0){
      ydirection2 *= -1;
    }
   
    ellipse(xpose2+size/2, ypose+size/2,2,2);
 
       
         for(int c=50; c <= width; c = c+100){
      for(int d=50; d <= height; d =d+100){
line(c,d,xpose2+size/2, ypose+size/2);
  }
        }
    shape(soccer,xpose2+size/2, ypose+size/2,125,100);
      }
    }
    if (keyPressed){
      if (key == 'J'){
            stroke(random(255),random(255),random(255),255);
       
    xpose2 = xpose2 +( xspeed2 * xdirection2 );
    ypose2 = ypose2 +( yspeed2 * ydirection2 );
   
    if (xpose2 > width-size || xpose2 < 0){
      xdirection *= -1;
    }
    if (ypose2 > height-size || ypose2 < 0){
      ydirection2 *= -1;
    }
   
    ellipse(xpose2+size/2, ypose+size/2,2,2);
 
       
        for(int a =0; a <= width; a = a+100){
  for (int b=0; b <= height; b = b+100){
    line(a,b,xpose2+size/2, ypose+size/2);
  }
        }
    shape(soccer,xpose2+size/2, ypose+size/2,125,100);
      }
    }
      if (keyPressed){
          if (key == 'b' || key == 'B'){
            frameRate(0);
          }
        }
        if (keyPressed){
          if (key == 'n' || key == 'N'){
            frameRate(120);
          }
        }
        //I have no idea why this does not work
        // it was supposed to start the program again
        // in the sense that the balls would start moving again
        // but it doesn't the whole thing just stays with a frame
        // rate of (0);  so instead i just made the frameRate
        // increase if pressed before 'b' or 'B'
        noStroke();
    noFill();
   
    xpose = xpose +( xspeed * xdirection );
    ypose = ypose +( yspeed * ydirection );
   
    if (xpose > width-size || xpose < 0){
      xdirection *= -1;
    }
    if (ypose > height-size || ypose < 0){
      ydirection *= -1;
    }
   
    ellipse(xpose+size/2, ypose+size/2, 2, 2);
   
    xpose2 = xpose2 +( xspeed2 * xdirection2 );
    ypose2 = ypose2 +( yspeed2 * ydirection2 );
   
    if (xpose2 > width-size || xpose2 < 0){
      xdirection2 *= -1;
    }
    if (ypose2 > height-size || ypose2 < 0){
      ydirection2 *= -1;
    }
   
    ellipse(xpose2+size/2, ypose2+size/2,2,2);
 
   
    if (mousePressed == false){
      noCursor();
      stroke(100,255);
      for(int a =0; a <= width; a = a+100){
  for (int b=0; b <= height; b = b+100){
    line(a,b,xpose2+size/2, ypose2+size/2);
  }
      }
 
   
    for(int c=50; c <= width; c = c+100){
      for(int d=50; d <= height; d =d+100){
        stroke(0,255,0);
line(c,d,xpose+size/2, ypose+size/2);
  }
      }
    }
    shape(soccer,xpose+size/2, ypose+size/2,125,100);
    shape(soccer,xpose2+size/2, ypose2+size/2,125,100);
   
  }