If condition not working properly in canvas

Question

Actually i have a set of points which when connected forms like pipes connected horizontally and vertically. My aim is to move the circle through the points / pipes.The if condition is also not working properly.

When the begin function is called it takes the first and second points and the circle moves from the first to the second point through the first if condition.

Then when it reaches the second point it should go to the next if condition where the current animation stops and a new animation starts from the callBegin function.

The code goes like below

    var ParticleGen = function() {
        var particle = this;
        this.begin = function(){
            var pipeBegin = points[pipeIndex];
            var pipeEnds = points[pipeIndex + 1];
            nx = pipeBegin.x;
            ny = pipeBegin.y;
            if(pipeBegin.x == pipeEnds.x ){
                if( pipeBegin.y > pipeEnds.y){
                    // endpoint y greater than start point y moving upwards
                    d = "up";
                    function animloop(){
                        if(ny > pipeEnds.y) {
                            ctx.clearRect(0, 0, w, h);
                            drawCircle(nx, ny);
                            ny--;
                            nx = nx;
                        }
                        requestAnimFrame(animloop);
                    }
                    animloop();
                }else if( pipeBegin.y < pipeEnds.y ){
                    d = "down";
                    function animloop1(){
                        if(ny < pipeEnds.y) {
                            ctx.clearRect(0, 0, w, h);
                            drawCircle(nx, ny);
                            ny++;
                            nx = nx;
                        }
                        requestAnimFrame(animloop1);
                    }
                    animloop1();

                }else if(ny == pipeEnds.y){
                    cancelAnimationFrame(animloop1);
                    particle.callBegin();
                }           
            }else if(pipeBegin.y == pipeEnds.y ){
                if(pipeBegin.x < pipeEnds.x){
                    // start.x < end.x right movement
                    d = "right";
                    function animloop2(){
                        if(nx < pipeEnds.x) {
                            ctx.clearRect(0, 0, w, h);
                            drawCircle(nx, ny);
                            nx++;
                            ny = ny;
                        }
                        requestAnimFrame(animloop2);
                    }
                    animloop2();
                }else if(pipeBegin.x > pipeEnds.x) {
                    d = "left";
                    function animloop3(){
                        if(nx > pipeEnds.x) {
                            ctx.clearRect(0, 0, w, h);
                            drawCircle(nx, ny);
                            nx--;
                            ny = ny;
                        }
                        requestAnimFrame(animloop3);
                    }
                    animloop3();

                }else if(nx == pipeEnds.x){
                    cancelAnimationFrame(animloop2);
                    particle.callBegin();
                }   
            }
        }
        this.callBegin = function(){
            if(pipeIndex <= 3){
                pipeIndex++;
            }
            particle.begin();
        }
    };

function drawCircle(cx, cy){
    ctx.beginPath();
    ctx.arc(cx, cy, 2, 0, 2 * Math.PI, false);
    ctx.fillStyle = "black";
    ctx.fill(); 
    ctx.closePath();
}

var newObj = new ParticleGen();
newObj.begin();

I am new to this.thats y... I have the fiddle here.. Thank you.

Answer 1

I think that your method, with all those ifs, is too complex for what you're trying to achieve. It could be done with considerably less code.

Apart from that, your problem was that you were checking whether to stop the animation and start a new segment in the wrong place. You were doing it in the main code of begin(), but this method is only called once at the start of each segment. When the dot reaches the end, you don't call begin() again, so you never check whether to stop the animation and start a new one. In fact, your current animation remains active forever but it just doesn't do anything because of one of these ifs:

if(ny > pipeEnds.y) {
    ctx.clearRect(0, 0, w, h);
    drawCircle(nx, ny);
    ny--;
    nx = nx;
}

And it is in these ifs, where you check whether the dot has reached the end of its path, wher you should call cancelAnimFrame and start a new sequence. I've updated your fiddle and copy here the relevant code (begin() and callBegin() functions).

this.begin = function () {
    var pipeBegin = points[pipeIndex];
    var pipeEnds = points[pipeIndex + 1];
    nx = pipeBegin.x;
    ny = pipeBegin.y;
    if (pipeBegin.x == pipeEnds.x) {
        if (pipeBegin.y > pipeEnds.y) {
            // endpoint y greater than start point y moving upwards
            d = "up";

            function animloop() {
                if (ny > pipeEnds.y) {
                    ctx.clearRect(0, 0, w, h);
                    drawCircle(nx, ny);
                    ny--;
                    nx = nx;
                    requestAnimFrame(animloop);
                }else if (ny == pipeEnds.y) {
                    cancelAnimationFrame(animloop);
                    particle.callBegin();
                }

            }
            animloop();
        } else if (pipeBegin.y < pipeEnds.y) {
            d = "down";

            function animloop1() {
                if (ny < pipeEnds.y) {
                    ctx.clearRect(0, 0, w, h);
                    drawCircle(nx, ny);
                    ny++;
                    nx = nx;
                    requestAnimFrame(animloop1);
                } else if (ny == pipeEnds.y) {
                    cancelAnimationFrame(animloop1);
                    particle.callBegin();
                }

            }
            animloop1();

        } 
    } else if (pipeBegin.y == pipeEnds.y) {
        if (pipeBegin.x < pipeEnds.x) {
            // start.x < end.x right movement
            d = "right";

            function animloop2() {
                if (nx < pipeEnds.x) {
                    ctx.clearRect(0, 0, w, h);
                    drawCircle(nx, ny);
                    nx++;
                    ny = ny;
                    requestAnimFrame(animloop2);
                } else if (ny == pipeEnds.y) {
                    cancelAnimationFrame(animloop2);
                    particle.callBegin();
                }

            }
            animloop2();
        } else if (pipeBegin.x > pipeEnds.x) {
            d = "left";

            function animloop3() {
                if (nx > pipeEnds.x) {
                    ctx.clearRect(0, 0, w, h);
                    drawCircle(nx, ny);
                    nx--;
                    ny = ny;
                    requestAnimFrame(animloop3);
                } else if (ny == pipeEnds.y) {
                    cancelAnimationFrame(animloop3);
                    particle.callBegin();
                }

            }
            animloop3();

        } else if (nx == pipeEnds.x) {
            cancelAnimationFrame(animloop2);
            particle.callBegin();
        }
    }
}
this.callBegin = function () {
    if (pipeIndex <= 3) {
        pipeIndex++;
        console.log(pipeIndex)
        particle.begin();
    }

}