p5.js – Smoothly morphing random shape

first of all, i am a beginner on js and p5.js. My aim on this program is a smoothly morphing random shape. I was satisfied with the calculateShape()-function and the drawShape()-function, but when it comes to morphing (updateShape()) it gets really ugly. I thought it might be a good idea to save my current array into a temporary array, then loop over the array and add a random number to each x and y of each index and then replace the old x and y at this index. The main problem is, that it is always adding new shapes on the screen instead of changing the values of the vertices of the existing shape. Can anybody of you please give me a hint or point out my mistake(s)? THANK YOU IN ADVANCE!

var c1;
var c2;
var c3;
var centerX;
var centerY;
var fb;
var radius;
var angle;
var shape = [];
var temp;


/*function to calculate the inital shape*/
function calculateShape() {
    //calculate coordinates and save into array
    for (var i = 0; i < fb; i++) {
        var x = cos(angle * i) * radius + random(-77,77);
        var y = sin(angle * i) * radius + random(-77,77);
        var v = createVector(x, y);
        shape.push(v);
    }
}

/*function for morphing the shape*/
function updateShape() {
    var temp = shape;
    for (var i = 0; i < shape.length - 1; i++) {
        var x = temp[i].x + random(-1, 1);
        var y = temp[i].y + random(-1, 1);
        var p = temp[i];
        var v = createVector(x, y);
        shape.splice(p,1);
        shape.push(v);    
    }
}


/*function for drawing the shape on the screen*/
function createShape(){
    beginShape();
    curveVertex(shape[shape.length-1].x, shape[shape.length-1].y);
    for (var i = 0; i < shape.length; i++){
        curveVertex(shape[i].x, shape[i].y);
    }
    curveVertex(shape[0].x, shape[0].y);
    endShape(CLOSE);
}




function setup() {
    createCanvas(windowWidth, windowHeight);
    smooth();
    background(250);
    //frameRate(2);

    // defining possible colors
    c1 = color(0, 196, 181, 235); 
    c2 = color(50, 227, 232, 235);
    c3 = color(248, 49, 62, 255);
    var colors = [c1, c2, c3];


    //center of the window
    centerX = windowWidth/2;
    centerY = windowHeight/2;

    //defining all variables
    fb = 8; 
    angle = radians(360 / fb);
    radius = random(120, 140);

    //calling thefunction that initalises the shape
    calculateShape();
}


function draw() {
    translate(centerX, centerY);


    blendMode(BLEND);
    fill(c3);
    noStroke();


    createShape();
    updateShape();    
}