rotierende Würfel

[Michaela Pfeiffer]

Hallo,
ich suche nach einer Lösung um einen rotierenden Würfel zu gestalten, auf dessen Seiten sich Fotos  (jpegs od. bmp) befinden, die sich ins Bild reindrehen und rausdrehen.
Kann mir jemand einen Tipp geben wie sowas gelöst werden kann?

Vielen Dank

Micha

[Cheatah]

Hi,

ich suche nach einer Lösung um einen rotierenden Würfel zu gestalten, auf dessen Seiten sich Fotos  (jpegs od. bmp) befinden, die sich ins Bild reindrehen und rausdrehen.

in JavaScript?! Viel Spaß. Damit dürftest Du den einen oder anderen Wettbewerb gewinnen.

Kann mir jemand einen Tipp geben wie sowas gelöst werden kann?

Mit etwas anderem als JavaScript.

Cheatah

[coldarchon]

mit VRML. Die Bilder einfach per

texture DEF it ImageTexture
{
url "bild.gif"
}

http://www.parallelgraphics.com/products/cortona/

[Michael]

mit VRML. Die Bilder einfach per

texture DEF it ImageTexture
{
url "bild.gif"
}

http://www.parallelgraphics.com/products/cortona/

Leider haben aber nur etwa 3-5% der User VRML...

[coldarchon]

Leider haben aber nur etwa 3-5% der User VRML...

dann schätz´ mal wieviele User Flash, Shockwave, Java, ActiveX, jegliches Script etc. aktiviert haben ...

Und in VRML hat die Datei weniger als 1KB, wenn man von den Bildern absieht (einziger Nachteil ist der Client mit 1,5MB).

[Christoph Schnauß]

hallo Michaela,

ich suche nach einer Lösung um einen rotierenden Würfel zu gestalten, auf dessen Seiten sich Fotos  (jpegs od. bmp) befinden, die sich ins Bild reindrehen und rausdrehen.

Theoretisch müßte das tatsächlich mit Javascript lösbar sein, ist aber unglaublich aufwendig, und wenn du es fertigbringst, kannst du dich mit guten Gewinnchancen an so ziemlich allen Wettbewerben beteiligen.

Es gibt eine sehr nett anzusehende Lösung mit einem Java-Applet. Das gehört zu der Kollektion, die du dir bei http://www.anfyteam.com/ajdownl.html downloaden kannst. Den Würfel selbst kannst du dir auf http://www.christoph-schnauss.de/prog/java/applets6.htm anschauen  -  dazu muß dein Browser aber JAVA verstehen.

Beide Lösungen, sowohl Javascript wie auch JAVA, sind aber nicht grundsätzlich für größere Aufgaben zu empfehlen, da sie die Aktivierung von Javascript bzw. JAVA voraussetzen.  Möglich wäre sicherlich auch eine Konstruktion mit Flash, wofür aber dieselbe Bedingung gilt (ich würde einen Flashfilm zum Beispiel nicht sehen).

Grüße aus Berlin

Christoph S.

[Harry]

Holladiewaldfee,

ich suche nach einer Lösung um einen rotierenden Würfel zu gestalten, auf dessen Seiten sich Fotos  (jpegs od. bmp) befinden, die sich ins Bild reindrehen und rausdrehen.

Theoretisch müßte das tatsächlich mit Javascript lösbar sein, ist aber unglaublich aufwendig, und wenn du es fertigbringst, kannst du dich mit guten Gewinnchancen an so ziemlich allen Wettbewerben beteiligen.

Kannst Du mir verraten, wie Du die Streckungen, Drehungen und Drehstreckungen sowie perspektivischen Verzerrungen der Bilder mit JavaScript realisieren willst? Mir sind hier keine Befehle bekannt, die dazu in der Lage wären.

Ciao,

Harry

[Axel Richter]

Hallo,

ich suche nach einer Lösung um einen rotierenden Würfel zu gestalten, auf dessen Seiten sich Fotos  (jpegs od. bmp) befinden, die sich ins Bild reindrehen und rausdrehen.

