const points = [[window.innerWidth*0.2, 30], [window.innerWidth*0.8, 100]]; //A (one end of the rope), B (other end) var parameters = [-0.03]; //a, b and c in the equation f(x) = ax² + bx + c calc_parameters(); var last_desired_length; window.onload = function() { last_desired_length = draw_graph(); }; function calc_parameters() { /*f(x) = ax² + bx + c y_A = a*x_A² + b*x_A + c y_B = a*x_B² + b*x_B + c y_A - y_B = a*(x_A²-x_B²) + b*(x_A-x_B) b = (y_A - y_B - a*(x_A²-x_B²)) / (x_A-x_B)*/ parameters[1] = (points[0][1] - points[1][1] - parameters[0]*(points[0][0]**2-points[1][0]**2)) / (points[0][0]-points[1][0]); //c = yA - a*x_A² - b*x_A parameters[2] = points[0][1] - parameters[0]*points[0][0]**2 - parameters[1]*points[0][0]; } function f(x) { return parameters[0]*x**2 + parameters[1]*x + parameters[2]; } function draw_graph(steps = 50) { let step_size = (points[1][0] - points[0][0]) / steps; //= ∆x let html = ""; for(let i=0; i"; } graph.innerHTML = html; info.innerHTML = "a = " + parameters[0] + "
b = " + parameters[1] + "
c = " + parameters[2] + "

arc length = " + calc_length(); } var point_to_move; function move_point() { point_to_move = parseInt(prompt("Which point do you want to move?\n0 = left end of the rope\n1 = right end\n\nTap/click anywhere to choose a new point.")); if(!(point_to_move==0 || point_to_move==1)) return; window.addEventListener("mousedown", move_point_event); } function calc_length() { //Before I changed it, this was done in the function that is now called draw_graph (see line 40). //But I don't like approximations, so I used the integral to calculate the arc length. //l = ₚ∫ⁿ√(1+(f'(x))²)dx //= ₚ∫ⁿ√(1+(2ax+b)²)dx //= ∫√(1+(2an+b)²)dx - ∫√(1+(2ap+b)²)dx //= 0.5n√(4a²n²+4abn+b²+1) + 0.25b√(4a²n²+4abn+b²+1)/a + 0.25*ln(|8a²n+4*|a|*√(4a²n²+4abn+b²+1)+4ab|)/|a| - (0.5p√(4a²p²+4abp+b²+1) + 0.25b√(4a²p²+4abp+b²+1)/a + 0.25*ln(|8a²p+4*|a|*√(4a²p²+4abp+b²+1)+4ab|)/|a|) = return 0.5*points[1][0]*Math.sqrt(4*parameters[0]**2*points[1][0]**2+4*parameters[0]*parameters[1]*points[1][0]+parameters[1]**2+1) + 0.25*parameters[1]*Math.sqrt(4*parameters[0]**2*points[1][0]**2+4*parameters[0]*parameters[1]*points[1][0]+parameters[1]**2+1)/parameters[0] + 0.25*Math.log(Math.abs(8*parameters[0]**2*points[1][0]+4*Math.abs(parameters[0])*Math.sqrt(4*parameters[0]**2*points[1][0]**2+4*parameters[0]*parameters[1]*points[1][0]+parameters[1]**2+1)+4*parameters[0]*parameters[1]))/Math.abs(parameters[0]) - (0.5*points[0][0]*Math.sqrt(4*parameters[0]**2*points[0][0]**2+4*parameters[0]*parameters[1]*points[0][0]+parameters[1]**2+1) + 0.25*parameters[1]*Math.sqrt(4*parameters[0]**2*points[0][0]**2+4*parameters[0]*parameters[1]*points[0][0]+parameters[1]**2+1)/parameters[0] + 0.25*Math.log(Math.abs(8*parameters[0]**2*points[0][0]+4*Math.abs(parameters[0])*Math.sqrt(4*parameters[0]**2*points[0][0]**2+4*parameters[0]*parameters[1]*points[0][0]+parameters[1]**2+1)+4*parameters[0]*parameters[1]))/Math.abs(parameters[0])); //(p = points[0][0]; n = points[1][0]; a = parameters[0]; b = parameters[1]) } function move_point_event(event) { points[point_to_move] = [event.clientX, event.clientY]; calc_parameters(); draw_graph(); window.removeEventListener("mousedown", move_point_event); } function enter_length() { let min_length = Math.hypot(points[1][0] - points[0][0], points[1][1] - points[0][1]); let desired_length = parseFloat(prompt("What length should the rope have?\n\nMinimum: "+min_length+" px (= distance between the two points)", last_desired_length)); if(isNaN(desired_length)) return; if(desired_length <= 0) { alert("The length has to be positive."); return; } if(desired_length < min_length) { alert("Your desired length is impossible. The rope has to be at least "+min_length+" px long. If you want it to be shorter, move the ends of the rope closer together."); return; } last_desired_length = desired_length; //This function will change the parameter a (parameters[0]) so that the length of the rope matches the desired length. //The bigger the absolute value of a, the longer the rope (a is always negative because otherwise the middle of the rope would float up instead of hanging down). //So if the rope is currently shorter than it should be, we increase the absolute value of a (by decreasing a, since a is negative) and if it's too long, we decrease the absolute value of a. let speed = 0.001; //how much a changes in each iteration if(calc_length() < desired_length) speed *= -1; for(let i=0; i<3;) { parameters[0] += speed; calc_parameters(); let arc_length = calc_length(); //If the actual length of the rope passes the desired length, it goes in the opposite direction at a slower speed to correct for the overshoot. //When this happens for the 3rd time, it stops. if((speed<0 && arc_length >= desired_length) || (speed>0 && arc_length <= desired_length) || parameters[0]>=0) { speed *= -0.1; i++; } } draw_graph(); }

Rope/parabola