3D Cube

[xAction]

3DCube_Basic.zip

Resistance is futile.

(6.67 KiB) Downloaded 115 times

Making SHMUP tutorial I couldn't help feel like I could be making a 1983 Atari Star Wars arcade game clone...if I could just figure out some 3D things, like a cube.

So I found this cube tutorial at Skytopia with some code that's easy to read and quickly modified it into a Livecode script. Then I spent hours noodling with variables and controls, then I stripped all the controls off to give you a simple stack to play with.

VERY IMPORTANT: Click RESET before pressing keys the first time the stack opens. Local variables need set or your cube will vanish.

The Key Control button is a toggle, click the label name area to make it snap the list out of view.
The Mode checkbox switches between isometric 3D simulation and actual 3D simulation

There's two buttons used as labels at the top center of screen "TheKey" and "TheValue".
TheKey shows the key name associated with the rawKeyDown values that the script is using. These are store in a custom property of the stack.

TheValue shows what value you are modifying with the current key you are holding down.
A third button "RawKey" in the top right corner is showing the actual rawkeydown numbers, in case you need to add more keys to the KeyNameArray custom property and HandleKeys handler for whatever reason.

The stack has some other custom properties but the one ones of concern at the moment are:

• xArray
  yArray
  zArray

These hold the vertice coordinates for a cube whose vertices are all 60 points from an imaginary center.
You won't need to modify them, but if you are going to try to maybe make another geometric shape, you'll need a similar aray.

The array is created and values are set with the InitCubeCoordinates handler, if you copy the code of this stack to a new stack you'lll need to run this handler once to set up your custom property.

Code: Select all

on InitCubeCoordinates
   --// "I" = the distance of the vertice from center, ie, pivot
   put 60 into I
   --//X
   SetX 1,I
   SetX 2,I
   SetX 3,I
   SetX 4,I
   
   SetX 5,-I
   SetX 6,-I
   SetX 7,-I
   SetX 8,-I
   
   --//Y
   SetY 1,I
   SetY 2,I
   SetY 5,I
   SetY 6,I
   
   SetY 3,-I
   SetY 4,-I
   SetY 7,-I
   SetY 8,-I
   
   --//Z
   SetZ 2,-I
   SetZ 6,-I
   SetZ 6,-I
   SetZ 8,-I
   
   SetZ 1,-I
   SetZ 3,-I
   SetZ 5,-I
   SetZ 7,-I
end InitCubeCoordinates

SETX, SETY, SETZ are handlers in the stack script that do the array work. Could have maybe used one handler to rule them all, but I was trying to follow the tutorials X(n) = 1 code style as close as possible in case I got lost.

Code: Select all

---// get or set values in custom property arrays
on setX n,tVal
   put the xArray of of stack (the mainStack of this stack) into tArray
   put tVal into tArray[n]
   set the xArray of of stack (the mainStack of this stack) to tArray
end setX

