var system;
var img;

function preload() 
{
   img = loadImage ( '/uploads/starter/earth.1.jpg' );
   img1 = loadImage ( '/uploads/fordea23/Zod.jpg' );
   img2 = loadImage ( '/uploads/fordea23/Baddie2.jpg' );
   img3 = loadImage ( '/uploads/fordea23/Baddie3.jpg' );
   img4 = loadImage ( '/uploads/starter/earth.1.jpg' );
   
}

// Cloned by Tony Forde on 28 Sep 2021 from World "One Cube World (P5)" by Starter user 
// Please leave this clone trail here.
 
const anglechange1   = 0.01;     // how much the rotate angle changes each step 
const anglechange2   = 0.01;     // how much the rotate angle changes each step 
const anglechange3   = 0.01;     // how much the rotate angle changes each step 

var angle1 = 0;                  // rotate angle starts at 0  
var angle2 = 45;                  // rotate angle starts at 0  
var angle3 = 125;                  // rotate angle starts at 0  

function setup() {
	
  createCanvas ( ABWorld.fullwidth(), ABWorld.fullheight(),  WEBGL );
  //createCanvas ( ABWorld.fullwidth(), ABWorld.fullheight() );	
  system = new ParticleSystem(createVector(width/10, 150));
}


function draw() {
  background(11);
  system.addParticle();
  system.run();
  
     // Sphere
    
    texture(img4);      
    rotateX(angle1);             // set each dimension rotation angle to "angle"
    rotateY(angle1);
    //rotateZ(angle1); 
    sphere(100);     
    rotateX(100);    
    rotateY(100);      
 
 
    // BOX 1
    translate(125, 150, 200);

    texture(img1);      
           
    rotateX(angle1);             // set each dimension rotation angle to "angle"
    rotateY(angle1);
    rotateZ(angle1);
  
    box(1,200,200); 

    angle1 = angle1 + anglechange1 ;       // change angle each step to get rotate movement

    // BOX 2
    texture(img2);      
           
    rotateX(angle2);             // set each dimension rotation angle to "angle"
    rotateY(angle2);
    rotateZ(angle2);
  
    translate(125, 150, 200);
    box(1,200,200); 

    angle2 = angle2 + anglechange2 ;       // change angle each step to get rotate movement
    
    // BOX 3
    texture(img3);      
           
    rotateX(angle3);             // set each dimension rotation angle to "angle"
    rotateY(angle3);
    rotateZ(angle3);
  
    translate(175, 200, 150);
    box(1,200,200); 

    angle3 = angle3 + anglechange3 ;       // change angle each step to get rotate movement

  
  
  
}

// A simple Particle class
var Particle = function(position) {
  this.acceleration = createVector(0, 0.05);
  this.velocity = createVector(random(-11, 12), random(-11, 10));
  this.position = position.copy();
  this.lifespan = 2550;
};

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(200, this.lifespan);
  strokeWeight(2);
  fill(127, 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 -------------------------------------------------------------------------------------------