Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

boreker · 07-04-2011, 19:56

Hallo Forum,

wiedermal bedarf es eurer Hilfe (Mathematiker aufgemerkt!)

Ich möchte eine variable anzahl punkte auf einem im fenster zentrierten kreis
per x/y (dies sind die gegebenen möglichkeiten im browser elemente zu
positionieren) psitionieren:
html-dokument mit kreis

Code:

window.onload = function (){
document.getElementById("kreis").style.top = (document.body.clientHeight/2+50)+"px";
  document.getElementById("kreis").style.left = (document.body.clientWidth/2-200)+"px";
  document.getElementById("kreis").style.border = 1+"px solid red";
  for (i = 0; i<11; i++){
	  document.getElementById("kreis").innerHTML='<img src="00_imgs/point.gif" width="10" height="10" alt="point" id="point'+i+'"/>';
  }
};

diesmal sollen es 11 punkte sein mal 15 mal nur 3....also variabel

habt ihr eine idee wie ich das hinbekomme?

danke und gruss, boreker

toosten · 08-04-2011, 06:42

Zufällige Gradzahl, dann Position mit cos/sin berechnen.
gleicher Abstand, 360/Anzahl, dann Position mit cos/sin berechnen.

http://de.wikipedia.org/wiki/Sinus_und_Kosinus

boreker · 08-04-2011, 08:35

ja ich lese den artikel durch aber ich bezweifle das es mir nacher alleine gelingt
die formel zu finden. (in der schulzeit hab ich wohl nur andere sachen gezeichnet) deshalb wäre ich froh wenn mir jemand an meinem bsp zeigen kann wie es funktioniert.... mit variabler anzahl punkte....
kreiskoordinaten

Code:

window.onload = function (){
	document.getElementById("kreis").style.top = (document.body.clientHeight/2+50)+"px";
  	document.getElementById("kreis").style.left = (document.body.clientWidth/2-200)+"px";
  	document.getElementById("kreis").style.border = 1+"px solid red";
	for(var i = 0; i <= 11; i++){
		var imgdot = '<img src="00_imgs/point.gif" width="10" height="10" alt="point" id="point'+i+'"/>';
	  	document.getElementById("alle").innerHTML += imgdot;
  	}
};

thx & greez

boreker · 08-04-2011, 09:33

bessere dokumentengrundlage:

Nightflyer · 08-04-2011, 09:52

HTML-Code:

<!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"> 

<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<script src="http://code.jquery.com/jquery-1.5.js"></script>
	<style type="text/css">

	*{
		margin: 0;
		padding: 0;

	}

	#container{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -200px;
		margin-left: -200px;
		width: 400px;
		height: 400px;
		background-image: url( 'http://blauerzauber.org/54_www_kreiskoordinaten_org/00_imgs/kreis.gif' );
		border: 1px solid red;
	}

	</style>
	<script type="text/javascript">

	$(document).ready( function(){
		
		var amount = Math.random() * 20;
		var radius = 150;

		for( i=0; i<amount; i++ ){

			var angle = Math.random() * 360;
			var x = Math.sin( angle ) * radius + 195;
			var y = Math.cos( angle ) * radius + 195;
			
			$('#container').append( '<div style="position:absolute;width:10px;height:10px;left:'+x+'px;top:'+y+'px;border: 1px solid red;">&nbsp;</div>' );

		}

	});

	</script> 
	<title>kreis</title> 
</head> 
<body> 
 
	<div id="container">
		
	</div>

</body> 
</html>

boreker · 08-04-2011, 10:48

herzlichen dank!!!
weisst du auch noch wie ich die punkte regelmässig verteilt auf dem kreis platziere (in gleichen abständen)?

ich übe....

Nightflyer · 08-04-2011, 11:42

Zitat:

Zitat von boreker

herzlichen dank!!!
weisst du auch noch wie ich die punkte regelmässig verteilt auf dem kreis platziere (in gleichen abständen)?

ich übe....

Ja natürlich, dazu musst du

Code:

var angle = Math.random() * 360;

mit

Code:

var angle = 360 / amount * i;

ersetzen

boreker · 08-04-2011, 15:52

