Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.10.2010, 13:00
Новичок на форуме
Отправить личное сообщение для ascrazy Посмотреть профиль Найти все сообщения от ascrazy
 
Регистрация: 26.10.2010
Сообщений: 2

Физический движок
Пытаюсь написать простейший физический движок(падение точки под углом с нач скоростью)
вот здесь есть демо того что уже получилось(отрисовка на canvas, проверял только в chromium 9.0.564.0): http://i-alexandr-sh.narod.ru/dv.html
как видно из демо проблема в том что бы отловить момент когда точка начинает "кататься" по низу полотна, мб кто-нить подскажет как это сделать?
Вот код:
var point = function(context,color,x,y,a,v,mx,my){
	this.context = context; this.x = x;
	this.y = y; this.a = a; this.v = v;
	this.mx = mx; this.my = my;
	this.vx = this.v*Math.cos(this.a/180*Math.PI);
	this.vy = this.v*Math.sin(this.a/180*Math.PI);
	this.color = color
	return true;
};
point.prototype.step = function(){
	if(this.x+this.vx>this.mx){this.vx*=-1;this.x=this.mx;}
	else if(this.x+this.vx<0){this.vx*=-1;this.x=0;}
	else{this.x += this.vx;};
	if(this.y+this.vy>this.my){this.vy*=-1;this.y=this.my;}
	else if(this.y+this.vy<0){this.vy*=-1;this.y=0;}
	else {this.y += this.vy;};
	if(this.y+this.vy>0){this.vy += 9.8;};
	return true;
};
point.prototype.show = function(){
	this.context.fillStyle = this.color;
	this.context.fillRect(this.x,this.y,10,10);
	return true;
};
point.prototype.hide = function(){
	this.context.fillStyle = "#ffffff";
	this.context.fillRect(this.x,this.y,10,10);
	return true;
};
point.prototype.loop = function(){
	this.hide();
	this.step();
	this.show();
	return true;
}
window.onload = function(){
	canvas = document.getElementById("surf");
	context = canvas.getContext("2d");
	//context.fillRect(100,100,100,100);
	var top = new point(context,"#000000",0,0,20,10,300,280)
	var ID = setInterval(function(){
		top.loop();
		if (document.getElementById("pause").value!=0) clearInterval(ID);
		},100);
	return true;
};

Последний раз редактировалось ascrazy, 26.10.2010 в 13:06.
Ответить с цитированием
  #2 (permalink)  
Старый 26.10.2010, 13:45
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

А в чём проблема смотреть на изменение вертикальной составляющей. Не меняется, значит, катаемся.
Ответить с цитированием
  #3 (permalink)  
Старый 26.10.2010, 14:02
Новичок на форуме
Отправить личное сообщение для ascrazy Посмотреть профиль Найти все сообщения от ascrazy
 
Регистрация: 26.10.2010
Сообщений: 2

Проблема в том что оно никогда не равно нулю.
point.prototype.step = function(){
	if(this.x+this.vx>this.mx){this.vx*=-1;this.x=this.mx;}
	else if(this.x+this.vx<0){this.vx*=-1;this.x=0;}
	else{this.x += this.vx;};
	if(this.y+this.vy>this.my){this.vy*=-1;this.y=this.my;}
	else if(this.y+this.vy<0){this.vy*=-1;this.y=0;}
	else {this.y += this.vy;};
	if(this.vy==0){this.vx=0;this.vy=0;document.getElementById("pause").value=1;};
	if(this.y+this.vy>0){this.vy += 9.8;};
	return true;
};

не помогает.
и даже если сделать примерно так:
if(this.vy<3 && this.y>-3){this.vx=0;this.vy=0;document.getElementById("pause").value=1;};

Тоже не помогает, если ещё на единицу увеличить мин. скорость то анимация даже не запускается
Ответить с цитированием
  #4 (permalink)  
Старый 26.10.2010, 14:07
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Надо к целым числам округлять, на экране всё равно дробных нет.
Ответить с цитированием
  #5 (permalink)  
Старый 26.10.2010, 14:18
Аватар для vladlen
Кандидат Javascript-наук
Отправить личное сообщение для vladlen Посмотреть профиль Найти все сообщения от vladlen
 
Регистрация: 19.10.2010
Сообщений: 143

У тебя должно совпасть два условия f(y)=0 и a=0, при этом "а" зависит от "g" и -> 0.
Вроде все правильно сказал.
Вот, почитай для начала ускорение и ускорение свободного падения

Последний раз редактировалось vladlen, 26.10.2010 в 14:22.
Ответить с цитированием
  #6 (permalink)  
Старый 26.10.2010, 15:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,003

ascrazy,
Реализация подсказки
Сообщение от Kolyaj
А в чём проблема смотреть на изменение вертикальной составляющей. Не меняется, значит, катаемся.
<!DOCTYPE html>
<html>
<meta http-equiv='content-type' content='text/html; charset=windows-1251' />
<script type='text/javascript' >
var point = function(context,color,x,y,a,v,mx,my){
	this.context = context; this.x = x;
	this.y = y; this.a = a; this.v = v;
	this.mx = mx; this.my = my;
	this.vx = this.v*Math.cos(this.a/180*Math.PI);
	this.vy = this.v*Math.sin(this.a/180*Math.PI);
	this.color = color
	return true;
};
point.prototype.step = function(){
	if(this.x+this.vx>this.mx){this.vx*=-1;this.x=this.mx;}
	else if(this.x+this.vx<0){this.vx*=-1;this.x=0;}
	else{this.x += this.vx;};
	if(this.y+this.vy>this.my){this.vy*=-1;this.y=this.my;}
	else if(this.y+this.vy<0){this.vy*=-1;this.y=0;}
	else {this.y += this.vy;};
	if(this.y+this.vy>0){this.vy += 9.8;};
    if(this.stop==this.y){this.vx=0;this.vy=0;document.getElementById("pause").value=1;};
    this.stop=this.y;
    return true;
};
point.prototype.show = function(){
	this.context.fillStyle = this.color;
	this.context.fillRect(this.x,this.y,10,10);
	return true;
};
point.prototype.hide = function(){
	this.context.fillStyle = "#ffffff";
	this.context.fillRect(this.x,this.y,10,10);
	return true;
};
point.prototype.loop = function(){
	this.hide();
	this.step();
	this.show();
	return true;
}
window.onload = function(){
	canvas = document.getElementById("surf");
	context = canvas.getContext("2d");
	//context.fillRect(100,100,100,100);
	var top = new point(context,"#000000",0,0,20,10,300,280)
	var ID = setInterval(function(){
		top.loop();
		if (document.getElementById("pause").value!=0) clearInterval(ID);
		},100);
	return true;
};
</script>
<body>
<canvas id='surf' width='300px' height='300px'></canvas>
<input id='pause' type='hidden' value='0' />
<input type='button' value='stop'
onClick='document.getElementById("pause").value = 1' />
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 26.10.2010, 15:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,830

Если все сводится к пикселам - действительно округлять. Если некий физический смысл нужен - вводится размер некой погрешности которым можно пренебречь.
Если вертикальная составляющая менее погрешности - нет прижка.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
движок этого форума igrok Оффтопик 14 25.09.2010 09:07
Простой графический движок: SVG vs Canvas stryaponoff Общие вопросы Javascript 5 29.06.2010 15:59
Бесплатный движок для сайта greatilya Ваши сайты и скрипты 9 03.05.2009 14:28