• Content Count

  • Joined

  • Last visited

  1. Hello, I am trying to use the Pixi.js example for mouse trails, and I wanted to spice it up with switching up the mouse trail every time I click a button Here is the HTML <!doctype html> <html> <head> <style> body{ margin: 0; } </style> </head> <body> <button id = "trailSwap">Swap Trail Color</button> <script src="pixi.js"></script> <script src="mouse-trail.js"></script> <script type="text/javascript"> </script> </body> </html> And here is the Javascript that I changed, the actual following and functionality of the trail works perfectly, however the actual act of switching between the trails doesn't. var app = new PIXI.Application({ backgroundColor: 0x1099bb }); document.body.appendChild(app.view); var bol = false; var swap = document.getElementById("trailSwap"); var picture = 0; let trailTexture = PIXI.Texture.from('pic/trail0.png'); var historyX = []; var historyY = []; var historySize = 20; var ropeSize = 1000; var points = []; // Create history array. for (let i = 0; i < historySize; i++) { historyX.push(0); historyY.push(0); } // Create rope points. for (let i = 0; i < ropeSize; i++) { points.push(new PIXI.Point(0, 0)); } // Create the rope let rope = new PIXI.SimpleRope(trailTexture, points); // Set the blendmode rope.blendmode = PIXI.BLEND_MODES.ADD; app.stage.addChild(rope); rope.interactive = true; rope.buttonMode = true; swap.addEventListener('click', onClick); function onClick(){ alert("here"); bol = !bol; if (bol){ let trailTexture = PIXI.Texture.from('pic/trail1.png'); } else{ let trailTexture = PIXI.Texture.from('pic/trail0.png'); } let rope = new PIXI.SimpleRope(trailTexture, points); alert("here again"); } The rest of the code isn't important to this as it is just making the trail smooth and follow the mouse properly. Any help would be splendid. Thank you!