p5: colors

This is a good introduction to colors in p5

Colors can be stored as variables:

var c = color(255, 204, 0);
fill(c);
noStroke();
rect(30, 20, 55, 55);

and expressed in the HSB space

 

function setup() {
  createCanvas(400, 400);
  colorMode(HSB);
  noStroke();
}

function draw() {
  background(255);
  
  //by default, the ranges in HSB are hue 0-360 
  //saturation 0-100
  //brightness 0-100
  //alpha 0-1 
  var h = map(mouseX, 0, width, 0, 255);
  var s = map(mouseY, 0, height, 255, 0);
  
  fill(h, s, 50);
  rect(0, 0, width, height);
  
  fill(h, s, 100);
  ellipse(width/2, width/2, width, height);
  
  //this is just a semi transparent white circle
  fill(255, 0, 100, 0.3);
  ellipse(width/2, width/2, width/2, width/2);
  
  
}