Wiki Diff forum-msg-id-136376-edit, revision #1 to tip

Original date:2021-09-15 10:42:06
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 gleefully brutally butchered it down to 52 lines,\\
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 favourite lib, be that pGUI, EuGTK, Orx, or whatever.\\
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, or even 200 lines has got to be worth a look.
mind you anything that can match this in under 100 lines has got to be worth a look.

Search



Quick Links

User menu

Not signed in.

Misc Menu