Theoretisch müßte das tatsächlich mit Javascript lösbar sein, ist aber unglaublich aufwendig, und wenn du es fertigbringst, kannst du dich mit guten Gewinnchancen an so ziemlich allen Wettbewerben beteiligen.

Kannst Du mir verraten, wie Du die Streckungen, Drehungen und Drehstreckungen sowie perspektivischen Verzerrungen der Bilder mit JavaScript realisieren willst? Mir sind hier keine Befehle bekannt, die dazu in der Lage wären.

Lösung:

• beliebig viele, je mehr desto gut, Bilder von unterschiedlichen Ansichten des Würfels
• ein Array mit diesen Images
• ein IMG-Element mit ID
• ein Script, welches das src-Attribut des IMG-Element nacheinander durch die src-Attribute der Images im Array ersetzt
• das Ganze mit window.setInterval() immer wieder aufgerufen

viele Grüße

Ax*neinwarnichternstgemeint*el

PS: Man könnte allerdings auch ein animiertes GIF erstellen ;-))

[Marko]

Hallo,

Kannst Du mir verraten, wie Du die Streckungen, Drehungen und Drehstreckungen sowie perspektivischen Verzerrungen der Bilder mit JavaScript realisieren willst? Mir sind hier keine Befehle bekannt, die dazu in der Lage wären.

also rein theoretisch müsste es gehen, man kann doch soweit ich weiss ein einzelnes Pixel auf einen bestimmten Farbwert setzen, oder ? Das reicht völlig aus um ein Bild zu zeichnen, dass als ein 2 Dimensionales Array von Farbwerten übergeben wird.
Alles andere ist reine Mathematik und Berechnung.
Allerdings gebe ich zu, dass es wahrscheinlich von Programmierung und Ausführungsperformance für eine sinnvolle Umsetzung viel zu aufwändig wäre. Java, Flash, oder vielleicht ein Realplayerfilm dürfte die gangbarere Alternative sein.

Gruss

Marko

[Christian Seiler]

Hallo Marko,

also rein theoretisch müsste es gehen, man kann doch soweit ich weiss ein einzelnes Pixel auf einen bestimmten Farbwert setzen, oder ?

Ja, mit einem absolut positionierten 1x1-Pixel großen <div>. :-)

Allerdings gebe ich zu, dass es wahrscheinlich von Programmierung und Ausführungsperformance für eine sinnvolle Umsetzung viel zu aufwändig wäre.

Ja.

Viele Grüße,
Christian

[Christoph Schnauß]

hallo Christian,

Allerdings gebe ich zu, dass es wahrscheinlich von Programmierung und Ausführungsperformance für eine sinnvolle Umsetzung viel zu aufwändig wäre.
Ja.

Klar, da haben wir ja nun alle hier im Thread dieselbe Auffassung. Trotzdem gilt: _theoretisch muß es gehen_.

Also wärs ja mal eine reizvolle Aufgabe, ohne Rücksicht auf irgendwelche Ressourcen und ohne Rücksicht auf "Sinnhaftigkeit" erstmal loszuzuschreiben und zu entwickeln, und dann nachzuschauen, was da alles passieren kann. Einfach, um herauszufinden, wann und womit man via Javascript Performance und andere wichtige Sachen überfordern kann.

Das Ganze ist heute ziemlich unsinnig. Aber wir werden in drei oder vier Jahren Rechner mit CPU-Durchsatz von 15 GB als "normal" ansehen und über nahezu unbegrenzte RAM-Volumina verfügen, und was heute DSL ist, werden wir in wenigen Jahren als historischen Engpaß belächeln. Javascript wird aber immer noch relevant sein...

