Por mi vida, no puedo encontrar una manera de hacer que este boceto se ejecute a un ritmo lento para ver claramente el patrón ondulado en movimiento. Es simplemente enloquecedoramente rápido. Utiliza ruido perlin 1D.
let gap = 10; let start = 0; function setup() { createCanvas(400, 400); } function draw() { background(20); noStroke(); fill(225, 225, 0); translate(0, height / 2); for (let i = gap; i < width - gap; i += gap) { let n1 = noise(start); let noise1 = map(n1, 0, 1, 20, 150); rect(i, 0, 3, -noise1); start += 0.1; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>Usted llama a noise() varias veces en el ciclo for comenzando con el mismo valor, aumentando en la misma cantidad, por lo tanto, las barras de altura son idénticas. (Similar a llamar al ruido una vez, luego reutilizar el valor en el ciclo for).
Necesitas dos ingredientes más:
En términos de velocidad, simplemente disminuya el valor del incremento ( start += 0.1; se convierte en start += 0.001; )
Esto es lo que quiero decir:
let gap = 10; let start = new Array(39); function setup() { createCanvas(400, 400); // init array with different values for(let i = 0 ; i < 39; i++){ start[i] = 0.1 * i; } } function draw() { background(20); noStroke(); fill(225, 225, 0); translate(0, height / 2); for (let i = gap, nIndex = 0; i < width - gap; i += gap, nIndex++) { let n1 = noise(start[nIndex]); let noise1 = map(n1, 0, 1, 20, 150); rect(i, 0, 3, -noise1); start[nIndex] += 0.01; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>Personalmente, cambiaría el ciclo for para iterar usando un índice, no un desplazamiento de posición x, pero puede ser una cuestión de preferencia:
let gap = 10; let numBars = 42; let noiseXValues = new Array(numBars); function setup() { createCanvas(400, 400); // init array with different values for(let i = 0 ; i < numBars; i++){ noiseXValues[i] = 0.1 * i; } } function draw() { background(20); noStroke(); fill(225, 225, 0); translate(0, height / 2); let barWidth = (width - gap) / numBars; for (let i = 0; i < numBars; i++) { let x = gap + (barWidth * i); let noiseValue = noise(noiseXValues[i]); let mappedNoiseValue = map(noiseValue, 0, 1, 20, 150); rect(x, 0, 3, -mappedNoiseValue); noiseXValues[i] += 0.01; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>