How to make a triangle pattern drawing

Question

I have this code:

ctx.beginPath();
ctx.moveTo(X1,Y1);
ctx.lineTo(X2,Y2);
ctx.lineTo(X3,Y3);
ctx.lineTo(X4,Y4);
ctx.closePath();
ctx.stroke();

Note:

There are four points (A,B,C,D).
Triangle can be formed if X1 !== X3
An Imaginary line is formed between the points to form a triangle shape

I'm really confused about exactly how those points are supposed to make triangles. Why not just make a triangle with 3 points? — Spencer Wieczorek, Oct 02 '15 at 04:13
Sorry but what I needed is 4 points, btw it can be drag so it's more flexible but I already handles the dragging and extending of points — Believer, Oct 02 '15 at 04:25
@newuser1 How are you coming up with the triangles in the example? I don't see how those 4 points are making such triangles. — Spencer Wieczorek, Oct 02 '15 at 04:29
@Spencer It's like there is invisible lines between Point A and C , D and B and so on — Believer, Oct 02 '15 at 04:38
@newuser1 Ok I see, but it seems like you could end up with a few different triangles with that approach. For example the second example you could just have a line directly from A to D and still form a triangle to that condition. — Spencer Wieczorek, Oct 02 '15 at 04:46
So please give us a better description of your rules about forming triangles. — markE, Oct 02 '15 at 13:40
"its ok I will handle that but what I need is how to do it" I think I can fix your code but what I need is you to do it... — Kaiido, Oct 05 '15 at 04:10
@Kaiido can u give me an idea on how to create an invisible infinite line so that I can create a triangle given the intersection of the points — Believer, Oct 05 '15 at 04:12
you don't want to draw an infinite line, you can stop it at canvas' boundaries. Now, your requirements are not clear enough for anybody to help you. As pointed by Spencer Wieczorek, there are many possible shapes from your given points, so as pointed by markE, you have to set the rules, we can't do it for you, even for every SO's SillyUnicornPoints — Kaiido, Oct 05 '15 at 04:25
@Kaiido Example to create a triangle 1. Form a connecting line between point D and B infinity and point A to C, then A will create a straight line. — Believer, Oct 05 '15 at 04:33
Sorry, but with those unclear requirements seems like you only need someone to do your homework. — Yëco, Oct 05 '15 at 06:02
Here I made it to show you that your requirements are still unsolvable : http://jsfiddle.net/1kttzbk1/ Hope it may help... — Kaiido, Oct 05 '15 at 06:21
@Kaiido is it possible to delete the other triangles formed after the intersection? — Believer, Oct 05 '15 at 06:35
No, that's the point, you have to set the rules to determine which one you want — Kaiido, Oct 05 '15 at 06:36
@Kaiido how will I choose which triangle to retain or delete assuming that the rules is completed? — Believer, Oct 05 '15 at 06:55
@Kaiido I will try this http://stackoverflow.com/questions/563198/how-do-you-detect-where-two-line-segments-intersect — Believer, Oct 05 '15 at 06:57
to implement that after intersection, the infinite line should be stop — Believer, Oct 05 '15 at 06:58

score 2 · Answer 1 · answered Oct 05 '15 at 07:50

You'll have to choose which shape you will draw, here is an implementation drawing four possible ones :

var ctx = canvas.getContext('2d'),
    activePoint,
    dragging,
    names='ABCD';
    pointWidth = 10,
    points=[];

function isBetween(p,f){
   return (f-pointWidth/2 <= p && p <= f+pointWidth/2);
  }

function draw(){
   ctx.clearRect(0,0,canvas.width,canvas.height);
 if(points.length===4)
  drawTriangle();
   drawPoints();
 }

function drawPoints(){
 ctx.strokeStyle="black"
 ctx.fillStyle="black"
    for(var i=0; i<points.length; i++){
      ctx.beginPath();
      ctx.arc(points[i].x, points[i].y, pointWidth, 0, 2*Math.PI);
      ctx.stroke();
      }
    ctx.strokeStyle="purple"
 ctx.beginPath();
    for(var i=0; i<points.length-1; i++){
      ctx.moveTo(points[i].x, points[i].y);
      ctx.lineTo(points[(i+1)].x, points[(i+1)].y);
   ctx.fillText(names[i],points[i].x, points[i].y-pointWidth);
      }
 ctx.stroke();
 ctx.fillText(names[points.length-1],points[points.length-1].x, points[points.length-1].y-pointWidth);
  }