Gottogottogott ;-)
Die liebe Michaela hat höchstwahrscheinlich keine Ahnung gehabt, was sie hier für einen Thread lostreten könnte, und leider meldet sie sich auch nicht wieder :-(

Grüße aus Berlin

Christoph S.

[Christian Seiler]

Hallo Christoph,

Also wärs ja mal eine reizvolle Aufgabe, ohne Rücksicht auf irgendwelche Ressourcen und ohne Rücksicht auf "Sinnhaftigkeit" erstmal loszuzuschreiben und zu entwickeln, und dann nachzuschauen, was da alles passieren kann. Einfach, um herauszufinden, wann und womit man via Javascript Performance und andere wichtige Sachen überfordern kann.

Dann hast Du ja jetzt eine Beschäftigung gefunden. ;-)

Viele Grüße,
Christian

[Harry]

Holladiewaldfee,

Also wärs ja mal eine reizvolle Aufgabe, ohne Rücksicht auf irgendwelche Ressourcen und ohne Rücksicht auf "Sinnhaftigkeit" erstmal loszuzuschreiben und zu entwickeln, und dann nachzuschauen, was da alles passieren kann. Einfach, um herauszufinden, wann und womit man via Javascript Performance und andere wichtige Sachen überfordern kann.

Habe ich schon gemacht, und ich habe auch angefangen, einen Feature-Artikel drüber zu schreiben. Ich habe damals (vor 3-4 Jahren, in meiner gloreichen Kollegstufen-Zeit ein Skript geschrieben, das ein Listview-Steuerelement komplett mit allen (!) Funktionalitäten in JavaScript nachgebildet hat. Es läuft unter Netscape 4, Mozilla, IE und irgendeiner Opera Version, an die ich mich nicht mehr erinnern kann, und war Teil eines Projektes von mir, mehrere Windows-Steuerelemente in JavaScript nachzubilden. Das Ding hat weit über 100k und kann die Kiste wirklich für ein paar Sekunden lahmlegen. grund dafür ist der Algorithmus, der das Script die Einträge umsortieren lässt oder für eine richtige Darstellung sorgt, wenn die Größe der Spalten verändert wird oder durch die Liste gescrollt wird. Prinzipiell unterstützen die Scrollbars am Rand wie bei einem echten Listview theoretisch sogar Drag&Drop, was jedoch bei zunehmender Anzahl von Einträgen ziemlich unmöglich wird, weil die Berechnung so lange dauert.

Das Teil ist jetzt jahrelang auf den Platten des Servers rumgelegen, und ich hab's nie veröffentlicht ...

Das Ganze ist heute ziemlich unsinnig. Aber wir werden in drei oder vier Jahren Rechner mit CPU-Durchsatz von 15 GB als "normal" ansehen und über nahezu unbegrenzte RAM-Volumina verfügen, und was heute DSL ist, werden wir in wenigen Jahren als historischen Engpaß belächeln. Javascript wird aber immer noch relevant sein...

Für damalige Zeiten war der Listview absolut ungeeignet, da er auf einem PIII/450 so viel Leistung frißt, daß der Besucher denkt, sein Rechner wäre abgestürzt. Auch heute auf meinem PIV/2.6 ist das Ding noch ein Leistungsfresser ohne Ende. Das Problem dabei ist die absolut mangelhafte Implementierung von JavaScript in den Browsern, wenn es darum geht, Elemente am Bildschirm neu anzuordnen oder in der Größe zu ändern. Das dauert einfach bis in alle Ewigkeit. Gut, das fällt bei einem einzelnen Element nicht auf, bei 10 auch nicht, aber wenn man mal ein paar 1000 Dinger rumschieben muß ... das merkt man dann doch. Fast wie früher mit Visual Basic ;)

Das Teil ist auch in DSL-Zeiten nicht zu verharmlosen, schließlich müssen da auch erstmal 150k durch die Leitung. Was aber wesentlich länger dauert ist die Zeit, die der Browser benötigt, um das Teil korrekt und vollständig aufzubauen.

Und über all diesen Kram wollte ich eigentlich einen Feature-Artikel schreiben - und mitten drin war ich dann auf einmal kein Schüler und auch kein Zivi mehr und hatte überhaupt keine Zeit mehr, das Ding fertig zu machen.

