May 12, 2024   -   David Oyinbo

Canvas Gravity Balls

Pet project for HTML Canvas and JavaScript, simulating gravity, bounce, and simple collisions across multiple balls.

JavaScriptHTML CanvasPhysicsAnimationPet Project
canvas infinity and circle mouse image

Overview

This experiment uses Canvas 2D APIs to render and animate circles influenced by gravity with basic collision and bounce behavior. It focuses on animation loops, simple physics, and interaction.

Highlights

Physics

  • Gravity and velocity integration
  • Bounce with restitution (elasticity)
  • Basic wall collision handling

Canvas Rendering

  • Efficient clear + redraw loop
  • Responsive canvas sizing
  • Minimal draw calls

Interaction

  • Mouse clicks to spawn balls
  • Adjustable gravity/restitution (in code)
  • Smooth motion via requestAnimationFrame

Footprint

  • No dependencies
  • Small, hackable codebase
  • Great for learning Canvas + physics basics

Other Projects

Country flags and currency package preview
December 4, 2024

Country flags and currency package

Lightweight TypeScript library for country flags, capitals, dial codes, currencies, and simple location distance utilities.

TypeScriptLibraryNPM
Canvas Infinity & Circle Mouse preview
May 13, 2024

Canvas Infinity & Circle Mouse

Pet project exploring HTML Canvas and JavaScript animations, drawing an infinity curve and a circle following the mouse.

JavaScriptHTML CanvasAnimation
Canvas Random Floating Circle preview
May 10, 2024

Canvas Random Floating Circle

Pet project animating randomly floating circles on HTML Canvas with simple drift and easing.

JavaScriptHTML CanvasAnimation

Let's build something together

Available for senior engineering roles, consulting, and architecture reviews.

© 2026 David Oyinbo