usando p5.js necesito crear múltiples líneas onduladas de color, he escrito el siguiente código pero me gustaría optimizar y acortar el código. ¿Habría otras formas adicionales de hacer esto? Me gustaría saber si hay formas más fáciles de lograr este resultado usando curveVertext, por ejemplo, y usando bucles.
function setup() { let = new Curve(); // a new curve system initalize(); // initalize createCanvas(windowWidth, windowHeight); // the canvas width and height sketch(); // draw it } function Curve() { thick = 5; // initial stroke weight detail = 0.02; // this is the curve detail num = 150; // the number of lines to draw curves = []; // this will hold all curves initalize = function() { // initalize the lines and random colour let pos = 0; for (let i = 0; i < num; i++) { curves.push(new Curves(pos, detail, color(random(255), random(255), random(255)))); pos = pos + thick; } } sketch = function() { noFill(); strokeWeight(thick); // define the weight of strokes for (let i = 0; i < curves.length; i++) { // loop the lines curves[i].display(); } } } function Curves(begin, waves, col) { // lines off = 0.0; // offset of curves wave = waves; // the noise detail of lins dec = col; // the line colors shape = 100; // adjustable range a line can curve start = begin - shape; // the y starting point offset by the range this.display = function() { stroke(col); // set the color of lines beginShape(); for (let x = 0; x < width; x += 3) { // loops the width of canvas off = off + wave; // calculate new y offset let y = (noise(off) * shape); // calculate y distance curveVertex(x, begin + y); // begins the curve } endShape(); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>Algunos donde necesitas crear las "ondas" en un bucle. Haría falta algo de matemática para unir bezier() o curve() en una onda larga y suave. curveVertex() parece ser la mejor solución.
Sin embargo, puede limpiar el código usando clases:
let curves; function setup() { createCanvas(windowWidth, windowHeight); // the canvas width and height curves = new Curves(150, 5, 0.02, 100); // a new curve system noLoop(); } function draw() { background(255); curves.sketch(); } class Curves { constructor(num, thick, detail, shape) { this.thick = thick; // initial stroke weight this.curves = []; // this will hold all curves for (let i = 0; i < num; i++) { this.curves.push(new Curve(this.thick * i, detail, shape, color(random(255), random(255), random(255)))); } } sketch() { noFill(); strokeWeight(this.thick); // define the weight of strokes for (let i = 0; i < this.curves.length; i++) { // loop the lines this.curves[i].display(); } } } off = 0.0; // offset of curves class Curve { constructor(begin, wave, shape, col) { // lines this.col = col; // the line colors this.vertices = [] for (let x = 0; x < width; x += 3) { // loops the width of canvas off = off + wave; // calculate new y offset let y = (noise(off) * shape); // calculate y distance this.vertices.push([x, begin + y]); } } display() { stroke(this.col); // set the color of lines beginShape(); for (let i = 0; i < this.vertices.length; i++) { curveVertex(...this.vertices[i]) } endShape(); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>