javascript - 如何在 p5.js 中的点数组之间绘制正方形?
问题描述
我有一个包含 6 组随机 x、y 坐标的数组。我可以绘制连接点的线,如下所示:
但是,我无法弄清楚如何在线条所在的位置绘制重复的正方形(以实现虚线效果)。现在,我能够得到这个,但我只想沿着这条线画正方形:
我理解我在理论上做错了什么,但在这里的数学真的很挣扎。我如何只包括沿线出现的正方形?TIA。
这是我现在的代码:
let w = 500;
let h = 500;
let riverArr = [];
let distanceArr = [];
function setup() {
createCanvas(w, h);
}
function draw() {
background(240);
generatePoints();
for (i = 1; i < riverArr.length; i++) {
let x1 = parseInt(riverArr[i][0]);
let y1 = parseInt(riverArr[i][1]);
let x2 = parseInt(riverArr[i - 1][0]);
let y2 = parseInt(riverArr[i - 1][1]);
line(x1, y1, x2, y2);
let d = int(dist(x1, y1, x2, y2));
ellipse(x1, y1, 5);
for (j = 0; j <= x1; j++) {
for (k = 0; k <= y1; k++){
rect(j, k, 1);
}
}
distanceArr.push(d);
}
noLoop();
}
function generatePoints() {
let finished;
riverArr.push([0, random(h)]);
for (i = 0; i < 4; i++) {
finished == false;
riverArr.push([random(w), random(h)]);
if (i > 0 && riverArr[i][0] <= riverArr[i - 1][0]) {
console.log(riverArr[i][0], riverArr[i - 1][0]);
console.log('Bad path');
}
finished == true;
}
riverArr.push([w, random(h)]);
}
解决方案
像这样的东西?
let points = [];
const rectSize = 10;
function setup() {
createCanvas(400, 400);
// add random points to a list
for (let i = 0; i < 4; i++)
points.push(createVector(random(0, width), random(0, height)));
rectMode(CENTER);
fill(0);
noStroke();
}
function draw() {
background(255);
// from the first point to the one before last
for (let i = 0; i < points.length - 1; i++) {
// get a reference to the current and next point
const current = points[i], next = points[i + 1];
// calculate how many rectangles to draw in between two points
// 1. calculate the distance between the current and next point
// 2. divide the distance by twice the rectangle size (to achieve an equal gap between drawn and not drawn rectangles
// 3. round down (floor) the divided distance
const count = floor(dist(current.x, current.y, next.x, next.y) / (rectSize * 2));
// compute direction of movement vector from one point to the next
// 1. subtract current vector from next vector (e.g. each componeny (x,y))
// 2. divide direction vector by how many rectangles
// 3. store result in a p5.js Vector object (e.g. if count = 5, adding dir 5 times to current point gets us to the next point
const dir = createVector((next.x - current.x) / count, (next.y - current.y) / count);
// for each inbetween rectangles
for (let j = 0; j < count; j++)
// draw it by adding to the current position the direction towards the next position multiplied for each rectangle
rect(current.x + dir.x * j, current.y + dir.y * j, rectSize, rectSize);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
它没有使用您的逻辑,但我认为调整它不会太难。
另外,我刚刚注意到,在您的generatePoints()
方法中,您是在说finished == true/false
. 我不知道有什么目的finished
,但是您可能应该将其更改==
为=
for assignment,而不是比较。
推荐阅读
- laravel - 将数组值映射到项目集合
- r - 如何结合不同调查的结果?
- javascript - 如何使用从数据库或变量中查询的模板文字?
- es6-modules - 如何将一个 ES6 模块存储在多个文件中?
- java - 骆驼交换为多部分请求提供空附件
- javascript - JS防止焦点上闪烁的输入边框
- html - 使用 Bootstrap 4 在移动设备上定位导航栏图标?
- react-native - 无法使用导航和多个 StackNavigators 传递参数
- python - python-pptx:处理受密码保护的 PowerPoint 文件
- acumatica - 如何从自定义屏幕将值传递给确认弹出窗口