Historical forum-msg-id-136376-edit, Revision 1

Original date:2021-09-15 10:35:30 Edited by: petelomax Subject: 3D cube challenge

I've been thinking about whether there is any way to leverage the power of CSS via p2js,
specifically to replicate things that work on the desktop in a browser, as opposed to
implementing CSS in Phix/Euphoria on the desktop (that way certainly lies madness).

I found a neat little demo and gleefullly brutally butchered it down to 52 lines,
which you can run online here: http://phix.x10.mx/p2js/3Dcube.htm
and since it is so small have reproduced in full below (save as 3Dcube.htm)

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8"> 
    <title>Spinning 3D CSS Cube</title> 
    <style> 
      html, body { 
        width: 100%; 
        height: 100%; 
        user-select: none; 
      } 
      .cube { 
        width: 100px; 
        height: 100px; 
        position: relative; 
        transform-style: preserve-3d; 
        transform: rotateX(-20deg) rotateY(-45deg); 
        top: 50%; 
        left: 50%; 
        margin: -50px 0 0 -50px; 
        font: x-large cursive; 
        line-height: 100px; 
        text-align: center; 
      } 
      .cube div { 
        width: 100px; 
        height: 100px; 
        position: absolute; 
        color: #5fc797; 
        background-color: #166d0b; 
        box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3); 
      } 
    </style> 
  </head> 
  <body> 
    <div class="cube"> 
      <div style="transform: rotateX(90deg);			 margin-top:  -50px;">Top</div> 
      <div style="transform: rotateX(90deg)    rotateY(180deg);  margin-top:   50px;">Bottom</div> 
      <div style="transform: rotateY(90deg);			 margin-left:  50px;">Right</div> 
      <div style="transform: rotateY(-90deg);			 margin-left: -50px;">Left</div> 
      <div style="transform: translateZ(50px);"                                      >Back</div> 
      <div style="transform: translateZ(-50px) rotateX(180deg);"                     >Front</div> 
    </div> 
    <script> 
      function tmm(event) { 
        let tstyle = 'rotateX(' + -event.pageY + 'deg) rotateY(' + event.pageX + 'deg)'; 
        document.querySelector('.cube').style.transform = tstyle; 
      } 
      window.onmousemove = tmm; 
    </script> 
  </body> 
</html> 

The challenge is to replicate this on the desktop using your favoutite lib, be that pGUI, EuGTK, Orx, or whatever.
Try to stick as close as possible to the central concept, ie create 6 flat faces and rotate/translate them into place,
mind you anything that can match this in under 100 lines has got to be worth a look.

Not Categorized, Please Help

Search



Quick Links

User menu

Not signed in.

Misc Menu