<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"
></script>
<script>
// CONFIGURATION
const canvasWidth = 400,
canvasHeight = canvasWidth,
backgroundColor = 34
// SETUP
function setup() {
createCanvas(canvasWidth, canvasHeight)
}
const noiseScale = 0.01
function draw() {
background("#FBD0AE")
stroke("#EA645D")
var x = 0
noiseDetail(2, 0.2)
while (x < width * 2) {
var noiseVal = noise((mouseX + x) * noiseScale, mouseY * noiseScale)
const yOffset = mouseY + noiseVal * mouseY
curve(x, yOffset, x, yOffset, mouseX, mouseY, mouseX, mouseY)
curve(
mouseX,
mouseY,
mouseX,
mouseY,
x,
height - yOffset,
x,
height - yOffset,
)
x = x + map(noiseVal, 0, 1, 0.5, 20)
}
}
</script>