Source


const CELLS = 100;
let input;
let offset = 0;
let offsetX = 0;
let offsetY = 0;
let lodSlider;
let falloffSlider;
function setup() {
  createCanvas(500, 500);
  //noLoop();
  noStroke();
  input = createInput('0.008');
  input.position(10, height+20);
  input.changed(redraw);

  lodSlider = createSlider(1, 16, 4, 1);
  lodSlider.position(10, height+40);
  lodSlider.changed(redraw);

  falloffSlider = createSlider(0, 1, .5, .01);
  falloffSlider.position(10, height+60);
  falloffSlider.changed(redraw);
}

function draw() {
  background(255);

  if (mouseIsPressed && mouseY < height){
    offsetX += (pmouseX - mouseX);
    offsetY += (pmouseY - mouseY);
  }
  const blockWidth = width/CELLS;
  const blockHeight = height / CELLS;
  const scale = parseFloat(input.value());
  noiseDetail(lodSlider.value(), falloffSlider.value());
  const c1 = color(255,255,0);
  const c2 = color(255,0,0);
  const c3 = color(25,0,0)
  for (let i = 0; i < width; i+= blockWidth){
    for (let j = 0; j < height; j+= blockHeight){
      const n = noise((i+offsetX)*scale, (j+offsetY)*scale, offset * scale);
      fill(lerpColor(lerpColor(c3, c2, n*2), c1, (n-.5)*2));
      // fill(noise((i+offsetX)*scale, (j+offsetY)*scale)* 255);
      rect(i, j, blockWidth + 1, blockHeight +1);
    }
  }
  offset += 1;
}