未捕获的类型错误:这个.xx不是函数行120(我已经定义了这个100%)

xx: function (a) {
    return(this.x+this.r*Math.cos(a));
},
yy: function (a) {
    return(this.y+this.r*Math.sin(a));
},
lerp: function (a,b,x){
    return(a+x*(b-a));

这些是用来描述形状变形后的样子从圆到三角形的曲线尺寸，

var x0=this.xx(sAngle);
var y0=this.yy(sAngle);
var x1=this.xx((eAngle+sAngle)/2);
var y1=this.yy((eAngle+sAngle)/2);
var x2=this.xx(eAngle);
var y2=this.yy(eAngle);

这是正在使用的内容，当它在

下面是完整的代码:

var canvas, ctx, fps, radius, width, height;
var ball = [1];
function randomLocation() {
    return 600*Math.random();
}
function randomVelocity(){
    var ran = 2*Math.random();
    if(ran < 1) { return 10*Math.random()}
    else { return -10*Math.random()}
}   
function addBall() {
    ball.push(createBall());
}
function toCircle() {
    for(i=0; i < ball.length; i++) {
        ball[i].toCircle();
    }
}
function toShape() {
    for(i=0; i < ball.length; i++) {
        ball[i].toShape();
    }
}
function createBall() {
    return {x:randomLocation(),
        y:randomLocation(),
        r:radius,
        vx:randomVelocity(),
        vy:randomVelocity(),
        c:getRandomColor(),
        percent: 0,
        percentDirection: 0.50,
        move: function () {
            if(  this.y > height   ){
                this.vy = -this.vy;
            } else if ( this.y < 0 ){
                this.vy = -this.vy;
            }
            if ( this.x > width ){
                this.vx = -this.vx;
            } else if ( this.x < 0 ){
                this.vx = -this.vx;
            }
            this.x += this.vx;
            this.y += this.vy;
        },
        toShape: function () {
            this.percentDirection = -0.50;
        },
        toCircle: function () {
            this.percentDirection = 0.50;
        },
        xx: function (a) {
            return(this.x+this.r*Math.cos(a));
        },
        yy: function (a) {
            return(this.y+this.r*Math.sin(a));
        },
        lerp: function (a,b,x){
            return(a+x*(b-a));
        },          
        draw: function () { 
            var sideCount = 3;
            var sides=[];
            for(var i=0;i<sideCount;i++){
                sides.push(makeSide(i,sideCount));
            }
            drawSides(this.percent);
            this.percent+=this.percentDirection;
            if(this.percent>100){this.percent=100;}
            if(this.percent<0){this.percent=0;}

            var PI2=Math.PI*2;
            // functions
            function drawSides(pct,color){
                ctx.clearRect(0,0,canvas.width,canvas.height);
                if(pct==100){
                    ctx.beginPath();
                    ctx.arc(this.x,this.y,this.r,0,PI2);
                    ctx.closePath();
                    ctx.fill();
                }else{
                    ctx.beginPath();
                    ctx.moveTo(sides[0].x0,sides[0].y0);
                    for(var i=0;i<sideCount;i++){
                        var side=sides[i];
                        var cpx=this.lerp(side.midX,side.cpX,pct/100);
                        var cpy=this.lerp(side.midY,side.cpY,pct/100);        
                        ctx.quadraticCurveTo(cpx,cpy,side.x2,side.y2);
                    }
                    ctx.fill();
                }
            }
            function makeSide(n,sideCount){
                var sweep=PI2/sideCount;
                var sAngle=sweep*(n-1);
                var eAngle=sweep*n;
                var x0=this.xx(sAngle);
                var y0=this.yy(sAngle);
                var x1=this.xx((eAngle+sAngle)/2);
                var y1=this.yy((eAngle+sAngle)/2);
                var x2=this.xx(eAngle);
                var y2=this.yy(eAngle);
                var dx=x2-x1;
                var dy=y2-y1;
                var a=Math.atan2(dy,dx);
                var midX=this.lerp(x0,x2,0.50);
                var midY=this.lerp(y0,y2,0.50);
                var cpX=2*x1-x0/2-x2/2;
                var cpY=2*y1-y0/2-y2/2;
                return({
                    x0:x0, y0:y0,
                    x2:x2, y2:y2,
                    midX:midX, midY:midY,
                    cpX:cpX, cpY:cpY,
                    color:randomColor()
                });
            }
        }
    };
}
// this is where we can draw our shapes!
function clearCanvas(){
    ctx.fillStyle = "white";
    ctx.fillRect(0,0,width,height);
}
function draw() {
    clearCanvas();
    for( i=0; i < ball.length; i++) {
        ball[i].move();
        ball[i].draw();
    }
}
// this function initializes our variables when the
// page loads
function init(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    ball[0] = createBall();
    radius = 20;
    width = 1000;
    height = 600;
}
// This function starts the animation loop
// when the window loads
window.onload = function () {
    init();
    animloop();                                   
}
// This is the looping animation function
// the variable fps sets hows many frames are shown
// per second
function animloop() {
    requestAnimFrame(animloop);
    draw();
}
// The function below sends a request to reload the canvas
// 60 times every second
window.requestAnimFrame = (
function(){ return window.requestAnimationFrame|| 
    window.webkitRequestAnimationFrame         || 
    window.mozRequestAnimationFrame            || 
    window.oRequestAnimationFrame              || 
    window.msRequestAnimationFrame             || 
    function( callback ){ 
        return window.setTimeout(callback, 1000 / 60);
    }; 
}
)();
//this function returns a string
// that represents a random hexadecimal color
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}