折线和圆之间的碰撞检测

Question

所以我使用下面的代码

渲染具有sin波的Y值的折线

var amplitude = 50;
var dx = (TWO_PI / period) * 10
var yValues = new Array(floor(widthOfWave / xSpacing));
var poly = [];

this.calculate = () => {
    //Increment theta
    theta += 0.02;

    //For every x value, calculate the y value with SIN function
    var x = theta;
    for(var i = 0; i < yValues.length; i++) {
        yValues[i] = sin(x) * amplitude;
        x += dx;
    }

this.render = () => {
    this.calculate();
    ellipseMode(CENTER);

    beginShape();
    for(var i = 0; i < yValues.length; i++) {
        var temp = createVector((i * spacing), windowWidth + yValues[i]);
        curveVertex(temp.x, temp.y);
        poly.push(temp);
    }
    endShape();
}

呈现wave

这正是我想要的，但我遇到的问题是当我尝试合并p5.collide2d（Github Link Here）时。我想要一个椭圆形，＆＃39;播放器＆＃39;在这种情况下，能够通过左右按住键盘箭头来骑行波浪。我还没有进入键盘交互，因为我目前仍然坚持使用Ellipse（一个完美的圆圈），而不仅仅是在曲线上落下。

这是我正在测试的当前碰撞的代码。

this.checkCollision = (objX, objY, objSize) => {
    var hit = false;
    var hit = collideCirclePoly(objX, objY, objSize, poly);
    return hit;
}

//Check for the collision
var hit = hill.checkCollision(player1.x, player1.y, player1.size);
if(hit) player1.didCollide();

//Player's didCollide function
this.didCollide = () => {
    newSpeed = this.ySpeed * -0.8;
    this.ySpeed = newSpeed;
}

这就是圈子（＆＃34; Player＆＃34;）和wave在我尝试运行它时的互动方式。

我似乎无法弄清楚为什么互动会以这种方式发生。我已经尝试过扩展碰撞的界限，但它只是让它看起来非常微不足道，它仍然有时只是通过波浪看似没有碰撞。

我对p5.js和处理相当新，所以我很可能会遗漏一些非常简单的东西。谢谢你提前帮忙！