Help with Switching Mouse Trail!

Maximi_i · June 1, 2019

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!

ivan.popelyshev · June 1, 2019

You change local variable "rope". Not related to global rope. Also its not addChild-ed. You can also just change a texture of existing rope instead.

Please read more JS books

Sign In

Help with Switching Mouse Trail!

Recommended Posts

Maximi_i

Link to comment

Share on other sites

ivan.popelyshev

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity