paper.install(window);

window.onload = function() {
    var canvas = document.getElementById('myCanvas');
    paper.setup(canvas);

    var firstPoint = new Point(20, 40);
    var secondPoint = new Point(200,300);
    console.log(secondPoint); // { x: 20, y: 40 }
    
    secondPoint.y = 20;
    console.log(secondPoint); // { x: 20, y: 20 }
    
    console.log(firstPoint); // { x: 20, y: 40 }
    // console.log("Line from", firstPoint, "to", secondPoint);
    var path = new Path.Line(firstPoint, secondPoint);
    path.strokeColor = 'black';
    console.log(Path.Line);

    paper.view.draw();
};

// comme 0 = haut gauche de ma page en js, et que le 0 de ma lettre est diff je dois rajouter au x de ma lettre la diff
// qu'il y a par rapport à l'endroit ou je veux que ma lettre soit et faire la même chose avec y (mais soustraire)

const letterAnchors = {
    A: { begin: new Point(0, 228), end: new Point(142, 0) },
    B: { begin: new Point(0, 228), end: new Point(122, 0) },
    C: { begin: new Point(0, 225), end: new Point(149, 0) },
    D: { begin: new Point(0, 151), end: new Point(183, 0) },
    E: { begin: new Point(0, 155), end: new Point(156, 0) },
    F: { begin: new Point(0, 161), end: new Point(117, 0) },
    G: { begin: new Point(0, 232), end: new Point(204, 0) },
    H: { begin: new Point(0, 228), end: new Point(136, 0) },
    I: { begin: new Point(0, 156), end: new Point(105, 0) },
    J: { begin: new Point(0, 152), end: new Point(100, 0) },
    K: { begin: new Point(0, 229), end: new Point(146, 0) },
    L: { begin: new Point(0, 172), end: new Point(151, 0) },
    M: { begin: new Point(0, 155), end: new Point(118, 0) },
    N: { begin: new Point(0, 82), end: new Point(142, 0) },
    O: { begin: new Point(0, 129), end: new Point(173, 0) },
    P: { begin: new Point(0, 122), end: new Point(207, 0) },
    Q: { begin: new Point(0, 184), end: new Point(146, 0) },
    R: { begin: new Point(0, 157), end: new Point(151, 0) },
    S: { begin: new Point(0, 65), end: new Point(118, 0) },
    T: { begin: new Point(0, 82), end: new Point(142, 0) },
    U: { begin: new Point(0, 129), end: new Point(173, 0) },
    V: { begin: new Point(0, 122), end: new Point(207, 0) },
    W: { begin: new Point(0, 184), end: new Point(146, 0) },
    X: { begin: new Point(0, 157), end: new Point(151, 0) },
    Y: { begin: new Point(0, 65), end: new Point(118, 0) },
    Z: { begin: new Point(0, 82), end: new Point(142, 0) },
  };

  sequence = scheme.split("").map(s => lettersMap[s]);

  currentPoint = startingPoint; // début du tracé

sequence.forEach(letter => {
    let anchors = letterAnchors[letter];
    let img = new Raster(letterImages[letter]);

    // translation pour rattachement
    offset = currentPoint.subtract(anchors.begin);
    img.position = img.position.add(offset);

    // rotation si nécessaire
    angle = Math.atan2(anchors.end.y - anchors.begin.y, anchors.end.x - anchors.begin.x) * 180/Math.PI;
    img.rotate(angle);

    // mettre à jour le point pour la lettre suivante
    currentPoint = currentPoint.add(anchors.end.subtract(anchors.begin));
});