Canvas game separation of the triangle

Question

http://joxi.ru/NDrlaKnT01RamP The goal is to ensure that the user can visually divided into equal parts triangle. The resulting figure should be equal in size with an accuracy of 10%. How to implement it on the canvas? Can someone tell?

Yes of course. I got to create from one side to another side of the triangle line. Get the point, assign points to an array of points of each line. My main problem is that I can not draw the resulting figures after the separation, in order to calculate their area. I do not know how to draw the points now like this: http://joxi.ru/j1A5bL4iGPdDrE — Alexander Lyashenko, Mar 23 '15 at 09:36
in the example quoted in your comment, the initial triangle is not splitted into two triangles, but rather splitted by a line into one line and one polygon. Unclear what you're asking. — GameAlchemist, Mar 23 '15 at 13:25
@GameAlchemist, They are letting the player subdivide an original triangle into 2 pieces--2 new polygons. The player wins if the 2 new polygons are within 10% the same area as each other. Normally I would hesitate to answer non-code-questions with a code-answer, but what they want is trivially easy in KonvaJS (formerly KineticJS) :-) — markE, Mar 23 '15 at 17:31

score 1 · Answer 1 · answered Mar 23 '15 at 17:21

Part 1: Drawing the original and subdivided polygons:

To draw any polygon shape (3 sides triangles, 4,5,6+ sided polygons) you can use the Konvas.Line. Just feed it the points of each vertex on the polygon and you're done!

// points[] are the vector points of any polygon

var newTriangle = new Konva.Line({
  points: [220,220,295,140,375,220,222,220],
  stroke: 'black',
  closed : true,
});

Here's an example that shows your original triangle and the 2 new shapes divided from the original triangle (your 3 & 4 sided polygons):

enter image description here

var stage = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 350
});

var layer = new Konva.Layer();
stage.add(layer);

var originalTriangle = new Konva.Line({
  points: [12,220,195,40,375,220,12,220],
  stroke: 'black',
  strokeWidth: 7,
  closed : true
});
layer.add(originalTriangle);

var newQuadrilateral = new Konva.Line({
  points: [12,220,195,40,295,140,220,220,12,220],
  fill: 'gold',
  stroke: 'black',
  strokeWidth: 3,
  closed : true,
  draggable:true,
});
layer.add(newQuadrilateral);

var newTriangle = new Konva.Line({
  points: [220,220,295,140,375,220,222,220],
  fill: 'green',
  stroke: 'black',
  strokeWidth: 3,
  closed : true,
  draggable:true,
});
layer.add(newTriangle);

layer.draw();

body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:350px;
}

<script src="https://cdn.rawgit.com/konvajs/konva/0.9.0/konva.min.js"></script>
<h4>The new shapes are draggable (yellow and green)</h4>
<div id="container"></div>

Part 2: Calculating the areas of the subdivided polygons

You indicate you have the math to calculate the subdivided areas handled, but just in case here's a link: http://www.wikihow.com/Calculate-the-Area-of-a-Polygon#Finding_the_Area_of_Irregular_Polygons_sub

User must devide the triangel and after that I must calculate the areas. Your answer is not what I need. — Alexander Lyashenko, Mar 25 '15 at 14:58
I understand that...but...Surely you don't want me to take all your fun by coding your entire project! All that's left for you to do is listen for a couple of mouse events and plug those mouse points into my solution. After all this is **your project!** :-}} — markE, Mar 25 '15 at 16:32

Canvas game separation of the triangle

1 Answers1