body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
/**
 * Global variables
 */
let blob,
	mouseHasMoved = false;

/**
 * Runs once:
 */
function setup() {
	// Create canvas as wide as the window
	createCanvas(window.innerWidth, window.innerHeight);
	frameRate(60);
	// Create blog object
	blob = Blob();
}

/**
 * Runs every mouse change event:
 */
function mouseMoved() {
	mouseHasMoved = true;
}

/**
 * Runs every frame:
 */
function draw() {
	// Draw background
	background(0);
	// Update and render the blob objet
	blob.update();
	blob.render();
}

/**
 * Blob constructor
 */
const Blob = () => {
	// Default properties
	let radius = 30,
		position = createVector(
			width / 2,
			height / 2
		),
		velocity = createVector(7, 7);
	return {
		// Function to bounce away from edges
		bounceInward(positionLinear, velocityLinear, min, max) {
			if (positionLinear < min + radius || positionLinear > max - radius) {
				velocityLinear = abs(velocityLinear);
			}
			if (positionLinear > max - radius) {
				velocityLinear *= -1;
			}
			return velocityLinear;
		},
		setVelocity(_velocity) {
			velocity.x = _velocity.x;
			velocity.y = _velocity.y;
		},
		update() {
			// Move object
			position.add(velocity);

			/**
			 * User interaction! - Let's have some fun :)
			 */
			// Influence the velocity when the mouse is moved
			if (mouseHasMoved) {
				this.setVelocity({
					x: mouseX / width * 10 - 5,
					y: mouseY / height * 10 - 5
				});
				mouseHasMoved = false;
			}
			// You could tweak all kinds of properties with the mouse/keyboard/microphone here, such as changing the radius, colour, creating new blobs, etc!

			// If hitting a wall, reverse it's perpendicular direction
			velocity.x = this.bounceInward(position.x, velocity.x, 0, width);
			velocity.y = this.bounceInward(position.y, velocity.y, 0, height);
		},
		render() {
			// Set color and draw a circle
			fill(100, 50, 200);
			ellipse(position.x, position.y, radius * 2, radius * 2);
			noStroke();
		}
	};
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js