In this Guest Tutorial, artist and researcher Yining Shi creates a Brick Breaker game with the p5.js library. (Code below!)

Yining Shi is a graduate of the Interactive Telecommunications Program (ITP) at NYU, where she also worked for a year as a resident researcher. Yining developed web apps for the ITP community with a focus on education. She also contributed to various open source projects by the Processing Foundation. She currently works at Sourcemap as a Software Engineer.

P5.playground ( is an interactive learning and programming tools for p5.js, which allows you to manipulate the shapes on the canvas in real time and visually understand a lot of math behind drawing stuff on the canvas.

Brick Breaker code:
Play the game!

Another Brick Breaker game:
(Code:

Contact:
Yining Shi’s website:

Support this channel on Patreon:
To buy Coding Train merchandise:
To Support the Processing Foundation:
p5.js:

For more Guest Tutorials, Talks and Interviews:
For an Introduction to Programming: