var carres = [];
var osc; //an oscillator
var env; //an enveloppe

function setup() {
	createCanvas(640, 480);
	//create a array of squares
	for (var i = 0; i < 10; i++) {
		carres[i] = new Carre(random(width), random(height), random(1, 4));
	}

}

function draw() {
	background(250);
	//var fall = createVector(0, 1);


	for (var i = 0; i < carres.length; i++) {
		//if(mouseIsPressed) carres[i].applyForce(fall);
		carres[i].update();
		carres[i].edges();
		carres[i].play();
		carres[i].display();
	}

}

function Carre(x, y, v) {
	this.pos = createVector(x, y);
	this.vel = createVector(v, 0);
	this.acc = createVector(0, 0);

	//faster the square is, bigger it is
	this.side = v * 20;

	//create an enveloppe
	this.env = new p5.Env();
	this.env.setADSR(0.001, 0.2, 0.2, 1);
	this.env.setRange(map(v, 0, 4, 0.2, 1), 0);

	//create an triangular oscillator
	this.osc = new p5.Oscillator('triangle');
	this.osc.amp(this.env);
	this.osc.start();

	// higher the square is, higher is the pitch
	this.osc.freq(height - this.pos.y + 100);

	// play note when the square hit right edge
	this.play = function() {
		if (this.warp) {
				this.env.play();
				this.warp = false;
		}
	}

	this.applyForce = function(force) {
		var f = force.copy();
		this.acc.add(f);
	}

	this.update = function() {
		this.vel.add(this.acc);
		this.pos.add(this.vel);

		this.acc.mult(0);
	}

	this.display = function() {

		fill(50);
		noStroke();
		rect(this.pos.x, this.pos.y, this.side, this.side);

	}

	// warp effect
	this.edges = function() {
		if (this.pos.x > width + this.side) {
			this.pos.x = -this.side;
			this.warp = true;
		}
	}
}