1. 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 gleefully 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 favourite 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, or even 200 lines has got to be worth a look.

PS If you want you can make the faces transparent so you don't have to worry about which to draw first.

new topic     » topic index » view message » categorize

2. Re: 3D cube challenge

Wasn't there a Euphoria dos console program that produced a large spinning multi-color 'E' ?

Kat

new topic     » goto parent     » topic index » view message » categorize

3. Re: 3D cube challenge

Wire frame, not textured images. There was a gl one, and an exotica one I believe.

Cheers

Chris

new topic     » goto parent     » topic index » view message » categorize

Search



Quick Links

User menu

Not signed in.

Misc Menu