Publish your showcase on spiderbasic.com

Created a nice software using SpiderBasic ? Post you link here !
Fred
Site Admin
Posts: 1327
Joined: Mon Feb 24, 2014 10:51 am

Publish your showcase on spiderbasic.com

Post by Fred »

Hi there,

We are working on the new SpiderBasic website, and it does look good. We want to add a new "showcase" section, so we can embed SpiderBasic apps or examples, so it can be tested directly from the website. If you want to help with this section, just send us your example (including source code and data) ready to go to the server and we will put it in this section with your name and a link to your products.

Thanks for your help !

The v1.0 is near :)

Fred
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: Publish your showcase on spiderbasic.com

Post by eddy »

  • how many lines ?
  • with or without server php code ?
:roll:
Fred
Site Admin
Posts: 1327
Joined: Mon Feb 24, 2014 10:51 am

Re: Publish your showcase on spiderbasic.com

Post by Fred »

The code can be any size. You can put the php code as well, but it would be better if it's a client only showcase..
User avatar
MrTAToad
Posts: 291
Joined: Sun Apr 20, 2014 11:43 am
Location: Chichester, England
Contact:

Re: Publish your showcase on spiderbasic.com

Post by MrTAToad »

Where do we send the code ?
Fred
Site Admin
Posts: 1327
Joined: Mon Feb 24, 2014 10:51 am

Re: Publish your showcase on spiderbasic.com

Post by Fred »

You can publish it in this thread as it is meant to made public anyway (if it has data or is too big, just use a .zip).
User avatar
MrTAToad
Posts: 291
Joined: Sun Apr 20, 2014 11:43 am
Location: Chichester, England
Contact:

Re: Publish your showcase on spiderbasic.com

Post by MrTAToad »

Okay!

Here is my pseudo 3D road code. It was converted from my GLBasic code, which in turn was converted from the Javascript code by CodeIncomplete :

Code: Select all

#PLAYER_STRAIGHT                      =       0
#PLAYER_LEFT                          =       1
#PLAYER_RIGHT                         =       2
#PLAYER_UPHILL_STRAIGHT								=       3
#PLAYER_UPHILL_LEFT            				=       4
#PLAYER_UPHILL_RIGHT           				=       5

#ROAD_LENGTH_NONE                     =       0
#ROAD_LENGTH_SHORT                    =       25
#ROAD_LENGTH_MEDIUM                   =       50
#ROAD_LENGTH_LONG                     =       100

#ROAD_HILL_NONE                       =       0
#ROAD_HILL_LOW                        =       20
#ROAD_HILL_MEDIUM                     =       40
#ROAD_HILL_HIGH                       =       60

#ROAD_CURVE_NONE                      =       0
#ROAD_CURVE_EASY                      =       2
#ROAD_CURVE_MEDIUM                    =       4
#ROAD_CURVE_HARD                      =       6

#FRAMERATE		=	75
#SCREENWIDTH	=	800
#SCREENHEIGHT	=	600

Structure Point
  x.f
  y.f
  angle.f
  colour.l
EndStructure

Structure tAppTime
	AppTime_UPS.f
	AppTime_Iterator.f
	AppTime_CurrentTime.f
	AppTime_PauseStart.b
	AppTime_Speed.f
	AppTime_DesiredLoopTime.f
	AppTime_LastUpdateTime.f
	AppTime_LastUPSTime.f
	AppTime_DesiredFrequency.b
EndStructure

Declare TAppTime_Initialise(*appTime.tAppTime,frameRate.b=75)
Declare TAppTime_Update(*appTime.tAppTime)

Structure tGraphic
	id.l
	index.l
	orgXSize.l
	orgYSize.l
	currentXSize.l
	currentYSize.l
	xOffset.f
	yOffset.f
	zOffset.f
	speed.f
	percent.f
	moveSpeed.f
EndStructure
	
Structure tScreen
	scale.f
	x.f
	y.f
	w.f
EndStructure

Structure tCamera
	x.f
	y.f
	z.f
EndStructure

Structure tWorld
	x.f
	y.f
	z.f
EndStructure

Structure tColour
	rumble.l
	road.l
	grass.l
	lane.l
EndStructure

Structure tPart
	world.tWorld
	camera.tCamera
	screen.tScreen
	rumbleWidth.f
EndStructure

Structure tSegment
	index.l
	colour.tColour
	p1.tPart
	p2.tPart
	curve.f
	rumbleWidth.f
	clip.f
	
	List staticGraphics.tGraphic()
	List moveGraphics.tGraphic()
EndStructure

