Skip to content

Commit

Permalink
空気抵抗を追加
Browse files Browse the repository at this point in the history
  • Loading branch information
Yujikawa committed Nov 16, 2018
1 parent af4a9c8 commit f5f02d7
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 41 deletions.
54 changes: 34 additions & 20 deletions assets/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,27 +17,29 @@ new Vue({
ctx: ctx,
x: 10, // x軸
y: 30, // y軸
g: 9.8, // 重力加速度
vx: 20, // 水平速度
vy: 0.0, // 速度
g: 9.08665, // 重力加速度
m: 1, // 質量
vx: 20.0, // 水平速度
vy: 0.0, // 垂直速度
t: 0.15, // 時間
k: 0.6,
k: 0.24, // 空気抵抗係数
ax: 0.0,
ay: 9.08665,
mode: false,
isLine: true,
name: "",
startTime: "",
startUnixTime: "",
fallTime: "",
fallUnixTime: "",
requestAnimationFrameId: null,
histories: []
requestAnimationHFrameId: null,
requestAnimationVFrameId: null,
histories: [],
isMouseUp: false
},
created: function() {
this.canvasWidth = this.width + 'px';
this.canvasHeight = (this.height - 60) + 'px';
console.log(this.width );
console.log(this.height);
console.log("onClick event register");
// start地点の描画
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.beginPath();
Expand All @@ -53,13 +55,15 @@ new Vue({
methods: {
onMouseDown() {
// マウスダウン関数
this.isMouseUp = false;
const startTime = moment();
this.startTime = startTime.format("HH:mm:ss.SSS");
this.startUnixTime = startTime.format("x");
this.draw(this.horizontalMove);
},
onMouseUp() {
// マウスアップ関数
this.isMouseUp = true;
const fallTime = moment();
this.fallTime = fallTime.format("HH:mm:ss.SSS");
this.fallUnixTime = fallTime.format("x");
Expand All @@ -81,8 +85,10 @@ new Vue({
this.ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
this.ctx.fill();
this.ctx.closePath();
// this.vx = this.vx + this.ax * this.t;
this.x += this.vx * this.t;
this.requestAnimationFrameId = requestAnimationFrame(this.horizontalMove);
// this.ax = -1 * (this.k/this.m) * this.vx;
this.requestAnimationHFrameId = requestAnimationFrame(this.horizontalMove);
},
verticalMove() {
// 垂直方向に動かす関数
Expand All @@ -101,12 +107,15 @@ new Vue({
this.ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
this.ctx.fill();
this.ctx.closePath();


this.vy += this.g * this.t;
this.y += this.vy * this.t;
this.vy += (this.g - (this.k/this.m))* this.t;
this.y += this.vy * this.t;


if (this.y > this.canvas.height - 5) {
cancelAnimationFrame(this.requestAnimationFrameId);
cancelAnimationFrame(this.requestAnimationHFrameId);
cancelAnimationFrame(this.requestAnimationVFrameId);
// 検証結果を追加
this.pushHistory([
this.startTime,
Expand All @@ -117,26 +126,31 @@ new Vue({
]);
return;
}
this.requestAnimationFrameId = requestAnimationFrame(this.verticalMove);
this.requestAnimationVFrameId = requestAnimationFrame(this.verticalMove);
},
draw(moveFunc) {
// 描画実行関数
this.target();
if (this.y > this.canvas.height - 5) {
cancelAnimationFrame(this.requestAnimationFrameId);
cancelAnimationFrame(this.requestAnimationHFrameId);
cancelAnimationFrame(this.requestAnimationVFrameId);
} else {
moveFunc();

}
},
clear() {
// 描画クリア&初期値クリア関数
cancelAnimationFrame(this.requestAnimationHFrameId);
cancelAnimationFrame(this.requestAnimationVFrameId);
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.x = 10;
this.y = 30; //距離
this.g = 9.8; //重力加速度
this.vy = 0.0; //速度
this.t = 0.15; //時間
this.e = -0.7; //反発係数
this.y = 30;
this.g = 9.8;
this.vy = 0.0;
this.vx = 15.0;
this.ax = 0.0;
this.ay = -9.8
this.ctx.beginPath();
this.ctx.arc(this.x, this.y, 5, 0, Math.PI * 2, false);
this.ctx.fillStyle = "rgba(0, 0, 0, 0.8)";
Expand Down
62 changes: 41 additions & 21 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,15 +81,29 @@
<label>水平方向速度</label>
<input id="vx" v-model="vx" class="form-control form" type="number" min=1 step="0.01">
</div>
<div class="col">
<label>垂直方向速度</label>
<input readonly id="vy" v-model="vy" class="form-control form" type="number" min=1 step="0.01">
</div>
</div>

<p>パラメータ設定</p>
<div class="row">
<div class="col">
<label>物体質量</label>
<input id="m" v-model="m" class="form-control form" type="number" min=1>
</div>

<div class="col">
<label>時間</label>
<input id="t" v-model="t" class="form-control form" type="number" min=0.01 step="0.01">
<div class="col">
<label>空気抵抗係数</label>
<input id="k" v-model="k" class="form-control form" type="number" min=1 step="0.01">
</div>

<div class="col">
<label>時間</label>
<input id="t" v-model="t" class="form-control form" type="number" min=0.01 step="0.01">
</div>
</div>
</div>

<div class="button-panel">
<!-- <input id="start" type="button" class="btn btn-primary"
Expand All @@ -98,23 +112,29 @@
value="ボールを落とす">-->
<!-- <input id="fall" type="button" class="btn btn-danger" v-on:click="clear()" value="アニメーションクリア"> -->

<div class="toggle-form">
<div class="toggle">
<p>軌跡モード</p>
<label class="switch">
<input id="mode" v-model="mode" type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="toggle-form">
<div class="toggle">
<p>点モード</p>
<label class="switch">
<input id="isLine" v-model="isLine" type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="row">
<div class="col">
<div class="toggle-form">
<div class="toggle">
<p>軌跡モード</p>
<label class="switch">
<input id="mode" v-model="mode" type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
</div>
<div class="col">
<div class="toggle-form">
<div class="toggle">
<p>点モード</p>
<label class="switch">
<input id="isLine" v-model="isLine" type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit f5f02d7

Please sign in to comment.