JavaScript-mechanics — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
Денис (обсуждение | вклад) (Новая страница: «<addscript src=ocanvas-251/> <addscript src=Vector2D/> <addscript src=mechanics/> <htmlet nocache="yes">mechanics_TM</htmlet> Текст программы на я...») |
Денис (обсуждение | вклад) |
||
| Строка 1: | Строка 1: | ||
| + | См. также [[JavaScript-mechanics-box2D]] | ||
<addscript src=ocanvas-251/> | <addscript src=ocanvas-251/> | ||
<addscript src=Vector2D/> | <addscript src=Vector2D/> | ||
Версия 16:27, 19 февраля 2014
См. также JavaScript-mechanics-box2D <addscript src=ocanvas-251/> <addscript src=Vector2D/> <addscript src=mechanics/>
Не удается найти HTML-файл mechanics_TM.html
Текст программы на языке JavaScript (разработчик Цветков Денис, использована библиотека oCanvas): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
Файл "mechanics.js"
function MainMech(canvas) {
var context = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var r = w / 50;
var ocanvas = oCanvas.create({
canvas: "#canvasMech",
fps: 60
});
var arc = ocanvas.display.arc({
x: 4*r,
y: h,
radius: r,
start: 0,
end: 360,
fill: "rgba(0, 0, 255, 1)"
}).add();
var m0 = new Vector2D(0, 0);
var m = new Vector2D(0, 0);
arc.dragAndDrop({
changeZindex: true,
start: function () {
this.fill = "rgba(0, 0, 255, 0.5)";
count = false;
m0.set(0, 0);
m.set(0, 0);
},
move: function () {
m0.set(m);
m.set(ocanvas.mouse.x, ocanvas.mouse.y);
},
end: function () {
this.fill = "rgba(0, 0, 255, 1)";
count = true;
v.x = (m.x-m0.x)*100; v.y = (m.y-m0.y)*100;
}
});
ocanvas.setLoop(physics).start();
// границы:
const xb0 = 0;
const xb1 = w;
const yb0 = 0;
const yb1 = h;
const g = 9.8*2000; // 9.8 px, а не метров
const dt = 1/60;
const elastKoeff = 0.9; // коэффициент упругости
var count = true;
var a = new Vector2D(0, 0);
var v = new Vector2D(0, 0);
function physics(){ // то, что происходит каждый шаг времени
const arcD = arc.y + r;
const arcU = arc.y - r;
const arcL = arc.x - r;
const arcR = arc.x + r;
var dr = new Vector2D(0, 0);
a.set(0, g);
v = v.add(a.multiple(dt));
dr.set(v.multiple(dt));
// проверка граничных условий
if (arcD + dr.y > h) {
v.y = -Math.abs(v.y)*elastKoeff;
if (count) arc.y = h - r;
dr.y = -Math.abs(h - arcD);
}
if (arcU + dr.y < 0) {
v.y = Math.abs(v.y)*elastKoeff;
if (count) arc.y = r;
dr.y = Math.abs(arcU);
}
if (arcR + dr.x > w) {
v.x = -Math.abs(v.x)*elastKoeff;
if (count) arc.x = w - r;
dr.x = -Math.abs(w - arcR);
}
if (arcL + dr.x < 0) {
v.x = Math.abs(v.x)*elastKoeff;
if (count) arc.x = r;
dr.x = Math.abs(arcL);
}
if (count) {arc.x += dr.x; arc.y += dr.y;}
}
}
Файл "mechanics.html"
<!DOCTYPE html>
<html>
<head>
<title>Simple Mechanics</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.5.1/ocanvas.min.js"></script>
<script src="Vector2D.js"></script>
<script src="mechanics.js"></script>
</head>
<body>
<canvas id="canvasMech" width="800" height="600" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">MainMech(document.getElementById('canvasMech'));</script>
</body>
</html>
</toggledisplay>
Старая версия (без векторов): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default">
Файл "mechanics.js"
function MainMech(canvas) {
var context = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var r = w / 50;
var ocanvas = oCanvas.create({
canvas: "#canvasMech",
fps: 60
});
var arc = ocanvas.display.arc({
x: 4*r,
y: h,
radius: r,
start: 0,
end: 360,
fill: "rgba(0, 0, 255, 1)"
}).add();
var m0x = 0; var m0y = 0;
var mx = 0; var my = 0;
arc.dragAndDrop({
changeZindex: true,
start: function () {
this.fill = "rgba(0, 0, 255, 0.5)";
count = false;
m0x = 0; m0y = 0;
mx = 0; my = 0;
},
move: function () {
m0x = mx; m0y = my;
mx = ocanvas.mouse.x;
my = ocanvas.mouse.y;
},
end: function () {
this.fill = "rgba(0, 0, 255, 1)";
count = true;
vx = (mx-m0x)*100; vy = (my-m0y)*100;
}
});
ocanvas.setLoop(physics).start();
// границы:
const xb0 = 0;
const xb1 = w;
const yb0 = 0;
const yb1 = h;
const g = 9.8*2000; // 9.8 px, а не метров
const dt = 1/60;
const elastKoeff = 0.9; // коэффициент упругости
var count = true;
var ax = 0;
var ay = 0;
var vx = 2;
var vy = 0;
function physics(){ // то, что происходит каждый шаг времени
const arcD = arc.y + r;
const arcU = arc.y - r;
const arcL = arc.x - r;
const arcR = arc.x + r;
var dx = 0;
var dy = 0;
ax = 0; ay = g;
vx += ax*dt; vy += ay*dt;
dx = vx*dt; dy = vy*dt;
// проверка граничных условий
if (arcD + dy > h) {
vy = -Math.abs(vy)*elastKoeff;
if (count) arc.y = h - r;
dy = -Math.abs(h - arcD);
}
if (arcU + dy < 0) {
vy = Math.abs(vy)*elastKoeff;
if (count) arc.y = r;
dy = Math.abs(arcU);
}
if (arcR + dx > w) {
vx = -Math.abs(vx)*elastKoeff;
if (count) arc.x = w - r;
dx = -Math.abs(w - arcR);
}
if (arcL + dx < 0) {
vx = Math.abs(vx)*elastKoeff;
if (count) arc.x = r;
dx = Math.abs(arcL);
}
if (count) {arc.x += dx; arc.y += dy;}
}
}
</toggledisplay>
