Problems with the figure´s movements - buttons.

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 !!

Answers

  • edited February 2018 Answer ✓

    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;
        }
    
  • Now at the moment my figure touch the width - this.s, get stuck and moves only in the y axis !!!

  • Show your code....

  • 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

  • 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

  • That - 10 was for try something

  • Try instead of

    this.xpeed*= -1;

    Now

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

  • edited February 2018

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

Sign In or Register to comment.