Curve

let button;
let colorPicker;
let buttonClear;
let buttonMain;
function setup() {
    createCanvas(400, 400);
    background(255);
    buttonMain = createButton('生成主线');
    buttonMain.position(20, 360);
    buttonMain.mousePressed(generateArc);
    button = createButton('添加角色');
    button.position(100, 360);
    button.mousePressed(generateCharacter);
    colorPicker = createColorPicker('#ff8080');
    colorPicker.position(180, 360);
    buttonClear = createButton('清空');
    buttonClear.position(300, 360);
    buttonClear.mousePressed(clear);
}
  
function draw() {
    drawAxes(210,1,10,10,350);
}

function generateCharacter() {
    push();
    noFill();
    stroke(colorPicker.color());
    let start = randomGaussian(100, 200);
    start = max(start, 10);
    let end = random(start, width);
    let p2 = random(start, end);
    let p1 = random(start, p2);
    bezier(start, random(0, 350), p1, random(0, 350), p2, random(0, 350), end, random(0, 350));
    pop();
}

function generateArc() {
    push();
    
    let a1 = randomGaussian(100, 50);
    let a2 = randomGaussian(250, 100);
    a2 = max(a2, a1);
    let h1 = random(0, 350);
    let h2 = random(0, 350);
    let p01 = random(0, a1);
    let p02 = random(p01, a1);
    let p11 = random(a1, a2);
    let p12 = random(p11, a2);
    let p21 = random(a2, width);
    let p22 = random(p21, width);
    noStroke();
    fill(0, 10);
    rect(10, 0, a1-10, 350);
    fill(0, 20);
    rect(a1, 0, a2-a1, 350);
    fill(0, 30);
    rect(a2, 0, width-a2, 350);
    noFill();
    stroke(0);
    bezier(10, random(0, 350), p01, random(0, 350), p02, random(0, 350), a1, h1);
    bezier(a1, h1, p11, random(0, 350), p12, random(0, 350), a2, h2);
    bezier(a2, h2, p21, random(0, 350), p22, random(0, 350), width, random(0, 350));
    pop();
}

function drawAxes(lineColor,thickness,spacing,xoffset,yoffset) {
    this.lineColor = lineColor;
    this.thickness = thickness;
    this.spacing = spacing;
    this.xoffset = xoffset;
    this.yoffset = yoffset;
    push();
    translate(this.xoffset,this.yoffset);
    stroke(this.lineColor);
    for (var i = 0; i<height; i+=this.spacing){

          //vertical tickmarks
       line(+3,i,-3,i)
       line(+3,-i,-3,-i)

          //horizontal tickmarks
       line(i,+3,i,-3)
       line(-i,+3,-i,-3)
    }
    stroke(this.lineColor);
    strokeWeight(this.thickness);
    //horizontal line
    line(-width,0,+width,0);
    //vertical line
    line(0,height,0,-height);

    pop();

}