I've created a circle that I want to animate so that it moves in a triangle motion using if statements, and changing the y/x coordinates, but all I can make it do is go back and forth, so I was wondering if anyone could help?

the function where I'm changing the x/y parameters is called "triangle".

the full js code:

var canvas;
var ctx;
var w = 1000;
var h = 600;
var allCircles = [];



setUpCanvas();
createData(1);



 animationLoop();





function animationLoop(){
    clear();
    circlesDrawUpdate(allCircles);

    requestAnimationFrame(animationLoop);
}


function circlesDrawUpdate(a){
    for(var i=0; i<a.length; i++){
        circle(a[i]);
        triangle(a[i]);
    }
}

function createData(num){
    for (var i=0; i<num; i++){
        allCircles.push({
            "x": w/2,
            "y": h/2,
            "dx": randn(100),
            "dy": 3,
            "r": 50,
            "c":200+rand(180),
            "a": 0.5,
        })
    }
}





function triangle(o){
    var i;
    o.x += o.dx;
    o.y += o.dy;
    if(o.y = h){
        o.dy *= +1;
    }

    if(o.x> w || o.x < 0){
        o.dx *=-1;
    
    }
}


function clear(){
    ctx.clearRect(0,0,w,h);
}



function circle(o){
    ctx.beginPath();
    ctx.arc(o.x,o.y,o.r,0,2*Math.PI);
    ctx.fillStyle = "hsla("+o.c+", 100%, 50%, "+o.a+")";
    ctx.fill();
}

function randn(r){
    var result = Math.random()*r - r/2;
    return result;
}

function randi(r){
    var result = Math.floor(Math.random()*r);
    return result;
}

function rand(r){
    var result = Math.random()*r;
    return result;
}

function setUpCanvas(){
    canvas = document.querySelector("#myCanvas");
    ctx = canvas.getContext("2d");
    canvas.width = w;
    canvas.height = h;
    canvas.style.border ="5px dashed purple";
}




console.log("Module 7 Exercise");