javascript - Js - 计算从映射到颜色形式正方形的点的距离？

Question

我正在开展一个项目，在该项目中，我可以可视化磁偶极子对一系列矢量的影响，目前我只是用一个极进行测试，有些东西不起作用，但我不知道为什么。

矢量接收到的力被映射到颜色上，以检查我是否做得正确，这些是我的结果:

这就是我正在使用的 Canvas

当我减小每个矢量的大小并增加密度时，您可以看到它形成了菱形而不是圆形图案。

有谁知道这是为什么或者可能导致它的原因吗？

代码如下:

function calcForce(magnet, vector){
    return 1/distance(magnet.x,magnet.y,vector.centerx,vector.centery) * magnet.force;
}
function distance(cx, cy, ex, ey){
    var dy = Math.abs(ey - cy);
    var dx = Math.abs(ex - cx);
    return Math.sqrt((dx^2) + (dy^2));
}
function mapRainbow(value) {
    return 'hsl(' + value + ',100%,50%)';
}
function map_range(value, low1, high1, low2, high2) {
    return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}
function mapForce(force){
    return map_range(force,10,1000,20,40);
}
function drawStroke(stroke){
    ctx.beginPath();
    ctx.moveTo(stroke.x1,stroke.y1);
    ctx.lineTo(stroke.x2,stroke.y2);
    stroke.color = mapRainbow(stroke.force);
    ctx.strokeStyle = stroke.color;
    ctx.stroke();
    ctx.closePath();
}

*这不是到目前为止的全部代码，但我认为这已经足够了，需要查看更多吗？就问吧。

Answer 1

使用距离生成渐变:

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
function distance(x1, y1, x2, y2) {
    return Math.sqrt((x2 -= x1) * x2 + (y2 -= y1) * y2);
}
function angleBetweenPoints(x1, y1, x2, y2) {
    return (Math.atan2(x2 - x1, y2 - y1) + 2 * Math.PI);
}
var center = { x: 250, y: 250 };
var vectorLength = 15;
function max(v, m) {
    if (v > m) {
        return m;
    }
    return v;
}
function draw() {
    if (Math.random() > 0.5) {
        center.x += (Math.random() - 0.5) * 10;
    }
    else {
        center.y += (Math.random() - 0.5) * 10;
    }
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    for (var xIndex = 0; xIndex < canvas.width; xIndex += vectorLength) {
        for (var yIndex = 0; yIndex < canvas.height; yIndex += vectorLength) {
            var x = xIndex - (Math.random() * vectorLength * 0.0);
            var y = yIndex - (Math.random() * vectorLength * 0.0);
            var angle = angleBetweenPoints(center.x, center.y, x, y);
            var dist = distance(x, y, center.x, center.y);
            ctx.fillStyle = "rgb(" + Math.floor(max(dist, 255)) + "," + Math.floor((255 - max(dist, 255))) + ",0)";
            ctx.translate((x + vectorLength * 0.5), (y + vectorLength * 0.5));
            ctx.rotate(-angle);
            ctx.fillRect(0 - vectorLength * 0.5, 0 - vectorLength * 0.5, vectorLength * 0.25, vectorLength * 0.75);
            ctx.rotate(angle);
            ctx.translate(0 - (x + vectorLength * 0.5), 0 - (y + vectorLength * 0.5));
        }
    }
    ctx.fillRect(center.x + vectorLength / 2, center.y + vectorLength / 2, vectorLength, vectorLength);
    requestAnimationFrame(function () {
        setTimeout(draw, 1000 / 60);
    });
}
draw();