Animation of Circular Motion Using p5.js

This simple animation demonstrates how an object can move along a circle using the JavaScript library p5.js. A stationary point is located at the center, while a red circle moves around it along a predefined path.

Using trigonometric functions cos() and sin(), the object's position is calculated based on an angle that increases over time. This results in continuous circular motion.

Animation Example:

Later, we will demonstrate additional effects, such as a motion trail, multiple objects, and speed control using the keyboard. We will also explain the mathematical functions behind this type of animation.

Explanation of the Circular Motion Animation

The animation was created in Processing 4 using the p5.js library. We create a sketch called KruznoKretanjeSimulacija.js as the input, and the tool automatically generates an index.html file where the main canvas for drawing is defined.

For circular motion, we define two variables: radius (initial value 100) and angle (initial value 0).

In setup():

we call createCanvas(500, 500, P2D) to set canvas dimensions,
set the angle mode to radians (angleMode(RADIANS)) and center ellipses (ellipseMode(CENTER)),
attach the canvas to the HTML container kruzni-canvas (canvas.parent(container)).

In draw():

the background is light gray (background(245)),
calculate center: centerX = width/2, centerY = height/2,
calculate the object position: x = centerX + radius*cos(angle), y = centerY + radius*sin(angle),
draw the center and the moving object (ellipse),
increment the angle by 0.03 to animate.

Detailed Explanation of Structure and Code

The project consists of two main files:

KruznoKretanjeSimulacija.js – the p5.js sketch that defines the animation behavior.
index.html – the HTML page that contains the <div> container for the canvas and loads p5.js and the sketch.

In index.html we create a <div id="kruzni-canvas"></div> which serves as the parent for the p5.js canvas. In the JavaScript code, inside setup(), we call canvas.parent(container) so that p5.js attaches the canvas inside that specific div.

In the sketch, we define:

radius – the radius of the circular path
angle – the current angle in radians

The setup() and draw() functions set up the environment and draw the animation.


// KruznoKretanjeSimulacija.js
// Define global variables
let angle = 0;           // initial angle
let radius = 100;       // path radius
let canvas;
let container;

function setup() {
  // Create a 500×500 canvas
  canvas = createCanvas(500, 500, P2D);
  // Find the div container in index.html
  container = document.getElementById('kruzni-canvas');
  // Set angle mode to radians and center ellipses
  angleMode(RADIANS);
  ellipseMode(CENTER);
  // Attach canvas to the found div
  canvas.parent(container);
}

function draw() {
  // Clear the background
  background(245);

  // Calculate canvas center
  let centerX = width / 2;
  let centerY = height / 2;

  // Calculate object position on the circle
  let x = centerX + radius * cos(angle);
  let y = centerY + radius * sin(angle);

  // Draw center of rotation
  fill(100, 150, 255);
  ellipse(centerX, centerY, 10, 10);

  // Draw moving object
  fill(255, 0, 0);
  ellipse(x, y, 20, 20);

  // Increase angle for next frame
  angle += 0.03;
}

Circular Motion Applications

This section showcases an interactive application for modeling circular motion. The goal is to make experimenting with trajectory and dynamics parameters simple and visual for users.

Below, you will find the application for displaying circular motion. In the blue panel, you can adjust the initial values: the radius of the path R, the initial angular velocity, and angular acceleration – all through sliders. Below that, there is a panel with navigation buttons: Start, Step, Pause, and Reset. Additionally, in the same panel, there are checkboxes for selecting the rotation direction, displaying information, speed, and acceleration. The animation can be slowed down up to 20× using an extra slowdown slider, which is also located on the blue panel.

For more details, read: Circular Motion Animation in Processing