JSFiddle - React, Tailwind, and code Playground

by Arif Reza

HTML

<div class="placeholder"></div><!-- Only to hold the place for the frame -->
<div class="frame">
	<div class="mainPoint">
		<div class="lineY"></div>
		<div class="bob"></div>
	</div>
</div>

<div class="txt"># &#2472;&#2496;&#2482;
&#2476;&#2476;&#2463;&#2495;&#2453;&#2503; &#2478;&#2494;&#2441;&#2488;
&#2470;&#2495;&#2527;&#2503; &#2471;&#2480;&#2503; &#2465;&#2494;&#2472;&#2503;/&#2476;&#2494;&#2478;&#2503;
&#2453;&#2495;&#2459;&#2497;&#2470;&#2498;&#2480; &#2463;&#2503;&#2472;&#2503;
&#2459;&#2503;&#2524;&#2503; &#2470;&#2495;&#2472; &#2404; <br />
# <b style="color:green">&#2475;&#2494;&#2527;&#2494;&#2480;&#2475;&#2453;&#2509;&#2488;</b>
&#2476;&#2509;&#2479;&#2476;&#2489;&#2494;&#2480;&#2453;&#2494;&#2480;&#2496;&#2480;&#2494;
&#2463;&#2503;&#2472;&#2503; &#2459;&#2503;&#2524;&#2503;
&#2470;&#2503;&#2451;&#2527;&#2494;&#2480; &#2474;&#2480; &#2453;&#2494;&#2460;
&#2472;&#2494; &#2453;&#2480;&#2482;&#2503; &#2463;&#2503;&#2472;&#2503;
&#2459;&#2503;&#2524;&#2503; &#2470;&#2495;&#2527;&#2503; &#2447;&#2453;&#2476;&#2494;&#2480;
&#2482;&#2503;&#2475;&#2463; &#2476;&#2494;&#2463;&#2472;
&#2453;&#2509;&#2482;&#2495;&#2453; &#2453;&#2480;&#2497;&#2472; &#2404;</div>
# <button class="autorun">Autorun</button><span style="word-spacing:3px;"> &lt; Click this when BOB is not movable in your Browser. Clicking multiple times will create unexpected result.</span>

CSS

.frame {position:absolute;top:50px;left:100px;background:black;width:200px;height:2px;}
.mainPoint {position:absolute;background:red;width:2px;height:2px;left:99px;top:0px;}
.bob {width:20px;height:20px;border-radius:10px;background:blue;position:absolute;top:150px;left:0px;}
.lineY {background:red;width:1px;position:absolute;}
.placeholder {background:white;height:300px;width:100%;}
.txt {margin-bottom:20px;font-size:15px;}

JavaScript

/******
Author: Arif Reza
Author URL: http://www.facebook.com/arif.reza.rifat
******/

function movable(elem,L){
	$(elem).css("position","absolute");
	$(elem).mousedown(function(e){
		$(this).attr("active","yes");
		var moreX=e.screenX-parseInt($(this).css("left"));
		$(this).attr("moreX",moreX);
		var moreY=e.screenY-parseInt($(this).css("top"));
		$(this).attr("moreY",moreY);
	});
	$(elem).mouseup(function(){
		if ($(elem).attr("active")=="yes"){run();}
		$(this).attr("active","no");
	});
	$("html").click(function(){
		if ($(elem).attr("active")=="yes"){run();}
		$(elem).attr("active","no");
	});
	$("html").mousemove(function(e){
		var active=$(elem).attr("active");
		var moreX=$(elem).attr("moreX");
		var moreY=$(elem).attr("moreY");
		var finalPosX=e.screenX-moreX;
		var finalPosY=e.screenY-moreY;
		var A=Math.atan(finalPosX/finalPosY);
		var finalPosX=L*Math.sin(A);
		var finalPosY=L*Math.cos(A);
		if (active=="yes"){
			$(elem).css("left",finalPosX-10);
			$(elem).css("top",finalPosY-10);
			rope(arad(A));
			lastX=e.screenX;
			lastY=e.screenY;
			Amax=arad(A);
		}
	});
}

function rad(Angle){//Converts Degree unit to Radian
	return (Math.PI*Angle)/180;
}

function arad(Angle){//Converts Radian unit to Degree
	return (180*Angle)/Math.PI;
}

function rope(Angle){
	elem=$(".lineY");
	Angle=-Angle;
	l=L/2;
	postop=-l+(l*Math.cos(rad(Angle)))+2;
	left=-(l*Math.sin(rad(Angle)));
	elem.css({"transform":"rotate("+Angle+"deg)","left":left,"top":postop});
}

//Let's define the constants
var Amax=0, // The maximum Angle
bob = $(".bob"), //Select the BOB
W=1.2, // The angular velocity. Often defined as: W^2=(m/k)=(g/L)
t=0, // The starting point of time
L=150, // Length of the rope
speed=100, // Speed of time

//The highest position of the Bob
X=L*Math.sin(rad(Amax));
Y=L*Math.cos(rad(Amax));

//Now, Move the bob to the highest position
repos(X,Y);
rope(Amax);
$(".lineY").css("height",L);


//Functions
function repos(posX,posY){//Moves the...