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