nochmal herzlichen dank für deine hilfe und entschuldige wenn man mir in
diesem falle alles vorkauen muss, aber ich raffs wohl nicht.
so ganz stimmt es mit der regelmässien verteilung aber mit dem code noch nicht.
(siehe anhang)

**thomas_E** · 08-04-2011, 17:29

Zitat:

Zitat von JS/Math.sin()

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

PHP-Code:

  var angle = i/amount * Math.PI*2;

boreker · 11-04-2011, 10:23

mhhh auch so werden die quadrate noch nicht regelmässig auf dem kreis
verteilt. wir könnens aber gerne versanden lassen. ich habe mich mittlerweile für einen anderen lösungsweg entschieden.

Nightflyer · 11-04-2011, 11:47

Code:

var amount = Math.round( 5 + Math.random()*30 );;
		var radius = 150;

		for( i=0; i<amount; i++ ){

			var angle = i/amount * Math.PI*2;
			var x = Math.sin( angle ) * radius + 195;
			var y = Math.cos( angle ) * radius + 195;
			
			$('#container').append( '<div style="position:absolute;width:10px;height:10px;left:'+x+'px;top:'+y+'px;border: 1px solid red;">&nbsp;</div>' );
			
		}

amount muss noch gerundet werden

toosten · 11-04-2011, 11:56

Code:

		var radius = 150;
		var step= Math.PI*2/10; //10 punkte
		for( angle=0; angle < Math.PI*2; angle+= step ){
			var x = Math.sin( angle ) * radius + 195;
			var y = Math.cos( angle ) * radius + 195;
			
			$('#container').append( '<div style="position:absolute;width:10px;height:10px;left:'+x+'px;top:'+y+'px;border: 1px solid red;">&nbsp;</div>' );
			
		}

boreker · 14-04-2011, 06:51

danke nochmal für die antworten!!!
aber beide antworten sind noch nicht dem beabsichtigten ergebnis
"eine regelmässige verteilung der quadrate auf dem kreis"gleich.

wie gesagt habe ich den lösungsweg für mich verworfen, dennoch wäre die richtige antwort natürlich interessant!

danke und gruss, boreker

toosten · 14-04-2011, 07:02

Das kann ich nun wirklich nicht nachvollziehen!

Code von Nightflyer & meiner:

Code:

<!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"> 

<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<script src="http://code.jquery.com/jquery-1.5.js"></script>
	<style type="text/css">

	*{
		margin: 0;
		padding: 0;

	}

	#container{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -200px;
		margin-left: -200px;
		width: 400px;
		height: 400px;
		background-image: url( 'http://blauerzauber.org/54_www_kreiskoordinaten_org/00_imgs/kreis.gif' );
		border: 1px solid red;
	}

	</style>
	<script type="text/javascript">

	$(document).ready( function(){
	
		var radius = 150;
		var step= Math.PI*2/10; //10 punkte
		for( angle=0; angle < Math.PI*2; angle+= step ){
			var x = Math.sin( angle ) * radius + 195;
			var y = Math.cos( angle ) * radius + 195;
			
			$('#container').append( '<div style="position:absolute;width:10px;height:10px;left:'+x+'px;top:'+y+'px;border: 1px solid red;">&nbsp;</div>' );
			
		}
		
		/*var amount = Math.random() * 20;
		var radius = 150;

		for( i=0; i<amount; i++ ){

			var angle = Math.random() * 360;
			var x = Math.sin( angle ) * radius + 195;
			var y = Math.cos( angle ) * radius + 195;
			
			$('#container').append( '<div style="position:absolute;width:10px;height:10px;left:'+x+'px;top:'+y+'px;border: 1px solid red;">&nbsp;</div>' );

		}/**/

	});

	</script> 
	<title>kreis</title> 
</head> 
<body> 
 
	<div id="container">
		
	</div>

</body> 
</html>

boreker · 14-04-2011, 07:10

sooorrrrry!
ich hab so viel herumversucht und verschiedene test.html angelegt, dass ich am ende einer version editiert habe und nachher die falsche aufgerufen habe...

