Skip to content

Instantly share code, notes, and snippets.

@aerrity

aerrity/index.html

Last active November 11, 2017 14:42
Show Gist options
  • Save aerrity/34dda651f4fe6d70f31a604ef0820464 to your computer and use it in GitHub Desktop.
Save aerrity/34dda651f4fe6d70f31a604ef0820464 to your computer and use it in GitHub Desktop.
Download ZIP
P5.js example demonstrating a constructor function and the mousePressed() function.
Raw
readme.md

P5.js example demonstrating a constructor function and the mousePressed() function.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<script src='./sketch.js'></script>
<title>P5.js</title>
</head>
<body>
</body>
</html>
Raw
sketch.js
function Circle(x = 50, y = 50, r = 100, col = '#f00') {
this.x = x;
this.y = y;
this.r = r;
this.col = col;
this.vx = random(-5,5);
this.vy = random(-5,5);
}
Circle.prototype.move = function() {
this.x += this.vx;
this.y += this.vy;
};
Circle.prototype.draw = function() {
fill(this.col);
ellipse(this.x,this.y,this.r);
};
let circles = [];
function setup() {
createCanvas(400,400);
background(0);
}
function draw() {
background(0);
for(let i = 0; i < circles.length; i++) {
circles[i].move();
circles[i].draw();
}
}
function mousePressed() {
circles.push( new Circle(mouseX, mouseY) );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment