我正在制作一个程序,该程序创建并移动一些点,然后将每个点连接到与其最接近的x个点。我的问题是,在错误的位置创建了行,或者不是所有的行都是怪异的。这是我的代码:
var numPoints = 10;
var connections = 3;
var points = [];
var noiseT = [];
function setup() {
createCanvas(displayWidth, displayHeight);
// creating points and settings for the random movement
for (var i = 0; i < numPoints; i++) {
var tempNoiseX = random(-50, 50);
var tempNoiseY = random(-50, 50);
var tempNoiseXplus = random(-0.002, 0.002);
var tempNoiseYplus = random(-0.002, 0.002);
noiseT.push([tempNoiseX, tempNoiseY, tempNoiseXplus, tempNoiseYplus]);
var tempX = width * noise(noiseT[i][0]);
var tempY = height * noise(noiseT[i][1]);
points.push([tempX, tempY]);
}
frameRate(60);
stroke(0,0,255);
background(0);
}
function draw() {
background(0);
// moving the points
for (var i = 0; i < numPoints; i++) {
points[i][0] = width * noise(noiseT[i][0]) * 1.2;
points[i][1] = height * noise(noiseT[i][1]) * 1.2;
}
// calculate the distance between all the points
for (var i = 0; i < points.length; i++) {
var distance = {};
for (var j = 0; j < numPoints; j++) {
var startX = points[i][0];
var startY = points[i][1];
var endX = points[j][0];
var endY = points[j][1];
var tempDistance = dist(startX, startX, endX, endY);
distance[tempDistance] = [endX, endY];
}
var tempKeys = Object.values(Object.keys(distance)).sort(function(a, b) {
return a - b
});
// drawing lines
for (var c = 0; c < connections; c++) {
line(points[i][0], points[i][1], distance[tempKeys[c]][0], distance[tempKeys[c]][1]);
}
}
// adding noise
for (var i = 0; i < noiseT.length; i++) {
noiseT[i][0] += noiseT[i][2];
noiseT[i][1] += noiseT[i][3];
}
// cehcking the borders
for (var i = 0; i < points.length; i++) {
if (points[i][0] >= width) {
points[i][0] = width;
} else if (points[i][0] <= 0) {
points[i][0] = 0;
}
if (points[i][1] >= height) {
points[i][1] = height;
} else if (points[i][1] <= 0) {
points[i][1] = 0;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
我已经尝试过在不同点绘制线条以及如何制作它们,所有这些都导致了相同的问题。 (顺便说一句,代码被缩小了很多)
答案 0 :(得分:2)
您在dist(startX, startX, endX, endY)
中的代码中有一个错字,startX
是两次,但缺少startY
。必须是:
var tempDistance = dist(startX, startY, endX, endY);
列表中的第一个点是点本身,因为它的距离为0。因此,除点本身以外,最接近的3个点是索引为1、2和3的点。
for (var c = 1; c <= connections; c++) {
line(points[i][0], points[i][1], distance[tempKeys[c]][0], distance[tempKeys[c]][1]);
}
var numPoints = 10;
var connections = 3;
var points = [];
var noiseT = [];
function setup() {
createCanvas(innerWidth, innerHeight);
// creating points and settings for the random movement
for (var i = 0; i < numPoints; i++) {
var tempNoiseX = random(-50, 50);
var tempNoiseY = random(-50, 50);
var tempNoiseXplus = random(-0.002, 0.002);
var tempNoiseYplus = random(-0.002, 0.002);
noiseT.push([tempNoiseX, tempNoiseY, tempNoiseXplus, tempNoiseYplus]);
var tempX = width * noise(noiseT[i][0]);
var tempY = height * noise(noiseT[i][1]);
points.push([tempX, tempY]);
}
frameRate(60);
stroke(0,0,255);
background(0);
}
function draw() {
background(0);
// moving the points
for (var i = 0; i < numPoints; i++) {
points[i][0] = width * noise(noiseT[i][0]) * 1.2;
points[i][1] = height * noise(noiseT[i][1]) * 1.2;
}
// calculate the distance between all the points
for (var i = 0; i < points.length; i++) {
var distance = {};
for (var j = 0; j < numPoints; j++) {
var startX = points[i][0];
var startY = points[i][1];
var endX = points[j][0];
var endY = points[j][1];
var tempDistance = dist(startX, startY, endX, endY);
distance[tempDistance] = [endX, endY];
}
var tempKeys = Object.values(Object.keys(distance)).sort(function(a, b) {
return a - b
});
// drawing lines
for (var c = 1; c <= connections; c++) {
line(points[i][0], points[i][1], distance[tempKeys[c]][0], distance[tempKeys[c]][1]);
}
}
// adding noise
for (var i = 0; i < noiseT.length; i++) {
noiseT[i][0] += noiseT[i][2];
noiseT[i][1] += noiseT[i][3];
}
// cehcking the borders
for (var i = 0; i < points.length; i++) {
if (points[i][0] >= width) {
points[i][0] = width;
} else if (points[i][0] <= 0) {
points[i][0] = 0;
}
if (points[i][1] >= height) {
points[i][1] = height;
} else if (points[i][1] <= 0) {
points[i][1] = 0;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>