Declare RenderFrame()
Declare render()
Declare resetRoad()
Declare addSegment(curve.f,y.f)
Declare segment(width.l,lanes.l,fog.f,*segment.tSegment)
Declare update(dt.f)
Declare.f increase(start.f,increment.f,maxV.f)
Declare.f accelerate(v.f,accel.f,dt.f)
Declare Min(a,b)
Declare Max(a,b)
Declare.f limit(value.f,minV.f,maxV.f)
Declare addRoad(enter.l,hold.l,leave.l,curve.f,y.f)
Declare addStraight(num.l=25)
Declare addCurve(num.l,curve.f)
Declare addHill(num.l, height.l) 
Declare easeIn(a.f,b.f,percent.f)
Declare easeOut(a.f,b.f,percent.f)
Declare easeInOut(a.f,b.f,percent.f)
Declare.f percentRemaining(n.l,total.l)
Declare.f interpolate(a.f,b.f,percent.f)
Declare addStaticGraphic(roadIndex.l,xSize.l,ySize.l,xOffset.f,yOffset.f=0.0)
Declare renderStaticGraphic(screenWidth.l,screenHeight.l,xSize.l,ySize.l,resolution.l,roadWidth.l,scale.f,destX.f,destY.f,offsetX.f,offsetY.f,clipY.f)

Global Dim segments.tSegment(0)
Global trackLength.l
Global segmentLength.l	=	200
Global rumbleLength.l = 3
Global width.l	= #SCREENWIDTH
Global height.l	=	#SCREENHEIGHT
Global position.f	=	0.0
Global drawDistance.l	 =	300
Global cameraDepth.f	   =	0.0
Global cameraHeight.f	 =	1500.0
Global roadWidth.f		   =	2000.0
Global playerX.f			   =	0.0
Global fieldOfView.f    = 45.0
Global speed.f          = 0.0
Global playerX.f          = 0.0
Global lanes.l          = 3
Global playerZ.f        = 0.0
Global DARK_ROAD.tColour
Global LIGHT_ROAD.tColour
Global Terrain.l
Global _screen.l
Global SPRITES_SCALE.F

Define appTime.TAppTime
Define now.f,last.f,gdt.f,stp.f

; InitSprite()
; InitKeyboard()

DARK_ROAD\road=6908265
DARK_ROAD\grass=39424
DARK_ROAD\rumble=12303291
DARK_ROAD\lane=0

LIGHT_ROAD\road=7039851
LIGHT_ROAD\grass=1092112
LIGHT_ROAD\rumble=5592405
LIGHT_ROAD\lane=13421772

cameraDepth=1.0 / Tan(Radian(fieldOfView/2.0)) 
playerZ=cameraHeight * cameraDepth

now=0.0
last=0.0
gdt=0.0
stp=0.025

	Procedure RenderFrame()  	
		If StartDrawing(SpriteOutput(_screen))
			Box(0,0,width-1,height-1,0)
			
			render()
			
			StopDrawing()
			
			DisplaySprite(_screen,0,0)
			
			
			FlipBuffers()
			
			update(TAppTime_Update(appTime))
			
		EndIf
  EndProcedure
  
