Week 1 - Coordinates, shapes and colour Outcomes Set up development environment Understand the principles of locating points on screen Drawing shapes Understanding additive colour and using RGB colour space Use browser-based tools for debugging and logging Animate shape or colour using variables What is p5.js? During this series of workshops you will be using a library called p5.js to learn the fundamentals of programming. The p5.js project is the most recent part of a complex history of open-source, creative coding libraries going back to the early 2000s. It is supported by the Processing Foundation , which is a not-for-profit organisation that emerged from the creative coding library Processing . From a technical perspective, p5.js is simply a JavaScript library. A library is a collection of code put together to simplify a task or a collection of tasks. In this case p5.js provides a lot of functionality that makes it easy to draw shapes, colours and handle user interaction within a web page. This video from Daniel Shiffman is a good introduction to p5.js and the creative coding platforms that preceded it: Supporting code The code for this workshop is hosted on Github, which is a web-based repository for hosting and versioning code. Download the code and unzip it on your desktop. The code is also available to view directly on Github's website . A p5.js project In this exercise you will set up a p5.js project using the Atom text editor, then examine the different files and run the code in a browser. The code to support this section is located in the following directory and is available to view on Github : /00_empty_project/ Topics p5.js project structure What is a sketch? What do the setup() and draw() functions do? Adding your project to Atom Using the browser debugging tools A p5.js project Below is the structure of a p5.js project, which is essentially a web project made up of HTML and JavaScript files. /00_empty_project/ ├── index.html ├── libraries │ └── p5 │ └── p5.min.js └── sketch.js index.html p5.js is a JavaScript library designed for drawing to a web page. For JavaScript code to run in a browser it needs to be included in a HTML file. The index.html file is the 'entry point' for the browser to access our project code. Note the use of the