I have a code that classifies a point 1 if it's above the line y=x, and -1 if it's below the line y=x. I draw the line in canvas of y=x(Since the y axis is inverted in canvas it looks like y=-x). Then I draw each point, and if it's 1 I paint it green, if it's -1 I paint it red. I would expect to see a straight line with one side being green and one side being red. I ran the code and I got a weird result.
Here's the code for how I label my points:
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");
}
}
Here's the code to paint the points:
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();
}
}
I then run it in the browser and I get this: 
It seems to be kind of working, but not fully?
Edit: The x and y values are assigned randomly in other parts of the code.
Please help and thanks!
Aucun commentaire:
Enregistrer un commentaire