Skip to content

Instantly share code, notes, and snippets.

/frphy.html

Created October 15, 2015 12:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/b53d1cda2701fa0edb3a to your computer and use it in GitHub Desktop.
Save anonymous/b53d1cda2701fa0edb3a to your computer and use it in GitHub Desktop.
Download ZIP
FRPな物理
Raw
frphy.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FRPな物理</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h2>FRPな物理</h2>
<div id="content"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.min.js"></script>
<script type="text/babel">
'use strict';
// Constant
const G = 9.8; // m/s^2 gravity const
const V0 = 85.0; // m/s
const X0 = 0
const Y0 = 0
const DEG = 30; // degree
const THETA = DEG * (Math.PI / 180); // radian
const Vx0 = V0 * Math.cos(THETA); // m/s
const Vy0 = V0 * Math.sin(THETA); // m/s
// Projection
const x = (t) => X0 + Vx0 * t;
const y = (t) => Y0 + Vy0 * t - G * t * t / 2;
const Te = (Vy0 + Math.sqrt(Vy0 * Vy0 + 2 * G * Y0)) / G
// Recat
const Projection = (props) => (
<div>
<svg width="800" height="200">
<text x="40" y="165">0</text>
<path stroke="black" stroke-width="1" fill="none" d="M50,0L50,200"/>
<path stroke="black" stroke-width="1" fill="none" d="M0,150L800,150"/>
<text x="15" y="55">100</text>
<path stroke="black" stroke-width="1" fill="none" d="M45,50L55,50"/>
<text x="135" y="170">100</text>
<path stroke="black" stroke-width="1" fill="none" d="M150,145L150,155"/>
<text x="235" y="170">200</text>
<path stroke="black" stroke-width="1" fill="none" d="M250,145L250,155"/>
<text x="335" y="170">300</text>
<path stroke="black" stroke-width="1" fill="none" d="M350,145L350,155"/>
<text x="435" y="170">400</text>
<path stroke="black" stroke-width="1" fill="none" d="M450,145L450,155"/>
<text x="535" y="170">500</text>
<path stroke="black" stroke-width="1" fill="none" d="M550,145L550,155"/>
<text x="635" y="170">600</text>
<path stroke="black" stroke-width="1" fill="none" d="M650,145L650,155"/>
<text x="735" y="170">700</text>
<path stroke="black" stroke-width="1" fill="none" d="M750,145L750,155"/>
<circle r="5" fill="blue" cx ={50 + props.x} cy ={150 - props.y}/>
</svg>
<p>time: {props.t.toFixed(2)}s, x: {props.x.toFixed(2)}m, y: {props.y.toFixed(2)}m</p>
</div>
);
// FRP
Rx.Observable.timer(0, 10)
.timeInterval()
.map((a) => a.interval / 1000)
.scan((acc, t) => acc + t)
.map((t) => {return {t: t, x: x(t), y: y(t)};})
.takeWhile((st) => st.y >= 0)
.subscribe(
(st) => ReactDOM.render(<Projection t={st.t} x={st.x} y={st.y}/>, document.getElementById('content')),
(st) => console.error("Error"),
(st) => ReactDOM.render(<Projection t={Te} x={x(Te)} y={y(Te)}/>, document.getElementById('content'))
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment