taulant/aybIG.markdown

## aybIG.markdown

      
    Raw
  

              aybIG.markdown
            
          
    aybIG

A Pen by Taulant Sulko on CodePen.
License.

  
## index.html
<html>
  <head>
    <title>Visualise Influence</title>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.js" type="text/javascript"></script>
<!--
TakeN from kineticJS
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-polygon-tutorial/

Calculate the base of the trapezoid
http://www.mathwarehouse.com/geometry/quadrilaterals/trapezoid.php
-->
  </head>
  <body>
        <div id="container"></div>

    <script defer="defer">
    </script>

  </body>
</html>

## script.js
var stage = new Kinetic.Stage({
        container: 'container',
        width: 1440,
        height: 400
      });
      var following = 589;
      var followers = 1120;

      if(followers > following){
        var remains = followers - following;
        x1 = remains / 2; // 500 - 300 / 2 = 100
        y1 = 0;

        x2 = (remains / 2) + following;
        y2 = 0;

        x3 = followers;
        y3 = 250;

        x4 = 0;
        y4 = 250;

      } else if(follwers < following){
        var remains = following - followers;
        x1 = 0;
      } else {
        var remains = 0;
        x1 = 0;
      };


      // Trapezoid points
/*      var x1 = 100;
      var y1 = 0;

      var x2 = 400;
      var y2 = 0;

      var x3 = 500;
      var y3 = 250;

      var x4 = 0;
      var y4 = 250;*/

      var upperBase = x2 - x1;
      var lowerBase = x3 - x4;

      document.write("Upper base is " + upperBase + "<br>");
      document.write("Lower base is " + lowerBase);

      var layer = new Kinetic.Layer();

      var poly = new Kinetic.Polygon({
        points: [x1,y1, x2,y2,  x3,y3 , x4,y4],
        fill: '#00D2FF',
        strokeWidth: 0
      });

      // add the shape to the layer
      layer.add(poly);

      // add the layer to the stage
      stage.add(layer);
	<html>
	<head>
	<title>Visualise Influence</title>
	<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.js" type="text/javascript"></script>
	<!--
	TakeN from kineticJS
	http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-polygon-tutorial/

	Calculate the base of the trapezoid
	http://www.mathwarehouse.com/geometry/quadrilaterals/trapezoid.php
	-->
	</head>
	<body>
	<div id="container"></div>

	<script defer="defer">
	</script>

	</body>
	</html>
	var stage = new Kinetic.Stage({
	container: 'container',
	width: 1440,
	height: 400
	});
	var following = 589;
	var followers = 1120;

	if(followers > following){
	var remains = followers - following;
	x1 = remains / 2; // 500 - 300 / 2 = 100
	y1 = 0;

	x2 = (remains / 2) + following;
	y2 = 0;

	x3 = followers;
	y3 = 250;

	x4 = 0;
	y4 = 250;

	} else if(follwers < following){
	var remains = following - followers;
	x1 = 0;
	} else {
	var remains = 0;
	x1 = 0;
	};


	// Trapezoid points
	/* var x1 = 100;
	var y1 = 0;

	var x2 = 400;
	var y2 = 0;

	var x3 = 500;
	var y3 = 250;

	var x4 = 0;
	var y4 = 250;*/

	var upperBase = x2 - x1;
	var lowerBase = x3 - x4;

	document.write("Upper base is " + upperBase + "<br>");
	document.write("Lower base is " + lowerBase);

	var layer = new Kinetic.Layer();

	var poly = new Kinetic.Polygon({
	points: [x1,y1, x2,y2, x3,y3 , x4,y4],
	fill: '#00D2FF',
	strokeWidth: 0
	});

	// add the shape to the layer
	layer.add(poly);

	// add the layer to the stage
	stage.add(layer);