Learn JavaScript with p5.js: Coding for Visual Learners

© Engin Arslan 2018

Engin ArslanLearn JavaScript with p5.jshttps://doi.org/10.1007/978-1-4842-3426-6_3

3. Colors in p5.js

Engin Arslan¹ 

(1)

Toronto, Ontario, Canada

 

Now that we can draw shapes in p5.js, let’s look at how to control the color in our sketches. We are already assigning a light gray color to the background by passing the values 220, 220, 220 to the background function.

Color Functions in p5.js

p5.js by default uses the RGB color system where R stands for red, G stands for green, and B stands for blue. This means that we will usually need to pass these three color components to a color accepting function to set the desired color. Each of these color components can have a value in between 0 and 255. This means that if we are to pass ...