Originally I used a repeat loop to get all 24 properties made and 24 values set in five lines of code, then I noticed (after my cube didn't work) that there were itty bitty tiny little minus signs among those "I" value settings in the tutorial. Aha!

Okay custom property is set up now for the cube manipulation:
Local Variables in the stack to match th tutorial:

Code: Select all

--// Initial start up variables:
local theSIZE=40
local theMODE=0

local CAMX=0 , CAMY=0 , CAMZ=300   --// Position of the camera.
local MOVEX=0 , MOVEY=0 , TheSCALE=1  --// Image fixed to 'paper' so you can move around and 'scale' in/out.
local ANGLEX=0  , ANGLEY=0 , ANGLEZ=0   --// Angle of rotation about the following pivots:
local PIVX=0 , PIVY=0 ,PIVZ=0    --// Pivots x, y and z

I needed some more variables for myself.

Code: Select all

--// additional variables beyond tutorial
local CenterX,CenterY --// the center, or pivot point of the object(s)
local P1,P2,P3,P4,P5,P6,P7,P8 --// the vertices that make the cube
local CubePoints --// store the whole cube in here
local LoopIndex=1 --// for tracking loop N position to identify circle vertice markers
local fXrot,fYrot,fZrot --//  values to modify angles each loop. "f" for float

The tutorial uses fixed position x+400,y+300, CenterX,CenterY replaces those number values to center the cube (at default) to the center of the stack window.

The P1,P2,P3 etc variables are used to store the virtual vertices of the cube as it they are updated each run of CUBE_LOOP, at the end of the loop they are associated with each other to create the points of the lines that make the cube. The default code as translated spits out a mangled ugly mess of lines, I left the single line of commented code in there for you to see it for yourself.

CubePoints combines all the P1,P2,P3,etc vertice to line associations into a single point list to define a "line" graphic object

LoopIndex is used to give a name to the circle objects that identify the vertice positions, ie, circle1, circle2, etc

fXrot,fYrot,fZrot modifiy the ANGLEX,ANGLEY,ANGLEZ variables at the top of each run of the loop. The tutorial had some high integer values 5,8,3 and the cube was spinning like crazy every iteration of the handler, these values are floats so we get fine control over our cube rotation. Shift key with X,Y, and/or Z will set these values to zero so you can do things like zooming in and out without the cube spinning constantly.

Okay that covers the local variables. On to the CUBE_LOOP
The tutorial linked above can explain how this works better than I can.
Just note that this code differs from the tutorial:

1. to gain control over the initial ANGLE modifiers via fXrot,fYrot,fZrot variables
2. to track the circle graphics by giving them each names
3. control rendering the pivot point "pixel"
4. to render a clean cube line by line using the P1,P2,P3, etc variables
5. additional conditionals to trap some bugs generated by using things like sliders to modify variable values
6. finish off with an actual Livecode graphic control object that can be copy/pasted, colored, click on or whatever.

Code: Select all

On CUBE_LOOP
   --// Rotation values make the spin happen
   --// if these are 0 or empty the prorgram does nothing
   --// values 5,8,3 given in tutorial are crazy high and hideous
   put ANGLEX+fXrot into ANGLEX  --//5
   put ANGLEY+fYrot into ANGLEY  --//8
   put ANGLEZ+fZrot into ANGLEZ   --//3
   put fXrot,fYrot,fZrot
   focus nothing
   --// repeat through each vertice of the object
   Repeat with N=1 To 8   
      put N into LoopIndex
      --// Rotation code
      put (getX(N)-PIVX) into XD
      put (getY(N)-PIVY) into YD
      put (getZ(N)-PIVZ) into ZD
      
      --// read the tutorial if you want to understand what happens here
      put XD*Cos(ANGLEZ) - YD*Sin(ANGLEZ) - XD into ZX
      put XD*Sin(ANGLEZ) + YD*Cos(ANGLEZ) - YD into ZY
      
      put (XD+ZX)*Cos(ANGLEY) - ZD*Sin(ANGLEY) - (XD+ZX) into YX
      put (XD+ZX)*Sin(ANGLEY) + ZD*Cos(ANGLEY) - ZD into YZ
      
      put (YD+ZY)*Cos(ANGLEX) - (ZD+YZ)*Sin(ANGLEX) - (YD+ZY) into XY
      put (YD+ZY)*Sin(ANGLEX) + (ZD+YZ)*Cos(ANGLEX) - (ZD+YZ) into XZ
      
      --//the code above results in these offsets
      put (YX+ZX) into XROTOFFSET
      put (ZY+XY) into YROTOFFSET
      put (XZ+YZ) into ZROTOFFSET
      
      --// modifying theScale manually can result in errors, trapped here
      if theScale = 0 then put 0.01 into theScale  --// no divide by zero
      
      --// Yes, it's the *SPLAT* code (aka 2D to 3D conversion):
      If theMODE=0 then
         Put ( getX(N) + XROTOFFSET + CAMX )/theSCALE +MOVEX into X  
         Put ( getY(N) + YROTOFFSET + CAMY )/theSCALE +MOVEY into Y 
      Else
         Put ( getZ(N) + ZROTOFFSET + CAMZ ) into Z
         Put ( getX(N) + XROTOFFSET + CAMX )/Z /theSCALE +MOVEX into X 
         Put ( getY(N) + YROTOFFSET + CAMY )/Z /theSCALE +MOVEY into Y 
      End If
      
      --// modifying CAMZ manually can result in errors, trapped here
      --// keep the zoom (camz) from overloading  the x,y values
      if x > 1600 then put 1600 into X
      if y > 1600 then put 1600 into Y
      if x < -1300 then put -1300 into x
      if y < -1300 then put -1300 into y
      
      --// the x,y values derived above applied to the center of the screen
      put X+CenterX & comma &  Y+CenterY  into curPoint
      
      --// store individual vertices in their own variables
      --// this is so we can draw a clean cube 
      --// instead of the zig-zag incomplete mess that the tutorial code makes
      if n= 1 then  put curPoint into P1
      if n= 2 then  put curPoint into P2
      if n= 3 then  put curPoint into P3
      if n= 4 then  put curPoint into P4
      if n= 5 then  put curPoint into P5
      if n= 6 then  put curPoint into P6
      if n= 7 then  put curPoint into P7
      if n= 8 then  put curPoint into P8
      
      --//## original messy zig zag vertices. To compare uncomment this
      --//## and set a "line" graphic's points to thesePoints after the end repeat
      -- put cr & X+400 & comma &  Y+300   after thesePoints
      
      --// give each circle a name so we don't have to recreate them constantly
      put "circle"& LoopIndex into circName
           
      --// Drawing code
      If theMODE=0 then
         --// theMode 0 is an isometric representation of 3D
         put theSIZE/theSCALE into radius
         
         --// manually adjusting CAMZ,theSize, and/or theScale can result in errors,trapped here
         if radius <1 or radius is not a number then put 1 into radius
         if  radius >30 then put 30 into radius
         
         if exists(graphic circName) then
            --// a label for tracking vertices on screen
            set the label of graphic circName to LoopIndex
            
            --// the location and size of the circle
            set the loc of graphic circName to X+CenterX, Y+CenterY
            
            --// got a safe size? Set the size of the circle
            set the height of graphic circName to radius
            set the width of graphic circName to radius
         else
            --// if the circles don't exist then we draw them, default  size/scale is assumed safe
            Draw_Circle X+CenterX, Y+CenterY, theSIZE/theSCALE
         end if
         --// in isometric mode we hide the pixel/pivot
         if exists(graphic "pixel") then 
            hide graphic "Pixel"
         end if
      Else
         --// theMODE 1 is a true 3D in 2D simulation
         put ( getZ(N) + ZROTOFFSET + CAMZ ) into  Z
         
         --// Z greater than 300 may be off screen
         if Z > 300 then put 300 into z
         
         --// manualy modifying CAMZ,theSize,and/or theScale can result errors, trapped here
         put ((theSIZE/Z)/theSCALE) into radius
         if radius <1 or radius is not a number then put 1 into radius
         if  radius >30 then put 30 into radius
         
         if exists(graphic circName) then
            set the loc of graphic circName to X+CenterX, Y+CenterY
            set the height of graphic circName to radius
            set the width of graphic circName to radius
         else
            Draw_Circle X+CenterX,Y+CenterY, radius
         end if
         --// Display of the pivot point code (optional)
         put ( (PIVX+CAMX) / (PIVZ+CAMZ) ) /theSCALE +MOVEX +CenterX into PX 
         put ( (PIVY+CAMY) / (PIVZ+CAMZ) ) /theSCALE +MOVEY +CenterY into PY
         Draw_Pixel PX, PY
      End If
   end repeat
   
      --// Build a clean cube line by line
   --// The double cr after the end of each statement defines a line unconnected to the next
   --// This  was done to clarify which two vertices create a line
   --// So as to define a nice clean cube made by drawing the connecting 
   --// lines of each face in turn without zig-zagging across the faces
   put cr & P1 & cr & P3 & cr & cr after tPoints
   put cr & P1 & cr & P2 & cr & cr after tPoints
   put cr & P1 & cr & P5 & cr & cr after tPoints
   
   put cr & P2 & cr & P4 & cr & cr after tPoints
   put cr & P2 & cr & P6 & cr & cr after tPoints
   
   put cr & P3 & cr & P4 & cr & cr after tPoints
   put cr & P4 & cr & P8 & cr & cr after tPoints
   
   put cr & P5 & cr & P6 & cr & cr after tPoints
   put cr & P5 & cr & P7 & cr & cr after tPoints
   
   put cr & P6 & cr & P8 & cr & cr after tPoints
   put cr & P7 & cr & P3 & cr & cr after tPoints
   put cr & P7 & cr & P8 & cr & cr after tPoints
   
   
   --unify all the lines as a single graphic object stored in one variable and/or object
   put tPoints into CubePoints
   set the points of graphic "cubeLine" to CubePoints
end CUBE_LOOP

I should probably add an if exists(graphic "cubeLine") somewhere.

There's a big long HandleKeys handler in the stack script, but that's pretty simple repetitive stuff.

case "j"
put MOVEX-2 into MOVEX
set the label of button "theValue" to "MOVEX:"&& MOVEX
break

I changed the tutorials ANGLE modifiers in there to floats so the cube rotates smoothly instead of all wacky.
Other than that it all works as tutorialized.

I have another stack full of control knobs to twist and slide coming up. Then we'll see if we can do another polygon object. How hard could it be?

Oh meanwhile I found this 3D Library, holy smokes!

[richmond62]

Gosh: this is clever stuff.

Although, to be honest, I am not sure if "Complete Beginners" is the place to put it.

I suppose there are 2 ways of looking at this:

1. All the "stuff below the hood" has already been done by you, so end-users can enjoy it without much effort themselves.

2. That all the "stuff below the hood" has already been done by you means that it doesn't really count as a complete beginner
project (you are, quite obviously, not a complete beginner).

As I have "had a thing" about arrays after falling fairly foul of a poly-dimensional one in PASCAL in 1984 I have always
regarded them as quite a few notches about "complete beginners" and done my level best to avoid them.

[xAction]

I think this is a good beginner project for someone to tool around with Livecode, make some sliders, buttons and toggles to do something fun with a 3D thing. The fanciest part about the stack is the math, and apparently you need that same math to graduate high school these days.

I was trying to find old single page Type-In BASIC programs from 1980s magazines for this exact thing but apparently nobody typed them into the internet.

Arrays are a thing of beauty, basically any list of items is an array

Code: Select all

Put char 10 to 25 of line 10 of field 2 into myVar

is another quick way of saying

Code: Select all

repeat with N = 10 to 25
put  fieldArray[2,10,N] after myVar
end repeat

or old school BASIC

Code: Select all

for N = 10 to 25
myVar$=myVar$+fieldArray$(2,10,N)
next N

Putting 60 into array X[1] is child's play compared to that.

[richmond62]

Well I left High School about 42 years ago, and quite a lot of that Math(s) has gone
"the way of all flesh".

That, in itself, should NOT be a problem unless one wants to ponder on the idea
that LiveCode might, just possibly, be the 'cement' between those who were second or third
rate at Math(s) at High School and the high flyers: as HyperCard was once claimed to be.

Certainly your point about

I think this is a good beginner project for someone to tool around with Livecode, make some sliders, buttons and toggles to do something

does make sense, even if I have a personal problem with the insistence nowadays on the idea of endless 'fun'.

[richmond62]

-
I must be missing something as I can find no sliders.

Yup: brain fuzzle: did not connect 'KEY CONTROLS' with 'sliders'.
-

-
Definitely need to stop outputting to the MessageBOx (could output to a field) as any further key commands end up
in the wrong place.

Very interesting to see 'HandleTheKeys' where I might have used KeyUp.

[Lagi Pittas]

I for one appreciate your work and did read and execute up to I think post 25 or so but have been very busy lately.
So if you want some fun and some great ideas, here is a book I had a lot fun with years ago on my BBC (and Apple ][) - https://archive.org/details/practicalprogram0000john

The programs are for the BBC and Acorn Atom and might even interest Richmond’s “little monsters”

Regards Lagi

[richmond62]

Richmond's "little monsters" are only little monsters because Richmond
really will not give an inch with 'blobs' who think that everything they
are given to do at school must be easy and 'fun'.

It never ceases to surprise me how many of those children who have been
spoon fed pap really "step up to the plate" when they realise what FUN (that is not 'fun')
the challenge of some serious programming can be.

[xAction]

I must be missing something as I can find no sliders.

Sliders were removed for the first version as they add a bunch of complexity to the programming and UI and there's bugs.

I did some revisions to my code during the clean up and haven't gotten back to remaking the slider version yet, with the revised base script.
There was something fundamental in my first version that was broken, what was it? Damn.. I forgot. But I fixed it for the first uploaded stack.

But here you can toy with the first buggy slidery version, it's got auto rotate..

3DCubev2_Buggy.zip

(7.9 KiB) Downloaded 95 times

I'll replace that eventually or someone can beat me to it and be known throughout the land as Lord of the Cube.

Hey Lagi, thanks for the book. Here's a quick access no login required online version. I remember punching the [=http://www.acornatom.nl/atom_plaatjes/b ... tation.htm]rotation program[/url] into my computer as a kid, good times. Will have to remake that in Livecode.

[Lagi Pittas]

Hey xAction,

Thanks - I haven’t been on that site a good few years - I have 2 copies of the dead trees version and that version you sent somewhere on my NAS drive - I still sometimes play with Richard Russell’s bbc basic for windows - to unwind and appreciate the no-bloat days.

I try to get all my “real books” as pdf or epub - so much easier going on holiday but this one I have never found as a pdf and archive.org was the first page that came up - I forgot that page.

Definitely happy days - the most soldering I ever did in one sitting was my Acorn Atom - but I did get to speak to Herman Hauser on the phone when I got stuck .

I look out for some of my graphics books that I have and send them to ya when I have a chance.

Regards Lagi

[stam]

Very interesting write up, thank you...

Would there be a benefit to doing this with OpenGL or similar?
Mind you, i don't know if it's possible to use OpenGL with LiveCode, does anyone know?

[Bill]

We made an external for Runtime Revolution using OpenGL a long long time ago. It's GPL source.
See here
Apparently the ability to build the external is simply commented out in the source code., but Tobi is a full time game developer now using Unity so there's no drive for him to use his personal free time on Livecode extensions, and I never have any luck figuring out the sourcecode errors of which there are 100+ with over 1000 warnings, otherwise I'd have something working on github by now.

I can't get the old external to work in Livecode 6 and up, every year or so I try, get heartbroken and give up. All the work was done on a Mac and according to comments in the source code and UI stack there's a lot of "This doesn't work on windows!" which I've been using for a decade now. Old apps I built that "Just worked!" on the Mac "Just don't" on Windows.

Maybe if we could get a simple external to build we could use the mountains of OpenGL tutorials available online now to build a brand new revolutionary3D external from scratch.

Hope I didn't steal your thunder xAction. Keep at it, a cube today, the world tomorrow!

[stam]

We made an external for Runtime Revolution using OpenGL a long long time ago. It's GPL source.
See here

That looks amazing - it's quite disheartening this wasn't taken up by LiveCode ltd - this would greatly simplify many tasks.

At some point many years ago i used XOJO and OpenGL to create dynamic heart models from trimesh data generated by analysis software, do in effect display 3D rendered models of beating hearts and it worked well enough. In the back of my mind i had been slowly planning to figure out how to do this in LC, but it looks like a no-go

[xAction]

Oh now I feel silly posting this. But figures after hours of searching for 3D Cube in BASIC I find it when looking for the ZX Spectrum rotate command to draw a 3D sphere. 1980s 3D cube. Warning, turn down your sound, the chiptune is awful.

Now lets see if I can find that rotate command...Oh, it's in a comment. Duh.

[richmond62]

3D-CUBE,BEEBUG
3D-SPITFIRE,BEEBUG
ZOOM,BEEBUG
ARTIST,MRM Software
DISCO LIGHTS,C&VG
XMAS CARD,A&B Computing
BEEB-ART,Quicksilva
PAINTBOX,Acorn User
SUPER PAINTER,Acorn User
PIXEL EDITOR,Acorn User
COLOURSPACE,Llamasoft
CREATIVE GRAPHICS,Acornsoft
DESIGN 7 PLUS,M/B Software
ART STUDIO,Impact

https://stardot.org.uk/forums/viewtopic.php?t=5802

[Xero]

Back in the mid-late 90's (yes, I remember them), there was a 3D engine made for Macromedia Director (yes, before they sold out to Adobe).
I am sure if I could get out my Zip Drive, I could find it somewhere. I am sure it would be easily adaptable to Livecode as the Lingo for MM Dir is extremely similar. Or, I am sure there would be other engines out there that could be adapted. It seems strange that Livecode hasn't got at least a rudimentary one at least in the works. Director ended up having quite a well-functioning one as part of the standard product...
XdM