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

使用距離，以產生梯度：

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