herzlichen dank. das ist die lösung auf welce ich in zukunft immer zurückgreifen kann wenn ich vor ähnlichem problem stehe.

greez, boreker

07-04-2011, 19:56	#1 (permalink)
boreker ∇∇∇∇∇∇∇∇∇∇∇∇∇∇∇∇ Registriert seit: Apr 2002 Ort: inphobie Beiträge: 2.316	Variable anzahl Punkte auf Kreis per x/y achse positionieren Hallo Forum, wiedermal bedarf es eurer Hilfe (Mathematiker aufgemerkt!) Ich möchte eine variable anzahl punkte auf einem im fenster zentrierten kreis per x/y (dies sind die gegebenen möglichkeiten im browser elemente zu positionieren) psitionieren: html-dokument mit kreis Code: window.onload = function (){ document.getElementById("kreis").style.top = (document.body.clientHeight/2+50)+"px"; document.getElementById("kreis").style.left = (document.body.clientWidth/2-200)+"px"; document.getElementById("kreis").style.border = 1+"px solid red"; for (i = 0; i<11; i++){ document.getElementById("kreis").innerHTML='<img src="00_imgs/point.gif" width="10" height="10" alt="point" id="point'+i+'"/>'; } }; diesmal sollen es 11 punkte sein mal 15 mal nur 3....also variabel habt ihr eine idee wie ich das hinbekomme? danke und gruss, boreker __________________ no comment... Geändert von boreker (07-04-2011 um 19:58 Uhr)

08-04-2011, 06:42	#2 (permalink)
toosten Neuer User Registriert seit: Aug 2009 Ort: Berlin Beiträge: 271	Zufällige Gradzahl, dann Position mit cos/sin berechnen. gleicher Abstand, 360/Anzahl, dann Position mit cos/sin berechnen. http://de.wikipedia.org/wiki/Sinus_und_Kosinus __________________ MfG toosten IDE: Adobe® Flex® Builder™ 3, Adobe® Flash® Builder™ 4

08-04-2011, 10:48	#6 (permalink)
boreker ∇∇∇∇∇∇∇∇∇∇∇∇∇∇∇∇ Registriert seit: Apr 2002 Ort: inphobie Beiträge: 2.316	herzlichen dank!!! weisst du auch noch wie ich die punkte regelmässig verteilt auf dem kreis platziere (in gleichen abständen)? ich übe.... __________________ no comment...

14-04-2011, 06:51	#13 (permalink)
boreker ∇∇∇∇∇∇∇∇∇∇∇∇∇∇∇∇ Registriert seit: Apr 2002 Ort: inphobie Beiträge: 2.316	danke nochmal für die antworten!!! aber beide antworten sind noch nicht dem beabsichtigten ergebnis "eine regelmässige verteilung der quadrate auf dem kreis"gleich. wie gesagt habe ich den lösungsweg für mich verworfen, dennoch wäre die richtige antwort natürlich interessant! danke und gruss, boreker __________________ no comment...

14-04-2011, 07:10	#15 (permalink)
boreker ∇∇∇∇∇∇∇∇∇∇∇∇∇∇∇∇ Registriert seit: Apr 2002 Ort: inphobie Beiträge: 2.316	sooorrrrry! ich hab so viel herumversucht und verschiedene test.html angelegt, dass ich am ende einer version editiert habe und nachher die falsche aufgerufen habe... herzlichen dank. das ist die lösung auf welce ich in zukunft immer zurückgreifen kann wenn ich vor ähnlichem problem stehe. greez, boreker __________________ no comment...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Positionieren von Bilder auf der X-Achse	cornflakes	ActionScript 3	2	25-01-2009 11:56
Kreis zeichnen mit curveTo durch 10 Punkte	neo14	Flash CS3 Professional	8	27-01-2008 18:28
Anzahl Punkte mit Spline-Kurve verbinden	georgem	ActionScript 3	7	24-10-2007 12:16
Drehenden Kreis aus Punkte-MC erzeugen	_eaZy_	Flash Einsteiger	4	09-08-2007 08:43
punkte auf einem kreis rausbekommen	RedSaint	ActionScript 1	2	06-01-2007 20:12