How can I rebuild this (simple) p5.js animation in Pixi.js?

Question

I have this animation loop in p5.js: https://codepen.io/Tom51north/pen/yLwgWwj.

I tried to reb-build the same animation in pixi.js, but I can't get it working.

Can anyone help me?

I have something like the code below, but it doesn't look like the codepen.

function setup() {
    app = new PIXI.Application({
        width: window.innerWidth,
        height: window.innerHeight,
        antialias: true,
        transparent: true
    });

    document.body.appendChild(app.view);

    graphics = new PIXI.Graphics();
    app.stage.addChild(graphics);

    centerX = app.screen.width / 2;
    centerY = app.screen.height / 2;
    radius = app.screen.height / 2;
    r = getRandom(150, 255);
    g = getRandom(0, 55);
    b = getRandom(0, 55);

    app.ticker.speed = 0.005;
    app.ticker.add(delta => draw());
}

function draw() {
    app.renderer.clear();

    // graphics.clear();
    graphics.lineStyle(1, rgbToHex(r, g, b), 0.55);

    // graphics.beginFill(rgbToHex(r, g, b), 0.25);

    for (let i = 0; i <= totalDegrees; i++) {
        let noiseFactor = noise(i / 100, app.ticker.lastTime / 150);
        let x = centerX + radius * Math.cos(i) * noiseFactor;
        let y = centerY + radius * Math.sin(i) * noiseFactor;
        if (i === 0) {
            graphics.moveTo(x, y);
        } else {
            graphics.lineTo(x, y);
        }
    }

    graphics.endFill();

    radius -= 0.65;
    r -= 2;
    g += 1;
    b += 2;

    if (radius <= 0) {
        centerX = app.renderer.plugins.interaction.mouse.global.x;
        centerY = app.renderer.plugins.interaction.mouse.global.y;
    }

    if (radius <= 5) {
        app.ticker.stop();
    }
}