我有一个数组,包含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
服务,但你可能应该改变 ==
到 =
用于分配,而不是比较。