<html lang="en">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />

</head>

<body>
  <script src="sketch.js"></script>
</body>

</html>
*{ box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

input {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  background: #d3d3d3;
  outline: none;
  border-radius: 10px;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 10px;
  background: #29726B;
  cursor: pointer;
}

input::-webkit-slider-thumb:hover {
 background: #3EADA2;
}
let divisions;
const line1 = {
  x1: 40,
  y1: 50,
  x2: 200,
  y2: 330
};
const line2 = {
  x1: line1.x2,
  y1: line1.y2,
  x2: 360,
  y2: 50
};

function setup() {
  createCanvas(400, 400);
  stroke("#CF3000");
  strokeWeight(3.5);
  slider = createSlider(3, 60, 30, 1);
  slider.position(100, 370);
  slider.style('width', '200px');
}

function draw() {
  line1.x2 = mouseX;
  line1.y2 = mouseY;
  line2.x1 = mouseX;
  line2.y1 = mouseY;
  divisions = slider.value();
  background("#E6E6E4");
  push();
    strokeWeight(1);
    stroke("#F18918");
    drawCurve(...getLineCoordsArray(line1, line2));
  pop();
  // MAIN LINE 1
  line(
    line1.x1,
    line1.y1,
    line1.x2,
    line1.y2
  );
  // MAIN LINE 2
  line(
    line2.x1,
    line2.y1,
    line2.x2,
    line2.y2
  );
}

const calcRRSegs = (x1, y1, x2, y2) => {
  return [((x2 - x1) / (divisions + 1)), ((y2 - y1) / (divisions + 1))]
};

const calcPointsArray = (lineStartX, lineStartY, runSeg, riseSeg, initialLine) => {
  let x = lineStartX;
  let y = lineStartY;
  let f = [];
  initialLine && f.push([x, y]);
  for (let i = 0; i < divisions + (1 - initialLine); i++) {
    x = x + runSeg;
    y = y + riseSeg;
    f.push([x, y]);
  };
  return f;
};

const getLineCoordsArray = (a, b) => {
  let m = Object.values(a);
  let n = Object.values(b);
  return m.concat(n);
};

const drawCurve = (ix1, iy1, ix2, iy2, iix1, iiy1, iix2, iiy2) => {
  var lineMatrix = [
    calcPointsArray(ix1, iy1, ...calcRRSegs(ix1, iy1, ix2, iy2), 1),
    calcPointsArray(iix1, iiy1, ...calcRRSegs(iix1, iiy1, iix2, iiy2), 0)
  ];
  for (j = 0; j < lineMatrix[0].length; j++) {
    line(
      lineMatrix[0][j][0],
      lineMatrix[0][j][1],
      lineMatrix[1][j][0],
      lineMatrix[1][j][1],
    )
  }
};
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.