Color Splat

let bg;

let fg;

let colorSlider;

let bgSlider;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  bg = createGraphics(windowWidth, windowHeight);

  fg = createGraphics(windowWidth, windowHeight);

​

  colorMode(HSB);

  bg.colorMode(HSB);

  fg.colorMode(HSB);

​

  // Create a box for the slider

  noStroke();

  fill(0, 0, 0);

  rect(10, 10, 190, 70);

​

  colorSlider = createSlider(0, 360, 100);

  colorSlider.position(20, 20);

​

  bgSlider = createSlider(0, 360, 50);

  bgSlider.position(20, 50);

​

  bg.background(bgSlider.value(), 100, 100);

}

​

function draw() {

  // Set background color based on slider

  bg.background(bgSlider.value(), 100, 100);

​

  image(bg, 0, 0);

  image(fg, 0, 0);

​

  // Redraw box 

  noStroke();

  fill(255, 255, 255);

  rect(10, 10, 190, 70);

​

  // Color preview

  fill(colorSlider.value(), 100, 100);

  ellipse(175, 30, 20, 20);

​

  drawCircles();

}

​

function drawCircles() {

  let outsideSlider = mouseX < 10 || mouseX > 190 || mouseY < 10 || mouseY > 70;

​

  if (mouseIsPressed && outsideSlider) {

    // Draw larger dots with randomness when mouse is pressed

    fg.fill(colorSlider.value(), 100, 100);

    fg.noStroke();

    let offsetX = random(-20, 20); 

    let offsetY = random(-10, 10);

    fg.ellipse(mouseX + offsetX, mouseY + offsetY, random(20, 60));

  } else {

    // Random circles when mouse is not pressed

    fg.fill(colorSlider.value(), 100, 100);

    fg.noStroke();

    fg.ellipse(mouseX, mouseY, random(8, 15));

  }

}

​