function drawTriangle(){
  var db = {x1:points[3].x, y1:points[3].y, x2:points[1].x, y2:points[1].y};
  var l1 = drawLines(db);
  var ca = {x1:points[2].x, y1:points[2].y, x2:points[0].x, y2:points[0].y};
  var l2 = drawLines(ca);

  var inter = getIntersect(l1, l2);
  if(inter){
    ctx.fillStyle="rgba(255,0,255,.25)";
 ctx.beginPath();
 ctx.lineTo(l1.x1, l1.y1);
 ctx.lineTo(inter.x, inter.y);
 ctx.lineTo(l2.x2, l2.y2);
 ctx.closePath();
 ctx.fill();

    ctx.fillStyle="rgba(0,0,255,.25)";
 ctx.beginPath();
 ctx.lineTo(l2.x1, l2.y1);
 ctx.lineTo(inter.x, inter.y);
 ctx.lineTo(l1.x2, l1.y2);
 ctx.closePath();
 ctx.fill();

    ctx.fillStyle="rgba(255,0,0,.25)";
 ctx.beginPath();
 ctx.lineTo(l1.x1, l1.y1);
 ctx.lineTo(inter.x, inter.y);
 ctx.lineTo(l2.x1, l2.y1);
 ctx.closePath();
 ctx.fill();

    ctx.fillStyle="rgba(255,255,0,.25)";
 ctx.beginPath();
 ctx.lineTo(l2.x2, l2.y2);
 ctx.lineTo(inter.x, inter.y);
 ctx.lineTo(l1.x2, l1.y2);
 ctx.closePath();
 ctx.fill();

   ctx.fillStyle= "red";
   ctx.beginPath();
   ctx.arc(inter.x, inter.y, pointWidth/3, 0, 2*Math.PI);
   ctx.fill();
 }
  }

function drawLines(pt){
  var segLength = Math.sqrt(Math.pow((pt.x1 - pt.x2), 2) + Math.pow((pt.y1 - pt.y2), 2)),
  startDist = Math.max(canvas.width,canvas.height)*-2,
  endDist = startDist*-1;

  var rX1 = pt.x2 + (pt.x2 - pt.x1) / segLength * startDist;
  var rY1 = pt.y2 + (pt.y2 - pt.y1) / segLength * startDist;

  var rX2 = pt.x2 + (pt.x2 - pt.x1) / segLength * endDist;
  var rY2 = pt.y2 + (pt.y2 - pt.y1) / segLength * endDist;
  ctx.beginPath();  
  ctx.strokeStyle="green";
  ctx.moveTo(rX1, rY1);
  ctx.lineTo(rX2, rY2);
  ctx.stroke();
  
  return {x1:rX1, y1:rY1, x2:rX2, y2:rY2};
}

function getIntersect(l1, l2){
 den = ((l2.y2 - l2.y1) * (l1.x2 - l1.x1)) - ((l2.x2 - l2.x1) * (l1.y2 - l1.y1));
    if (den == 0) {
        return false;
    }
    a = l1.y1 - l2.y1;
    b = l1.x1 - l2.x1;
    num1 = ((l2.x2 - l2.x1) * a) - ((l2.y2 - l2.y1) * b);
    num2 = ((l1.x2 - l1.x1) * a) - ((l1.y2 - l1.y1) * b);
    a = num1 / den;
    b = num2 / den;

    var x = l1.x1 + (a * (l1.x2 - l1.x1));
    var y = l1.y1 + (a * (l1.y2 - l1.y1));
 return {x:x,y:y};
 }

canvas.onmousemove = function(e){
  var rect = this.getBoundingClientRect();
  var x = e.clientX-rect.left;
  var y = e.clientY-rect.top;
  if(!dragging){
    for(var i=0; i< points.length; i++){
       if(isBetween(x, points[i].x) && isBetween(y, points[i].y)){
          this.style.cursor = 'pointer';
          activePoint = points[i];
          return;
         }
      }
    this.style.cursor = 'default';
    activePoint = null;
    }
  else{
    activePoint.x=x; activePoint.y=y;
    draw();
    }
 }

canvas.onmousedown = function(e){
    if(points.length<4){
      var rect = this.getBoundingClientRect();
      var x = e.clientX-rect.left;
      var y = e.clientY-rect.top;
      points.push({x:x, y:y})
      draw();
      }
    if(!activePoint) return;
    dragging = true;
  }

canvas.onmouseup = function(e){
    dragging = false;
  }

canvas{border: 1px solid red}

<canvas id="canvas" width="500" height="500"></canvas>

You just have to pick one of the four possibilities in the `drawTriangles()` func — Kaiido, Oct 05 '15 at 07:58
what about the continuation of other infinite lines? how to delete the excess lines not selected? — Believer, Oct 05 '15 at 08:35

score 0 · Accepted Answer · answered Oct 07 '15 at 04:05

0

Basically what you need are:

1. Get the Infinity line of lines AC and BD.
2. Get the intersection point of lines AC and BD.(2nd point).
3. After saving the intersection point choose the infinity lines between A,B,C and D depending on your constraint then make an infinity out of it (3rd point).
4. Go back to your line to serve as a point 1

answered Oct 07 '15 at 04:05

ajbee

3,511
3
29
56

That's not entirely true : You can't draw the infinity line. You only need to extend the segment out of canvas boundaries. – Kaiido Oct 08 '15 at 01:32

How to make a triangle pattern drawing

2 Answers2