Variable in nächster Variable weiterverwenden

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
c143

c143 hat kostenlosen Webspace.
3:02, 2.1.2013
Hallo, ich habe folgendes Problem:
```
<script>
	var m		= 10000; //Masse in Gramm
	var v0		= 2; //Anfangsgeschwindgkeit in m/s
	var winkel	= 50; //Winkel in Grad
	var h		= 1; //Hoehe in m
	var g		= 9.81; //Gravitationskonstante


	var a		= g/2;
	var b		= v0*(Math.sin(winkel));
	var c		= h*(-1);
</script>
```
Ich habe Angaben, die ich auf verschiedene Arten und Weisen verarbeiten muss. In diese Variabeln kommen nacher varrierende Werte, also nicht einfach eine eingegebene Zahl, sondern was in Boxen eingegeben wird. Daher ists viel sinnvoller, wenn ich nacher mit den Variabeln weiterrechne, und nicht immer wieder die Box importiere. Sobald ich das aber so mache, kommt mir als Ausgabe undefiniert. Darf man Variabeln in Variabeln nicht benutzen, oder einfach anders?

Beitrag zuletzt geändert: 2.1.2013 3:15:09 von c143
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
~~g****e~~
9:20, 2.1.2013
Das liegt daran, dass die Eingaben in den Boxen nicht als "Integer" oder "Float", also Ganzzahl oder Fließkommazahl behandelt werden, sondern als "String", also als Text, oder auch Zeichenfolge.
Um Daten aus einem Feld auszulesen und zu verwenden musst du diese als Zahlen parsen:
```
var element = document.getElementById("MyIntegerInput");
var ganzzahl = parseInt( element.value );
var fliesskommazahl = parseFloat( element.value );
```
Dannach solltest du mit den Werten rechnen können. Du kannst zur Sicherheit ja alle Werte nochmal ausgeben lassen, also nach dem parseInt bzw parseFloat ein
```
alert( "meine Zahl" + ganzzahl );
```
Liebe Grüße
burgi

Co-Admin

burgi hat kostenlosen Webspace.
9:30, 2.1.2013
c143 schrieb:
```
var winkel	= 50; //Winkel in Grad
var b		= v0*(Math.sin(winkel));
```
Ich sehe hier noch einen anderen Fehler ...
http://de.selfhtml.org/javascript/objekte/math.htm#sin
In den meisten Programmiersprachen ist es so, dass Winkel nicht in Grad (wobei auch diese Bezeichnung sehr ungenau ist, da es Alt- und Neugrad gibt, und dort ein Kreis entweder 360° oder 400 gon hat), sondern in Radiant angegeben werden!

Diese Methode erwartet Zahlen in der Einheit Radiant (rad) als Parameter.

Du musst also unbedingt den Winkel erst von (vermutlich Alt-)Grad auf Radiant umrechnen:
http://de.wikipedia.org/wiki/Radiant_%28Einheit%29
Sollte dann also heißen:
```
var winkel	= 50; //Winkel in Grad
var b		= v0*(Math.sin(winkel*Math.PI/180));
```
Um die Typenumwandlung, wie ggame schreibt, musst du dich gegebenenfalls noch selbst kümmern ...

Beitrag zuletzt geändert: 2.1.2013 9:31:08 von burgi

Autor dieses Themas

14:42, 2.1.2013

Am Umwandeln scheiterts noch nicht, ich benutze für Testzwecke nur fixe Variabeln ums nicht noch zu verkomplizieren, aber danke.
Burgi, danke, so stimmts, aber bei einer Rechnung oben stimmts komischerweise auch ohne deine Variante.

Edit:

<script>
	var v0		= 6; //Anfangsgeschwindgkeit in m/s
	var winkel	= 45; //Winkel in Grad
	var h		= 3; //Hoehe in m
	var g		= 9.81; //Gravitationskonstante


	var a		= g/2;
	var b		= v0*(Math.sin(winkel))-h;
	var c		= h*(-1);
	var t 		= (-(b)+Math.sqrt(Math.pow(b,2)-4*a*c))/g;
	var sx		= v0*(Math.cos(winkel*Math.PI/180))*t;
</script>
<button onClick="document.write(sx);">Start</button>

Bei var b verwende ich normal den Sinus, und das t stimmt somit, bei sx muss ich deine Variante verwenden, dass es stimmt.

