Line how in ninja friut

[khaninD]

Hi, how can I implement a line moving behind the cursor like this link

[ivan.popelyshev]

Remember previous position of mouse, clear and update Mesh or Graphics

[khaninD]

 

app.renderer.plugins.interaction.on("mousemove", (e) => {
  const {x, y} = e.data.global;
  const rectangle = u.sprite(3, 3, 'red', x, y);
  app.stage.addChild(rectangle);
});

i write this code for check the performance, but with a quick mouse movement, the dots do not appear everywhere, or do not you need to use a rectangle? have to use bezierCurveTo  ?

[ivan.popelyshev]

The answer is the same: look up Graphics and Mesh and how to work with them. You have to animate (refill) them each tick according to your formulaes for slash animation.

[khaninD]

    
    app.renderer.plugins.interaction.on('touchstart', (e) => {
      const {data: {global: {x, y}}} = e;
      this.startPoint = {x, y};
    });
    
    app.renderer.plugins.interaction.on('touchend', (e) => {
      let i = 0;
      setInterval(() => {
        this.lines[i].clear();
        i++
      }, 400);
      this.dataMove = [];
    });

    app.renderer.plugins.interaction.on('touchmove', (e) => {
      const {data: {global: {x, y}}} = e;
      const line = new PIXI.Graphics();
      line.lineStyle(3, 'red');
      this.lines.push(line);
      app.stage.addChild(line);
      this.dataMove.push({x, y});
      this.anim(line);
    });

  anim(line) {
    const {x, y} = this.startPoint;
    line.moveTo(x, y);
    this.dataMove.forEach((item, index) => {
      line.lineTo(item.x, item.y)
    });
  }

this code draw line... on event `touchend` i want clear line in interval, but it's not working, line clear all after long time...

[botmaster]

First: use only ONE graphic object, just clear it before you draw again.

Second: don't draw on mouse move, draw with a ticker (move: get position/do the math, ticker: draw no matter what)

Third: use mouse move to store mouse positions (array.push) as Point in an array (draw all points in that array inside your ticker), that's how you "remember" previous mouse positions

Fourth: remove points in that array based on either mouse velocity or set value (like 20 point max) or both (array.unshit)

[khaninD]

i write this example, based on your comments, but i can't understand, how to shorten line, how this link

[Exca]

I have done one fruit ninja styled mouse follower with rope.

Basically how it works is like this:

- Generate a rope with enough points to make it look good (I use 56 points).
- Whenever mouse moves, save the coordinate. Keep previous X amount of points saved. (I found 7 to be good amount).
- On render loop update the rope points to match the mouse points and apply some kind of interpolation (I'm using cubic interpolation). Interpolation makes the rope seem a lot more smoother when mouse is moved fast.
- Check if points are too close to each other and hide the rope if they are. If this check is omitted, some of the lower tier devices will have odd flickering due to floating point errors.

Made an example:
http://pixijs.io/examples/#/demos/mouse-trail.js

Edited February 8, 2018 by Exca
Example link added.

[khaninD]

Exca, thank you:)!