# 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

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()

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

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()

' 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 = 1 - z[i] / 200
canvas.DrawOval x[i] / z[i] * 200 + tx, y[i] / z[i] * 200 + ty,3,3
Next

canvas.Flush()

canvas.PopMatrix()

End

End Class```

# 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()

' 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 = 1 - z[i] / 200
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()

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

' 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.