EDIT2:

<html>
<body>
	<center><canvas id="Diagramm" height="500" width="900" style="border: 3px solid black">Ihr Browser unterstützt kein Canvas</canvas>
	<br><button onClick="wurfparabel();">Start</button></center>



<script>
var canvas = document.getElementById('Diagramm');
var context = canvas.getContext('2d');

function wurfparabel(){
	var v0		= 1; //Anfangsgeschwindgkeit in m/s
	var winkel	= 45; //Winkel in Grad
	var h		= 3; //Hoehe in m
	var g		= 9.81; //Gravitationskonstante


	var a		= g/2;
	var b		= v0*(Math.sin(winkel))-h;
	var c		= h*(-1);
	var t 		= (-(b)+Math.sqrt(Math.pow(b,2)-4*a*c))/g;
	var s		= v0*(Math.cos(winkel*Math.PI/180))*t;
	
	
	
	var x = 0;
	var y = 500;
	
	context.moveTo(x, y);
	for(var = i; i <= 900; i++){
    var sx		= 900/s*i;
    var sy 		= -a*Math.pow(sx/(v0*Math.cos(50)),2)+sx/(v0*Math.cos(50))*v0*Math.sin(50)+h;
    context.lineTo(sx, sy);
    context.stroke(); 
    }
    }
    </script>



</body>
</html>

Das wäre dann mein fertiges Script, das leider nicht funktioniert. Ums kurz zu erklären:
Mein Canvas hat 900 Pixel, also rechne ich bei var sx aus, wieviel es pro Pixel zeichnen muss. Das * i für die Pixelanzahl, die bis 900 raufzählt und dann immer wieder ein Strich zeichnet. Var sy ist dann die Formel, wenn sx so und so gross ist, muss sy so und so gross sein. Theoretisch müsste es doch funktionieren, oder? Praktisch aber nicht.

Beitrag zuletzt geändert: 2.1.2013 15:34:34 von c143

dregi

dregi hat kostenlosen Webspace.

19:21, 2.1.2013

1. Du hast javascript Fehler die das ausführen des Codes verhindern
-->IE benützer F12 klicken und Fehler anschauen
-->Chrome benutzer installiere Firebug ctr + shift + j und schaue wo die Fehler sind
for(i=0;i<1;i++) //hier keine var deklaration
<script> //bitte teile dem browser mit ob du VBScript actionscript ecmascript oder javascript verwendest

Kein Plan was du mit den var erreichen willst hier jedenfalls ein funktionierendes Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
	<center><canvas id="Diagramm" height="500" width="900" style="border: 3px solid black">Ihr Browser unterstützt kein Canvas</canvas>
	<br><button onClick="wurfparabel();">Start</button></center>

<script type="text/javascript">
var canvas = document.getElementById('Diagramm');
var context = canvas.getContext('2d');

function wurfparabel(){
	var sx=x = 0;
	var sy=y = 0;
	 context.beginPath();
  context.strokeStyle = "#7F7F7F";
	context.moveTo(x, y);
	for(i=0; i <= 900; i++){
    sx		= i;
    sy 		= Math.cos(sx*Math.PI/180)*30+50
    context.lineTo(sx, sy);
    context.stroke(); 
    }
}
</script>
</body>
</html>

Autor dieses Themas
c143

c143 hat kostenlosen Webspace.

21:08, 2.1.2013
Das var i war der Fehler, dass nichts augeführt wurde, danke. Mit meinem Script gibts nen senkrechten Strich, bei dir Wellen. :D
Beides nicht gewollt. Die Variabeln sind zur Berechnung da. Eigentlich sollte es eine Kurve geben.

hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.

21:22, 2.1.2013

dregi schrieb:

for(i=0;i<1;i++) //hier keine var deklaration

Erzähl keinen Mist! Er hatte einen Syntaxfehler, deshalb ist nichts passiert. Hier sollte aber ganz normal eine Variable mit

var

eingeführt werden, also z.B. so:

for(var i = 0; i < 1; i++) // mit "var" für "lokale Variable"!

c143 schrieb:
Eigentlich sollte es eine Kurve geben.

Online-Demo

