// http://paperjs.org/tutorials/getting-started/using-javascript-directly/


var canvas = document.getElementById('scene');

canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

paper.setup(canvas);

function degToRad(deg) {
  return deg * (Math.PI / 180.0);
}

class Forme {
  // le constructeur est appelé une fois au moment de new Bidule
  constructor(x, y, np) {
    // on definie les valeur de départ propre a chauqe instance
    // 'this' correpsond à l'instance, autant de 'this' que d'instance
    console.log(`new Forme x:${x}, y:${y}, np:${np}`);
    
    this.x = x;
    this.y = y;
    this.np = np; // nombre de point
    this.paperGroup = new paper.Group();
    this.draw();
  }

  draw(){
    // this.path.moveTo(this.x, this.y);
    this.paperGroup.addChild(new paper.Path.Circle({
      center:[this.x, this.y], 
      radius:2,
      name: 'center',
      fillColor: new paper.Color(1,0,0)
    }));
    for (let i = 0; i < this.np; i++) {
      let r = 100 + Math.random()*200;

      // let a = (360/this.np)*i;
      let a = (360/this.np)*i + (-10 + Math.random()*20);

      let x = this.x+(Math.cos(degToRad(a))*r);
      let y = this.y+(Math.sin(degToRad(a))*r);
      console.log(`x:${x}, y:${y}`);
      
      this.paperGroup.addChild(new paper.Path.Circle({
        center:[x, y],
        radius:4,
        name: `point-${i}`,
        fillColor: new paper.Color(0,1,0)
      }));
      
      this.paperGroup.addChild(new paper.Path({
        name: 'contour',
        strokeColor: new paper.Color(0,0,0)
      }));

      let contour = this.paperGroup.getItem({name:'contour'});
      if (i == 0) {
        contour.moveTo(x, y);
      } else {
        contour.lineTo(x,y);
        if (i == this.np-1) {
          let pointzero = this.paperGroup.getItem({name:'point-0'});
          console.log('pointzero', pointzero);
          
          contour.lineTo(pointzero.position.x, pointzero.position.y);
        }
      }


    }
  }

}


new Forme(canvas.width/2, canvas.height/2, Math.floor(4+Math.random()*14));
// var mesFormes = [];
// let marge = 100;
// for (let i = 0; i < 10; i++) {
//   mesFormes.push(new Forme(marge+Math.random()*(canvas.width-marge), marge+Math.random()*(canvas.height-marge), i+4));
// }
// console.log('mesFormes', mesFormes);

paper.view.draw();
// function draw(){
  

//   window.requestAnimationFrame(draw);
// }
// draw();