​

const pane = new Tweakpane.Pane();

​

const PARAMS = {

  seed: 100,

  lineCount: 80,

  linePoints: 16,

  amplitudeX: 80,

  amplitudeY: 90,

  amplitudeYSine: 20,

  noiseXFactor: 0.02,

  noiseYFactor: 0.23,

  padding: 50,

  animate: false,

  animationSpeed: 100,

};

​

const RATIO = Math.sqrt(2); // DinA

​

const WIDTH = 400;

const HEIGHT = Math.floor(RATIO * WIDTH);

​

const LINE_COUNT = 50;

const LINE_POINTS = 20;

​

const AMPLITUDE = 50;

const SEED = 100;

​

function setup() {

  createCanvas(WIDTH, HEIGHT, SVG);

​

   pane.addInput(PARAMS, "padding", {

    min: 0,

    max: WIDTH/2,

  });

  pane.addInput(PARAMS, "seed", {

    min: 0,

    max: 100,

    step: 1,

  });

​

  pane.addInput(PARAMS, "lineCount", {

    min: 0,

    max: 100,

    step: 1,

  });

​

  pane.addInput(PARAMS, "linePoints", {

    min: 0,

    max: 100,

    step: 1,

  });

​

  pane.addInput(PARAMS, "amplitudeX", {

    min: 0,

    max: 1000,

  });

  pane.addInput(PARAMS, "amplitudeY", {

    min: 0,

    max: 1000,

  });

   pane.addInput(PARAMS, "amplitudeYSine", {

    min: 0,

    max: 100,

  });

​

  pane.addInput(PARAMS, "noiseXFactor", {

    min: 0.001,

    max: 0.1,

  });

  pane.addInput(PARAMS, "noiseYFactor", {

    min: 0.001,

    max: 1,

  });

  pane.addInput(PARAMS, "animate");

   pane.addInput(PARAMS, "animationSpeed", {

    min: 1,

    max: 10000,

  });

​

  // redraw

  pane.on("change", function (ev) {

    redraw();

  });

​

  frameRate(30);

}

​

let frame = 0;

​

function draw() {

  const PADDING = PARAMS.padding;

​

​

  const ACTUAL_WIDTH = WIDTH - PADDING * 2;

  const ACTUAL_HEIGHT = HEIGHT - PADDING * 2;

  background(230);

  stroke(0);

  strokeWeight(1);

  noFill();

​

  noiseSeed(PARAMS.seed);

​

  for (let i = 0; i < PARAMS.lineCount; i++) {

    let offset = map(i, 0, PARAMS.lineCount, 0, ACTUAL_WIDTH);

​

    const start_x = PADDING + offset;

​

    beginShape();

    for (let j = 0; j <= PARAMS.linePoints; j++) {

      let y = PADDING + map(j, 0, PARAMS.linePoints, 0, ACTUAL_HEIGHT);

      let x = start_x;

​

      x =

        x +

        (noise(i * PARAMS.noiseXFactor  + frame / 100, j * PARAMS.noiseYFactor + frame / PARAMS.animationSpeed) - 0.5) *

          PARAMS.amplitudeX;

      y =

        y +

        (noise(i * PARAMS.noiseXFactor  + frame / 100, j * PARAMS.noiseYFactor + frame / PARAMS.animationSpeed) - 0.5) *

          PARAMS.amplitudeY;

      y = y + sin(  PI * i/PARAMS.lineCount) * PARAMS.amplitudeYSine

​

      if (j === LINE_POINTS) {

        curveVertex(x, y);

      }

      curveVertex(x, y);

    }

    endShape();

  }

  if(PARAMS.animate){

    loop();

    frame++;

  }else{

    noLoop();

  }

}

​

function keyPressed() {

  // "S"

  if (keyCode === 83) {

    console.log("save");

    save("myImage.svg");

  }

}

​