<!DOCTYPE html>
<html>
	<body>
		<div style="text-align: center;">
			<canvas id="Diagramm" height="500" width="900" style="border: 3px solid black">Ihr Browser unterstützt kein Canvas</canvas><br />
			<button onClick="wurfparabel();">Start</button>
		</div>
		<script type="text/javascript">// <![CDATA[
			var canvas = document.getElementById('Diagramm');
			var context = canvas.getContext('2d');

			function deg2rad(x) {
				return x * Math.PI / 180.0;
			}

			function wurfparabel() {
				var v0		= 1;	// Anfangsgeschwindgkeit in m/s
				var winkel	= 45;	// Winkel in Grad
				var h		= 3;	// Hoehe in m
				var g		= 9.81;	// Gravitationskonstante

				var a		= g / 2;
				var b		= v0 * (Math.sin(deg2rad(winkel))) - h;
				var c		= -h;
				var t 		= (-b + Math.sqrt(Math.pow(b, 2) - 4 * a * c)) / g;
				var s		= v0 * (Math.cos(deg2rad(winkel))) * t;

				var x = 0;
				var y = 500;

				// Skalierung
				var scalex = 900 / s;
				var scaley = 100;

				var steps = 100;

				context.moveTo(x, y);
				for(var i = 0; i <= steps; i++) {
					var sx		= s * i / steps;
					var sy 		= -a * Math.pow(sx / (v0 * Math.cos(deg2rad(50))), 2)
							  + sx / (v0 * Math.cos(deg2rad(50)))
							  * v0 * Math.sin(deg2rad(50))
							  + h;
					context.lineTo(sx * scalex, y - sy * scaley);
					context.stroke(); 
				}
			}
		// ]]></script>
	</body>
</html>

Autor dieses Themas
c143

c143 hat kostenlosen Webspace.

21:30, 2.1.2013
Danke, Hackyourlife. Ich hab den Abstand nach dem ; vergessen?

Fänds noch super von dir, wenn du mir sagen könntest was ich falsch gemacht hab, und für was benutzt du steps? Wieso keine Einteilung in die 900px? Nacher verändern sich ja dann die Werte, gut wäre, wenn die Kurve genau bei 900px endet, egal wie weit man wirft.

Da ich dein Script leider nicht ohne Erklärung ganz verstehe, weiss ich nicht, ob ichs so hinbekomme, und nicht wieder alles verhunze. Aber vielen Dank!

Edit: Btw füg mal context.strokeStyle = 'red'; hinzu, dann siehst du die Rote Linie am linken Rand, da es ja bei (0,0) startet. Wäre es nicht schlauer bei h zu starten?

Beitrag zuletzt geändert: 2.1.2013 21:41:44 von c143
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.
21:42, 2.1.2013

c143 schrieb:
Ich hab den Abstand nach dem ; vergessen?
Wenn du mir noch sagen könntest wo du das vergessen haben willst… aber die Antwort lautet: nein.

c143 schrieb:
Fänds noch super von dir, wenn du mir sagen könntest was ich falsch gemacht hab…
Einiges. Du hast z.B. den Hinweis von Burgi nicht (oder nur 1x) beachtet. Dies ist bei mir in die Funktion
```
deg2rad()
```
zusammengefasst, mit der ein Winkel von Grad nach Radiant umgerechnet wird.

Beim Zeichnen hast du auch vergessen, dass ein Canvas (wie so ziemlich alles am PC) die Koordinate (0|0) in der linken oberen Ecke hat, weshalb du bei deiner Kurve die tatsächliche Koordinate mit
```
500 - sy
```
bekommst.

c143 schrieb:
… und für was benutzt du steps? Wieso keine Einteilung in die 900px?
Weil du so etwas in Schritten (steps) zeichnest. Mehr Schritte → genauere Kurve. Das war übrigens ein weiterer Fehler bei deinem Script, denn
```
sx
```
muss im Bereich von
```
0
```
bis
```
s
```
(≈ 0.7) laufen.

c143 schrieb:
… gut wäre, wenn die Kurve genau bei 900px endet, egal wie weit man wirft.
Das täte es auch, wenn du dein
```
s
```
richtig berechnen würdest.

Mit diesen Änderungen würdest du allerdings nichts sehen, da zwischen 0 und 0.7 nicht einmal ein Pixel liegt, also muss das ganze noch skaliert werden. Die Skalierung für die X-Achse berechnet sich dabei so, dass der Bereich von
```
0
```
bis
```
s
```
über das gesamte Canvas gestreckt wird.

