Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
DOM Augmented Canvas with P5.js
<!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>
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment