p5.js 如何让一条线在两个方向上无限延伸

Question

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

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

Answer 1

你必须找到 canvas 之外的点（在对边）和由 2 个点定义的线上。这些点不必正好位于 canvas 的边界，它们必须刚好在 canvas.
之外 canvas 上可能的最大距离是 canvas 对角线的长度。因此，如果你从 canvas 上的任何一点开始，在任何方向上，长度大于对角线的长度，那么你就离开了 canvas。找到直线的方向，从一个点开始，沿着这个方向，canvas 对角线的长度。这是无尽线的第一个点终点。向相反方向走可以找到第二个点。

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

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

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

找到直线的方向。方向向量可以通过py减去(sub()) the 2 points of the line. Set the length of the vector to the length of the canvas diagonal (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()) and subtracting (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

p5.js 如何让一条线在两个方向上无限延伸

p5.js How do I let a Line go endless in both directions

javascript

processing

line

p5.js