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

Question

我正在开展一个项目，在这个项目中我可以看到磁偶极子对一系列矢量的影响，我现在只是测试一个极点而且有些东西不起作用但我不知道为什么。

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

所以这是我正在使用的画布

当我降低每个矢量的大小并增加密度时，你可以看到它形成钻石而不是圆形图案。

有人知道这是为什么或可能导致什么原因吗？

下面的代码：

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

使用距离生成渐变：

＆＃13;

＆＃13;

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();

＆＃13;

＆＃13;

＆＃13;