Die Skalierung der Y-Achse kannst du frei wählen. Alternativ könntest du den Scheitel deiner Kurve berechnen und dann ebenfalls so skalieren, dass das gesamte Canvas ausgefüllt wird.

c143 schrieb:
Edit: Btw füg mal context.strokeStyle = 'red'; hinzu, dann siehst du die Rote Linie am linken Rand, da es ja bei (0,0) startet. Wäre es nicht schlauer bei h zu starten?
Die Linie sieht man so auch
Allerdings hast du recht, du willst vermutlich bei
```
h
```
starten. Codeänderung:
```
context.moveTo(x, y - h * scaley);
```
Wie man auf diese Formel kommt sollte dir jetzt auch klar sein…

Beitrag zuletzt geändert: 2.1.2013 21:45:13 von hackyourlife
Autor dieses Themas
c143

c143 hat kostenlosen Webspace.

22:09, 2.1.2013
Den Hinweis von Burgi habe ich beachtet, und das Ergebnis getestet. t stimmte mit der 'normalen' Berechung. Wenn ichs mit der 'richtigen' gemacht habe, ist was anderes herausgekommen, als mit meinem Taschenrechner...

Das mit den Kordinaten in der Linken oberen Ecke ist mir schon aufgefallen, aber da sowieso nichts stimmte, hab ichs gelassen.

Meine s Berechung stimmt nicht? O.o Also wenn ich die s Formel anpasse, sollte alles super funktionieren, und egal ob ich den Ball 1 Meter oder 30 Meter werfe, es passt immer schön in den Canvas?

Ja die Linie ist mir auch mit Schwarz aufgefallen, aber mit Rot sieht man sie besser. :) Danke auf jedenfall. Und ja, jetzt versteh ichs.
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.
22:13, 2.1.2013

c143 schrieb:
Meine s Berechung stimmt nicht? O.o Also wenn ich die s Formel anpasse, sollte alles super funktionieren, und egal ob ich den Ball 1 Meter oder 30 Meter werfe, es passt immer schön in den Canvas?
Wenn ich für
```
sx = s
```
einsetze bekomme ich für
```
sy = -2.irgendwas
```
, also stimmt vermutlich deine Berechnung nicht.
Autor dieses Themas
c143

c143 hat kostenlosen Webspace.
22:37, 2.1.2013
hackyourlife schrieb:

c143 schrieb:
Meine s Berechung stimmt nicht? O.o Also wenn ich die s Formel anpasse, sollte alles super funktionieren, und egal ob ich den Ball 1 Meter oder 30 Meter werfe, es passt immer schön in den Canvas?
Wenn ich für
```
sx = s
```
einsetze bekomme ich für
```
sy = -2.irgendwas
```
, also stimmt vermutlich deine Berechnung nicht.
Vorhin hat mein t noch gepasst, ergab mit
```
Anfangsgeschwindigkeit 2
Winkel 50°
Starthöhe 1
```
t = 0.6339

Jetzt t = 0.40053

Daher stimmt auch das s nicht.

Momentaner Stand: https://dl.dropbox.com/u/23477673/Rechner.html
Die Melung ist das t.

Beitrag zuletzt geändert: 2.1.2013 22:40:09 von c143
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.
22:42, 2.1.2013

c143 schrieb:
t = 0.6339

Jetzt t = 0.40053

Daher stimmt auch das s nicht.
Ja, aber auch mit t ≈ 0.6 stimmt das s nicht, da es kleiner sein müsste… und kleines t → kleines s.

Aber vllt liegts daran, dass du mit 50° rechnest, während im Programm für
```
winkel
```
45° eingetragen sind.
Autor dieses Themas
c143

c143 hat kostenlosen Webspace.
22:55, 2.1.2013
hackyourlife schrieb:

c143 schrieb:
t = 0.6339

Jetzt t = 0.40053

Daher stimmt auch das s nicht.
Ja, aber auch mit t ≈ 0.6 stimmt das s nicht, da es kleiner sein müsste… und kleines t → kleines s.

Aber vllt liegts daran, dass du mit 50° rechnest, während im Programm für
```
winkel
```
45° eingetragen sind.
Ich habs im Programm abgeändert, da ich damals als Beispiel etwas anderes hatte. Das aktuelle ist besser, aber ich hab noch die Lösungen vom anderen. Also stimmt das t und das s nicht mehr? Oweja :D
nemoinho