Damit er nicht für alle Zeiten verloren ist, will ich ihn hier einfach mal hinstellen. Einiges darin ist nicht ganz richtig, einiges schlichtweg falsch, anderes ist lückenhaft usw. - das Ding ist einfach noch nicht über den Stand eines groben Entwurfes herausgekommen. Da ich aber auch in nächster Zeit sicher nicht dazu kommen werde, dran weiterzuschreiben, habe ich mich entschieden, es hier zu veröffentlichen.

http://harry.ilo.de/publikationen/selfaktuell/listview/

Leider fehlen ausgerechnet die beiden interessantesten Kapitel noch, "Grenzen von JavaScript" und "Unterschiede der JS-Interpreter moderner Browser". Damit aber auch ein bißchen Leben in diese Kapitel kommt, stelle ich hier mal einen Auszug aus meiner Facharbeit rein, "Anwendungsbezogenes JavaScript und Einführung in HTML, CSS und JavaScript". Beschrieben wird dabei ein Aufbau mit einem Treeview, Pulldown-Menüs und einem Listview, also ähnlich dem Windows-Explorer.

---

Hier zeigen sich auch sehr schön die Unterschiede zwischen den JavaScript-Interpretern von IE, NC4 und Mozilla: Während der IE5 die Seite, wie sie oben abgebildet ist, in weniger als einer halben Sekunde aufbaut, benötigt Mozilla für die Darstellung bereits rund vier Sekunden. Netscape 4 überzeugt mit einer Zeit von 19 Sekunden ... Dafür laufen Scrollvorgänge im Listview mit dem Communicator wesentlich schneller und glatter als mit Mozilla und IE ab. Auch Menüs klappen schneller auf.
Andere Schwächen der NC4-Engine offenbaren sich dagegen beim Aufklappen komplexer Äste im Treeview: Manchmal muß Netscape bis zu fünf Sekunden lang "überlegen" bevor ein Ast aufklappt. Bei IE und Mozilla ist dagegen kaum eine Verzögerung zu bemerken. Besonders auffällig ist jedoch die Langsamkeit der Netscape 4 JavaScript-Engine beim Ändern der Größe von Spalten im Listview. Etwas weniger als eine halbe Sekunde Berechnungszeit beim IE stehen hier gegen 32 (endlose) Sekunden beim Netscape 4. Auch zum Umsortieren einer Spalte benötigt Netscape mehr als die doppelte Zeit des Microsoft Browsers.

---

Dieser Text stammt aus den Jahren 2000/01, wenn hier von "Mozilla" die Rede ist, ist meist MileStone 16 oder so etwas gemeint. "IE" ist der IE 5 oder 5.5, oder was halt auch immer damals grade aktuell war.

Im Feature-Artikel-Entwurf sind auch zwei Beispiele verlinkt, in denen das komplexe Script zum Einsatz kommt:
http://harry.ilo.de/publikationen/selfaktuell/listview/beispiele/buch/suche.php
http://harry.ilo.de/publikationen/selfaktuell/listview/beispiele/musik/suche.php

Der Quelltext ist hier:
http://harry.ilo.de/publikationen/selfaktuell/listview/listview.txt

Download:
http://harry.ilo.de/publikationen/selfaktuell/listview/listview.zip (Script)
http://harry.ilo.de/publikationen/selfaktuell/listview/listview_img.zip (Grafiken)
http://harry.ilo.de/publikationen/selfaktuell/listview/listview_debug.zip (Debugging-Modul)
http://harry.ilo.de/publikationen/selfaktuell/listview/listview_bsp.zip (Beispiel)

Natürlich muß ich eingestehen, daß das Ding nicht sehr sauber programmiert ist und man durchaus noch einiges verbessern könnte, vor allem kann man im Script noch einige Passagen optimieren, was Stil und Performance angeht. Wer Zeit und Lust hat kann das gerne tun.

Und falls sich natürlich noch jemand findet, der Lust hat, den Feature-Artikel zu korrigieren und zu vervollständigen, ja, dann wäre ich restlos begeistert :)

