Редактирование: JavaScript-mechanics
Внимание! Вы не авторизовались на сайте. Ваш IP-адрес будет публично видимым, если вы будете вносить любые правки. Если вы войдёте или создадите учётную запись, правки вместо этого будут связаны с вашим именем пользователя, а также у вас появятся другие преимущества.
Правка может быть отменена. Пожалуйста, просмотрите сравнение версий, чтобы убедиться, что это именно те изменения, которые вас интересуют, и нажмите «Записать страницу», чтобы изменения вступили в силу.
Текущая версия | Ваш текст | ||
Строка 1: | Строка 1: | ||
− | + | <addscript src=ocanvas-251/> | |
+ | <addscript src=Vector2D/> | ||
+ | <addscript src=mechanics/> | ||
+ | <htmlet nocache="yes">mechanics_TM</htmlet> | ||
− | |||
+ | Текст программы на языке JavaScript (разработчик [[Цветков Денис]], использована библиотека [http://ocanvas.org/ oCanvas]): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | ||
+ | Файл '''"mechanics.js"''' | ||
+ | <source lang="javascript" first-line="1"> | ||
+ | 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 | + | var a = new Vector2D(0, 0); |
+ | var v = new Vector2D(0, 0); | ||
− | |||
− | const | + | 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;} | |
− | + | } | |
− | + | } | |
+ | </source> | ||
+ | Файл '''"mechanics.html"''' | ||
+ | <source lang="html" first-line="1"> | ||
+ | <!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> | ||
+ | </source> | ||
+ | </toggledisplay> | ||
− | |||
− | + | Старая версия (без векторов): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> | |
− | + | Файл '''"mechanics.js"''' | |
− | var | + | <source lang="javascript" first-line="1"> |
− | + | function MainMech(canvas) { | |
+ | var context = canvas.getContext("2d"); | ||
− | var | + | var w = canvas.width; |
+ | var h = canvas.height; | ||
− | var | + | var r = w / 50; |
− | |||
var ocanvas = oCanvas.create({ | var ocanvas = oCanvas.create({ | ||
− | canvas: "#canvasMech", | + | canvas: "#canvasMech", |
− | fps: | + | fps: 60 |
}); | }); | ||
− | |||
var arc = ocanvas.display.arc({ | var arc = ocanvas.display.arc({ | ||
− | x: | + | x: 4*r, |
− | y: | + | y: h, |
− | radius: r | + | radius: r, |
− | end: 360, | + | start: 0, |
− | fill: "rgba(0, 0, 255, 1)" | + | end: 360, |
+ | fill: "rgba(0, 0, 255, 1)" | ||
}).add(); | }).add(); | ||
− | + | var m0x = 0; var m0y = 0; | |
− | var mx | + | var mx = 0; var my = 0; |
arc.dragAndDrop({ | arc.dragAndDrop({ | ||
− | changeZindex: true, | + | changeZindex: true, |
start: function () { | start: function () { | ||
− | + | this.fill = "rgba(0, 0, 255, 0.5)"; | |
− | this.fill = "rgba(0, 0, 255, 0.5)"; | + | count = false; |
− | + | m0x = 0; m0y = 0; | |
+ | mx = 0; my = 0; | ||
}, | }, | ||
move: function () { | move: function () { | ||
− | + | m0x = mx; m0y = my; | |
− | + | mx = ocanvas.mouse.x; | |
− | + | my = ocanvas.mouse.y; | |
}, | }, | ||
end: function () { | end: function () { | ||
+ | this.fill = "rgba(0, 0, 255, 1)"; | ||
count = true; | count = true; | ||
− | + | vx = (mx-m0x)*100; vy = (my-m0y)*100; | |
− | + | } | |
}); | }); | ||
− | |||
− | |||
− | + | ocanvas.setLoop(physics).start(); | |
− | var vx = | + | |
+ | // границы: | ||
+ | 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;} | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
} | } | ||
− | </ | + | </source> |
</toggledisplay> | </toggledisplay> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− |