How to make curves with slight variations

p5.js Coding Questions
1

I intend to make arrays of curves that line up like this.

48%20PM
Screen Shot 2019-02-26 at 12.57.48 PM.png766×178 51.7 KB

So far my code can only draw straight lines like this or relatively regular curves
00%20PM
Screen Shot 2019-02-26 at 1.56.00 PM.png1274×292 22.1 KB

I wonder how to use curve functions to create an array of curves that doesn’t cross over yet has slight variation so they don’t look identical, and how to adjust the size of the object.

My current code below:

let t=5;
function setup() {
    createCanvas(600, 600);

}


function draw() {
    background(255);
    translate(0,50);
    noFill();
    for (let i=0;i<100;i++){
    translate(t, 0.1);
    bezier(0,258,50,199,50,209,100,186);
    bezier(0,258,50,300,50,269,100,306);
    push ();
    rotate (radians(30));
    line (0,0,random(50,90),0);
    rotate (radians(-60));
    line (0,0,random(50,90),0);
    pop();
}
noLoop();
}

Thanks!

2

It would be easier, though might have a bit less variation, to use arc(). Give them different ending angles, but all the same or similar radiuses and then they won’t overlap.

2 Likes
3

If you want arcs nearby one another to be curved in similar (yet different) ways – “naturally” – then you should use noise() rather than random() and perhaps look at configuring your noiseSeed().

Note that you could use curve / curvePoint (or bezierPoint) for vertex components.

1 Like