p5 Color Examples

ex1.js

//Vary the red based on the hour

var h;
function setup() {
  createCanvas(600, 600);
}

function draw() {
	
	h = hour();
	print(h);
	
	//take 24 hour time and convert it to between 0 & 255 for the color slot
	hColor = map(h,0,24,0,255);
	
	fill(hColor,0,0);
	rect(200,200,100,100);
	
  
}

ex2.js

//HSB colorshift

//Blue Hue: 239
//Yellow Hue: 65 
//Red Hue: 0

var h;
function setup() {
  createCanvas(600, 600);
  colorMode(HSB);
}

function draw() {
	
	h = hour();
	print(h);
	
	//take 24 hour time and convert it to between 0 & 255 for the color slot
	hColor = map(h,0,24,0,239);
	
	//uncomment below - keep it a varying set of blue all the time
	//hColor = map(h,0,24,200,250);
	
	fill(hColor,100,100);
	rect(200,200,100,100);
	
  
}