JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="canvas" width="1000" height="600"></canvas>
JavaScript
var curves = [];
var curX = 0;
for (var j = 0; j < 3; j++) {
x = [];
for (var i = 0; i < 100; i++) {
x.push(i * 10);
x.push(100 - Math.floor(Math.random() * 100));
}
console.log(x);
curves.push(x);
}
var colors = ["red", "blue", "green"];
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// console.log(ctx);
var tension = 1;
console.log(curves);
for (var c = 0; c < curves.length; c++) {
console.log(c);
ctx.stroke();
ctx.strokeStyle = colors[c];
console.log(colors[c]);
drawCurve(ctx, curves[c]);
console.log(curves);
console.log(curves.length);
console.log(c);
}
console.log("done");
// var inter = setInterval(moveCurve, 20);
function drawCurve(ctx, ptsa, tension, isClosed, numOfSegments, showPoints) {
showPoints = showPoints ? showPoints : false;
showPoints = true;
// ctx.stroke();
ctx.beginPath();
drawLines(ctx, getCurvePoints(ptsa, tension, isClosed, numOfSegments));
// drawLines(ctx, ptsa);
// if (showPoints) {
// ctx.stroke();
// // ctx.beginPath();
// for(var i=0;i<ptsa.length-1;i+=2)
// ctx.rect(ptsa[i] - 2, ptsa[i+1] - 2, 4, 4);
// }
}
function getCurvePoints(pts, tension, isClosed, numOfSegments) {
// use input value if provided, or use a default value
tension = (typeof tension != 'undefined') ? tension : 0.5;
isClosed = isClosed ? isClosed : false;
numOfSegments = numOfSegments ? numOfSegments : 16;
var _pts = [],
res = [], // clone array
x, y, // our x,y coords
t1x, t2x, t1y, t2y, // tension vectors
c1, c2, c3, c4, // cardinal points
st, t, i; // steps based on num. of segments
// clone array so we don't change the...