3D Stars As Lines

I must have been really tired when I coded & posted the old 3D stars codes… Anyway, here’s code for 3D stars as lines.

Below the video:

To get the stars drawn as lines is really simple. In the 2D world to draw a line we need x1, y1, x2 and y2. In the projection from 3D space, we simple add for example 4 to the z-coordinate of a point so that, the other point is further away and we get two points to the 2D world.

Below is the main part of the Monkey X source code:

		' Projection from 3D space to 2D screen
		For Local i:Int = 0 To STARS - 1
			Local x1,x2,y1,y2:Float
			
			z[i] = z[i] - 1
			If z[i] < 10 Then z[i] = Rnd(50,200)
						
			sx = x[i] / z[i] * 200 + 320
			sy = y[i] / z[i] * 200 + 240
			
			shade = 1 - z[i] / 200
			canvas.SetColor shade,shade,shade
			
			x1 = x[i] / z[i] * 200 + 320
			x2 = x[i] / (z[i] + 4) * 200 + 320
			y1 = y[i] / z[i] * 200 + 240
			y2 = y[i] / (z[i] + 4) * 200 + 240
			
			canvas.DrawLine(x1,y1,x2,y2)
			
		Next

For the end the source code in full:

Import mojo2

Function Main:Int()
	New MyApp
	Return 0
End

Class MyApp Extends App

	Const STARS:Int = 280
		
	Field x:Float[STARS],y:Float[STARS],z:Float[STARS]
	
	Field canvas:Canvas
	Field sx:Float, sy:Float
	
	Method OnCreate()

		For Local i:Int = 0 To STARS - 1
			x[i] = Rnd(-50,50)
			y[i] = Rnd(-50,50)
			z[i] = Rnd(50,200)
		Next
		
		canvas = New Canvas()
		
		SetUpdateRate(60)
	End

	Method OnUpdate()
						
	End
	

	Method OnRender()
		
		Local shade:Float
		
		canvas.PushMatrix()

		canvas.Clear()

		' Projection from 3D space to 2D screen
		For Local i:Int = 0 To STARS - 1
			Local x1,x2,y1,y2:Float
			
			z[i] = z[i] - 1
			If z[i] < 10 Then z[i] = Rnd(50,200)
						
			sx = x[i] / z[i] * 200 + 320
			sy = y[i] / z[i] * 200 + 240
			
			shade = 1 - z[i] / 200
			canvas.SetColor shade,shade,shade
			
			x1 = x[i] / z[i] * 200 + 320
			x2 = x[i] / (z[i] + 4) * 200 + 320
			y1 = y[i] / z[i] * 200 + 240
			y2 = y[i] / (z[i] + 4) * 200 + 240
			
			canvas.DrawLine(x1,y1,x2,y2)
			
		Next
	
		canvas.Flush()
		
		canvas.PopMatrix()
		
	End

End Class

Feel free to use this code.

3D Stars With Controlled Center Point

Just little changes to old post on 3D stars with Mojo2… Now on the projection from 3D space to 2D space (screen), the center point can be controlled, just touch the screen or keep the left mouse button pushed down to control the stars… The code should compile as such to any target on Monkey X Pro.




Import mojo2
 
Function Main:Int()
	New MyApp
	Return 0
End
 
Class MyApp Extends App
 
	Const BG_WIDTH:Int = 640
	Const BG_HEIGHT:Int = 480
	Const STARS:Int = 280
	
	Global devWidth:Float, devHeight:Float, scaleX:Float, scaleY:Float
	
	Global x:Float[STARS],y:Float[STARS],z:Float[STARS]
 
	Field canvas:Canvas
	Field tx:Float, ty:Float
	
	Method OnCreate()
 
		devWidth = DeviceWidth()
		devHeight = DeviceHeight()
		
		scaleX = devWidth / BG_WIDTH
		scaleY = devHeight / BG_HEIGHT
 
		For Local i:Int = 0 To STARS - 1
			x[i] = Rnd(-50,50)
			y[i] = Rnd(-50,50)
			z[i] = Rnd(50,200)
		Next
		
		canvas = New Canvas()
 
		tx = BG_WIDTH / 2
		ty = BG_HEIGHT / 2
		
		SetUpdateRate(60)
	End
 
	Method OnUpdate()
		
		If TouchDown(0) > 0 Then
			tx = TouchX() / scaleX
			ty = TouchY() / scaleY
		Endif
			
	End
	
 
	Method OnRender()
		
		Local shade:Float
		
		' Scale the graphics
		canvas.PushMatrix()
		canvas.Scale (scaleX,scaleY)
 
		canvas.Clear()
				
		For Local i:Int = 0 To STARS - 1
			z[i] = z[i] - 1
			If z[i] < 10 Then z[i] = Rnd(50,200)
			
			' shade is 0..1
			shade = 1 - z[i] / 200
			canvas.SetColor shade,shade,shade
			canvas.DrawOval x[i] / z[i] * 200 + tx, y[i] / z[i] * 200 + ty,3,3
		Next
	
		canvas.Flush()
		
		canvas.PopMatrix()
		
	End
 
