93 lines
2.4 KiB
JavaScript
93 lines
2.4 KiB
JavaScript
// 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();
|