Creé un círculo que quiero animar para que se mueva en un movimiento triangular usando declaraciones if y cambiando las coordenadas y/x, pero todo lo que puedo hacer es ir y venir, así que me preguntaba si alguien ¿podría ayudar?

la función donde estoy cambiando los parámetros x/y se llama "triángulo".

el código js completo:

 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; ox += o.dx; oy += o.dy; if(oy = h){ o.dy *= +1; } if(ox> w || ox < 0){ o.dx *=-1; } } function clear(){ ctx.clearRect(0,0,w,h); } function circle(o){ ctx.beginPath(); ctx.arc(ox,oy,or,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");