Need help with a simple animation

Here is what I want to do: create a chain of circles (number of circles if defined by user input) that must zigzag and change direction of movement when reaching a boundaries of the screen.
But I have problems with “snake moving”, in my version the whole “snake” initially moves in the same direction. Here is my code:

import processing.core.*;

import javax.swing.*;

public class Main extends PApplet {

    int n;


    float[] rs;
    float[] xs;
    float[] ys;
    float[] dxs;
    float[] dys;
    float[] bc;

    float angleX;
    float angleY;

    


    public void settings() {
        //size(1280, 720);
        fullScreen();
    }

    public void setup() {
        String strNOfCircles = JOptionPane.showInputDialog("N?");
        try {
            n = Integer.parseInt(strNOfCircles);
        } catch (NumberFormatException e) {
            JOptionPane.showMessageDialog(null, "Incorrect input");
            System.exit(0);
        }
        rs = new float[n];
        xs = new float[n];
        ys = new float[n];
        dxs = new float[n];
        dys = new float[n];
        bc = new float[n];
        float r = width / 30f;
        angleX = r * PI / 4.5f;
        angleY = r * PI / 4.5f;
        float x = width / 3f;
        float y = 3 * height / 4f;
        float initBc = 255;
        for (int i = 0; i < n; i++) {
            dxs[i] = 1;
            dys[i] = 1;
            rs[i] = r;
            xs[i] = x;
            ys[i] = y;
            bc[i] = initBc;
            x -= angleX;
            y -= angleY;
            if (x <= 0 + r / 2) {
                angleX = -angleX;
            } else if (x >= width - r / 2) {
                angleX = -angleX;
            }
            if (y <= 0 + r / 2) {
                angleY = -angleY;
            } else if (y >= height - r / 2) {
                angleY = -angleY;
            }

            initBc -= initBc / n * 2;

        }
        noStroke();
    }

    public void draw() {
        background(0, 0, 0);
        for (int i = 0; i < n; i++) {
            if (xs[i] >= width - rs[i] / 2) {
                dxs[i] = -dxs[i];
            }
            else if (xs[i] <= 0 + rs[i] / 2) {
               dxs[i] = -dxs[i];
            }
            xs[i] += dxs[i];
            if (ys[i] >= height - rs[i] / 2) {
                dys[i] = -dys[i];
            }
            if (ys[i] <= 0 + rs[i] / 2) {
                dys[i] = -dys[i];
            }
            ys[i] += dys[i];

            drawCircle(rs[i], xs[i], ys[i], bc[i]);


        }

    }

    public static void main(String[] args) {
        PApplet.main("Main");
    }

    public void drawCircle(float r, float x, float y, float bc) {
        fill(0, 0, bc);
        circle(x, y, r);
    }

}

Please, help me to implement these zigzag movement. Thanks in advance.

Here is what I want to do:

I don’t see a zigzag here. This is what the code already is doing.

Sorry, I suppose it’s my bad English. With a little number of circles it looks okay, but when I enter, let’s say, 40 of them, the following thing happens