javascript p5.js：如何用小椭圆代替line()函数在两点之间画线？

qgelzfjb 于 2022-12-25 发布在 Java

关注(0)|答案(2)|浏览(139)

如何使用一串小椭圆而不是p5.js中常用的line()函数来连接两个点？
我试图创建一个更“艺术”的函数来代替p5.js中常用的line()函数。为了实现这一点，我想写一个函数，其中给定两个点（x，y）和（x1，y1），沿着连接两个点的线密集地和一致地绘制微小的圆圈。
我试着编写一个函数，首先查找所有可能的x和y点，然后使用条件，仅当i和j与（x1，y1）之间的斜率与（x，y）和（x1，y1）给定的斜率匹配时，才绘制椭圆。
这仅在（x，y）和（x1，y1）具有斜率0、1或未定义时给出我期望的结果;点间距随着任何其他斜率而显著变化。我不知道如何使点沿着我输入的任何线一致地放置。
我的职责如下：

function customLine(x, y, x1, y1) {
  for (var i = x; i >= x && i <= x1; i ++) { 
   for (var j = y; j >= y && j <= y1; j ++) {
    if ((j - y) / (i - x) == (y1 - y) / (x1 - x)) {
     fill(0);
     circle(i, j, 5);
   }
  }
 }
}

我还附加了一张图像，显示了坡度值为0、未定义或1时获得的预期效果，但坡度为分数时则没有：output of above code, illustrating issue
我怎样才能修复我的函数？或者有没有更简单的方法来做这件事？非常感谢！

JavaScript

来源：https://stackoverflow.com/questions/71981130/p5-js-how-can-i-draw-a-line-between-two-points-using-tiny-ellipses-instead-of-t

2条答案

按热度按时间

ccgok5k51#

我认为这里最简单的方法是使用一些向量和三角函数，请尝试以下方法：

function setup() {
  createCanvas(windowWidth, windowHeight);
  v = createVector();
}

function draw() {
  background(255);
  customLine(width / 2, height / 2, mouseX, mouseY);
}

function customLine(x, y, x1, y1) {
  v.x = x1 - x;
  v.y = y1 - y;
  for (let i = 0; i < v.mag(); i++) {
    fill(0).circle(x + i * cos(v.heading()), y + i * sin(v.heading()), 5);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

赞(0）回复(0）举报 2022-12-25

x0fgdtte2#

我认为您正在寻找两点之间的lerp（线性插值）。

let anchor;

function setup() {
  createCanvas(innerWidth, innerHeight);
  noLoop();
  anchor = createVector(innerWidth / 2, innerHeight / 2);
}

function draw() {
  drawDottedLine(anchor, createVector(mouseX, mouseY));
}

function mouseMoved() {
  clear();
  drawDottedLine(anchor, createVector(mouseX, mouseY));
}

const drawDottedLine = (p1, p2) =>
  lerpLine(p1, p2).forEach(({x, y}) => circle(x, y, 10))
;

const lerpLine = (p1, p2, steps = 10) =>
  [...Array(steps)]
    .map((_, i) => p5.Vector.lerp(p1, p2, norm(i, 0, steps)))
;

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

如果您希望间距保持一致并使用可变数量的点，则可以将两点之间的距离作为步数传递：
一个二个一个一个
或添加离散化：

let anchor;
let mouse;

function setup() {
  createCanvas(innerWidth, innerHeight);
  noLoop();
  anchor = createVector(innerWidth / 2, innerHeight / 2);
  mouse = createVector(0, 0);
}

function mouseMoved() {
  clear();
  const spacing = 10;
  mouse.x = floor(mouseX / spacing) * spacing;
  mouse.y = floor(mouseY / spacing) * spacing;
  const steps = floor(anchor.dist(mouse) / spacing);
  drawDottedLine(anchor, mouse, steps);
}

const drawDottedLine = (p1, p2, steps) =>
  lerpLine(p1, p2, steps).forEach(({x, y}) => circle(x, y, 10))
;

const lerpLine = (p1, p2, steps = 10) =>
  [...Array(steps)]
    .map((_, i) => p5.Vector.lerp(p1, p2, norm(i, 0, steps)))
;

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

赞(0）回复(0）举报 2022-12-25

我来回答

javascript p5.js：如何用小椭圆代替line()函数在两点之间画线？

2条答案

相关问题

热门标签

最新问答