CODEWITHSUNDEEP
javascriptprocessingp5.js
Tudor Popescu
Tudor Popescu

Reputation: 557

How to limit where you are drawing lines

I am trying to limit where I am drawing lines inside a triangle, so the lines don't overflow and disrupt other elements of the canvas, here is my code so far: 

var points = [];
var r = 500;
var lines = 30;

function setup() {
  createCanvas(1000, 1000);
  angleMode(DEGREES);
  var angle = 60;
  for (var i = 1; i < 7; i++) {
    var tempX = r * sin((angle * i + 30) % 360) + width / 2;
    var tempY = r * cos((angle * i + 30) % 360) + height / 2;
    points.push([tempX, tempY]);
  }
  noSmooth();
  noLoop();
}

function draw() {
  for (var i = 0; i < points.length; i++) {
    line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);
    var tempAngle = 240 + i * 60;
    var tempX = r * 1.1545 * sin(tempAngle) + points[i][0];
    var tempY = r * 1.1545 * cos(tempAngle) + points[i][1];
    fill(255);
    triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);
    stroke(0);
    for (var j = 0; j < lines + 1; j++) {
      var distance = r + (dist(points[i][0], points[i][1], tempX, tempY) - r) / lines * j;
      var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;
      var tempX2 = distance * sin(tempAngle2) + points[i][0];
      var tempY2 = distance * cos(tempAngle2) + points[i][1];;
      line(points[i][0], points[i][1], tempX2, tempY2);
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

Upvotes: 2

Views: 188

Answers (1)

Rabbid76
Rabbid76

Reputation: 210878

You can take advantage of the fact that the angle between the current element and the next element is always 90 °. This results in that the length of the lines along the triangles increases with the reciprocal cosine of the angles:

Note, an angle in degrees can be converted to an angle in radians by angle_red = Math.PI * angle_degree/180.0:

var angle_degree = 30.0;
var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);

See the example, where i applied the formula for the length of the lines to your original code:

var points = [];
var r = 250;
var lines = 30;

function setup() {
    createCanvas(500, 500);
    angleMode(DEGREES);
    var angle = 60;
    for (var i = 1; i < 7; i++) {
        var tempX = r * sin((angle * i + 30) % 360) + width / 2;
        var tempY = r * cos((angle * i + 30) % 360) + height / 2;
        points.push([tempX, tempY]);
    }
    noSmooth();
    noLoop();
}

function draw() {
    for (var i = 0; i < points.length; i++) {
        line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);
        var tempAngle = 240 + i * 60;
        var angle_degree = 30.0;
        var dist_pt = r / Math.cos(Math.PI * angle_degree/180.0);
        var tempX = dist_pt * sin(tempAngle) + points[i][0];
        var tempY = dist_pt * cos(tempAngle) + points[i][1];
        fill(255, 128+i*20, 128);
        triangle(points[i][0], points[i][1], tempX, tempY, points[(i + 1) % 6][0], points[(i + 1) % 6][1]);
        stroke(0);
       
        for (var j = 0; j < lines + 1; j++) {
            var cur_angle = 30 / lines * j;
            var distance = r / Math.cos(Math.PI * cur_angle/180.0);
            var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;
            var tempX2 = distance * sin(tempAngle2) + points[i][0];
            var tempY2 = distance * cos(tempAngle2) + points[i][1];;
            line(points[i][0], points[i][1], tempX2, tempY2);
        }
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

Upvotes: 2

Related Questions