I need to save this as a series of images so i can put it in after effects but im messing it up and am out of ability

LimitedParticle[] p = new LimitedParticle[80];
 
 
void setup(){
  size(500, 700);
  noStroke();
  smooth();
  for (int i = 0; i < p.length; i++) {
    float velX = random(-2, 2);
    float velY = -i;
    //p[i] = new GenParticle(width/2, height/2, velX, velY, 5.0, width/2, height/2);
    p[i] = new LimitedParticle(width/2, height/2, velX, velY, 2.5);
    
  }
  
}
 
void draw(){
  fill(0, 36);
  rect(0, 0, width, height);
  fill(255);
  for (int i = 0; i < p.length; i++) {
    p[i].update();
    //p[i].regenerate();
    p[i].display();
  }
}
 
 
class Particle {
  float x, y;
  float vx, vy;
  float radius;
  float gravity = 0.029;
  
  public Particle (float _x, float _y, float _vx, float _vy, float _radius) {
    x = _x;
    y = _y;
    vx = _vx;
    vy = _vy;
    radius = _radius;
  }
  
  void update() {
    vy += gravity;
    y += vy;
    x += vx;
  }
  
  void display() {
    fill(100,190,17);
    ellipse(x, y, radius*2, radius*2);
  }
  
}
 
class GenParticle extends Particle {
  float originX, originY;
  
  GenParticle (float _x, float _y, float _vx, float _vy, float _radius, float _originX, float _originY) {
    super(_x, _y, _vx, _vy, _radius);
    originX = _originX;
    originY = _originY;
  }
  
  void regenerate() {
    if ((x > width + radius) || (x < -radius) || (y > height + radius) || (y < -radius)) {
      x = originX;
      y = originY;
      vx = random(-1, 1);
      vy = random(-4, -2);
    }
  }
}
 
class LimitedParticle extends Particle {
  float friction = .99;

  LimitedParticle (float _x, float _y, float _vx, float _vy, float _radius) {
    super(_x, _y, _vx, _vy, _radius);
  }
  
  void update() {
    vx *= friction;
    vy *= friction;
    super.update();
    limit();
  }
  
  void limit() {
    if (y > height - radius) {
      vy = -vy;
      y = constrain(y, -height*height, height-radius);
    }
    if ((x > width + radius) || (x < -radius)) {
      vx = -vx;
      x = constrain(x, radius, width-radius);
    }
  }
}

saveFrame("filename-####.png");

here is the code that I have. I am trying to get the pulsating circle to be evenly placed all over the screen rather than just pulsating from the origin. I think my problem is with translate but it could also be my understanding of and use of the sin function. Any help or suggestions are great.

float r= 300;
float angle=0.0;
float speed =.05;

void setup(){
  size(400,400);
  smooth();
 
 
 
}


void draw(){
 background(0);


angle += speed ;
float sinval= sin(angle);
float yoff= sinval * r;
 
 // translate(width/2 , height/2);
  scale(yoff/900 +.5);
  fill(random(200), 50, random(90));
  ellipse(0,0, 80,80);
 

   fill(random(20), 150, random(200));
  scale(yoff/900 +.5);
    //translate(160, 0);
  ellipse(160,0, 80,80);
 
    fill(random(20), 150, random(200));
  scale(yoff/900 +.5);
   // translate(60, 0);
  ellipse(80,0, 80,80);
 
}

//im trying to take the image in the square and duplicate it

import hypermedia.video.*;
import java.awt.Rectangle;


OpenCV opencv;

// contrast/brightness values
int contrast_value    = 0;
int brightness_value  = 0;



void setup() {

  size( 500, 500 );

  opencv = new OpenCV( this );
  opencv.capture( width, height );                   // open video stream
  opencv.cascade( OpenCV.CASCADE_FRONTALFACE_ALT );  // load detection description, here-> front face detection : "haarcascade_frontalface_alt.xml"


  // print usage
  println( "Drag mouse on X-axis inside this sketch window to change contrast" );
  println( "Drag mouse on Y-axis inside this sketch window to change brightness" );
}


public void stop() {
  opencv.stop();
  super.stop();
}



