如何限制画线的位置

Question

我试图限制我在三角形内绘制线条的位置，这样线条就不会溢出并破坏 canvas 的其他元素，这是我目前的代码：

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>

Answer 1

您可以利用当前元素与下一个元素之间的角度始终为 90° 的事实。这导致沿着三角形的线的长度随着角度的倒余弦而增加：

请注意，可以通过 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);

查看示例，其中我将行的长度公式应用于您的原始代码：

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>

如何限制画线的位置

How to limit where you are drawing lines

javascript

processing

p5.js