Fallenstedt/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.2/pixi.min.js">

    </script>
  </head>
  <body>

  </body>
  <script type="text/javascript">
  var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, { antialias: true});
  document.body.appendChild(renderer.view)

  var stage = new PIXI.Container();
  stage.interactive = true

  var circle = new Circle(0xffff, 100, 100);
  var circle2 = new Circle(0xffffff, 200, 100);
  var circle3 = new Circle(0xfafafa, 300, 100);
  stage.addChild(circle);
  stage.addChild(circle2);
  stage.addChild(circle3)

  function Circle(color, x, y) {
    this.color = color;
    this.x = x;
    this.y = y;

    var graphics = new PIXI.Graphics();
    graphics.interactive = true;
    graphics.lineStyle(0)
    graphics.beginFill(this.color, 0.5)
    graphics.drawCircle(0, 0, 60);
    graphics.endFill();
    graphics.x = this.x;
    graphics.y = this.y;

    graphics
      .on('mousedown', onDragStart)
      .on('touchstart', onDragStart)
      .on('mouseup', onDragEnd)
      .on('mouseupoutside', onDragEnd)
      .on('touchend', onDragEnd)
      .on('touchendoutside', onDragEnd)
      .on('mousemove', onDragMove)
      .on('touchmove', onDragMove);

    return graphics;
  }


  function onDragStart(event)
  {
      // store a reference to the data
      // the reason for this is because of multitouch
      // we want to track the movement of this particular touch
      this.data = event.data;
      this.alpha = 0.5;
      this.dragging = true;
  }

  function onDragEnd()
  {
      this.alpha = 1;

      this.dragging = false;

      // set the interaction data to null
      this.data = null;
  }

  function onDragMove()
  {
      if (this.dragging)
      {
          var newPosition = this.data.getLocalPosition(this.parent);
          this.position.x = newPosition.x;
          this.position.y = newPosition.y;
      }
  }

  // run the render loop
  animate();

  function animate() {

      renderer.render(stage);
      requestAnimationFrame( animate );
  }

  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.2/pixi.min.js">

	</script>
	</head>
	<body>

	</body>
	<script type="text/javascript">
	var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, { antialias: true});
	document.body.appendChild(renderer.view)

	var stage = new PIXI.Container();
	stage.interactive = true

	var circle = new Circle(0xffff, 100, 100);
	var circle2 = new Circle(0xffffff, 200, 100);
	var circle3 = new Circle(0xfafafa, 300, 100);
	stage.addChild(circle);
	stage.addChild(circle2);
	stage.addChild(circle3)

	function Circle(color, x, y) {
	this.color = color;
	this.x = x;
	this.y = y;

	var graphics = new PIXI.Graphics();
	graphics.interactive = true;
	graphics.lineStyle(0)
	graphics.beginFill(this.color, 0.5)
	graphics.drawCircle(0, 0, 60);
	graphics.endFill();
	graphics.x = this.x;
	graphics.y = this.y;

	graphics
	.on('mousedown', onDragStart)
	.on('touchstart', onDragStart)
	.on('mouseup', onDragEnd)
	.on('mouseupoutside', onDragEnd)
	.on('touchend', onDragEnd)
	.on('touchendoutside', onDragEnd)
	.on('mousemove', onDragMove)
	.on('touchmove', onDragMove);

	return graphics;
	}


	function onDragStart(event)
	{
	// store a reference to the data
	// the reason for this is because of multitouch
	// we want to track the movement of this particular touch
	this.data = event.data;
	this.alpha = 0.5;
	this.dragging = true;
	}

	function onDragEnd()
	{
	this.alpha = 1;

	this.dragging = false;

	// set the interaction data to null
	this.data = null;
	}

	function onDragMove()
	{
	if (this.dragging)
	{
	var newPosition = this.data.getLocalPosition(this.parent);
	this.position.x = newPosition.x;
	this.position.y = newPosition.y;
	}
	}

	// run the render loop
	animate();

	function animate() {

	renderer.render(stage);
	requestAnimationFrame( animate );
	}

	</script>
	</html>