3D Rotating GUI code problem..

General discussion about LÖVE, Lua, game development, puns, and unicorns.
Post Reply
arundel
Prole
Posts: 31
Joined: Tue Sep 21, 2010 8:49 pm
Location: The Netherlands

3D Rotating GUI code problem..

Post by arundel »

Hey people, I got a problem with the 'quad' shape drawing function..
I took the working Java version from here: http://www.dreamincode.net/code/snippet319.htm
I tried the Java code in the Eclipse Java engine, it works fine there. It's basically a 2D shape with 4 vertices rotating so it looks 3D.
Now I was converting the Java code into Lua and make it work with Löve, but I'm having problems..

workspace is a table like:

Code: Select all

workspace={Size={x,y},Position={x,y,z},Vertices={v1,v2,v3,v4},Angle={x,y}} -- Etc.
Now the problem is I have no clue how to use math.cos and math.sin, so it's glitching badly at the moment.
The shape's vertices fly on the screen in all directions, and the shape shrinks until all the vertices are on a pile!
So, it's a mess as you can see.
Is there any way to fix this?
Thanks for reading. :)

Code: Select all

for i=1,#workspace do
           x_verts = {workspace[i].Vertices.v1.x,workspace[i].Vertices.v2.x,workspace[i].Vertices.v4.x,workspace[i].Vertices.v3.x}; -- Four vertices for a cube
           y_verts = {workspace[i].Vertices.v1.y,workspace[i].Vertices.v2.y,workspace[i].Vertices.v4.y,workspace[i].Vertices.v3.y};
           shape_save = {} --{-48,48,48,-48,48,48,-48,-48}; -- Original shape example
           rotation_pos_x = workspace[i].Angle.x;
           rotation_pos_y = workspace[i].Angle.y;
           chroma_pos = 64; 
		   xpos,ypos=workspace[i].Position.x,workspace[i].Position.y
               -- Reset to original shape
               for index=1,4 do
                    shape_save[index] = x_verts[index]; -- Copy X's
                    shape_save[index+4] = y_verts[index]; -- Copy Y's
			   end
               -- Rotate all the points like so...
               temp_x,temp_y=0,0
               for index=1,4 do
                    -- Rotate the square normally over the y axis in the xyz plane
                    temp_x = x_verts[index]*math.cos(rotation_pos_x)-y_verts[index]*math.sin(rotation_pos_y);
                    temp_y = x_verts[index]*math.sin(rotation_pos_x)+y_verts[index]*math.cos(rotation_pos_y);
                    x_verts[index] = temp_x;
                    y_verts[index] = temp_y;
                    -- And the square rotates to look 3D 2x along the x axis in the xyz plane
                    y_verts[index] = y_verts[index]*math.sin(rotation_pos_y/2);
               end
               -- Add a degree of rotation
               rotation_pos_x = rotation_pos_x+0.0001;
			   rotation_pos_y = rotation_pos_y+0.0001;
               chroma_pos=chroma_pos+1
               if (chroma_pos > 255) then
                    chroma_pos = 64; -- Reset to flash color
               tempcolor = Color(0,0,chroma_pos);
               --[[set cube's/background color here]]
			   end
             for index=1,4 do
                    if (index < 3) then
                         love.graphics.line(x_verts[index]+xpos,y_verts[index]+ypos,x_verts[index+1]+xpos,y_verts[index+1]+ypos);
                    else
                         love.graphics.line(x_verts[index]+xpos,y_verts[index]+ypos,x_verts[1]+xpos,y_verts[1]+ypos);
                    end
             end
			 
workspace[i].Vertices.v1.x,workspace[i].Vertices.v2.x,workspace[i].Vertices.v4.x,workspace[i].Vertices.v3.x=x_verts[1],x_verts[2],x_verts[3],x_verts[4]
workspace[i].Vertices.v1.y,workspace[i].Vertices.v2.y,workspace[i].Vertices.v4.y,workspace[i].Vertices.v3.y=y_verts[1],y_verts[2],y_verts[3],y_verts[4]
workspace[i].Angle.x=rotation_pos_x
workspace[i].Angle.y=rotation_pos_y

love.graphics.quad("line", workspace[i].Vertices.v1.x,workspace[i].Vertices.v1.y,workspace[i].Vertices.v2.x,workspace[i].Vertices.v2.y,workspace[i].Vertices.v3.x,workspace[i].Vertices.v3.y,workspace[i].Vertices.v4.x,workspace[i].Vertices.v4.y)

end

User avatar
kraftman
Party member
Posts: 277
Joined: Sat May 14, 2011 10:18 am

Re: 3D Rotating GUI code problem..

Post by kraftman »

Could you provide the entire code you have?
arundel
Prole
Posts: 31
Joined: Tue Sep 21, 2010 8:49 pm
Location: The Netherlands

Re: 3D Rotating GUI code problem..

Post by arundel »

Ok, but It's not done yet, the basic Gui engine:

Code: Select all

function Color(r2,g2,b2)
return {r=r2,g=g2,b=b2}
end

function Vector3(x2,y2,z2)
return {x=x2,y=y2,z=z2}
end

function Vector2(x2,y2)
return {x=x2,y=y2}
end

function Magnitude2D(vec1,vec2)
return math.sqrt((vec2.x-(vec1.x))^2+(vec2.y-(vec1.y))^2)
end

function love.load()
i=0
--current_mouse={mouse=nil,Position={x=0,y=0}}
workspace={}
mousehold=false
mouse_pos=Vector2(0,0)
mouse_move_rate=1

function Plate3D(sizevec,posvec,color,angle)
--re, gr, bl, alph = love.graphics.getColor( )
--love.graphics.setColor(color.r,color.g,color.b)
plate={Size=sizevec,Position=posvec,Vertices={v1=Vector2(posvec.x-posvec.z/2,posvec.y-posvec.z/2),v2=Vector2((posvec.x+sizevec.x)+posvec.z/2, posvec.y-posvec.z/2),v3=Vector2((posvec.x+sizevec.x)+posvec.z/2, (posvec.y+sizevec.y)+posvec.z/2),v4=Vector2(posvec.x-posvec.z/2, (posvec.y+sizevec.y)+posvec.z/2)},Angle=angle}
table.insert(workspace,plate)
--love.graphics.setColor(re,gr,bl,alph)
return plate;
end
Plate3D(Vector3(50,50),Vector3(400,400,1),Color(0,255,0),Vector3(0,0,0))
end

function DrawLine(x0, y0, x1, y1)
	local pixels={}
   dx = math.abs(x1-x0)
   dy = math.abs(y1-y0) 
   if x0 < x1 then sx = 1 else sx = -1 end
   if y0 < y1 then sy = 1 else sy = -1 end
	err = dx-dy
   while true do
	 local framepixel=love.graphics.point(x0,y0)
     if x0 == x1 and y0 == y1 then break end
     e2 = 2*err
     if e2 > -dy then 
       err = err - dy
       x0 = x0 + sx
     end
     if e2 < dx then 
       err = err + dx
       y0 = y0 + sy 
     end 
   end
return pixels;
end

function Box3D(sizevec,posvec)
x1=love.graphics.line(posvec.x,posvec.y,posvec.x+sizevec.x,posvec.y)
x2=love.graphics.line(posvec.x,posvec.y+sizevec.y,posvec.x+sizevec.x,posvec.y+sizevec.y)
x3=love.graphics.line(posvec.x,posvec.y,posvec.x+sizevec.x,posvec.y)
x4=love.graphics.line(posvec.x,posvec.y+sizevec.y,posvec.x+sizevec.x,posvec.y+sizevec.y)
y1=love.graphics.line(posvec.x,posvec.y,posvec.x,posvec.y+sizevec.y)
y2=love.graphics.line(posvec.x+sizevec.x,posvec.y,posvec.x+sizevec.x,posvec.y+sizevec.y)
y3=love.graphics.line(posvec.x,posvec.y,posvec.x,posvec.y+sizevec.y)
y4=love.graphics.line(posvec.x+sizevec.x,posvec.y,posvec.x+sizevec.x,posvec.y+sizevec.y)
z1=love.graphics.line(posvec.x,posvec.y,posvec.x,posvec.y)
z2=love.graphics.line(posvec.x+sizevec.x,posvec.y,posvec.x+sizevec.x,posvec.y)
z3=love.graphics.line(posvec.x,posvec.y+sizevec.y,posvec.x,posvec.y+sizevec.y)
z4=love.graphics.line(posvec.x+sizevec.x,posvec.y+sizevec.y,posvec.x+sizevec.x,posvec.y+sizevec.y)
box={Size=sizevec,Position=posvec,x1,x2,x3,x4,y1,y2,y3,y4,z1,z2,z3,z4}
table.insert(workspace,box)
return box;
end

function love.update(dt)
function love.mousepressed(x,y,mouse) 
mouse_pos=Vector2(x,y)
if mouse == "r" then 
mousehold=true
end
end
x,y=mouse_pos.x,mouse_pos.y
newx=love.mouse.getX()
newy=love.mouse.getY()

--current_mouse.Position.x,current_mouse.Position.y=x,y
if mousehold then
if newx<x then -- Left
	for i=1,#workspace do
		if Magnitude2D(workspace[i].Vertices.v1,workspace[i].Vertices.v2)<=workspace[i].Size.x and Magnitude2D(workspace[i].Vertices.v3,workspace[i].Vertices.v4)<=workspace[i].Size.x then
			workspace[i].Vertices.v1.x=workspace[i].Vertices.v1.x+(x-newx)*mouse_move_rate
			workspace[i].Vertices.v2.x=workspace[i].Vertices.v2.x-(x-newx)*mouse_move_rate	
			workspace[i].Vertices.v3.x=workspace[i].Vertices.v3.x-(x-newx)*mouse_move_rate
			workspace[i].Vertices.v4.x=workspace[i].Vertices.v4.x+(x-newx)*mouse_move_rate
		else
			oldv1=workspace[i].Vertices.v1.x
			oldv2=workspace[i].Vertices.v2.x
			oldv3=workspace[i].Vertices.v3.x
			oldv4=workspace[i].Vertices.v4.x
			workspace[i].Vertices.v1.x=(workspace[i].Vertices.v1.x+(Magnitude2D(workspace[i].Vertices.v1,workspace[i].Vertices.v2)-workspace[i].Size.x)/2)--workspace[i].Size.x
			workspace[i].Vertices.v2.x=(workspace[i].Vertices.v2.x-(Magnitude2D(workspace[i].Vertices.v1,workspace[i].Vertices.v2)-workspace[i].Size.x)/2)--+workspace[i].Size.x
			workspace[i].Vertices.v3.x=(workspace[i].Vertices.v3.x-(Magnitude2D(workspace[i].Vertices.v3,workspace[i].Vertices.v4)-workspace[i].Size.x)/2)--+workspace[i].Size.x
			workspace[i].Vertices.v4.x=(workspace[i].Vertices.v4.x+(Magnitude2D(workspace[i].Vertices.v3,workspace[i].Vertices.v4)-workspace[i].Size.x)/2)---workspace[i].Size.x

			workspace[i].Vertices.v1.x=oldv2														--workspace[i].Vertices.v1.x=(workspace[i].Vertices.v1.x+(workspace[i].Vertices.v2.x-workspace[i].Vertices.v1.x)/2)-workspace[i].Size.x/2						
			workspace[i].Vertices.v2.x=oldv1														--workspace[i].Vertices.v2.x=(workspace[i].Vertices.v2.x-(workspace[i].Vertices.v2.x-workspace[i].Vertices.v1.x)/2)+workspace[i].Size.x/2					
			workspace[i].Vertices.v3.x=oldv4														--workspace[i].Vertices.v3.x=(workspace[i].Vertices.v3.x-(workspace[i].Vertices.v3.x-workspace[i].Vertices.v4.x)/2)+workspace[i].Size.x/2						
			workspace[i].Vertices.v4.x=oldv3														--workspace[i].Vertices.v4.x=(workspace[i].Vertices.v4.x+(workspace[i].Vertices.v3.x-workspace[i].Vertices.v4.x)/2)-workspace[i].Size.x/2																																																					
		end
	end
elseif newx>x then -- Right

elseif newy<y then -- Up

elseif newy>y then -- Down

end
--love.timer.sleep(1)
end

function love.mousereleased(x,y,mouse) 
if mouse == "r" then 
mousehold=false
end
end

end

function love.draw()
love.graphics.triangle("fill",5,5,200,5,100,100)
--for a,b in pairs(pixels) do
--b=nil
--end
if i>100 then
i=0
end
i=i+1
for i=1,#workspace do








           x_verts = {workspace[i].Vertices.v1.x,workspace[i].Vertices.v2.x,workspace[i].Vertices.v4.x,workspace[i].Vertices.v3.x}; -- Four vertices for a cube
           y_verts = {workspace[i].Vertices.v1.y,workspace[i].Vertices.v2.y,workspace[i].Vertices.v4.y,workspace[i].Vertices.v3.y};
           shape_save = {} --{-48,48,48,-48,48,48,-48,-48}; -- Original shape example
           rotation_pos_x = workspace[i].Angle.x;
           rotation_pos_y = workspace[i].Angle.y;
           chroma_pos = 64; 
		   xpos,ypos=workspace[i].Position.x,workspace[i].Position.y
               -- Reset to original shape
               for index=1,4 do
                    shape_save[index] = x_verts[index]; -- Copy X's
                    shape_save[index+4] = y_verts[index]; -- Copy Y's
			   end
               -- Rotate all the points like so...
               temp_x,temp_y=0,0
               for index=1,4 do
                    -- Rotate the square normally over the y axis in the xyz plane
                    temp_x = x_verts[index]*math.cos(rotation_pos_x)-y_verts[index]*math.sin(rotation_pos_y);
                    temp_y = x_verts[index]*math.sin(rotation_pos_x)+y_verts[index]*math.cos(rotation_pos_y);
                    x_verts[index] = temp_x;
                    y_verts[index] = temp_y;
                    -- And the square rotates to look 3D 2x along the x axis in the xyz plane
                    y_verts[index] = y_verts[index]*math.sin(rotation_pos_y/2);
               end
               -- Add a degree of rotation
               rotation_pos_x = rotation_pos_x+0.0001;
			   rotation_pos_y = rotation_pos_y+0.0001;
               chroma_pos=chroma_pos+1
               if (chroma_pos > 255) then
                    chroma_pos = 64; -- Reset to flash color
               tempcolor = Color(0,0,chroma_pos);
               --[[set cube's/background color here]]
			   end
             for index=1,4 do
                    if (index < 3) then
                         love.graphics.line(x_verts[index]+xpos,y_verts[index]+ypos,x_verts[index+1]+xpos,y_verts[index+1]+ypos);
                    else
                         love.graphics.line(x_verts[index]+xpos,y_verts[index]+ypos,x_verts[1]+xpos,y_verts[1]+ypos);
                    end
             end
			 
workspace[i].Vertices.v1.x,workspace[i].Vertices.v2.x,workspace[i].Vertices.v4.x,workspace[i].Vertices.v3.x=x_verts[1],x_verts[2],x_verts[3],x_verts[4]
workspace[i].Vertices.v1.y,workspace[i].Vertices.v2.y,workspace[i].Vertices.v4.y,workspace[i].Vertices.v3.y=y_verts[1],y_verts[2],y_verts[3],y_verts[4]
workspace[i].Angle.x=rotation_pos_x
workspace[i].Angle.y=rotation_pos_y




love.graphics.quad("line", workspace[i].Vertices.v1.x,workspace[i].Vertices.v1.y,workspace[i].Vertices.v2.x,workspace[i].Vertices.v2.y,workspace[i].Vertices.v3.x,workspace[i].Vertices.v3.y,workspace[i].Vertices.v4.x,workspace[i].Vertices.v4.y)
love.graphics.print(tostring(mousehold).." ,"..tostring(Magnitude2D(workspace[i].Vertices.v3,workspace[i].Vertices.v4)),500,500)
love.graphics.print("v1",workspace[i].Vertices.v1.x,workspace[i].Vertices.v1.y)
love.graphics.print("v2",workspace[i].Vertices.v2.x,workspace[i].Vertices.v2.y)
love.graphics.print("v3",workspace[i].Vertices.v3.x,workspace[i].Vertices.v3.y)
love.graphics.print("v4",workspace[i].Vertices.v4.x,workspace[i].Vertices.v4.y)
end
--pixels2=DrawLine(0,0,700,500+i)
end
arundel
Prole
Posts: 31
Joined: Tue Sep 21, 2010 8:49 pm
Location: The Netherlands

Re: 3D Rotating GUI code problem..

Post by arundel »

Nevermind, I got the working answer! :D

I could give the whole code, but it's a custom engine, so I don't think people would have much use with it, and it's not done.
Though, I could give the algorithm...

Code: Select all

for i=1,#workspace do
         -- x_verts = {workspace[i].Vertices.v1.x,workspace[i].Vertices.v2.x,workspace[i].Vertices.v4.x,workspace[i].Vertices.v3.x}; -- Four vertices for a cube
          --y_verts = {workspace[i].Vertices.v1.y,workspace[i].Vertices.v2.y,workspace[i].Vertices.v4.y,workspace[i].Vertices.v3.y};
			x_verts={50,100,50,100}
			y_verts={100,100,150,150}
			shape_save = {x_verts[1],x_verts[2],x_verts[3],x_verts[4],y_verts[1],y_verts[2],y_verts[3],y_verts[4]} --{-48,48,48,-48,48,48,-48,-48}; -- Original shape example
           rotation_pos_x = workspace[i].Angle.x;
           rotation_pos_y = workspace[i].Angle.y;
           chroma_pos = 64; 
		   xpos,ypos=workspace[i].Position.x,workspace[i].Position.y
               -- Reset to original shape
               for index=1,4 do
                    x_verts[index]=shape_save[index]; -- Copy X's
                    y_verts[index]=shape_save[index+4]; -- Copy Y's
			   end
               -- Rotate all the points like so...
               temp_x,temp_y=0,0
               for index=1,4 do
                    -- Rotate the square normally over the y axis in the xyz plane
                    temp_x = x_verts[index]*math.cos(rotation_pos_x)-y_verts[index]*math.sin(rotation_pos_y);
                    temp_y = x_verts[index]*math.sin(rotation_pos_x)+y_verts[index]*math.cos(rotation_pos_y);
                    x_verts[index] = temp_x;
                    y_verts[index] = temp_y;
                    -- And the square rotates to look 3D 2x along the x axis in the xyz plane
                    y_verts[index] = y_verts[index]*math.sin(rotation_pos_y/2);
               end
               -- Add a degree of rotation 
				rotation_pos_x = rotation_pos_x+0.01;
			    rotation_pos_y = rotation_pos_y+0.01;
               chroma_pos=chroma_pos+1
               if (chroma_pos > 255) then
                    chroma_pos = 64; -- Reset to flash color
               tempcolor = Color(0,0,chroma_pos);
               --[[set cube's/background color here]]
			   end
             for index=1,4 do
                    if (index < 3) then
                        -- love.graphics.line(x_verts[index]+xpos,y_verts[index]+ypos,x_verts[index+1]+xpos,y_verts[index+1]+ypos);
                    else
                       --  love.graphics.line(x_verts[index]+xpos,y_verts[index]+ypos,x_verts[1]+xpos,y_verts[1]+ypos);
                    end
             end
			 
x_verts[1],x_verts[2],x_verts[3],x_verts[4]=x_verts[1]+xpos,x_verts[2]+xpos,x_verts[3]+xpos,x_verts[4]+xpos
y_verts[1],y_verts[2],y_verts[3],y_verts[4]=y_verts[1]+ypos,y_verts[2]+ypos,y_verts[3]+ypos,y_verts[4]+ypos
workspace[i].Vertices.v1.x,workspace[i].Vertices.v2.x,workspace[i].Vertices.v4.x,workspace[i].Vertices.v3.x=x_verts[1],x_verts[2],x_verts[3],x_verts[4]
workspace[i].Vertices.v1.y,workspace[i].Vertices.v2.y,workspace[i].Vertices.v4.y,workspace[i].Vertices.v3.y=y_verts[1],y_verts[2],y_verts[3],y_verts[4]
workspace[i].Angle.x=rotation_pos_x
workspace[i].Angle.y=rotation_pos_y
workspace[i].Position.x=workspace[i].Position.x+0.001
workspace[i].Position.y=workspace[i].Position.y+0.001


love.graphics.quad("line", workspace[i].Vertices.v1.x,workspace[i].Vertices.v1.y,workspace[i].Vertices.v2.x,workspace[i].Vertices.v2.y,workspace[i].Vertices.v3.x,workspace[i].Vertices.v3.y,workspace[i].Vertices.v4.x,workspace[i].Vertices.v4.y)

end

I'm not going to comment on the code, as I'm kinda busy. Anyway, feel free to learn from it I guess.. :)
Last edited by arundel on Mon Jul 25, 2011 11:20 am, edited 1 time in total.
User avatar
thelinx
The Strongest
Posts: 857
Joined: Fri Sep 26, 2008 3:56 pm
Location: Sweden

Re: 3D Rotating GUI code problem..

Post by thelinx »

Please, do share your solution to any internet dwellers of the future.

Also, don't double post.
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Bing [Bot], Semrush [Bot] and 8 guests