My code is designed to classify a point as 1 if it's above the line y=x, and -1 if it's below the line y=x. I visually represent this line in a canvas by plotting y=x (although due to invertion on the y-axis, it appears like y=-x). For each point, I draw it using green color if it's 1 and red color if it's -1. The expected outcome is a straight line with one side being green and the other side being red. However, when running the code, the result turns out to be unexpected.
This is how I label my points using JavaScript:
function Point(x, y){
this.x = x;
this.y = y;
this.label = 0;
if(this.y >= this.x){
this.label = 1;
console.log(x, y, "UP");
}else if(this.y < this.x){
this.label = -1;
console.log(x, y, "Down");
}
}
And here is the code for painting the points in the canvas:
function draw(){
ctx.clearRect(0, 0, can1.width, can1.height);
ctx.strokeStyle = "yellow";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(can1.width, can1.height);
ctx.stroke();
ctx.closePath();
for(var i = 0; i < points.length; i++){
var x = points[i].x;
var y = points[i].y;
if(points[i].label == 1){
var color = "Chartreuse";
}else{
var color = "red";
}
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
}
}
Upon running the code in the browser, the visual output appeared as shown in this image: https://i.sstatic.net/yHM2I.png
The visualization seems to only partially align with expectations. Any assistance or insights would be greatly appreciated!
Edit: Note that the x and y values are randomly assigned in other parts of the code.
Thank you for your help!