{"id":1925,"date":"2020-09-15T21:25:36","date_gmt":"2020-09-15T21:25:36","guid":{"rendered":"http:\/\/mycours.es\/digitalmedia\/?page_id=1925"},"modified":"2025-03-24T12:57:00","modified_gmt":"2025-03-24T12:57:00","slug":"p5-colors","status":"publish","type":"page","link":"http:\/\/mycours.es\/digitalmedia\/p5-colors\/","title":{"rendered":"p5: colors"},"content":{"rendered":"

This is a good introduction to colors in p5 <\/a><\/p>\n

Colors can be stored as variables:<\/a><\/p>\n

var c = color(255, 204, 0);\r\nfill(c);\r\nnoStroke();\r\nrect(30, 20, 55, 55);\r\n\r\n<\/pre>\n
and expressed in the HSB space<\/p>\n
\"\"<\/a><\/p>\n
 <\/p>\n
\r\n\r\nfunction setup() {\r\n  createCanvas(400, 400);\r\n  noStroke();\r\n}\r\n\r\nfunction draw() {\r\n  background(255);\r\n  \r\n  \/\/change the color mode to Hue Saturation Brightness\r\n  \/\/and on a scale between 0 and 100\r\n  colorMode(HSB, 100);\r\n\r\n  \/\/remap the mouse coordinates from the extents of the canvas\r\n  \/\/to a 0-100 scale\r\n  var h = map(mouseX, 0, width, 0, 100);\r\n  var s = map(mouseY, 0, height, 100, 0);\r\n  \r\n  fill(h, s, 50);\r\n  rect(0, 0, width, height);\r\n  \r\n  fill(h, s, 100);\r\n  ellipse(width\/2, width\/2, width, height);\r\n  \r\n  \/\/this is just a semi transparent white circle\r\n  fill(255, 0, 100, 0.3);\r\n  ellipse(width\/2, width\/2, width\/2, width\/2);\r\n  \r\n  \r\n}\r\n\r\n<\/pre>\n