How to use this guide?

The 'create first, ask questions later' method might present an unorthodox approach to introductory Computer Science concepts, but it's one that really beckons readers to internalize the abstractions they're dealing with in a way that makes 'tangible' sense to them. Making the intangible 'tangible' is what visual illusion and computer graphics are all about. The more you can take these projects and turn them into something of your own-- whether it's as simple as changing a few details or entirely reinventing the project from scratch-- the better.

These lessons begin with the very basic fundamentals. Some may introduce programming concepts you're already familiar with. I encourage you to skim and skip as much content as you need to in order to get to the chapter or project that interests you most, or If you feel the pace becomes unnecessarily granular.

These potentially 'unorthodox' examples are offered to spare newcomers and young students an extra burden of abstraction or syntax, at least until they've built up the confidence and rigor needed for it to become second nature to them. (Such as navigating the x, y coordinate grid of a programming canvas.)

What is a Programming Language?

A programming language is a way of providing instructions to the computer. All programs, whether they’re games like Warcraft and Zelda, or an application like the browser you're using to read this webpage, are written in some kind of programming language. The 'core' programming language we'll be using to create the projects ahead is JavaScript.

What is JavaScript?

JavaScript is one of the most widely used programming languages in the world. It is used to power nearly every website on the internet, including the p5.js editor you can use for each of these projects. JavaScript is not to be confused with Java, which is a different programming language altogether. Where most programming languages need to be compiled (IE. translated) into machine code locally on your device, JavaScript is interpreted line by line thanks to our web browsers.

What is p5.js?

p5.js is a specific JavaScript library created by Lauren McCarthy of the Processing Foundation. It enhances JavaScripts capabilities by making it simpler to program graphics and animations thanks to ongoing contributions from a community of open source programmers, and adventurous readers like yourself.

.. The work presented here would not have been possible to share without the efforts and outreach carried on by the Processing foundation. Their organization comprised of excellent programmers and teachers, including the likes of Daniel Shiffman, Lauren McCarthy and Casey Reas-- inspired these series of lessons while I was tasked with the privilege of teaching (and learning as I went) p5.js to local school students.


These lessons were written out, distributed and 'tested' on the field with hundreds of elementary, middle and high-school students, as well as several passionate teachers. It took multiple iterations to see what 'clicked' within their understanding. It has since evolved into a learning pathway I believe suitable for any student or teacher seeking an introduction to basic Computer Science concepts, or for anyone driven to make captivating computer visuals.


Through the creative ownership implicated in visual programming, I've seen students, who would never once consider themselves predisposed to computer programming find themselves magnetized to the most granular JavaScript nuances; all for the sake of bringing their idea to life. It's a good thread to follow when you can find it. And I hope these lessons serve as that guiding thread to any learner feeling a little daunted by the world of programming.

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP.

Learn more about the p5.js library and the important work the Processing foundation is doing from www.p5js.org.

Read on to Chapter 1 where we'll design our first illustration in code.