Ansonsten wünsch ich Euch viel Spaß mit dem Zeug.

Ciao,

Harry

PS: Ja im Feature-Artikel-Entwurf fehlen wirklich die Grafiken und das Style-Sheet ...
 PPS: Mir ist's wurscht, daß der Akzent hinter "Harry" und vor dem "s" falsch ist. Aber "Harrys" schaut so doof aus, fast wie "Harries" (arghl)

[Michaela]

hallo Christian,

Allerdings gebe ich zu, dass es wahrscheinlich von Programmierung und Ausführungsperformance für eine sinnvolle Umsetzung viel zu aufwändig wäre.
Ja.

Klar, da haben wir ja nun alle hier im Thread dieselbe Auffassung. Trotzdem gilt: _theoretisch muß es gehen_.

Also wärs ja mal eine reizvolle Aufgabe, ohne Rücksicht auf irgendwelche Ressourcen und ohne Rücksicht auf "Sinnhaftigkeit" erstmal loszuzuschreiben und zu entwickeln, und dann nachzuschauen, was da alles passieren kann. Einfach, um herauszufinden, wann und womit man via Javascript Performance und andere wichtige Sachen überfordern kann.

Das Ganze ist heute ziemlich unsinnig. Aber wir werden in drei oder vier Jahren Rechner mit CPU-Durchsatz von 15 GB als "normal" ansehen und über nahezu unbegrenzte RAM-Volumina verfügen, und was heute DSL ist, werden wir in wenigen Jahren als historischen Engpaß belächeln. Javascript wird aber immer noch relevant sein...

Gottogottogott ;-)
Die liebe Michaela hat höchstwahrscheinlich keine Ahnung gehabt, was sie hier für einen Thread lostreten könnte, und leider meldet sie sich auch nicht wieder :-(

Grüße aus Berlin

Christoph S.

Hallo Christoph,

Ja da hast du gut recht das ich damit nicht so ganz gerechnet hatte. Eigentlich hoffte ich das es eine relativ einfache Lösung zur Umsetzung der Idee gibt: einer Navigation über eben die 4 Würfelflächen welche die Bilder  tragen sollen, aber ich glaube das überfordert mich jetzt doch ein wenig ;-), mit Java Applets kenn ich mich nicht aus, gäbe es denn in Flash eine nicht ganz so komplizierte Lösung? Weis da jemand was?
Also ich wäre wirklich für einen guten Tipp dankbar, ich habe kein Informatikstudium ;-)oder so was, sondern bringe mir seit ca. 1 1/2 Jahren JavaScript selbst bei, so in kleinen Schritten....
nochmal vielen Dank für die Infos und obwohl es mir bisher mit meinem Problem direkt nicht weitergeholfen hat, so habe ich jetzt zumindest eine etwas konkretere Vorstellung, wofür JavaScript vielleicht doch nicht so ganz das richtige ist. Manchmal muss man eben herausfinden, das man einen anderen Weg nehmen sollte um schneller ans Ziel zu gelangen, was ja auch sehr wichtig ist.

Micha

[Bio]

Sup!

Beim 5K-Wettbewerb hat doch auch mal jemand Wolfenstein in JS geschrieben. Dabei wurde ein .XBM - Bild mit JS dynamisch generiert.
.XBM, weil nicht komprimiert ist und in den meisten Browser funktioniert, denke ich - irgendwelche spezifischen Vorteile hatte das auf jeden Fall. Tja, und wenn man Wolfenstein damit rendern kann, dann sollte auch ein Würfel gehen.

Gruesse,

Bio

[Christoph Schnauß]

hallo Harry,

Theoretisch müßte das tatsächlich mit Javascript lösbar sein, ist aber unglaublich aufwendig, und wenn du es fertigbringst, kannst du dich mit guten Gewinnchancen an so ziemlich allen Wettbewerben beteiligen.
Kannst Du mir verraten, wie Du die Streckungen, Drehungen und Drehstreckungen sowie perspektivischen Verzerrungen der Bilder mit JavaScript realisieren willst? Mir sind hier keine Befehle bekannt, die dazu in der Lage wären.

Ich sagte ja, _theoretisch_. Es wäre dazu tatsächlich nötig, für jede Würfelseite (je nach Drehgeschwindigkeit) mindestens 25 unterschiedlich verzerrte Bilder mit demselben Motiv zu erstellen (damit es nicht allzusehr ruckelt) und die dann jeweils in rotierende Layer (DIV's) zu packen. Das geht mit entsprechenden Arrays.

_Ohne_ Bilder, sondern nur mit gepunkteten Umrißlinien, habe ich so etwas sogar schonmal gesehen, finde es aber nicht mehr, obwohl ich jetzt deutlich länger als eine Stunde herumgesucht habe.

Wenn ich mal ganz furchtbar sehr viel Zeit habe, probiere ich das sogar aus, fürchte aber, daß mich irgendwann die Geduld verläßt. Es ist meines Erachtens eine reine Fleißaufgabe, und das Ergebnis steht mit Sicherheit in keinerlei ökonomischem Verhältnis zum Aufwand.

Der einzige, der sich einmal mit entsprechender Energie an eine vergleichbare Aufgabe herangewagt und sie auch zu einem glücklichen Ergebnis geführt hat, ist unser Chräcker mit seinem Stempelgeheimnis ;-)

Grüße aus Berlin

Christoph S.

[08/15]

Es gibt eine sehr nett anzusehende Lösung mit einem Java-Applet.

Hi !
Fabio Ciucci's Spielereien finden sich auf vielen Aldi Rechnern wieder ...
http://www.1archive.com/java/anfy/tmapcube

[Dubaischeich]

Hi,

ich suche nach einer Lösung um einen rotierenden Würfel zu gestalten, auf dessen Seiten sich Fotos  (jpegs od. bmp) befinden, die sich ins Bild reindrehen und rausdrehen.
Kann mir jemand einen Tipp geben wie sowas gelöst werden kann?

Also mit JavaScipt bestimmt nicht, aber als Applet geht es auf jeden Fall.

Schau dir mal die Java 3D API an. Damit geht so was recht einfach, wenn man sich ein wenig eingelesen hat.

http://java.sun.com/products/java-media/3D/

Ciao,
Der Dubaischeich

[Pipolino]

hi Micha

ich suche nach einer Lösung um einen rotierenden Würfel zu gestalten, auf dessen Seiten sich Fotos  (jpegs od. bmp) befinden, die sich ins Bild reindrehen und rausdrehen.
Kann mir jemand einen Tipp geben wie sowas gelöst werden kann?

Sowas gibts im Clowntheater
hier
http://www.clowntheater-pipolino.net/clown/kind/westrechts.htm

und hier
http://www.clowntheater-pipolino.net/clown/kind/ostlinks.htm

Auf den linken Griff klicken um die Drehung zu starten auf den rechten Griff um sie zu stoppen.

Schöne Grüße
Pipolino

[Micha]

Hallo Pipolino,

vielen Dank für deinen Link, jetzt habe ich ein paar Anregungen, wie ich die Sache lösen kann, momentan werde ich mal versuchen ein Applet einzubauen, mal sehen ob es gelingt.

Grüße
Micha

hi Micha

ich suche nach einer Lösung um einen rotierenden Würfel zu gestalten, auf dessen Seiten sich Fotos  (jpegs od. bmp) befinden, die sich ins Bild reindrehen und rausdrehen.
Kann mir jemand einen Tipp geben wie sowas gelöst werden kann?

Sowas gibts im Clowntheater
hier
http://www.clowntheater-pipolino.net/clown/kind/westrechts.htm

und hier
http://www.clowntheater-pipolino.net/clown/kind/ostlinks.htm

Auf den linken Griff klicken um die Drehung zu starten auf den rechten Griff um sie zu stoppen.

Schöne Grüße
Pipolino