dimanche 18 février 2018

If statement not working (Javscript)

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: What I see in the browser

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