using p5.js i need to create multiple wavy colourd lines, i have written out the folowing code but i would like to optimize and shorten the code. would there be any other additional ways to make this? i would like to know if there are any easier ways to achieve this output using curveVertext for example and using loops.
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>Some where you need to create the "waves" in a loop. It would take some math to join bezier() or curve() into a long smooth wave. curveVertex() seems to be the best solution.
However, you can clean up the code using classes:
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>