The Game Loop and the Canvas
From The Nature of Games
Who it is for: Aspiring game developers comfortable with basic JavaScript.
Working manuscript · 2027–2028 Edition. The full book is forthcoming; text and illustrations may change.
An animated sketch updates its state and draws a new frame repeatedly. For this book, p5.js calls a draw() function while the sketch runs. We will use it to clear a canvas, update a dot's position, and draw the dot again. The loop is a useful model for a small game, though larger games may organize updates and rendering into separate systems.
Read the chapter
The preview below shows the first 3 pages. The PDF contains the complete 10-page chapter, with selectable text and the original illustrations.
Download sample chapter (PDF) ↓Open PDF in a new tab ↗


Keep exploring The Nature of Games
Start with a moving dot, then add forces, collisions, particles, and terrain. Run each example in your browser.
See the book outline →Questions or corrections? support@hackerbrewery.com