// Cloned by anish kumar on 17 Oct 2020 from World "P5 Particle System" by Starter user 
// Please leave this clone trail here.
 



// Starter World for P5 plain API  
// This demonstrates taking an existing P5 World and porting it to Ancient Brain 

  



// --- The P5 code ----------------------------------------------------------------------------------------------
// This is identical to P5 example "Particle System" 
// https://p5js.org/examples/simulate-particle-system.html
// except changed canvas width, height 


function preload() 
{
   img = loadImage ( '/uploads/anish85/IMG_4037.jpg' );
}

 const MUSICFILE = '/uploads/anish85/PremJoshuaremixedbyManeeshdeMoor-DarbariNYCDiamondTurbanremix.mp3';
 AB.backgroundMusic ( MUSICFILE );

const anglechange   = 0.01;     // how much the rotate angle changes each step 

var angle = 0;                  // rotate angle starts at 0  
var system;

function setup() {
	
  // --- This is the only change ----------------------------------------------------------------------------------------------
  // createCanvas(720, 400);
  createCanvas ( ABWorld.fullwidth(), ABWorld.fullheight(),  WEBGL );	
  
  // optional - help the AB system find and position the canvas - probably not needed
  //    	var c = createCanvas ( ABWorld.fullwidth(), ABWorld.fullheight() );			 
  //		ABWorld.setCanvas ( c );		 
  // --- End of the only change -----------------------------------------------------------------------------------------------

  system = new ParticleSystem(createVector(50, 50));
}

function draw() {
  background("black");
  system.addParticle();
  system.run();
  texture(img); 
  rotateX(angle);             // set each dimension rotation angle to "angle"
  rotateY(angle);
  angle = angle + anglechange ;       // change angle each step to get rotate movement 
  sphere(100);
  translate(-150, 0, 100);
  sphere(75);
  translate(100, 0, 100);
  sphere(50);
    
}

// A simple Particle class
var Particle = function(position) {
  this.acceleration = createVector(0, -0.1);
  this.velocity = createVector(random(-1, 1), random(0, 1));
  this.position = position.copy();
  this.lifespan = 300;
};

Particle.prototype.run = function() {
  this.update();
  this.display();
};

// Method to update position
Particle.prototype.update = function(){
  this.velocity.add(this.acceleration);
  this.position.add(this.velocity);
  this.lifespan -= 2;
};

// Method to display
Particle.prototype.display = function() {
  stroke(100, this.lifespan);
  strokeWeight(2);
  fill(300, this.lifespan);
  ellipse(this.position.x, this.position.y, 12, 12);
};

// Is the particle still useful?
Particle.prototype.isDead = function(){
  return this.lifespan < 0;
};

var ParticleSystem = function(position) {
  this.origin = position.copy();
  this.particles = [];
};

ParticleSystem.prototype.addParticle = function() {
  this.particles.push(new Particle(this.origin));
};

ParticleSystem.prototype.run = function() {
  for (var i = this.particles.length-1; i >= 0; i--) {
    var p = this.particles[i];
    p.run();
    if (p.isDead()) {
      this.particles.splice(i, 1);
    }
  }
};








// --- Optional addition: How to resize canvas on page resize -------------------------------------------------------------
// In P5 AB API this is built-in.
// In P5 plain API this is not built-in, in case it interferes with some P5 Worlds.
// If you want it, you have to add it yourself. Something like the following:

function reSize()		 
{
	resizeCanvas ( ABWorld.fullwidth(), ABWorld.fullheight() ); 
	background(51);
}

if ( AB.onDesktop() )	window.addEventListener ( "resize", 			function() { 	reSize();  	 	});
else					window.addEventListener ( "orientationchange", 	function() { 	reSize();  	 	});
 
// --- End of optional addition -------------------------------------------------------------------------------------------