const setPoints = (ctx) => { ctx.fillStyle = "#BBB"; ctx.fillRect(0,0,300,300) let inputelement = document.getElementsByTagName("input")[0]; let value = inputelement.value; let point = value.replace(' ', '').replace(',', '|').split('|'); for (var i = 0; i < point.length; i++){ let elementvalue = point[i].replace(" ", ''); var isanchor; let result; if (!elementvalue.indexOf('!')){ elementvalue = elementvalue.replace('!',''); if (!(i == 0 || i == point.length - 1)){ isanchor = true; } }else{ isanchor = false; } elementvalue = elementvalue.split(':'); result = [elementvalue, isanchor]; point[i] = result; } let Path = new tracePath(point).getPath(ctx); var cx, cy; for (var i = 0; i < Path.length; i+=5){ ctx.beginPath(); cx = Path[i][0]; cy = Path[i][1]; ctx.arc(cx, cy, 45, Math.PI*90, 0); ctx.fillStyle="#FFF"; ctx.fill(); } for (var i = 0; i < Path.length; i+=5){ ctx.beginPath(); cx = Path[i][0]; cy = Path[i][1]; ctx.arc(cx, cy, 40, Math.PI*90, 0); ctx.fillStyle="#F00"; ctx.fill(); } for (var i = 0; i < Path.length; i+=1){ ctx.beginPath(); let cx = Path[i][0]; let cy = Path[i][1]; ctx.arc(cx, cy, 1, Math.PI*90, 0); ctx.fillStyle="#FFF"; ctx.fill(); } ctx.beginPath(); cx = Path[0][0]; cy = Path[0][1]; ctx.arc(cx, cy, 45, Math.PI*90, 0); ctx.fillStyle="#FFF"; ctx.fill() ctx.beginPath() ctx.arc(cx, cy, 40, Math.PI*90, 0); ctx.fillStyle="#F00"; ctx.fill(); ctx.fillStyle = "#FFF"; ctx.font = "bold 50px Tahoma"; ctx.textAlign = "start"; ctx.fillText("1", cx-15, cy+15); } class tracePath { constructor(point){ this.rawpoint = point; this.parsedpoint = []; this.sliderpoint = []; for (var i = 0; i < point.length; i++){ this.sliderpoint[i] = this.rawpoint[i][0]; } var parseptindex = 0; var parser = []; var parserindex = 0; var hasAnchor = false; for (var i = 0; i < point.length; i++){ parser[parserindex] = point[i][0]; parserindex++; if (point[i][1] == true){ this.parsedpoint[parseptindex] = parser; parseptindex++; parser = []; parserindex = 0; hasAnchor = true; parser[parserindex] = point[i][0]; parserindex++; } } this.parsedpoint[parseptindex] = parser; parseptindex++; parser = []; parserindex = 0; } getPath(ctx){ ctx.fillStyle = "rgb(8,8,8)" for (var i = 0; i < this.sliderpoint.length; i++){ let x = this.sliderpoint[i][0]; let y = this.sliderpoint[i][1]; ctx.fillRect(x-1, y-1, 3, 3); } let pathresult = []; var path_i = 0; for (var i = 0; i < this.parsedpoint.length; i++){ var bezCurve = new Bezier(this.parsedpoint[i], ctx); var pathcoords = bezCurve.draw(); for (var pi = 0; pi < pathcoords.length; pi++){ if (pathresult.indexOf(pathcoords[pi]) == -1 || true){ pathresult[path_i] = pathcoords[pi]; path_i++; } } } return pathresult; } } class Bezier{ constructor (point, ctx){ this.point = point; this.ctx = ctx; this.nopts = point.length; this.ctrlpts = this.nopts - 1; this.bezresult = []; this.bez_i = 0; var ct; for (var t = 0; t <= 1.00; t += 0.004){ ct = Math.round(t*250)/250; let eq_x = "this.out_x = "; let eq_y = "this.out_y = "; for (var ctrl_i = 0; ctrl_i < this.nopts; ctrl_i++){ eq_x += "this._b(T, k, x, n)+".replace("T", ct).replace("k", ctrl_i).replace("x", this.point[ctrl_i][0]).replace("n", this.ctrlpts); eq_y += "this._b(T, k, y, n)+".replace("T", ct).replace("k", ctrl_i).replace("y", this.point[ctrl_i][1]).replace("n", this.ctrlpts); } eq_x += "0"; eq_y += "0"; eval(eq_x); eval(eq_y) this.bezresult[this.bez_i] = [this.out_x, this.out_y]; this.bez_i++; } } draw (){ for (var i = 0; i < this.bezresult.length; i++){ this.ctx.fillStyle = "#8882"; let x = this.bezresult[i][0]; let y = this.bezresult[i][1]; this.ctx.fillRect(x-1, y-1, 3, 3); } return this.bezresult; } _b(t, k, v, n){ let res = this._f(n, k) * Math.pow(1 - t, n - k) * Math.pow(t, k) * v; return res; } _f(n, k){ let fact = this._fact let res = fact(n) / (fact(k)*fact(n-k)); return res; } _fact(x){ let res = 1; if (x <= 1){ return 1; }else{ while (x != 1){ res *= x; x--; } } return res; } } window.onload = () => { alert("Instructions:\n\nSeparate points using vertical lines '|', use '!' to define an anchor point. Use the input below as an example.") let canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); }

osu!slidertest