Ancient Brain

Worlds Minds Users Uploads JS code Search

Intro

Introduction Features

---

Definitions Principles The AI model

---

Teaching Register a class

Learn

Getting started P5 tutorial Three.js tutorial

---

Coding course Coding course II Coding for kids WebGL course AI exercises

Browse

Starter Worlds

---

Editor's Choice Showcase Worlds Multi-user Worlds Random Worlds

---

Advanced search

Docs

Docs API docs

Register

Register Forgot password

   Login

// 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 


var system;

function setup() {
	
  // --- This is the only change ----------------------------------------------------------------------------------------------
  // createCanvas(720, 400);
  createCanvas ( ABWorld.fullwidth(), ABWorld.fullheight() );	
  
  // 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(width/2, 50));
}

function draw() {
  background(51);
  system.addParticle();
  system.run();
}

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

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 -------------------------------------------------------------------------------------------