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);
}
}
}