Objekt drehen

[Rolf]

Hallo,

wie man ein Objekt mit JavaScript kreuz und quer über eine Webseite manöveriert, weiss ich. Aber für eine neue Spielerei müsste man das Objekt auch immer in die jeweilige Bewegungsrichtung drehen können. Also nicht der User, sondern das Script sollte das Objekt drehen können. Zum Beispiel ein kleines Flugzeug, welches sich immer zur Position des letzten Mausklicks bewegt.
Hat da jemand eine Idee dazu, mir fällt mal wieder gerade nix ein ... :-(

mbG Rolf

[ritschmanhard]

Hi Rolf!

Leider kann man mittels aktuellem CSS keine freie Rotation definieren - deshalb geht das, was du vorhast nur auf Umwegen:
0) Entscheide, welche "Ausrichungs- Winkelgenauigkeit" du benötigst, d.h. (K=Klickposition, O=Objekt, /_ Winkel )

******************
***********K******
**********/*******
*********/********
********O---------
******************

Dies ist wichtig, da du für jedes Winkelinterval ein Bild von K anfertigen mußt, d.h. für Genauigkeit 10° z.B. 36 Bilder.

1. Erstelle mittels eines Zeichenprogramms die Benötigte Anzahl Bilder (z.B. im jpg Format) mit jeweiliger Rotation, benenne sie Flugzeug_0.jpg, Flugzeug_10.jpg,...,Flugzeug_350.jpg.

2. Halte die (absolute) Position (xO,yO) des Objekts im Objekt vor. Erfolgt nun ein Klick, so ermittle die (absolute) Position xM, yM des Klicks. Beachte Hierbei, dass entgegen normalen Koordinatensystemen der Ursprung (0,0) auf dem Bildschirm links oben liegt und y nach unten größer wird!

3. Berechne nun den Winkel (alpha):
   dY = yO - yM (gedreht wegen inverser yAchse)
   dX = yM - yO
   Fall 1: dX=0 =>
      dY > 0: alpha = 90
      dY = 0: undefined, Klick auf Objekt mittig => Ausrichtung nach belieben
      dY < 0: alpha = 180
   Fall 2: dX != 0:
   tan(alpha) = dY/dX
   alpha = arctan(dY/dX)

4. Runde alphaR = Math.round(alpha...) auf deine Winkelgenauigkeit

5. Ersetze nun das gezeigte Bild mit Javascript: myFlugzeug.src = "./Flugzeug_"+alphaR+".jpg";

Viele Grüsse,
Richard

P.S. Mathefehler sind nicht ausgeschlossen, dashalb wie immer: Alle Angaben ohne Gewähr...

[Rolf]

Hallo Richard!

fürchte Du hast recht, d.h. es wird nicht ohne extra Bild pro Winkel abgehen.
Also habe ich ein Bildchen gezeichnet und darauf

<?php  
for($i=0; $i<360; $i++) {  
    $img = imagecreatefromgif('imgs/myJet.gif');  
    $ok = imagerotate($img,$i,0);  
    $ok = imagegif($img, 'imgs/jet'.sprintf('%03s',$i).'.gif');  
    $ok = imagedestroy($img);  
}  
clearstatcache();  
?>