void draw() {
  opencv.flip( OpenCV.FLIP_HORIZONTAL );
  // grab a new frame
  // and convert to gray
  opencv.read();
  //opencv.convert( GRAY );
  opencv.contrast( contrast_value );
  opencv.brightness( brightness_value );

  // proceed detection
  Rectangle[] faces = opencv.detect( 1.2, 2, OpenCV.HAAR_DO_CANNY_PRUNING, 40, 40 );

  // display the image
  image( opencv.image(), 0, 0 );

  // draw face area(s)
  noFill();
  stroke(255,0,0);
  for( int i=0; i<faces.length; i++ ) {
    rect( faces[i].x, faces[i].y-100, faces[i].width+50, faces[i].height+150 );
  }
 
PImage b = image.get (faces[i].x, faces[i].y-100, faces[i].width+50, faces[i].height+150 );
image (b, 50,50,50,50);
 
}



/**
 * Changes contrast/brigthness values
 */
void mouseDragged() {
  contrast_value   = (int) map( mouseX, 0, width, -128, 128 );
  brightness_value = (int) map( mouseY, 0, width, -128, 128 );
}

import hypermedia.video.*;
import java.awt.Rectangle;


OpenCV opencv;

// contrast/brightness values
int contrast_value    = 0;
int brightness_value  = 0;



void setup() {

  size( 500, 500 );

  opencv = new OpenCV( this );
  opencv.capture( width, height );                   // open video stream
  opencv.cascade( OpenCV.CASCADE_FRONTALFACE_ALT );  // load detection description, here-> front face detection : "haarcascade_frontalface_alt.xml"


  // print usage
  println( "Drag mouse on X-axis inside this sketch window to change contrast" );
  println( "Drag mouse on Y-axis inside this sketch window to change brightness" );
}


public void stop() {
  opencv.stop();
  super.stop();
}



void draw() {
  opencv.flip( OpenCV.FLIP_HORIZONTAL );
  // grab a new frame
  // and convert to gray
  opencv.read();
  //opencv.convert( GRAY );
  opencv.contrast( contrast_value );
  opencv.brightness( brightness_value );

  // proceed detection
  Rectangle[] faces = opencv.detect( 1.2, 2, OpenCV.HAAR_DO_CANNY_PRUNING, 40, 40 );

  // display the image
  image( opencv.image(), 0, 0 );

  // draw face area(s)
  noFill();
  stroke(255,0,0);
  for( int i=0; i<faces.length; i++ ) {
    rect( faces[i].x, faces[i].y-100, faces[i].width+50, faces[i].height+150 );
  }
 
PImage b = image.get (faces[i].x, faces[i].y-100, faces[i].width+50, faces[i].height+150 );
image (b, 50,50,50,50);
 
}



/**
 * Changes contrast/brigthness values
 */
void mouseDragged() {
  contrast_value   = (int) map( mouseX, 0, width, -128, 128 );
  brightness_value = (int) map( mouseY, 0, width, -128, 128 );
}

// i would like to put a title screen explaining how to play the game before it starts running I believe my problem lies i the //void keyPressed

float radius;
int timespressed,last;
PImage Loss;

void setup()
{
  size(480,320);
  radius=10;
  smooth();
  Loss = loadImage("GameLoss.gif");
}

void draw ()
{
  background(0);
  ellipse(width/2,height/2,radius*1.8,radius*1.8);
  radius++;
  if (radius == 0)
  {
    image(Loss, 0,0, 480,320);
  }
 
  if(radius > 180  )
  {
    image(Loss, 0,0, 480,320);
    //radius%=width/2;
  }
}

void keyPressed()
{
 
  println(radius);
  if(key== ENTER)
  {
    timespressed++;
    if(timespressed>last) {
      radius=0;
      last=timespressed;
      timespressed=0;
    }
  }
 
}

im tying to get it so that it takes progressively more and more clicks to return the circle to zero.

float radius;
int timespressed;


void setup()
{
  size(300,300);
  radius = 10;
  radius ++;
  smooth();
 
 
}


void draw ()
{
  background(0);
  //  println(radius);
  ellipse (150,150, radius ,radius);
 int timespressed = ENTER;


  if( radius <= 300)
  {
    radius ++;

  }


}


void keyPressed()
{
 
if((key== ENTER) && (timespressed == 0))
  {
    radius = 0;
    println("hit");
    timespressed = 1;
  }
  if((key== ENTER) && (timespressed == 01))
  {
    radius = 0;
    println("hit");
    timespressed = 2;
  }
  if((key== ENTER) && (timespressed == 2))
  {
    radius = 0;
    println("hit");
    timespressed = 3;
  }

 
 
 



}