Source


const CELLS = 300;
let input;

let offsetX = 0;
let offsetY = 0;
let lodSlider;
let falloffSlider;
function setup() {
  createCanvas(600, 600);
  //noLoop();
  noStroke();
  input = createInput('1');
  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());
  
  for (let i = 0; i < width; i+= blockWidth){
    for (let j = 0; j < height; j+= blockHeight){
      fill(noise((i+offsetX)*scale, (j+offsetY)*scale)* 255);
      rect(i, j, blockWidth, blockHeight);
    }
  }

}