Hose

hose.markdown

Hose

A Pen by Shaw on CodePen.

License.

script.js

console.clear();

function extend(target) {
  target = target || {};

  var length = arguments.length,
      i = 1;
  
  for (; i < length; i++) {
    if (!arguments[i]) { continue; }
    for (var key in arguments[i]) {
      if ( arguments[i].hasOwnProperty(key) ) { target[key] = arguments[i][key]; }
    }
  }

  return target;
}

/*////////////////////////////////////////*/

function Hose(opts){
  
  if ( !(this instanceof Hose) ) { return new Hose(opts); }

  for (var key in opts) {
    if ( opts.hasOwnProperty(key) ) { this[key] = opts[key]; }
  }

  this.build();
}

Hose.prototype = Object.create(PIXI.mesh.Rope.prototype);

extend(Hose.prototype,{
  
  constructor: Hose,
  
  // PIXI.point
  start: null,
  
  // PIXI.point
  end: null,

  // PIXI.texture
  texture: null,
  
  // 0 = sharp, 1 = rounded
  bend: 0,
  
  // Range from -1 to 1
  bendDirection: 0,
  
  build(){
    this.points = [this.start, this.end];
    PIXI.mesh.Rope.call(this, 
                        this.texture || 
                        new PIXI.Texture.fromCanvas(document.createElement('canvas')), 
                        this.points);
  },
  
  /*////////////////////////////////////////*/
  
  // Render the curve
  update(){
    
    if ( this.connections ) {
      
      this.connections.forEach(function(){
        
      }, this);
      
    }
    
  },
  
  /*////////////////////////////////////////*/
  
  // Array
  connections: null,
  
  // Connect to another hose/object
  connect(){
    this.connections = this.connections || [];
  },
  
  // Disconnect from all other hoses/objects or specific ones
  disconnect(){},
});

// Object.defineProperties(Hose.prototype, {
//   start: {
//     set: function (value) {
//       this.build();
//     }
//   },
  
//   end: {
//     set: function(){
//       this.build(); 
//     }
//   },
  
//   texture: {
//     set: function(value){
//       this.build();
//     }
//   }
// });

/*////////////////////////////////////////*/

var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();
stage.hitArea = new PIXI.Rectangle(0, 0, renderer.width, renderer.height);

/*////////////////////////////////////////*/

var hose = new Hose({
  start: new PIXI.Point(100,100),
  end: new PIXI.Point(300,300)
});


var texture = new PIXI.Texture.fromImage('http://pixijs.github.io/examples/required/assets/snake.png');
function applyTexture(){
  
  hose.texture = texture;
  
  hose.build();
  
  stage.addChild(hose);
  
  console.log(hose);
  
}
texture.on('loaded',applyTexture);
texture.on('update',applyTexture);
if ( texture.valid ) { applyTexture(); }

/*////////////////////////////////////////*/

function animate(){
  requestAnimationFrame(animate);
  
  hose.end.x = mouseX;
  hose.end.y = mouseY;
  
  renderer.render(stage);
}
animate();




var mouseX = renderer.width /2, mouseY = renderer.height /2;

stage.interactive = true;
stage.on('mousedown',function(e){ 
  mouseY = e.data.originalEvent.clientY;
  mouseX = e.data.originalEvent.clientX;
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.0.0/pixi.min.js"></script>