Balls in ellipses

let bounce_inside_ellipse = function (p) {

    let gPaper0, gPaper1;

    let balls = [], ellipses = [];

    let prevTime, time;

    let animating = true; //P

    let showEllipses = true;

    let showAxis = false;

​

    p.setup = function setup() {

        let p5canvas = p.createCanvas(500, 500);

        //p5canvas.parent('sketch');

        console.log('Balls constrained inside an ellipse');

        gPaper0 = createPaperGrey(false, 250, 250, 1, p);

        gPaper1 = createPaperGrey(true, 244, 244, 1, p);

        p.textFont('Verdana'); p.textSize(13);

        p.cursor(p.CROSS);

        p.makeEllipses();

        p.resetTime();

    }

​

    p.makeEllipses = function () {

        p.push();

        ellipses = [];

        balls = [];

        let ellipseData = [

            {

                cx: 10, cy: -30, xr: 270, yr: 85, ang: 47.5,

                ef: p.color(255, 0, 255, 40), es: null, // p.color(255, 0, 255, 48), esw: 0.9,

                bf: p.color(255, 0, 255, 128), bs: p.color(160, 0, 160, 160), bsw: 0.6,

                nb: 50, mincr: 2, maxcr: 4

            },

            {

                cx: -80, cy: 20, xr: 220, yr: 80, ang: -50,

                ef: p.color(0, 0, 255, 40), es: null, // p.color(0, 0, 255, 48), esw: 0.9,

                bf: p.color(0, 0, 255, 128), bs: p.color(0, 0, 160, 160), bsw: 0.6,

                nb: 12, mincr: 6, maxcr: 9

            },

            {

                cx: -5, cy: 124, xr: 140, yr: 110, ang: -15,

                ef: p.color(0, 128, 0, 40), es: null, // p.color(0, 128, 0, 48), esw: 0.9,

                bf: p.color(0, 128, 0, 128), bs: p.color(0, 96, 0, 160), bsw: 0.6,

                nb: 10, mincr: 5, maxcr: 8

            },

            {

                cx: 150, cy: -50, xr: 80, yr: 75, ang: -25,

                ef: p.color(0, 160, 220, 40), es: null, // p.color(0, 128, 0, 48), esw: 0.9,

                bf: p.color(0, 160, 220, 128), bs: p.color(0, 160, 220, 160), bsw: 0.6,

                nb: 16, mincr: 3.5, maxcr: 4.5

            },

        ];

        for (let i = 0; i < ellipseData.length; i++) {

            let t = ellipseData[i];

            let ellipse = new Ellipse(t.cx, t.cy, t.xr, t.yr, p.radians(t.ang), p);

            ellipse.painter = ellipsePainter(t.ef, t.es, t.esw, p);

            ball_painter = ballPainter(t.bf, t.bs, t.bsw, p);

            ellipse.balls = [];

            for (let i = 0; i < t.nb; i++) {

                let ball = new Ball(0, 0, t.mincr + (t.maxcr - t.mincr) * Math.random());

                ball.position = (i % 2 == 0) ? ellipse.f1.copy() : ellipse.f2.copy();

                ball.velocity = Vector2D.fromRandom(-200, 200);

                ball.painter = ball_painter;

                ellipse.balls.push(ball);

                balls.push(ball);

            }

            ellipses.push(ellipse);

        }

        p.pop();

        // animating = true;

        // p.loop();

        // p.resetTime();

    }

​

    p.draw = function () {

        // Calculate the elapsed time since the last frame in seconds

        let currTime = p.millis();

        let eTime = (currTime - prevTime) / 1000;

        prevTime = currTime;

        // Update ball positions and check bounce against ellipse perimeters

        for (let ellipse of ellipses)

            for (let ball of ellipse.balls) {

                ball.update(eTime);

                bounceBall(ball, ellipse);

            }

​

        // Test ball-ball collision for all balls 

        for (let i = 0; i < balls.length - 1; i++)

            for (let j = 0; j < balls.length; j++)

                Ball.colDetect(balls[i], balls[j]);

        p.background(255);

        p.push();

        if (showAxis) p.image(gPaper1, 0, 0); else p.image(gPaper0, 0, 0);

        p.translate(p.width / 2, p.height / 2);

        if (showEllipses)

            for (let ellipse of ellipses) ellipse.render();

        // Draw all the balls on top of the ellipses

        for (let ball of balls) ball.render();

        // Show legend

        let lw = 220;

        p.pop();

        p.fill(0, 20); p.stroke(0, 160);

        p.rect(p.width - 4 - lw, 4, lw, 86, 7);

        let left = p.width + 10 - lw

        p.text('[R]   restart', left, 20);

        p.text('[A]   show/hide graph axis', left, 40);

        p.text('[E]   show/hide ellipses', left, 60);

        p.text('[P]   pause/resume animation', left, 80);

    }

​

    p.keyTyped = function () {

        switch (p.key) {

            case 'r':

                p.makeEllipses();

                break;

            case 'p':

                animating = !animating;

                if (animating) {

                    p.resetTime(); p.loop();

                }

                else

                    p.noLoop();

                break;

            case 'a':

                showAxis = !showAxis;

                if (!animating) {

                    p.resetTime(); p.redraw();

                }

                break;

            case 'e':

                showEllipses = !showEllipses;

                if (!animating) {

                    p.resetTime(); p.redraw();

                }

                break;

        }

    }

​

    p.resetTime = function () {

        time = prevTime = p.millis();

        prevTime--;

    }

​

}

new p5(bounce_inside_ellipse);

​

function bounceBall(b, e) {

    let line = new Line(b._prev_pos.x, b._prev_pos.y, b._pos.x, b._pos.y);

    let isects = intersects(e, line, false);

    if (isects.length > 0) {

        let i = new Vector2D(isects[0].x, isects[0].y);

        let rd = i.dist(b.position); // distance outside ellipse

        let rv = b.velocity.getReflect(e.normal(i));

        let bv = rv.normalize().mult(rd);

        b.position = [i.x + bv.x, i.y + bv.y];

        b.velocity = [rv.x, rv.y];

​

    }

}

​