nemoinho hat kostenlosen Webspace.

10:38, 3.1.2013
So,
und hier kommt der Crosspost, da du die selben Fragen schonmal in einem anderen Post gestellt hast, indem ich dir auch schon eine komplette Lösung geschrieben hatte! Die Enthält auch schon die Eingabe der Werte aus Eingabefeldern!

Hier ist die Lösung: http://www.lima-city.de/thread/hochzaehlen-auf-450-und-wieder-runter

Da wird die Kurve auch auf die Canvas-größe skaliert, ohne dass das Ergebnis verzerrt wird oder sowas in der Art.

Hier ist die Lösung auch zu sehen: http://help.home.nehrke.info/web/canvas/wurfparabel/wurfparabel.html

Mit freundlichen Grüßen

* EDIT: Lösungslink hinzugefügt

Beitrag zuletzt geändert: 3.1.2013 10:57:06 von nemoinho
fatfox

fatfox hat kostenlosen Webspace.

21:47, 3.1.2013
Die Lösung funktioniert nicht für Winkel größer 90°, ebenso nicht für Geschwindigkeiten < 1m/s

soll ich weiter machen ?

Autor dieses Themas

c143

c143 hat kostenlosen Webspace.

21:57, 3.1.2013

fatfox schrieb:
Die Lösung funktioniert nicht für Winkel größer 90°, ebenso nicht für Geschwindigkeiten < 1m/s

soll ich weiter machen ?

Weiss ich, aber zuerst will ichs für 'normale' Werte funktionierend hinbekommen, dann gibts noch Feinheiten. :)

Ich hab mich jetzt nochmal hingesessen und alles neu geschrieben:

<!DOCTYPE html>
<html>
<body>
<div style="text-align: center;">
<canvas id="Diagramm" height="500" width="900" style="border: 3px solid black">Ihr Browser unterstützt kein Canvas</canvas><br />
<button onClick="wurfparabel();">Start</button>
</div>
<script type="text/javascript">
var canvas = document.getElementById('Diagramm');
var context = canvas.getContext('2d');

//Winkel von Grad nach Radiant umrechnen
function Angle(x) {
	return x * Math.PI / 180.0;
}

function wurfparabel() {
	var v0 = 20.0; // Anfangsgeschwindgkeit in m/s
	var angle = 50.0; // angle in Grad
	var angle = Angle(angle);
	var h = 5.0; // Hoehe in m
	var g = 9.81; // Gravitationskonstante

	var yv = v0 * Math.sin(angle);
	var xv = v0 * Math.cos(angle);
	
	// Mitternachtsformel. -gt²/2 + yv * t + h = 0, positive Lösung
	var t = (-yv - Math.sqrt(Math.pow(yv, 2) - 4 * (-g / 2) * h)) / (-g);
	var xs = xv * t;

	// Skalierung
	var scaleX = canvas.width / xs;
	var scaleY = canvas.width / xs;
	var steps = 100;


	context.moveTo(0, canvas.height - h * scaleY);
	var currentCoordX, currentCoordY, time;
	for(var i = 0; i <= steps; i++) {
		time = t * i / steps;
		currentCoordX = xv * time;
		
		currentCoordY = -(g / 2) * Math.pow(time, 2)
				+ yv * time
				+ h;
		context.lineTo(currentCoordX * scaleX, canvas.height - currentCoordY * scaleY);
		context.strokeStyle = 'red';
		context.stroke(); 
	}
}
</script>
</body>
</html>

Ich möchte was dabei lernen, daher danke fox, wär wirklich nett von dir, aber einfach ein fertiges Script bringt mir leider auch nicht viel. Aber ich wäre dir sehr dankbar, wenn du dieses durchschauen könntest. Es funktioniert leider immernoch nicht, ich finde den Fehler nicht, aber es führt nichts aus. Und falls du etwas findest, zb in den Formeln oder so, dass immernoch nicht richtig ist, ists auch klasse wenn du das melden könntest. :)

Edit: Noch nen Fehler gefunden, jetzt zeigt es mir keinen Error mehr an, aber es funktioniert immernoch nicht.

EDIT: Gefixt, funktioniert jetzt.

Beitrag zuletzt geändert: 4.1.2013 0:14:25 von c143

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city