End Class

Source code license: Public Domain.

3D Stars with Mojo2

As an example of using Mojo2 module in Monkey X, I wrote the 3D stars using Mojo2 module in Monkey X.

In earlier post the stars were made with the old Mojo. Mojo2 has lots of nice features to experiment with.




Below is the source code in full:

Import mojo2

Function Main:Int()
	New MyApp
	Return 0
End
 
Class MyApp Extends App
 
	Const BG_WIDTH:Int = 640
	Const BG_HEIGHT:Int = 480
	Const STARS:Int = 180
	
	Field scaleX:Float, scaleY:Float
	
	Field x:Float[STARS],y:Float[STARS],z:Float[STARS]
 
	Field canvas:Canvas
	
	Method OnCreate()
 
		scaleX = DeviceWidth() / BG_WIDTH
		scaleY = DeviceHeight() / BG_HEIGHT
 
		For Local i:Int = 0 To STARS - 1
			x[i] = Rnd(-50,50)
			y[i] = Rnd(-50,50)
			z[i] = Rnd(50,200)
		Next
		
		canvas = New Canvas()
		
		SetUpdateRate(60)
	End
 
	Method OnUpdate()
			
	End
	
 
	Method OnRender()
		
		Local shade:Float
		
		' Scale the graphics
		canvas.PushMatrix()
		canvas.Scale (scaleX,scaleY)
  
		canvas.Clear()
		
		For Local i:Int = 0 To STARS - 1
			z[i] = z[i] - 1
			If z[i] < 10 Then z[i] = Rnd(50,200)
					
			' shade is 0..1
			shade = 1 - z[i] / 200
			canvas.SetColor shade,shade,shade
			canvas.DrawOval 320 + x[i] / z[i] * 200, 240 + y[i] / z[i] * 200,3,3
		Next
	
		canvas.Flush()
		
		canvas.PopMatrix()
		
	End
 
End Class

Feel free to use this code.

HTML5 3D Stars

The 3D stars are again embedded in this blog post and source code with old mojo is simplified.

The code is written in Monkey X Pro, which is nowadays available on itch.io.




Here’s the code:

Import mojo

Function Main:Int()
	New MyApp
	Return 0
End

Class MyApp Extends App

	Const STARS:Int = 200
	
	Field devWidth:Float, devHeight:Float, scaleX:Float, scaleY:Float
	Field x:Float[STARS],y:Float[STARS],z:Float[STARS]

	Method OnCreate()

		scaleX = DeviceWidth() / 640
		scaleY = DeviceHeight() / 480
		
		For Local i:Int = 0 To STARS - 1
			x[i] = Rnd(-50,50)
			y[i] = Rnd(-50,50)
			z[i] = Rnd(50,200)
		Next
		
		
		SetUpdateRate(60)
	End

	Method OnUpdate()
	
	End
	

	Method OnRender()
		
		Local shade:Float
		
		PushMatrix()
		Scale(scaleX,scaleY)
		Cls

		For Local i:Int = 0 To STARS - 1
			
			z[i] = z[i] - 1
			If z[i] < 10 Then z[i] = Rnd(50,200)
		
			shade = 255 - (z[i] / 200) * 255
			SetColor shade,shade,shade
		
			' Projection from 3D space to 2D screen	
				
			DrawOval(x[i] / z[i] * 200 + 320,y[i] / z[i] * 200 + 240,2,2)
			
		Next

		
		PopMatrix()
		
	End

End Class

Do use my code as you wish.