dist() returns 与 console.log 不同的结果

Question

我正在制作一个程序来创建和移动一些点，然后每个点都连接到离它最近的 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>

我已经尝试过在不同点制作线条以及我如何制作它们，所有这些都导致了同样的问题。（顺便把代码缩小了很多）

Answer 1

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>

dist() returns 与 console.log 不同的结果

dist() returns different result compared to the console.log

javascript

processing

p5.js