class Curve{

    constructor(x, y){
        this.x = size / 2 + (x + 1) * size;
        this.y = size / 2 + (y + 1) * size;
        this.vertices = [];
        this.color = Curve.getColor(x + 1, y + 1);
        this.image = createGraphics(size, size);
        this.image.clear();
        this.image.strokeWeight(1);
        this.image.stroke(this.color);
    }

    static getColor(x, y){
        let div = x / y;
        if (div > 1) div = y / x;
        colorMode(HSB);
        let c = color(div * 360, 100, 100);
        colorMode(RGB);
        return c;
    }

    update(xi, yi){
        let x = size / 2 + sin(angle * (xi + 1)) * radius;
        let y = size / 2 - cos(angle * (yi + 1)) * radius;
        this.addPoint(x, y);
    }

    addPoint(x, y){
        let v1 = this.vertices[this.vertices.length - 1];
        let x1 = x;
        let y1 = y;
        if (v1){
            x1 = v1.x;
            y1 = v1.y;
        }
        this.vertices.push({x: x, y: y});

        this.image.line(x1, y1, x, y);
    }

    reset(){
        this.vertices = [];
        this.image.clear();
    }

    show(){
        image(this.image, this.x, this.y);

        translate(this.x, this.y);
        stroke(200);
        strokeWeight(10);
        let v = this.vertices[this.vertices.length - 1];
        if (v)
            point(v.x - size / 2, v.y - size / 2);
        translate(-this.x, -this.y);
    }

}