javascript - p5.j​​s 我如何让一条线在两个方向上无限延伸

Question

我想让 P5.js 中的一条线在两个方向上无限延伸/100/200 像素，并让它切两点

我知道 line() 但它只从一个点到另一个点并停在那里

Answer 1

您必须找到 Canvas 外(在相对侧)和由 2 个点定义的线上的点。这些点不必正好位于 Canvas 的边界，它们必须刚好在 Canvas 之外。
Canvas 上可能的最大距离是 Canvas 对 Angular 线的长度。所以如果你从 Canvas 上的任何一点，在任何方向，通过大于对 Angular 线长度的长度，那么你就离开了 Canvas 。找到线的方向，从一点开始，沿着这个方向， Canvas 对 Angular 线的长度。这是无尽线的第一个点终点。当你向相反的方向走时，可以找到第二个点。

要进行必要的计算，我建议使用 p5.Vector .

计算对 Angular 线的长度，这是矢量(windowWidth, windowHeight)的大小(mag()):

let dia_len = new p5.Vector(windowWidth, windowHeight).mag();

找到直线的方向。可以找到方向向量 py 减去 ( sub() ) 直线的 2 个点。将向量的长度设置为 Canvas 对 Angular 线的长度 ( setMag() ):

let p1 = new p5.Vector(x1, y1);
let p2 = new p5.Vector(x2, y2);
let dir_v = p5.Vector.sub(p2, p1).setMag(dia_len);

通过添加 (add()) 和减去 (sub()) 点中的方向向量，计算无限直线上的点:

let lp1 = p5.Vector.add(p1, dir_v);
let lp2 = p5.Vector.sub(p2, dir_v);

最后划清界限:

line(lp1.x, lp1.y, lp2.x, lp2.y);

画一条无限线的函数:

function endlessLine(x1, y1, x2, y2) {

    p1 = new p5.Vector(x1, y1);
    p2 = new p5.Vector(x2, y2);

    let dia_len = new p5.Vector(windowWidth, windowHeight).mag();
    let dir_v = p5.Vector.sub(p2, p1).setMag(dia_len);
    let lp1 = p5.Vector.add(p1, dir_v);
    let lp2 = p5.Vector.sub(p1, dir_v);

    line(lp1.x, lp1.y, lp2.x, lp2.y);
}

看例子:

var sketch = function( p ) {

p.setup = function() {
    let sketchCanvas = p.createCanvas(p.windowWidth, p.windowHeight);
    sketchCanvas.parent('p5js_canvas')
}

let points = [];
let move = []

p.endlessLine = function(x1, y1, x2, y2) {

    p1 = new p5.Vector(x1, y1);
    p2 = new p5.Vector(x2, y2);

    let dia_len = new p5.Vector(p.windowWidth, p.windowHeight).mag();
    let dir_v = p5.Vector.sub(p2, p1).setMag(dia_len);
    let lp1 = p5.Vector.add(p1, dir_v);
    let lp2 = p5.Vector.sub(p1, dir_v);

    p.line(lp1.x, lp1.y, lp2.x, lp2.y);
}

p.draw = function() {
        
    if (points.length == 0) {

        points = [];
        move = [];
        for (let i=0; i < 2; ++i ) {
            points.push( new p5.Vector(p.random(p.windowWidth-20)+10, p.random(p.windowHeight-20)+10));
            move.push( new p5.Vector(p.random(2)-1, p.random(2)-1) );
        }
    }
    else
    {
        for (let i=0; i < 2; ++i ) {
            points[i] = points[i].add(move[i]);
            if (points[i].x < 10 || points[i].x > p.windowWidth-10)
                move[i].x *= -1; 
            if (points[i].y < 10 || points[i].y > p.windowHeight-10)
                move[i].y *= -1;    
            move[i].x = Math.max(-1, Math.min(1, move[i].x+p.random(0.2)-0.1))
            move[i].y = Math.max(-1, Math.min(1, move[i].y+p.random(0.2)-0.1))
        }
    }

    // draw the scene

    p.background(192);
    
    p.stroke(0, 0, 255);
    p.fill(128, 128, 255);
    for (let i=0; i < points.length; ++i ) {
        p.ellipse(points[i].x, points[i].y, 10, 10);
    }

    p.stroke(0, 255, 0);
    p.fill(128, 255, 128, 128);
    p.endlessLine(points[0].x, points[0].y, points[1].x, points[1].y)
}

p.windowResized = function() {
    p.resizeCanvas(p.windowWidth, p.windowHeight);
    points = [];
}

p.mouseClicked = function() {
    points = [];
}

p.keyPressed = function() {
    points = []
}

};

var endless_line = new p5(sketch);

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<div id="p5js_canvas"></div>

Demo