Procedure resetRoad()
  Dim segments.tSegment(0)
  
  addStraight(50)
	addCurve(25,#ROAD_CURVE_MEDIUM)
  addHill(25,#ROAD_HILL_HIGH)
  addCurve(25,#ROAD_CURVE_EASY)
  addStraight(50)
  addHill(25,-#ROAD_HILL_LOW)
  addHill(25,#ROAD_HILL_MEDIUM)
;  addHill(25,-#ROAD_HILL_HIGH)
;  addCurve(25,-#ROAD_CURVE_MEDIUM)
;  addCurve(25,#ROAD_CURVE_HARD)
;  addHill(25,#ROAD_HILL_HIGH)
;  addHill(25,#ROAD_HILL_HIGH)
;  addHill(25,-#ROAD_HILL_HIGH)
;  addStraight(10)
;  addHill(25,-#ROAD_HILL_HIGH)
;  addStraight(100)
;  addCurve(25,#ROAD_CURVE_HARD)
;  addCurve(25,#ROAD_CURVE_HARD)
;  addCurve(25,#ROAD_CURVE_HARD)
;  addHill(100,-#ROAD_HILL_HIGH)
;  addHill(200,#ROAD_HILL_HIGH)
;  addHill(10,#ROAD_HILL_HIGH)
;  addHill(15,#ROAD_HILL_HIGH)
;  addHill(30,-#ROAD_HILL_HIGH)
;  addStraight(100)

	addStaticGraphic(20,32,32,-1.0,0.0)
	addStaticGraphic(40,32,32,-1.0,0.0)
	addStaticGraphic(60,32,32,-1.0,0.0)
	addStaticGraphic(80,32,32,-1.0,0.0)
	addStaticGraphic(100,32,32,-1.0,0.0)
	addStaticGraphic(120,32,32,-1.0,0.0)
	addStaticGraphic(140,32,32,-1.0,0.0)
	addStaticGraphic(160,32,32,-1.0,0.0)
	
	addStaticGraphic(180,32,32,-1.0,0.0)
	addStaticGraphic(200,32,32,-1.0,0.0)
	addStaticGraphic(220,32,32,-1.0,0.0)
	addStaticGraphic(240,32,32,-1.0,0.0)
	addStaticGraphic(260,32,32,-1.0,0.0)
	addStaticGraphic(300,32,32,-1.0,0.0)
	addStaticGraphic(400,32,32,-1.0,0.0)
	addStaticGraphic(500,32,32,-1.0,0.0)
		
  trackLength=ArraySize(segments())*segmentLength  
EndProcedure

Procedure addStaticGraphic(roadIndex.l,xSize.l,ySize.l,xOffset.f,yOffset.f=0.0)
	Define *graphic.tGraphic
	
	*graphic=AddElement(segments(roadIndex)\staticGraphics())
	If *graphic<>#NUL
		*graphic\id=-1
		*graphic\orgXSize=xSize
		*graphic\orgYSize=ySize
		*graphic\currentXSize=*graphic\orgXSize
		*graphic\currentYSize=*graphic\orgYSize
		*graphic\xOffset=xOffset
		*graphic\yOffset=yOffset
		*graphic\zOffset=roadIndex*segmentLength
		*graphic\percent=0.0
		*graphic\index=0
		*graphic\moveSpeed=0.0
		Debug "Added"
	EndIf
EndProcedure
		
Procedure.f lastY()
  Define index.l
  
  index=ArraySize(segments()) 
  If index<=0
    ProcedureReturn 0.0
  Else    
    ProcedureReturn segments(index-1)\p2\world\y
  EndIf
EndProcedure

Procedure addSegment(curve.f,y.f)
	Define n.l
	Define prevY.f
	
	prevY=lastY()
	n=ArraySize(segments())
	ReDim segments.tSegment(n+1)
	
	Debug "Array count : "+n
	
	NewList segments(n)\staticGraphics()
	NewList segments(n)\moveGraphics()
	
  segments(n)\curve=curve
	segments(n)\index=n
	segments(n)\p1\world\x=0.0
	segments(n)\p1\world\y=prevY
	segments(n)\p1\world\z=n*segmentLength		
	segments(n)\p1\camera\x=0.0
	segments(n)\p1\camera\y=0.0
	segments(n)\p1\camera\z=0.0
	
	segments(n)\p2\world\x=0.0
	segments(n)\p2\world\y=y
	segments(n)\p2\world\z=(n+1)*segmentLength
	segments(n)\p2\camera\x=0.0
	segments(n)\p2\camera\y=0.0
	segments(n)\p2\camera\z=0.0
	
	segments(n)\rumbleWidth=2
	
	If n % 2
		segments(n)\colour=LIGHT_ROAD
	Else
		segments(n)\colour=DARK_ROAD
	EndIf
	
	segments(n)\colour\lane=RGB(255,255,255)	
EndProcedure

Procedure findSegment(z.f,*store.tSegment)
  Define index.l
  
  ; Debug "Z:"+StrF(z,4)+" "+Str(segmentLength)+" "+StrF(z/segmentLength,4)
  index=Round(z/segmentLength,#PB_Round_Down)
  CopyStructure(segments(index),*store,tSegment)
EndProcedure
	
Procedure project(*p.tPart,cameraX.f,cameraY.f,cameraZ.f,cameraDepth.f,width.l,height.l,roadWidth.l,rumbleWidth.l)
		*p\camera\x=*p\world\x-cameraX
		*p\camera\y=*p\world\y-cameraY
		*p\camera\z=*p\world\z-cameraZ
		
		If *p\camera\z<>0.0
			*p\screen\scale=cameraDepth/*p\camera\z
		Else
			*p\screen\scale=0.0
		EndIf
		
		*p\screen\x=(width/2.0)+((*p\screen\scale* *p\camera\x*width)/2.0)
		*p\screen\y=(height/2.0)-((*p\screen\scale* *p\camera\y*height)/2.0)
		*p\screen\w=*p\screen\scale*roadWidth*width/2.0
		*p\rumbleWidth=*p\screen\w/rumbleWidth
;		Debug "Screen X : "+*p\screen\x
;		Debug "Screen Y : "+*p\screen\y
	EndProcedure
	
	Procedure render()
	  Define baseSegment.tSegment
	  Define playerSegment.tSegment
	  Define basePercent.f
		Define maxy.l,n.l,which.l,index.l
		Define segment.tSegment
		Define x.f,dx.f
		Define playerY.f
		Define playerPercent.f
		Define graphicScale.f,graphicX.f,graphicY.f
		      
      maxy=height
      findSegment(Int(position),@baseSegment)
		  basePercent=percentRemaining(position, segmentLength)
		  findSegment(position+playerZ,@playerSegment)
		  playerPercent=percentRemaining(position+playerZ,segmentLength)
		  playerY=interpolate(playerSegment\p1\world\y,playerSegment\p2\world\y,playerPercent)
		  
	;	  Debug "Player Y : "
		;  Debug playerY
		 ; Debug "Player % : "
		  ;Debug playerPercent
		  ;Debug "P2 : "
		  ;Debug playerSegment\p1\world\y
		  ;Debug playerSegment\p2\world\y
		  ;Debug playerSegment\index 
		  Debug "P1 Y : "+StrF(playerSegment\p1\world\y,4)+" P2 Y : "+StrF(playerSegment\p2\world\y,4)
		  Debug "Player Percent : "+StrF(playerPercent,4)+" Y : "+StrF(playerY,4)+" Index : "+Str(playerSegment\index)
		  
			x=0.0
			dx=-baseSegment\curve*basePercent
			
			For n=0 To drawDistance-1
				index=(baseSegment\index+n) % ArraySize(segments())
				segment=segments(index)
				;Debug "Current index : "+*segment\index				
				
				segment\clip=maxy
				
				project(@segment\p1,(playerX*roadWidth)-x,playerY+cameraHeight,position,cameraDepth,width,height,roadWidth,segment\rumbleWidth)
				project(@segment\p2,(playerX*roadWidth)-x-dx,playerY+cameraHeight,position,cameraDepth,width,height,roadWidth,segment\rumbleWidth)
				
				segments(index)\clip=maxy
				segments(index)\p1\screen=segment\p1\screen
				
				x+dx
				dx+segment\curve
				
				If segment\p1\camera\z<=cameraDepth Or segment\p2\screen\y>=segment\p1\screen\y Or segment\p2\screen\y>=maxy
					Continue
				Else
					segment(width,lanes,1.0,segment)
				EndIf
				
				maxy=segment\p1\screen\y
			Next
			
			; Display objects
			; Static (roadside) ones
			
			For n=drawDistance-1 To 0 Step -1
				segment=segments((baseSegment\index+n) % ArraySize(segments()))
				
				ForEach segment\staticGraphics()
					graphicScale=segment\p1\screen\scale
					graphicX=segment\p1\screen\x+(graphicScale * segment\staticGraphics()\xOffset * roadWidth * width / 2.0)
					graphicY=segment\p1\screen\y+(graphicScale * segment\staticGraphics()\yOffset * roadWidth / 2.0)
					
					renderStaticGraphic(width,height,segment\staticGraphics()\orgXSize,segment\staticGraphics()\orgYSize,1,roadWidth,graphicScale,graphicX,graphicY,-0.5,-1.0,segment\clip)
				Next
			Next
			
				
	EndProcedure
	
	Procedure renderStaticGraphic(screenWidth.l,screenHeight.l,xSize.l,ySize.l,resolution.l,roadWidth.l,scale.f,destX.f,destY.f,offsetX.f,offsetY.f,clipY.f)
		Define destW.f,destH.f,clipH.f
				
		destW=(xSize*scale*screenWidth/2.0)*(SPRITES_SCALE*roadWidth)
		destH=(ySize*scale*screenWidth/2.0)*(SPRITES_SCALE*roadWidth)
		
		destX+(destW*offsetX)
		destY+(destH*offsetY)
		
		If clipY<>0.0
			clipH=Max(0,destY-destH-clipY)
		Else
			clipH=0.0
		EndIf
		
		destH-clipH

		If destW>0.0 And destH>0
			Box(destX,destY,destW,destH,RGB(0,255,0))
		EndIf
	EndProcedure
	
	Procedure.f rumbleWidth(projectedRoadWidth.l,lanes.l)
		ProcedureReturn projectedRoadWidth/MAX(6,2*lanes)
	EndProcedure
	
	Procedure.f laneMarkerWidth(projectedRoadWidth.l,lanes.l)
		ProcedureReturn projectedRoadWidth/MAX(32,8*lanes)
	EndProcedure
	
	Procedure.f percentRemaining(n.l,total.l)
	  ProcedureReturn Mod(n,total)/total
	EndProcedure
	
	Procedure.f interpolate(a.f,b.f,percent.f)
	  ProcedureReturn a+(b-a)*percent
	EndProcedure
	  
	Procedure addRoad(enter.l,hold.l,leave.l,curve.f,y.f)
	  Define n.l
	  Define startY.f,endY.f
	  Define total.l
	  
	  startY=lastY()
	  endY=startY+(Int(y)*segmentLength)
	  total=enter+hold+leave
      
	  For n=0 To enter-1
	    addSegment(easeIn(0,curve,n/enter),easeInOut(startY,endY,n/total))
	  Next
	  
	  For n=0 To hold-1
	    addSegment(curve,easeInOut(startY,endY,(enter+n)/total))
	  Next
	  
	  For n=0 To leave-1
	    addSegment(easeInOut(curve,0,n/leave),easeInOut(startY,endY,(enter+hold+n)/total))
	  Next
	EndProcedure
	
	Procedure easeIn(a.f,b.f,percent.f)
	  ProcedureReturn a+(b-a)*Pow(percent,2)
	EndProcedure
	
	Procedure easeOut(a.f,b.f,percent.f)
	  ProcedureReturn a+(b-a)*(1.0-Pow(1.0-percent,2))
	EndProcedure
	
	Procedure easeInOut(a.f,b.f,percent.f)
	  ProcedureReturn a+(b-a)*((-Cos(percent*#PI)/2)+0.5)
	EndProcedure
  
	Procedure addStraight(num.l=25)
	  addRoad(num,num,num,0.0,0.0)
	EndProcedure
	  
	Procedure addCurve(num.l,curve.f)
	  addRoad(num,num,num,curve,0.0)
	EndProcedure
	
	Procedure addHill(num.l, height.l) 
	  addRoad(num,num,num,0,height)
	EndProcedure
      
	Procedure polygon(x1.f,y1.f,x2.f,y2.f,x3.f,y3.f,x4.f,y4.f,colour.l,type.l)		
;	  If type = 1
    ;TransformSprite(Terrain, x4, y4, 1, x3, y3, 1, x2, y2, 1, x1, y1, 1)
  ;   ElseIf type = 2
   ;    TransformSprite(Terrain, x3, y3, 1, x4, y4, 1, x1, y1, 1, x2, y2, 1)
    ; EndIf
    ;DisplayTransparentSprite(Terrain, 0, 0, 255, colour)
		LineXY(x1,y1,x2,y2,colour)
		LineXY(x2,y2,x3,y3,colour)
		LineXY(x3,y3,x4,y4,colour)
		LineXY(x4,y4,x1,y2,colour)
    ; DisplaySprite(Terrain,x1,y1)
	EndProcedure
	
	Procedure segment(width.l,lanes.l,fog.f,*segment.tSegment) 
	  
    polygon(*segment\p1\screen\x-*segment\p1\screen\w-*segment\p1\rumbleWidth, *segment\p1\screen\y, *segment\p1\screen\x-*segment\p1\screen\w, *segment\p1\screen\y, *segment\p2\screen\x-*segment\p2\screen\w, *segment\p2\screen\y, *segment\p2\screen\x-*segment\p2\screen\w-*segment\p2\rumbleWidth, *segment\p2\screen\y, *segment\colour\rumble, 1)
    polygon(*segment\p1\screen\x+*segment\p1\screen\w+*segment\p1\rumbleWidth, *segment\p1\screen\y, *segment\p1\screen\x+*segment\p1\screen\w, *segment\p1\screen\y, *segment\p2\screen\x+*segment\p2\screen\w, *segment\p2\screen\y, *segment\p2\screen\x+*segment\p2\screen\w+*segment\p2\rumbleWidth, *segment\p2\screen\y, *segment\colour\rumble, 2)
    polygon(*segment\p1\screen\x-*segment\p1\screen\w, *segment\p1\screen\y, *segment\p1\screen\x+*segment\p1\screen\w, *segment\p1\screen\y, *segment\p2\screen\x+*segment\p2\screen\w, *segment\p2\screen\y, *segment\p2\screen\x-*segment\p2\screen\w, *segment\p2\screen\y, *segment\colour\road, 1)
;    Box(0,*segment\p2\screen\y,width,*segment\p1\screen\y-*segment\p2\screen\y,*segment\colour\grass)
  EndProcedure
  
  Procedure update(dt.f)
    position=increase(position,speed,trackLength)
    
    speed+accelerate(speed,45.0,dt)
    speed=limit(speed,0.0,100.0)
  EndProcedure
  
  Procedure Min(a,b)
    If a<b
      ProcedureReturn a
    Else
      ProcedureReturn b
    EndIf
  EndProcedure
  
  Procedure Max(a,b)
    If a>b
      ProcedureReturn a
    Else
      ProcedureReturn b
    EndIf
  EndProcedure
  
  Procedure.f increase(start.f,increment.f,maxV.f)
    Define result.f
    
    result=start+increment
    While result>=maxV
      result-maxV
    Wend
    
    While result<0
      result+maxV
    Wend
    
    ProcedureReturn result
  EndProcedure
  
  Procedure.f accelerate(v.f,accel.f,dt.f)
    ProcedureReturn v+(accel*dt)
  EndProcedure
  
  Procedure.f limit(value.f,minV.f,maxV.f)
    ProcedureReturn Max(minV,Min(value,maxV))
  EndProcedure  
  
  Procedure TAppTime_Initialise(*appTime.tAppTime,frameRate.b=75)
	Debug "Initialising frame rate to "+frameRate
	*appTime\AppTime_UPS=0.0
	*appTime\AppTime_Iterator=0.0
	*appTime\AppTime_CurrentTime=0.0
	*appTime\AppTime_PauseStart=0.0
	*appTime\AppTime_Speed=1.0
	*appTime\AppTime_LastUpdateTime=0.0
	*appTime\AppTime_LastUPSTime=0.0
	*appTime\AppTime_DesiredFrequency=frameRate
	*appTime\AppTime_DesiredLoopTime=1000.0/(*appTime\AppTime_DesiredFrequency*1.0)	
EndProcedure

Procedure TAppTime_Update(*appTime.tAppTime)
	Define elapsed.f
	Define time.f
	
	If *appTime\AppTime_PauseStart=#True 
			ProcedureReturn 0.0
	EndIf

	time=ElapsedMilliseconds()

	If *appTime\AppTime_LastUpdateTime=0.0
			*appTime\AppTime_Speed=1.0
			*appTime\AppTime_LastUPSTime=time
	Else
			elapsed=time-*appTime\AppTime_LastUpdateTime
			If elapsed=0.0
				elapsed=1.0
				; Delay(1)
				time=time+1.0
			EndIf

			*appTime\AppTime_Speed=elapsed/*appTime\AppTime_DesiredLoopTime
	EndIf
		
	*appTime\AppTime_LastUpdateTime=time
	*appTime\AppTime_CurrentTime=time

	*appTime\AppTime_Iterator=*appTime\AppTime_Iterator+1.0 

	If *appTime\AppTime_CurrentTime-*appTime\AppTime_LastUPSTime>=1000.0
			*appTime\AppTime_UPS=*appTime\AppTime_Iterator/((*appTime\AppTime_CurrentTime-*appTime\AppTime_LastUPSTime)/1000)
			*appTime\AppTime_LastUPSTime=*appTime\AppTime_CurrentTime
			*appTime\AppTime_Iterator=0
	EndIf

	ProcedureReturn *appTime\AppTime_Speed	
EndProcedure

Debug "Initialising"

TAppTime_Initialise(appTime,#FRAMERATE)

SPRITES_SCALE = 0.3 * (1/80)

SetFrameRate(#FRAMERATE)

If OpenScreen(width,height,32,"Pseudo 3D Test 1")
	Terrain = CreateSprite(#PB_Any, 16, 16)
  StartDrawing(SpriteOutput(Terrain))
  Box(0, 0, 15, 15,RGB(255,0,0))
  StopDrawing()
  
  
  
  _screen=CreateSprite(#PB_Any,width,height)
		Debug "Setting up"
		resetRoad()
		Debug "Finished setting up"
					
		Debug "Binding"
		BindEvent(#PB_Event_RenderFrame,@RenderFrame())
		
		FlipBuffers()
		Debug "Flipping 1"
		Debug "Flipping 2"

Else
	Debug "OpenScreen failed"
EndIf
Adjust the drawDistance variable value to change how far everything is drawn, and thus the overall speed - 300 is rather too much at the moment - it should be around 100
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: Publish your showcase on spiderbasic.com

Post by eddy »

I tried to make a fancy demo with HTML5/CSS3 features
You can change the video Id if you have a better video without annotations. :geek:

Code: Select all

; ******************************
; Plugins
; ******************************

Macro InitPlugins(IsInitialized=#True) ; internal functions
  CompilerIf IsInitialized
    !"undefined"==typeof window.SpiderPlugins&&(window.SpiderPlugins={extensions:{},paths:{},names:[]})
  CompilerElse 
    !window.SpiderPlugins={extensions:{},paths:{},names:[]};
  CompilerEndIf   
EndMacro

Procedure DeclareHeaderCSS(css.s)
  !$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', v_css) );
EndProcedure

Procedure DeclarePlugin(Plugin.s, Path.s, IsUsed=#True)
  InitPlugins()
  !,window.SpiderPlugins.paths[v_plugin]=v_path
  !,v_isused && window.SpiderPlugins.names.push(v_plugin);
EndProcedure

Procedure UsePlugins(*FunctionUsingPlugins, EnforceDefine=#False)  
  !var cfg=$.extend({ enforceDefine: v_enforcedefine, paths: window.SpiderPlugins.paths }, window.SpiderPlugins.extensions);
  !requirejs.config(cfg);
  !require(window.SpiderPlugins.names, p_functionusingplugins);  
  InitPlugins(#False)
EndProcedure

; ********************
; JSON Shorthand
; ********************
  
Macro Json_OpenObject
  !{
  :
EndMacro
Macro Json_CloseObject
  !},  
EndMacro

Macro Json_OpenArray
  ![
  :
EndMacro
Macro Json_CloseArray
  !],  
EndMacro

Macro Json_Member(member)
  !member:
  : 
EndMacro
Macro Json_Value(value)
  !value,
  : 
EndMacro
Macro Json_Member_Value(member, value)
  Json_Member(member)
  Json_Value(value)
EndMacro
Macro Json_Member_OpenObject(member)
  Json_Member(member)
  Json_OpenObject
EndMacro
Macro Json_Member_OpenArray(member)
  Json_Member(member)
  Json_OpenArray
EndMacro

Macro Json_OpenVariable(v)
  !v={
  :
EndMacro
Macro Json_CloseVariable
  !};
  :
EndMacro

CompilerIf #PB_Compiler_IsMainFile  
  ; *************************************
  ; EXAMPLE - Background Youtube video
  ; *************************************
  
  Procedure CreateBackgroundVideo(YoutubeVideoId.s, IsLooping=#True, IsMute=#True)
    !$('<div class="container" />').appendTo('body').tubular({videoId: v_youtubevideoid, repeat:v_islooping, mute:v_ismute});
    !setTimeout(function(){ 
    ;!   $('#tubular-container iframe').attr('src',$('#tubular-container iframe').attr('src')+'&iv_load_policy=3'); // remove annotation(s)
    !   $('#tubular-container,.container').addClass('fadeIn')
    !}, 200);
  EndProcedure
  
  Procedure GenerateWebsiteCSS(Absurd)
    Protected dark_color.s = "rgba(0,0,0,.3)";
    !var css = v_absurd.add({
    Json_Member_OpenObject("a:link, a:visited") Json_Member_Value("color","orange") Json_CloseObject
    Json_Member_OpenObject("a:hover") Json_Member_Value("color","yellow") Json_Member_Value("transition","1s color") Json_CloseObject
    Json_Member_OpenObject("body")
      Json_Member_Value("bg","white")
      Json_Member_Value("fz","20px")
      Json_Member_Value("lh","24px")
      Json_Member_Value("fontFamily","Helvetica, Arial, sans-serif")
      Json_Member_Value("color","white")
      Json_Member_OpenObject("#tubular-container,.container")
        Json_Member_Value("opacity",0)
        Json_Member_OpenObject("&.fadeIn")
          Json_Member_Value("opacity",1)
          Json_Member_Value("transition","1s opacity") 
          Json_Member_Value("transitionDelay","1s") 
        Json_CloseObject
      Json_CloseObject 
      Json_Member_OpenObject(".container")
        Json_Member_Value("paddingTop","30px")
        Json_Member_Value("marginLeft","auto")
        Json_Member_Value("marginRight","auto")
        Json_Member_Value("width","800px")
        Json_Member_OpenObject("header")
          Json_Member_Value("position","relative")
          Json_Member_OpenObject("nav.player")    
            Json_Member_Value("gradient","rgba(0,0,0,.5)/rgba(0,0,0,.5) 10%/rgba(255,255,255,.2) 70%/rgba(255,255,255,.2)")
            Json_Member_Value("size","80px/30px")
            Json_Member_Value("margin","3px")
            Json_Member_Value("border-radius","6px")
            Json_Member_Value("position","absolute")
            Json_Member_Value("right",0)
            Json_Member_Value("bottom",0)
            Json_Member_Value("display","flex")
            Json_Member_Value("alignItems","center")
            Json_Member_Value("justifyContent","space-around")
            ;player button animation
            Json_Member_OpenObject("a")    
              Json_Member_Value("color","gray")
              Json_Member_Value("textShadow","1px 1px 2px #000000")              
              Json_Member_OpenObject("&:hover")
                Json_Member_Value("color","white")
                Json_Member_Value("transition","0.2s color")
              Json_CloseObject
              Json_Member_OpenObject("&:active")
                Json_Member_Value("color","red")
                Json_Member_Value("position","relative")
                Json_Member_Value("left","2px")
                Json_Member_Value("top","2px")
              Json_CloseObject
            Json_CloseObject                  
          Json_CloseObject                        
        Json_CloseObject
        Json_Member_OpenObject("section")
          Json_Member_Value("marginTop","15px")
          Json_Member_Value("marginBottom","15px")
          Json_Member_Value("display","flex")
          Json_Member_Value("flexFlow","row nowrap")
          Json_Member_OpenObject("aside")
            Json_Member_Value("flex","0 1 200px")
            Json_Member_Value("marginRight","15px")
            Json_Member_OpenObject("nav")
              Json_Member_Value("display","flex")
              Json_Member_Value("flexFlow","column nowrap")
              Json_Member_Value("justifyContent","space-between")
              ;menu button animation
              Json_Member_OpenObject("a")
                Json_Member_Value("color","white")
                Json_Member_Value("marginBottom","5px")
                Json_Member_Value("textDecoration","none")
                Json_Member_Value("borderLeft","0px solid black")
                Json_Member_Value("transition","0.2s border-left")
                Json_Member_OpenObject("&:hover")
                  Json_Member_Value("borderLeft","10px solid red")
                  Json_Member_Value("transition","0.2s border-left")
                Json_CloseObject
              Json_CloseObject
            Json_CloseObject
          Json_CloseObject
          Json_Member_OpenObject("article")
            Json_Member_Value("flex","1 0 auto")
          Json_CloseObject
        Json_CloseObject
      Json_CloseObject
      Json_Member_OpenObject(".blackbox")
        Json_Member_Value("bg", v_dark_color)
        Json_Member_Value("pad", "10px")
      Json_CloseObject
      Json_Member_OpenObject(".shadow")
        Json_Member_Value("textShadow","5px 5px 6px #000000")
      Json_CloseObject
    Json_CloseObject
    !}).compile();
    !$('<style />').html(css).appendTo('head');
  EndProcedure
  
  Procedure GenerateWebsiteHTML(Absurd)
    !var html = v_absurd.morph('html').add({
    Json_Member_OpenObject("header.blackbox")
      Json_Member_Value("h1.shadow","Fullscreen Background Video")
      Json_Member_OpenObject("nav.player")
        Json_Member_Value("a[href='#Play' class='tubular-play' title='Play']","<i class='fa fa-play'></i>")
        Json_Member_Value("a[href='#Pause' class='tubular-pause' title='Pause']","<i class='fa fa-pause'></i>")
      Json_CloseObject      
    Json_CloseObject
    Json_Member_OpenObject("section")
      Json_Member_OpenObject("aside")
        Json_Member_OpenArray("nav")
          Json_OpenObject Json_Member_Value("a.blackbox[href='#Home']","<i class='fa fa-home'></i> Home") Json_CloseObject
          Json_OpenObject Json_Member_Value("a.blackbox[href='#Projects']","<i class='fa fa-git'></i> Projects") Json_CloseObject
          Json_OpenObject Json_Member_Value("a.blackbox[href='#Downloads']","<i class='fa fa-download'></i> Downloads") Json_CloseObject
          Json_OpenObject Json_Member_Value("a.blackbox[href='#About']","<i class='fa fa-info-circle'></i> About") Json_CloseObject
        Json_CloseArray
      Json_CloseObject
      Json_Member_OpenObject("article.blackbox")
        Json_Member_Value("h3","Technical Details")
        Json_Member_OpenArray("ul")
          Json_OpenObject Json_Member_Value("li","Video Source: <a href='https://youtu.be/X-dMOvEOQiM'>https://youtu.be/X-dMOvEOQiM</a>") Json_CloseObject
          Json_OpenObject Json_Member_Value("li","Plugin: <a href='http://absurdjs.com/'>http://absurdjs.com/</a>") Json_CloseObject
          Json_OpenObject
            Json_Member_OpenArray("li") 
              Json_Value("Plugin: ") 
              Json_OpenObject Json_Member_Value("a[href='http://www.seanmccambridge.com/tubular/' ]","http://www.seanmccambridge.com/tubular/") Json_CloseObject
              Json_Value(" <i class='fa fa-thumbs-o-up'></i>")
            Json_CloseArray
          Json_CloseObject
          Json_OpenObject Json_Member_Value("li","HTML5 semantic tags: aside, nav, section, article, header, footer") Json_CloseObject
          Json_OpenObject Json_Member_Value("li","CSS3: flex display mode, transition") Json_CloseObject
        Json_CloseArray
      Json_CloseObject
    Json_CloseObject
    Json_Member_OpenObject("footer.blackbox")
      Json_Member_Value("p.shadow","Demo powered by SpiderBasic")
    Json_CloseObject
    !}).compile();
    !$('.container').append($(html));
  EndProcedure
  
  Procedure CreateWebsite(JqueryTubular,Organic,Absurd)    
    ;your video background
    CreateBackgroundVideo("X-dMOvEOQiM"); // 9hyHnSKE8os
    
    ;preprocessor to generate CSS
    !v_absurd = Absurd();    
    GenerateWebsiteCSS(Absurd)
    
    ;preprocessor to generate HTML
    GenerateWebsiteHTML(Absurd)
  EndProcedure
  
  DeclareHeaderCSS("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css")         ;Awesome Image-Font Plugin
  DeclarePlugin("JqueryTubular","//rawgit.com/jarc100/jquery-tubular/master/js/jquery.tubular.1.0")      ;Tubular Plugin
  DeclarePlugin("Organic","//cdnjs.cloudflare.com/ajax/libs/absurd/0.3.4/absurd.organic")                ;Absurd Extension  
  DeclarePlugin("Absurd","//cdnjs.cloudflare.com/ajax/libs/absurd/0.3.4/absurd")                         ;Absurd Plugin   
  UsePlugins(@CreateWebsite())
CompilerEndIf
Post Reply