Как заставить мяч свисать с веревки?

Question

Я пытаюсь сделать простую игру, используя библиотеку P5.js, где мяч прикреплен к булавке с веревкой, и он не должен превышать длину веревки, когда он падает.Мяч должен упасть, пока не достигнет расстояния от штифта, равного длине каната.Как мне это сделать?Мне просто нужно, чтобы он работал с осью Y.

Вот код:

var compound;

function Compound(){
    this.pinDiameter = 25;
    this.pinx = width/2;
    this.piny = height/2;

    this.ballDiameter = 50;
    this.ballx = width/2;
    this.bally = height/2 + 200;

    this.ropeWidth = 4;
    this.ropeHeight = 200;
    this.ropex = this.pinx - this.ropeWidth/2;
    this.ropey = this.piny;

    this.updatePin = function(){
    }

    this.updateBall = function(){
        this.ballSpeed  = this.ballSpeed + 1; 
        this.bally = this.bally + this.ballSpeed;
    }

    this.updateRope = function(){
    }

    this.show = function(){
        ellipse(this.pinx, this.piny, this.pinDiameter);
        fill(255);
        noStroke();

        ellipse(this.ballx, this.bally, this.ballDiameter);
        fill(255);
        noStroke();

        rect(this.ropex, this.ropey, this.ropeWidth, this.ropeHeight);
        fill(255);
        noStroke();
    }
}

function setup() {
    createCanvas(600, 600);
    compound = new Compound();
}

function draw() {
    background(0);
    compound.updatePin()
    compound.updateBall()
    compound.updateRope()
    compound.show()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

Answer 1

Начиная с кода операции, здесь приведен пример, который позволяет шарику скользить по веревке, как если бы веревка продевалась через шар и имела узел на конце.

var compound;

function Compound(){
    this.pinDiameter = 25;
    this.pinx = width/2;
    this.piny = this.pinDiameter;

    this.ballDiameter = 50;
    this.ballx = width/2;
    this.bally = this.ballDiameter + this.pinDiameter * 2;
    this.ballSpeed = 1;

    this.ropeWidth = 4;
    this.ropeHeight = 200;
    this.ropex = this.pinx - this.ropeWidth/2;
    this.ropey = this.piny;

    this.updatePin = function(){
    }

    this.updateBall = function(){

    if (this.bally < this.piny + 200){
        this.ballSpeed  = this.ballSpeed + 1; 
        this.bally = this.bally + this.ballSpeed;
    }
    }

    this.updateRope = function(){
    }

    this.show = function(){
        ellipse(this.pinx, this.piny, this.pinDiameter);
        fill(255);
        noStroke();

        ellipse(this.ballx, this.bally, this.ballDiameter);
        fill(255);
        noStroke();

        rect(this.ropex, this.ropey, this.ropeWidth, this.ropeHeight);
        fill(255);
        noStroke();
    }
}

function setup() {
    createCanvas(600, 600);
    compound = new Compound();
	setFrameRate(1);
}

function draw() {
    background(0);
    compound.updatePin()
    compound.updateBall()
    compound.updateRope()
    compound.show()
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

Главное изменение здесь, в обновлении, где мы должны проверить, что мяч не сошел с веревки.Мы также инициализируем положение мяча вблизи вершины веревки, чтобы мы могли наблюдать за его скольжением.

this.updateBall = function(){
    if (this.bally < this.piny + 200){
        this.ballSpeed  = this.ballSpeed + 1; 
        this.bally = this.bally + this.ballSpeed;
    }
}

Answer 2

надеюсь, это поможет

var compound;

    function Compound(){
        this.pinDiameter = 25;
        this.pinx = width/2;
        this.piny = height/2;
        
        this.ballDiameter = 50;
        this.ballx = this.pinx;
        this.bally = this.piny + 100;
        this.ballSpeed = 0;
        this.ballGravity = 0.5;
        
        this.ropeWidth = 4;
        this.ropeHeight = 200;
        this.ropex = this.pinx - this.ropeWidth/2;
        this.ropey = this.piny;
        
        this.onPin = function(x, y) {
            let dx = x - this.pinx; 
            let dy = y - this.piny; 
            let dist = Math.sqrt(dx*dx, dy*dy)
            return dist <= this.pinDiameter/2; 
        }
        
        this.ropeheightcalc = function(){
            let dx = this.bally - this.piny; 
            return dx;
        }
        
        this.drag = false;  
        this.catch = function() {
              this.drag = true;
              this.mousex = mouseX;
              this.mousey = mouseY;
        }
    
        this.drop = function() {
              this.drag = false;  
        }
        
        this.updatePin = function(){
            if (this.drag) {
                this.piny = mouseY; 
                this.mousey = mouseY;
            }
        }
        
        this.updateBall = function(){
            this.ballSpeed  = this.ballSpeed + this.ballGravity; 
            this.bally = this.bally + this.ballSpeed;
            
            if(this.bally > this.piny + 200){
                this.bally = this.piny + 200;
                this.ballSpeed = 0;
            }
        }
    
        this.updateRope = function(){
            if (this.drag) {
                this.ropey = this.piny; 
                this.ropeHeight = this.ropeheightcalc();
            }
        }
        
        this.show = function(){
            ellipse(this.pinx, this.piny, this.pinDiameter);
            fill(255);
            noStroke();
            
            ellipse(this.ballx, this.bally, this.ballDiameter);
            fill(255);
            noStroke();
            
            rect(this.ropex, this.ropey, this.ropeWidth, this.ropeHeight);
            fill(255);
            noStroke();
        }
    }
    
    function mousePressed() {
        if ( compound.onPin(mouseX, mouseY))
            compound.catch();
    }
    
    function mouseReleased() {
        compound.drop();
    }
    
    function setup() {
        createCanvas(600, 600);
        compound = new Compound();
    }
    
    function draw() {
        background(0);
        compound.updatePin()
        compound.updateBall()
        compound.updateRope()
        compound.show()
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>