Skip to content

Instantly share code, notes, and snippets.

/aybIG.markdown

Created August 3, 2015 19:26
Show Gist options
  • Save anonymous/036a7a858b73e69202cd to your computer and use it in GitHub Desktop.
Save anonymous/036a7a858b73e69202cd to your computer and use it in GitHub Desktop.
Download ZIP
aybIG
Raw
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>
Raw
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment