2D-Bilder in 3D nach hinten kippen

Hier könnt ihr alle Fragen zu SpiderBasic austauschen.
stevie1401
Beiträge: 659
Registriert: 19.10.2014 15:51
Kontaktdaten:

2D-Bilder in 3D nach hinten kippen

Beitrag von stevie1401 »

Ihr wertet Spiderbasic gerade um 1000% auf, liebe Leute!
Ihr seid echt spitze!

Kann man mit CSS auch 2d Bilder in 3d umwandeln? Ich möchte gerne 2d-Spielkarten "nach hinten kippen", sodass man schräg von oben drauf sieht.
Ist das auch mit SB machbar?

__________________________________________________
Thread geteilt
SpiderBasic>SpiderBasic
SpiderBasic Library - Liste neuer Funktionen>2D-Bilder in 3D nach hinten kippen
17.10.2018
RSBasic
Ich programmiere nur noch mit Linux.
Linux Mint 21.x
Benutzeravatar
Kiffi
Beiträge: 10620
Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von Kiffi »

das Thema passt eigentlich nicht in diesen Thread. @Ray: Kannste das hier verschieben?
stevie1401 hat geschrieben:Ist das auch mit SB machbar?
Prinzipiell ja. Es gibt wohl etliche JavaScript-Codes, mit denen man das machen kann.

Beispielsweise: https://nnattawat.github.io/flip/

Muss sich nur jemand finden, der das in SB implementiert.

Grüße ... Peter
Hygge
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: 2D-Bilder in 3D nach hinten kippen

Beitrag von RSBasic »

@stevie1401
2D in 3D nach hinten kippen habe ich schon umgesetzt: viewtopic.php?p=349354#p349354
Nur kann man damit nur Gadgets drehen, aber ich werde noch eine weitere Funktion bauen, damit man auch Grafiken in 3D drehen kann.
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
TroaX
Beiträge: 659
Registriert: 08.03.2013 14:27
Computerausstattung: PC: Ryzen 9 3950X, 96 GB RAM, RX6800XT, 2.5 TB SSD, 21:9 Display, Pop_OS! | Lappi: Ryzen 7 5800H, 16 GB RAM, 1 TB SSD, Pop_OS!
Wohnort: NRW
Kontaktdaten:

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von TroaX »

Geht mit CSS Transform sogar noch einfacher: https://www.mediaevent.de/css/transform.html

Aber CSS scheint wohl mit Spiderbasic nicht ganz so schön zu funktionieren. Eigentlich wäre das eine gute Möglichkeit von den Entwicklern, passende Compiler-Funktionen einzubetten, mit denen sich ein CSS-File bearbeiten kann. z.B:

Code: Alles auswählen

CompilerAddStyle(selector$,option$,value$)
Damit werden Selektoren in eine Liste eingetragen und darin die Optionen und Werte gelistet. Beim "kompilieren" wird aus dieser Liste ein weiteres CSS-File generiert und eingebettet. Damit könnte man sich tonnenweise Prozeduren sparen und es würden sich viele Dinge einfacher und performanter realisieren lassen (u.a. das Einfärben von Tabellenzeilen bzw. Spalten). So wie es aussieht wird dies aber momentan über Javascript erledigt. Mir als alt eingesessener Webtüftler läuft es dabei Eiskalt den Rücken runter. :lol:

EDIT: OMG Jetzt wurde der Beitrag verschoben. Dies bezieht sich auf einen Beitrag, der jetzt irgendwo anders liegt!!!
viewtopic.php?f=33&t=31132
PC: Ryzen 9 3950X | 96 GB RAM | RX6800XT | 2,5 TB NVMe | Pop_OS!
Notebook: 16" 3:2 | Ryzen 7 5800H | 16 GB RAM | Radeon Vega | 1TB NVMe | Pop_OS!
NAS: Fritz.Box :lol:
Coding: Purebasic 6.04 | PHP | HTML | CSS | Javascript
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: 2D-Bilder in 3D nach hinten kippen

Beitrag von RSBasic »

@TroaX
Ich hab deinen Beitrag hierher verschoben.
Genau so hätte ich auch gemacht. Dafür gibt es ja transform: rotate3d().
Ich habe den anderen Code auch schon mit transform: rotate3d() gemacht.
TroaX hat geschrieben:Aber CSS scheint wohl mit Spiderbasic nicht ganz so schön zu funktionieren. Eigentlich wäre das eine gute Möglichkeit von den Entwicklern, passende Compiler-Funktionen einzubetten, mit denen sich ein CSS-File bearbeiten kann. z.B:
+1
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: 2D-Bilder in 3D nach hinten kippen

Beitrag von RSBasic »

@stevie1401
Wie zeigst du deine Karten an? Bestimmt mit ImageGadget oder?
Wenn ja, dann hast du ja schon die Lösung: viewtopic.php?p=349354#p349354
Ich wollte es gerade umsetzen, aber da fiel mir ja ein, dass das garnicht notwendig ist, da man Grafiken in SpiderBasic nur mit ImageGadget anzeigen kann und dieses kannst du problemlos mit meinem Code in 3D drehen.

Beispiehaft mit einer sehr einfachen Spielkarte, die sich dann dreht:

Code: Alles auswählen

EnableExplicit

Procedure SetGadgetRotate3D(gadget, x, y, z, degree)
  Protected id.s
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  ;Styles setzen
  ! GadgetElement.css("transform", "rotate3d(" + v_x + ", " + v_y + ", " + v_z + ", " + v_degree + "deg)");
 
EndProcedure

;================================================== Beispielcode ==================================================

Global angle

Procedure TimerEvents()
  Select EventTimer()
    Case 1
      angle + 1
      SetGadgetRotate3D(1, 1, 0, 0, angle)
      If angle = 360
        angle = 0
      EndIf
     
  EndSelect
EndProcedure

CreateImage(1, 120, 200, 24)
If StartDrawing(ImageOutput(1))
  Box(0, 0, 120, 200, RGB(0, 0, 0))
  Box(2, 2, 116, 196, RGB(255, 255, 255))
  DrawText(10, 10, "A", RGB(255, 0, 0))
  LineXY(50, 100, 60, 80, RGB(255, 0, 0))
  LineXY(50, 100, 60, 120, RGB(255, 0, 0))
  LineXY(60, 80, 70, 100, RGB(255, 0, 0))
  LineXY(60, 120, 70, 100, RGB(255, 0, 0))
  StopDrawing()
EndIf

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ImageGadget(1, 100, 100, 120, 200, ImageID(1), 0)
 
  AddWindowTimer(0, 1, 10)
  BindEvent(#PB_Event_Timer, @TimerEvents())
 
EndIf
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
stevie1401
Beiträge: 659
Registriert: 19.10.2014 15:51
Kontaktdaten:

Re: 2D-Bilder in 3D nach hinten kippen

Beitrag von stevie1401 »

Leider kippen meine Karten nicht:




doko-lounge.de/Karten45Grad.jpg

(Ich bekomme das Bild leider nicht hier rein)

Degree=45
Ist aber egal was ich einstelle. Die Bilder werden nur verformt.
Ich programmiere nur noch mit Linux.
Linux Mint 21.x
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: 2D-Bilder in 3D nach hinten kippen

Beitrag von RSBasic »

Okay, du willst, dass es auch perspektivisch gedreht wird. Bitte schön:

Code: Alles auswählen

EnableExplicit

Procedure SetGadgetRotate3D(gadget, x, y, z, degree, perspective_width = 0)
  Protected id.s
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  ;Styles setzen
  ! GadgetElement.css("perspective", v_perspective_width + "px");
  ! GadgetElement.children().css("transform", "rotate3d(" + v_x + ", " + v_y + ", " + v_z + ", " + v_degree + "deg)");
  
EndProcedure

;================================================== Beispielcode ==================================================

Global angle

Procedure TimerEvents()
  Select EventTimer()
    Case 1
      angle + 1
      SetGadgetRotate3D(1, 1, 0, 0, angle, 600)
      If angle = 360
        angle = 0
      EndIf
     
  EndSelect
EndProcedure

CreateImage(1, 120, 200, 24)
If StartDrawing(ImageOutput(1))
  Box(0, 0, 120, 200, RGB(0, 0, 0))
  Box(2, 2, 116, 196, RGB(255, 255, 255))
  DrawText(10, 10, "A", RGB(255, 0, 0))
  LineXY(50, 100, 60, 80, RGB(255, 0, 0))
  LineXY(50, 100, 60, 120, RGB(255, 0, 0))
  LineXY(60, 80, 70, 100, RGB(255, 0, 0))
  LineXY(60, 120, 70, 100, RGB(255, 0, 0))
  StopDrawing()
EndIf

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ImageGadget(1, 100, 100, 120, 200, ImageID(1), 0)
 
  AddWindowTimer(0, 1, 10)
  BindEvent(#PB_Event_Timer, @TimerEvents())
 
EndIf
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
Kiffi
Beiträge: 10620
Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9

Re: 2D-Bilder in 3D nach hinten kippen

Beitrag von Kiffi »

Herrje, Ray, Du bist einfach zu schnell! Wie soll man denn da noch mithalten? :shock:

-> http://test.tuebben.de/cards/

Code: Alles auswählen

EnableExplicit

Enumeration 
  #Window
  #ImageGadget
EndEnumeration

Procedure SetGadgetRotate3D(gadget, x, y, z, degree, perspective_width = 0)
  Protected id.s
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  ;Styles setzen
  ! GadgetElement.css("perspective", v_perspective_width + "px");
  ! GadgetElement.children().css("transform", "rotate3d(" + v_x + ", " + v_y + ", " + v_z + ", " + v_degree + "deg)");
  
EndProcedure

;================================================== Beispielcode ==================================================

Global angle
Global CurrentImage

Procedure TimerEvents()
  Select EventTimer()
    Case 1
      
      angle + 1
      
      SetGadgetRotate3D(#ImageGadget, 1, 0, 0, angle, 600)
      
      
      Select angle
          
        Case 90, 270
          
          If CurrentImage = 0
            CurrentImage = 1
          Else
            CurrentImage = 0
          EndIf
          
          SetGadgetState(#ImageGadget, ImageID(CurrentImage))
          
        Case 360
          
          angle = 0
          
      EndSelect
      
  EndSelect
  
EndProcedure


Procedure Main()
  
  OpenWindow(#Window, 0, 0, 500, 500, "Window", #PB_Window_ScreenCentered)
  ImageGadget(#ImageGadget, 100, 100, 120, 200, ImageID(CurrentImage), 0)
  
  AddWindowTimer(#Window, 1, 10)
  BindEvent(#PB_Event_Timer, @TimerEvents())
  
EndProcedure

Procedure Loaded(Type, Filename$, ObjectId)
  Static nbLoadedImages
  nbLoadedImages + 1
  If nbLoadedImages = 2
    Main()
  EndIf
EndProcedure

Procedure LoadingError(Type, Filename$, ObjectId)
  Debug Filename$ + ": loading error"
EndProcedure

; Register the loading event before calling any resource load command
BindEvent(#PB_Event_Loading, @Loaded())
BindEvent(#PB_Event_LoadingError, @LoadingError())

LoadImage(0, "resources/front.jpg")
LoadImage(1, "resources/back.jpg")
Hygge
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: 2D-Bilder in 3D nach hinten kippen

Beitrag von RSBasic »

Dafür zeigt dein Beispielcode zwei verschiedene Seiten einer Spielkarte. :allright:
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Antworten