Maximi_i

Help with Switching Mouse Trail!

Recommended Posts

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.