Problems with the figure´s movements - buttons.

DDv2FF

Hi, i made this program with buttons that change the size and the speed of the figure among other things. The problem is that if I increase the size of the figure when it is close from any edge, it stop. I think the problem is related with the way I wrote the "move" method, but I dont know how to fix it. Can anyone help me ?
I should comment the functions of the end, but I didn´t so you can see what functions do properly.

let canvas;
//canvas interaction
let Color;
let bgColor;
let x = 200;
let y = 200;
let button = [];
let buttoName = ["Ellipse Color", "backgroundColor", "Size+", "Size-", "Speed++", "Speed--","ChangeToRect", "Reset", "ShacoCreator"];
let buttonFunction = [
{ heh : function changeColor(){
    theColor = color(random(255), random(255), random(255));} },

{ heh : function changeBGCol(){
        bgColor = color(random(255), random(255), random(255));} },

{ heh : function sizePLUS(){
    piece.s+= 5;} },

{ heh : function sizeMINUS(){
    piece.s-= 5;} },

{ heh : function speedPLUS(){
    if(piece.yspeed < 0){
        piece.yspeed-= 5;
    } else if(piece.yspeed > 0){
        piece.yspeed+= 5;
    }
    if(piece.xspeed < 0){
        piece.xspeed-= 5;
    } else if(piece.xspeed > 0){
        piece.xspeed+= 5;
    }} },

{ heh : function speedMINUS(){
    if(piece.yspeed < 0){
        piece.yspeed+= 5;
    } else if(piece.yspeed > 0){
        piece.yspeed-= 5;
    }
    if(piece.xspeed < 0){
        piece.xspeed+= 5;
    } else if(piece.xspeed > 0){
        piece.xspeed-= 5;
    }} },

{ heh : function changeFig(){
    piece.state = !piece.state;} },

{ heh : function Reset(){
    piece.x = 250;
    piece.y = 200;
    piece.xspeed = 3;
    piece.yspeed = 3;
    piece.s = 25;
    piece.state = false;} },

{ heh : function CreateShac(){
    Shaco = createElement("p", "Shaco");
    Shaco.position(random(1000),random(1000));} } ];

let piece;
let state = false;

let Shaco;



function setup() {
    canvas = createCanvas(500, 400);

//Canvas Interaction
    theColor = color(100, 0, 100);
    bgColor = color(200, 0, 120);
    piece = new Figure(x, y, 25);
    for(var i = 0; i < buttoName.length; i++){
        button[i] = createButton(buttoName[i]);
        button[i].position(510, 150 + i * 25);
        button[i].mousePressed(buttonFunction[i].heh);
    }

}

function draw() {
    background(bgColor);
    fill(theColor);
    piece.show();
    piece.move();
}


class Figure {
    constructor(x, y, s){
        this.x = x;
        this.y = y;
        this.s = s;
        this.xspeed = 3;
        this.yspeed = 3;
        this.state = false;
    }
    show(){
        if(this.state){
            rectMode(CENTER)
            rect(this.x, this.y, this.s * 2, this.s * 2);
        } else { ellipse(this.x, this.y, this.s * 2 ) }
    }
    move(){
        this.x+= this.xspeed;
        this.y+= this.yspeed;
        if(this.x < this.s || this.x > width - this.s){
            this.xspeed*= -1;
        }
        if(this.y < this.s || this.y > height - this.s){
            this.yspeed*= -1;
        }
    }
}

Thanks !!

TfGuy44

A classic problem. What's happening is that your object is getting stuck on the edge. It tries to change direction constantly, but simply changing the direction doesn't ensure that it will move away from the edge - it might still be on the edge on the next frame even if it is moving away from it. And then it moves back towards the edge! And then it's stuck!

The fix is to change the position of the object when it hits an edge too:

    if(this.x < this.s){
        this.xspeed*= -1;
        this.x = this.s;
    }
    if(this.x > width - this.s){
        this.xspeed*= -1;
        this.x = width - this.s;
    }

// You will have to do the same thing for Y as well... do this yourself!
    if(this.y < this.s || this.y > height - this.s){
        this.yspeed*= -1;
    }

DDv2FF

Now at the moment my figure touch the width - this.s, get stuck and moves only in the y axis !!!

Chrisir

Show your code....

DDv2FF

Yea, I checked that the problem now is just in the right edge of the canvas, it works fine interacting with the other edges, and the sizePluss is no more a problem. But now, not even doing nothing, it get stucked in the right side

DDv2FF

move(){
        this.x+= this.xspeed;
        this.y+= this.yspeed;
        if(this.x < this.s){
            this.xspeed*= -1;
            this.x = this.s;
        }
        if(this.x > width - this.s){
            this.xpeed*= -1;
            this.x = width - this.s - 10;
        }
        if(this.y < this.s){
            this.yspeed*= -1;
            this.y = this.s;
        }
        if(this.y > height - this.s){
            this.yspeed*= -1;
            this.y = height - this.s;
        }

    }

The figure do it fine with all the other edges

DDv2FF

That - 10 was for try something

DDv2FF

https://media.giphy.com/media/5zgZXOflqxuA1mmSfE/giphy.gif

Chrisir

Try instead of

this.xpeed*= -1;

Now

this.xpeed = -1*abs(this.xpeed);

DDv2FF

OMG.........
xpeed
I think it should be xspeed xD
It works fine now . Thanks !!