This is a course meant to get you started on browser-based computer graphics from a designers perspective. The goal of this course is to familiarize the reader with computer graphics, using the humble web browser that everyone has installed in their OS as a gateway for experimentation. Web browsers are amazingly capable pieces of software and they can do a lot more than just displaying websites passively.
If you are completely new to browser-based graphics, you are adviced to follow the order in this index to approach the subject in an order that hopefully makes more sense. Once you are more comfortable you can use this index as a quick access to the parts that you need a refresher on.
This course was written by Luis Rodil-Fernandez to support students of the Master of Digital Design at the Amsterdam University of Applied Sciences. A few sections link out to other resources, see the acknowledgements section for more details.
Before the sprint, please:
As you read the contents of these lessons, questions will inevitably pop-up. You can use the collaborative annotation tool hypothes.is to leave your comments and questions on these pages. Install the free hypothes.is browser plugin to interact with the annotation's layer on this website. Once you have installed and created an account on hypothes.is. Add your questions to the hypothes.is group called MDD graphics sprint so that everybody's questions, comments and feedback can be accessed there before, during and after the sprint.
These instruction materials owe a great deal to Lauren McCarthy and the p5js community as well as Processing at large and the Processing Foundation for supporting the development of all this wonderful work.
This course links out to other wonderful educational resources most notably Rune Madsen's Programming Design Systems, which is fantastic and you should read in its entirety.
Thanks also to Atul Varma aka @tollness for the p5js widget, which made it possible for this course to have interactive inline code examples.
Most of the examples in these tutorials are my own, as I couldn't find something with the focus and the fast pace that I needed in my course. All this material is released in the hope that it can be helpful to my students first and foremost and perhaps other souls out there in the internet that want an in-depth yet directly applicable knowledge of animation and graphics in the browser.
In this materials I refer to the work of artists, designers and coders. I try to give credit to everybody for their work. If you see your work here and the credit is missing, please accept my apologies and feel free to contact me to notify me of the omission.
I have used many images without license. Although unlicensed, these works are believed to qualify as fair use: The purpose of use is non-profit educational material, the works are used for informational purposes only, and the works are widely published in books and on websites.