p5*jsで色の変わるキャンバス

p5jsのmapを使ってマウスの場所で色が変化するようなもの。

実装

function setup() {
  createCanvas(300, 400);
}

function draw() {
  let red = map(mouseX, 0, 300, 0, 255);
  let green = map(mouseY, 0, 400, 0, 255);
  background(red, green, 0);
  
  noStroke();
  fill('white');
  ellipse(mouseX, mouseY, 20, 20); 
}

動作確認

キャンバス上でマウスを動かすと、色が変わります。