Unlimited Objects Source Code

September 26, 2018 Markus

In my old blog post I gave some idea how to implement “unlimited objects” program. In the original video I used 16 canvases with 16 images + the actual visible canvas. Two canvases only is sufficient.

In the source (Cerberus X) below, no external graphics files are needed:

Import mojo2

Function Main()
	New MyApp
End

Class MyApp Extends App
	
	Field gfxCopy:Image[16]
	Field ccanvas:Canvas
	Field counter:Int
	Field angle:Float	
	Field canvas:Canvas
	
	Field scaleX:Float, scaleY:Float
		
	Field x:Float, y:Float
	Field r:Float
	
	Method OnCreate()
			
		canvas = New Canvas()
		counter = 0
		
		For Local i:Int = 0 To 15
			gfxCopy[i] = New Image(640,480,.0,.0)
		Next
		
		ccanvas = New Canvas(gfxCopy[0])
		
		scaleX = DeviceWidth / 640
		scaleY = DeviceHeight / 480
		
		r = 100
		SetUpdateRate(60)
	End
	
	Method OnUpdate()

	End
	
	Method OnRender()
		
		angle = angle + 2

		x = Cos(angle) * r + 640 / 2
		y = Sin(angle) * r + 480 / 2
		
		r = r + 0.1

		counter = counter + 1
		If counter = 16 Then counter = 0
				
		ccanvas.SetRenderTarget(gfxCopy[counter])
		ccanvas.SetColor(1,1,0)
		ccanvas.DrawCircle(x,y,32)
		ccanvas.SetColor(1,0,1)
		ccanvas.DrawCircle(x,y,30)
		
		ccanvas.Flush()
		
		canvas.PushMatrix()
		canvas.Scale(scaleX,scaleY)
		
		canvas.Clear	

		canvas.DrawImage(gfxCopy[counter],0,0)

		canvas.Flush()
		canvas.PopMatrix()
						
	End
	
End Class

Import mojo2

Function Main()

New MyApp

End

Class MyApp Extends App

Field gfxCopy:Image[16]

Field ccanvas:Canvas

Field counter:Int

Field angle:Float

Field canvas:Canvas

Field scaleX:Float, scaleY:Float

Field x:Float, y:Float

Field r:Float

Method OnCreate()

canvas = New Canvas()

counter = 0

For Local i:Int = 0 To 15

gfxCopy[i] = New Image(640,480,.0,.0)

ccanvas = New Canvas(gfxCopy[0])

scaleX = DeviceWidth / 640

scaleY = DeviceHeight / 480

r = 100

SetUpdateRate(60)

End

Method OnUpdate()

End

Method OnRender()

angle = angle + 2

x = Cos(angle) * r + 640 / 2

y = Sin(angle) * r + 480 / 2

r = r + 0.1

counter = counter + 1

If counter = 16 Then counter = 0

ccanvas.SetRenderTarget(gfxCopy[counter])

ccanvas.SetColor(1,1,0)

ccanvas.DrawCircle(x,y,32)

ccanvas.SetColor(1,0,1)

ccanvas.DrawCircle(x,y,30)

ccanvas.Flush()

canvas.PushMatrix()

canvas.Scale(scaleX,scaleY)

canvas.Clear

canvas.DrawImage(gfxCopy[counter],0,0)

canvas.Flush()

canvas.PopMatrix()

End

End Class

The program gives different output, if the calculations are in OnUpdate() on HTML5 target.

Below is the old video I’ve made previously:

Source code license: MIT.

Order the Chaos as Online Game

September 25, 2018 Markus

I published yesterday Order the Chaos as online game. The online version is some kind of lite version of the original BlitzMax game.

Link to game.

The game has a bit simpler ending because of the limitations of HTML5.

The resolution of the game is 648 x 720 pixels.

Order the Chaos II — more polished version and with large (the playing area is scrolled) Mandelbrot mountains is of course available on itch.io.

The online version of Order the Chaos works with mobile devices, too.

Embedding HTML5 output of Cerberus X to WordPress pages

April 13, 2018April 13, 2018 Markus

The first thing you need is Code Embed plugin.

If your HTML5 output code loads files, something must be changed in the JavaScript-code. Find the following piece of code:

BBHtml5Game.prototype.PathToUrl=function( path ){
	if( path.indexOf( "cerberus:" )!=0 ){
		return path;
	}else if( path.indexOf( "cerberus://data/" )==0 ) {
		return "data/"+path.slice( 16 );
	}
	return "";
}

BBHtml5Game.prototype.PathToUrl=function( path ){

if( path.indexOf( "cerberus:" )!=0 ){

return path;

}else if( path.indexOf( "cerberus://data/" )==0 ) {

return "data/"+path.slice( 16 );

}

return "";

}

The URL of the data drawer must be changed. If you have the data drawer at the root of your www (public_html) drawer, change the “path.slice” line like this:

return "/data/"+path.slice( 16 );

1	return "/data/"+path.slice( 16 );

If you’re working offline with some server program and have a testsite to experiment with, the path can be found as follows:

return "http://localhost/testsite/data/"+path.slice( 16 );

1	return "http://localhost/testsite/data/"+path.slice( 16 );

The y-coordinate of the mouse need also some adjustment, if the page has scrollbar: The y-start depends on the position of the scrollbar.

Find the following function:

	function mouseY( e ){
		var y=e.clientY+document.body.scrollTop;
		var c=canvas;
		while( c ){
			y-=c.offsetTop;
			c=c.offsetParent;
		}
		return y*yscale;
	}

function mouseY( e ){

var y=e.clientY+document.body.scrollTop;

var c=canvas;

while( c ){

y-=c.offsetTop;

c=c.offsetParent;

}

return y*yscale;

}

The y-coordinate is correct with following change:

function mouseY( e ){
		var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
		var y=e.clientY+document.body.scrollTop + scrollTop;
		var c=canvas;
		while( c ){
			y-=c.offsetTop;
			c=c.offsetParent;
		}
		return y*yscale;
	}

function mouseY( e ){

var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

var y=e.clientY+document.body.scrollTop + scrollTop;

var c=canvas;

while( c ){

y-=c.offsetTop;

c=c.offsetParent;

}

return y*yscale;

}

With the touch screen no additional changes need to be done.

While working with WordPress, the “tool/status” bar of WordPress changes the y-coordinate too, but the visitor on your page doesn’t have that page with the “tool/status” bar of WordPress. 🙂

You’ll probably want to remove the console from the page, too. Just remove all the references to splitter and console from the CerberusGame.html.

I almost forgot, in CerberusGame.html use absolute path to find the JavaScript-file. For example src=”https://yoursite.com/drawer/program.js”. Perhaps at first is good practice to try with all the contents of the default CerberusGame.html, so that you see that everything is working.

This should help.

As an example in practice, you might want check my online games corner.

Good luck!

3D Stars With Controlled Center Point

February 7, 2017September 26, 2018 Markus

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

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)

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

canvas.Flush()

canvas.PopMatrix()

End

End Class

Source code license: Public Domain.

3D Stars with Mojo2

December 13, 2015October 6, 2018 Markus

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

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)

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

canvas.Flush()

canvas.PopMatrix()

End

End Class

Feel free to use this code.

HTML5 3D Stars

April 10, 2015October 6, 2018 Markus

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

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)

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)

PopMatrix()

End

End Class

Do use my code as you wish.