/*
* essai avec des classes d'objets
* source cet essai : alObjets6.pde
* converti en p5.js avec http://faculty.purchase.edu/joseph.mckay/p5jsconverter.html
* puis ajusté pour avoir l'équivalent d'un PSHape selon l'exemple de 
* BarbaraAlmeida à la fin de la question 
* dans forum https://forum.processing.org/two/discussion/14667/pshape-in-p5-or-work-around
* mis dans un CodePen : https://codepen.io/aldelpech/pen/ddWQjM
*******
*/

var MaxBalls = 10 ;
var stars = [] ;
var balls = [] ;

function setup() {
  createCanvas(windowWidth, windowHeight);
  // imageMode(CENTER);
  
  var i ;
  
  for ( i = 0; i < MaxBalls; i ++ ) {
	  
	var x = random(100, windowWidth-100);
    var y = random(100, windowHeight-100); 
    var speed = random(0.5, 3);

    stars[i] = new Star( x, y, speed ); 
  }
  
  // Make a new Ball

  for ( i = 0; i < MaxBalls; i ++ ) {
	var c = color ( random(255), random(255), random(255), random(255) ) ;
    var r = random(20); // radius
    var x = random(windowHeight); 	// location
    var y = random(windowHeight);	// location
    var xspeed = random( - 5, 5);  // speed
    var yspeed = random( - 5, 5); // speed    

    balls[i] = new Ball( c, r, x, y, xspeed, yspeed ); 
  }
  
}

function draw() {
  
  background(255);

  
  for (var i = 0; i < stars.length; i++) { 
    stars[i].display();   
    stars[i].move();           
  }
  

  for (var i = 0; i < balls.length; i++) { 
    balls[i].display();   
    balls[i].move();           
  }  

  
}


// Class Ball
function Ball( _c, _r, _x, _y, _xspeed, _yspeed ) {

	// Variables.
	this.c = _c ;
    this.r = _r; // radius
    this.x = _x; 	// location
    this.y = _y;	// location
    this.xspeed = _xspeed;  // speed
    this.yspeed = _yspeed; // speed
}
    
// Constructor
Ball.prototype.render = function() {

	// First create the shape
	var b = createGraphics(0,0) ;

  //stroke(121) ;   // noStroke();
	// fill(0);	// noFill();
	ellipse( this.x, this.y, this.r*2, this.r*2 ) ;
	return b;
}
	
Ball.prototype.move = function() {
	this.x += this.xspeed; // Increment x
	this.y += this.yspeed; // Increment y

	// Check horizontal edges 
	if (this.x > width || this.x < 0 ) {
	  this.xspeed *= -1;
	}
	//Check vertical edges 
	if (this.y > height || this.y < 0) {
	  this.yspeed *= -1;
	}
}

// Draw the ball
Ball.prototype.display = function() {
	// Locating and drawing the shape
	push();
	translate(this.x, this.y);
	noStroke() ; // stroke(0) ;
  fill(this.c);
  image(this.render(), 0, 0);
	pop();    
}
  


// A class to describe a Star shape

function Star( _x, _y, _speed) {

	// Variables
	this.x = _x;
    this.y = _y; 
    this.speed = _speed;
}


// constructor
Star.prototype.render = function() {
	
	// cf https://p5js.org/examples/form-star.html pour la syntaxe
	// First create the shape
	var s = createGraphics(0,0) ;

	beginShape();  
	noStroke() ;   // stroke(0);
	fill( 105, 204 );	// noFill();
	vertex(0, -50);
	vertex(14, -20);
	vertex(47, -15);
	vertex(23, 7);
	vertex(29, 40);
	vertex(0, 25);
	vertex(-29, 40);
	vertex(-23, 7);
	vertex(-47, -15);
	vertex(-14, -20);
	// The shape is complete
	endShape(CLOSE);
	return s;
}
  
Star.prototype.move = function() {
	// Demonstrating some simple motion
	this.x += this.speed;
	if (this.x > width+100) {
	  this.x = -100;
	}
}

Star.prototype.display = function() {
	// Locating and drawing the shape
	push();
	translate(this.x, this.y);
	image(this.render(), 0, 0);
	pop();
}