<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],
)
}
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.