AlcaDesign/DOMAugmentedCanvas-p5-ES2015.html

## DOMAugmentedCanvas-p5-ES2015.html
<!doctype html>
<html>
<head>
<title>DOM Augmented Canvas - ES2015</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.min.js"></script>
<style>
	html,
	body {
		margin: 0;
		background: black;
		overflow: hidden;
	}
	.circle {
		border-radius: 50%;
		cursor: pointer;
	}
</style>
</head>
<body>
<div id="elements"></div>
<script>

var canvas,
	circles = [];

function setup() {
	canvas = createCanvas(innerWidth, innerHeight);
	colorMode(HSB);

	for(var i = 0; i < 100; i++) {
		var c = new Circle();
		circles.push(c);
	}
}

function draw() {
	background(0);
	circles.forEach(function(c) {
		c.render();
		c.update();
	});
}

function Circle() {
	this.onClick = function(e) {
		// If don't want to use border-radius on the divs, use this:
		// if(dist(this.pos.x, this.pos.y, mouseX, mouseY) < this.r) {
			this.color += 16;
		// }
	};

	this.fixEle = function() {
		this.ele.size(this.r * 2, this.r * 2);
		this.ele.position(this.pos.x - this.r, this.pos.y - this.r);
	};

	this.r = 10;
	this.pos = createVector(
			random(this.r, width - this.r),
			random(this.r, height - this.r)
		);
	this.color = 0;
	this.ele = createDiv('');
	this.ele.addClass('circle');
	this.ele.mouseClicked(this.onClick.bind(this));
	this.fixEle();


	this.update = function() {
		// Change pos/r in some way
		this.fixEle();
	};

	this.render = function() {
		fill(this.color%360, 255, 255);
		ellipse(this.pos.x, this.pos.y, this.r * 2, this.r * 2);
	};
}

</script>
</body>
</html>

## DOMAugmentedCanvas-p5-ES6.html
<!doctype html>
<html>
<head>
<title>DOM Augmented Canvas - ES6</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.min.js"></script>
<style>
	html,
	body {
		margin: 0;
		background: black;
		overflow: hidden;
	}
	.circle {
		border-radius: 50%;
		cursor: pointer;
	}
</style>
</head>
<body>
<div id="elements"></div>
<script>

let canvas,
	circles = [];

function setup() {
	canvas = createCanvas(innerWidth, innerHeight);
	colorMode(HSB);

	for(let i = 0; i < 100; i++) {
		let c = new Circle();
		circles.push(c);
	}
}

function draw() {
	background(0);
	circles.forEach(c => {
		c.render();
		c.update();
	});
}

class Circle {
	constructor() {
		this.r = 10;
		this.pos = createVector(
				random(this.r, width - this.r),
				random(this.r, height - this.r)
			);
		this.color = 0;
		this.ele = createDiv('');
		this.ele.addClass('circle');
		this.ele.mouseClicked(this.onClick.bind(this));
		this.fixEle();
	}

	onClick(e) {
		// If don't want to use border-radius on the divs, use this:
		// if(dist(this.pos.x, this.pos.y, mouseX, mouseY) < this.r) {
			this.color += 16;
		// }
	}

	fixEle() {
		this.ele.size(this.r * 2, this.r * 2);
		this.ele.position(this.pos.x - this.r, this.pos.y - this.r);
	}

	update() {
		// Change pos/r in some way
		this.fixEle();
	}

	render() {
		fill(this.color%360, 255, 255);
		ellipse(this.pos.x, this.pos.y, this.r * 2, this.r * 2);
	}
}

</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>DOM Augmented Canvas - ES2015</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.min.js"></script>
	<style>
	html,
	body {
	margin: 0;
	background: black;
	overflow: hidden;
	}
	.circle {
	border-radius: 50%;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<div id="elements"></div>
	<script>

	var canvas,
	circles = [];

	function setup() {
	canvas = createCanvas(innerWidth, innerHeight);
	colorMode(HSB);

	for(var i = 0; i < 100; i++) {
	var c = new Circle();
	circles.push(c);
	}
	}

	function draw() {
	background(0);
	circles.forEach(function(c) {
	c.render();
	c.update();
	});
	}

	function Circle() {
	this.onClick = function(e) {
	// If don't want to use border-radius on the divs, use this:
	// if(dist(this.pos.x, this.pos.y, mouseX, mouseY) < this.r) {
	this.color += 16;
	// }
	};

	this.fixEle = function() {
	this.ele.size(this.r * 2, this.r * 2);
	this.ele.position(this.pos.x - this.r, this.pos.y - this.r);
	};

	this.r = 10;
	this.pos = createVector(
	random(this.r, width - this.r),
	random(this.r, height - this.r)
	);
	this.color = 0;
	this.ele = createDiv('');
	this.ele.addClass('circle');
	this.ele.mouseClicked(this.onClick.bind(this));
	this.fixEle();


	this.update = function() {
	// Change pos/r in some way
	this.fixEle();
	};

	this.render = function() {
	fill(this.color%360, 255, 255);
	ellipse(this.pos.x, this.pos.y, this.r * 2, this.r * 2);
	};
	}

	</script>
	</body>
	</html>