Ограничить длину линии - PullRequest
Новая
       45

Ограничить длину линии

1 голос
/ 07 июня 2019

Я пытаюсь нарисовать линию, представляющую «рогатку», и хочу, чтобы она имела максимальную длину рисования.

в p5 я рисую линию между позицией A и позицией B: 

line(posA.x, posA.y, posB.x, posB.y);

posA - мышь x и y. posB - это положение круга на холсте.

То, что я хочу сделать, это ограничить длину линии, чтобы она никогда не превышала 40px, но при этом указывала на мышь из круга.

1 Ответ

3 голосов
/ 07 июня 2019

Евклидово расстояние между 2 точками рассчитывается как sqrt(dx*dx + dy*dy). Если вы разделите вектор одной точки на другую по длине, то получите Единичный вектор с длиной 1.

Рассчитайте единичный вектор от posA до posB и умножьте его на 40: 

// (dx, dy): vector form "posA" to "posB" 
let dx = posB.x-posA.x;
let dy = posB.y-posA.y;

// dist : euclidean distance, length of the vecotr 
let dist = Math.sqrt(dx*dx + dy*dy);

// (ux, uy): unit vector form 'posA' in direction to 'posB', with length 1 
let ux = dx / dist;
let uy = dy / dist;

// (x2, y2): point with a distance of 40 from "posA" an the vector to "posB"
let x2 = posA.x + ux * 40;
let y2 = posA.y + uy * 40;

line(posA.x, posA.y, x2, y2);

В p5.js вы можете использовать p5.Vector для всех этих вычислений.

  • .sub() вычитает две точки и вычисляет вектор
  • .normalize() вычисляет единичный вектор длиной 1
  • .mult() масштабирует вектор
  • .add() добавляет векторы к точке 
let A = createVector(posA.x, posA.y);
let B = createVector(posB.x, posB.y);

let P = B.sub(A).normalize().mult(40).add(A);
line(posA.x, posA.y, P.x, P.y);

См. Пример: 

function setup() {
    createCanvas(200, 200);
}

function draw() {

    background(0, 0, 0);
    stroke(255, 0, 0);
    strokeWeight(5);

    let A = createVector(width/2, height/2);
    let B = createVector(mouseX, mouseY);

    let P = B.sub(A).normalize().mult(40).add(A);
    line(A.x, A.y, P.x, P.y);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
...