angewendet.
Es kommen auch 360 Bildchen dabei heraus, nur es wird nix gedreht!
Nur warum dreht sich da nix ... :-(

mbG Rolf

[Marc Reichelt]

Hallo Rolf,

Es kommen auch 360 Bildchen dabei heraus, nur es wird nix gedreht!

Überlege dir, was deine Zeile
$ok = imagerotate($img,$i,0);
macht. Und dann lies die PHP-Dokumentation zu imagerotate().

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[Rolf]

Hallo Marc,

Es kommen auch 360 Bildchen dabei heraus, nur es wird nix gedreht!
Überlege dir, was deine Zeile
$ok = imagerotate($img,$i,0);
macht. Und dann lies die PHP-Dokumentation zu imagerotate().

na-ja, die Doku hatte ich bereits gelesen!
Mit $i wird der Winkel von 0-359 Grad iteriert. Der Sinn des dritten Parameters blieb mir bislang verborgen und war auch aus dem Zusammenhang der Beispiele für mich nicht zu erraten. Aber vielleicht erklärt mir das eine mitleidige Seele ja noch ... :-((

mbG Rolf

[Marc Reichelt]

Hallo Rolf,

macht. Und dann lies die PHP-Dokumentation zu imagerotate().
na-ja, die Doku hatte ich bereits gelesen!

Du schriebst:
$ok = imagerotate($img,$i,0);
Aber die Funktion imagerotate verändert das originale Bild nicht, sondern gibt ein neues Bild als Resource zurück.

Dein Code sollte also eher (ungetestet) so lauten:

<?php  
// initiales Bild einlesen  
$originalBild = imagecreatefromgif('imgs/myJet.gif');  
  
for ($i = 0; $i < 360; $i++) {  
    // Neues Bild erzeugen als Rotation des Originals  
    $rotiertesBild = imagerotate($originalBild, $i, 0);  
    // Datei ausgeben  
    imagegif($rotiertesBild, 'imgs/jet'.sprintf('%03s',$i).'.gif');  
    // rotiertes Bild aus dem Speicher löschen  
    imagedestroy($rotiertesBild);  
}  
// Originalbild aus dem Speicher löschen  
imagedestroy($originalBild);  
clearstatcache();  
?>

Wieso erstellst du eigentlich Dateinamen à la "jet003.gif"?
"jet3.gif" wäre viel einfacher, da du dann in JavaScript die Nullen nicht wieder extra hinzufügen brauchst.

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[Rolf]

Hallo Marc,

... die Funktion imagerotate verändert das originale Bild nicht,
sondern gibt ein neues Bild als Resource zurück.

oh-je,
da war ich wohl etwas betriebsblind - kommt vor - danke!

Wieso erstellst du eigentlich Dateinamen à la "jet003.gif"?
"jet3.gif" wäre viel einfacher, da du dann in JavaScript die
Nullen nicht wieder extra hinzufügen brauchst.

hmm,
das mache ich ohne zu überlegen deshalb, damit es im jeweiligen Ordner ordentlich aussieht.
Wenn ich denn beim Javascript-Script anfange, wäre mir das sicher auch aufgestossen.

mbG Rolf

[Rolf]

Hallo Marc,

habe nun auch das zweite grosse Problem, die Freistellung, mit PHP gelöst.
Beim Drehen werden aus einer Hintergrundfarbe viele Farbnuancen und dann
hat man ein Problem mit der Transparenz.
Aber so geht es doch - oder?
Nun muss er nur noch am Fluss entlang fliegen lernen ...
In der Realität liegen die Bildränder etwa 100 - 120 m höher als der Fluss.

mbG Rolf

[Rolf]

Hallo,

sorry, das zieht sich jetzt doch zu sehr ...
Wird also ein lohnendes Ziel für den Praktikanten werden tun ... ;-)

mbG Rolf

[ritschmanhard]

Hi Rolf!

Hmm - nachdem du ja PHP verwendest, ist es naheliegend, dass es dir auf deinem Server zur Verfügung steht. Dann könntest du tatsächlich wie von Paul https://forum.selfhtml.org/?t=167918&m=1095348 beschrieben vorgehen...

Ansonsten haben PHP und Marc recht; wenn ich schreibe
for (a=0; a<3; a++) {
   b = 10;
   c = b + a;
   printf("%i\n", b);
}
dann steht auch folgendes da:
10
10
10

Grüsse,
Richard

[Struppi]

Ich kann zum eigentlichen Problem nichts sagen (mangels PHP Kenntnisse), aber das hier stößt ein bisschen auf:

$ok = imagegif($img, 'imgs/jet'.sprintf('%03s',$i).'.gif');

sprintf ist nicht nur zum umwandeln geeignet, sondern ersetzt in einem String, du sparst dir so die Stringverknüpfungen:

imagegif($img, sprintf('imgs/jet%03s.gif',$i));

Struppi.

[Rolf]

Hallo Struppi,

wir wollen dafür jetzt nicht extra einen Performace-Test schreiben, oder?

Ganz früher, als einige Menschen noch die Sprache der CPU's beherrschten, hat mir so ein Teil beim Kaffee mal ihr Leid mit den unsäglichen Schreiberleichterungen geklagt. Ich habe dann versucht ihr zu erklären, wie wichtig Schreiberleichterungen für Coder sind, vor allem um sich vom profanen Rest abzuheben. Aber ich vermute, das hat sie nicht kapiert, weil sie gerade über einigen Differentialgleichungen brütete.
Na-ja,
Konzentrationsschwäche, lässt sich von jedem Interrupt aus der Kantine locken ... ;-)

mbG Rolf

[Paul]

Moin,
in PHP kann man ein Bild drehen.
Evtl. könnte man das PHP Script per Ajax aufrufen.

Paul

[Orlando]

wie man ein Objekt mit JavaScript kreuz und quer über eine Webseite manöveriert, weiss ich. Aber für eine neue Spielerei müsste man das Objekt auch immer in die jeweilige Bewegungsrichtung drehen können.

Wäre SVG eine denkbare Variante? Oder HTML5-Canvas-Rotation? Vermutlich nicht.

Roland

[Rolf]

wie man ein Objekt mit JavaScript kreuz und quer über eine Webseite manöveriert, weiss ich. Aber für eine neue Spielerei müsste man das Objekt auch immer in die jeweilige Bewegungsrichtung drehen können.

Wäre SVG eine denkbare Variante? Oder HTML5-Canvas-Rotation? Vermutlich nicht.

wieso,
wenn Du schnell für 80%-90% Verfügbarkeit und Akzeptanz beim Durschnittuser sorgst, reden wir noch mal darüber ... ;-)

mbG Rolf

[gary]

Hi Rolf,

Wenn du auf diese Seite gehst, das intro abwartest und dann auf den grünen Punkt klickst, bekommst du eventuell etwas in die Richtung, die du dir vorstellst. Die Augen des Ei's bewegen sich immer in die Mausrichtung. Ist aber glaube ich mit hover gemacht.

Grüsse gary

[Rolf]

Hi gary,

Wenn du auf diese Seite gehst, das intro abwartest ...

warten - wie gruselig ... :-(

Die Augen des Ei's bewegen sich immer in die Mausrichtung.

hmm, das habe ich schon besser gesehen!
aber sowas meinte ich nicht!

mbG Rolf

[gary]

Hi Rolf,

Klasse, der schielt sogar *g*

Nix für ungut.

Viele Grüsse

gary

[Rolf]

Hi gary,

Klasse, der schielt sogar *g*

biste neidisch weil Deine Augen das nicht schaffen ... ;-)

mbG Rolf