I have a streamlined wind map (see https://earth.nullschool.net/ for what it is supposed to look like).
I have a weighted interpolation for the point every 10ms and it creates a uVector and a vVector, which then calculates that speed. Based on that speed, a corresponding color is assigned to that point as below.
if (weightWS < 13) {
color = "#ffa500"
}
if (weightWS < 10) {
color = "#CCCC00"
}
if (weightWS < 7) {
color = "#008000"
}
if (weightWS < 4) {
color = "#0000ff"
}
if (weightWS < 1) {
color = "#800080"
}
The color then gets sent to the animate function. It is in drawData[3].
function animate(){
//This changes the opacity of the canvas
ctx.beginPath();
ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.closePath();
//This is where the point is created.
for(var pointCount=0;pointCount<pointNum;pointCount++){
let xMid,yMid;
let xPoint = points[pointCount][0];
let yPoint = points[pointCount][1];
if(xPoint < 141 || xPoint >580 || yPoint < 120 || yPoint > 524){
xPoint = getRandomIntInclusive(141,580);
yPoint = getRandomIntInclusive(120,524);
points.push([xPoint,yPoint]);
}
//ctx.fillStyle = "#000000";
var drawData = weightAllData(xPoint,yPoint); //output: speed, uVec, vVec, color
colorArr[pointCount] = drawData[3]; //assign color to array, for QA purposes
ctx.moveTo(xPoint, yPoint);
ctx.lineTo(xPoint+drawData[1],yPoint+drawData[2]);
ctx.strokeStyle = drawData[3]; //assign the color to the strokeStyle
//console.log(ctx.strokeStyle); //prints color
ctx.stroke(); //makes line.
points[pointCount][0] = xPoint+drawData[1];
points[pointCount][1] = yPoint+drawData[2];
//console.log(drawData[0])
}
Although the console shows different colors, mainly "#800080" and "#0000ff", the color is affecting all of the points, and the points that have a speed of 1+ still has a color of purple ("#800080").
The color should only be affecting one pixel at a time, and I am positive that some blue points ("#0000ff") should be showing. If a blue point shows, it is all of the pixels at once, which is not the goal.
This happens no matter what speed the animation is at (e.g. 10ms, 1000ms, 10000ms). Does anyone have any solutions or inklings of what the problem is?
Thank you so much for all of your help. I really appreciate the time and effort spent.
The problem is that inside the for loop you are adding path segments to the same path.
For example the following snippet has two loops. The first adds 100 path segments to one path. All the lines are redrawn each time stroke() is called. All the path segments are drawn in the last color used. Also it is very inefficient, the top loop ends up drawing 5050 line segments, 1st pass draws 1 line, 2nd pass draws 2 more, 3rd pass draws 3 more (3rd pass 6 lines already drawn) and so on.
The second loop starts a new path inside the loop and each path segment get a different color, and there are only 100 line segments drawn.
const ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
const colors = ["Green", "Blue", "Red", "Black", "Yellow"];
ctx.beginPath(); // start a new path
for (let i = 0; i < 100; i ++) {
ctx.strokeStyle = colors[i % colors.length];
ctx.moveTo(i * 5, 0); // adds to existing path
ctx.lineTo(i * 5, 40);
ctx.stroke(); // draw all path segments since last beginPath
}
for (let i = 0; i < 100; i ++) {
ctx.strokeStyle = colors[i % colors.length];
ctx.beginPath(); // start a new path
ctx.moveTo(i * 5, 60); // adds to the path
ctx.lineTo(i * 5, 100);
ctx.stroke(); // draw the path
}canvas {boarder: 2px solid #000}<canvas id="canvas" width="500" height="100"></canvas>Generally whenever you change the style, line width, etc you need to start a new path.