Drawing circles with for loops

Imagine if you wanted to do something a little more complex, such as drawing a circle on screen. To create a circle we need to know its radius and centre point. With that information in place we can repeat a series of steps to draw sprites on screen to represent the circle. This is the kind of situation that a for loop is really suited for. The code that follows demonstrates how this can be achieved.

SetVirtualResolution ( 1024, 768 )
EnableClearColor ( 0 )
SetSyncRate ( 250, 0 )


CreateImageColor ( 1, 255, 255, 255, 255 )
CreateSprite ( 1, 1 )
SetSpriteSize ( 1, 1, 1 )


do
	radius = random ( 20, 100 )
	sourceX = random ( 0, 1024 )
	sourceY = random ( 0, 768 )
	red = random ( 0, 255 )
	green = random ( 0, 255 )
	blue = random ( 0, 255 )
	

	for y = -radius to radius
		for x = -radius to radius
			if x * x + y * y <= radius * radius
				SetSpritePosition ( 1, sourceX + x, sourceY + y )
				SetSpriteColor ( 1, red, green, blue, 255 )
				DrawSprite ( 1 )
			endif
		next x
		

		sync ( )
	next y
loop

After a few minutes of running the program you will see lots of circles on the screen.

The code to handle this is quite straightforward. A bunch of variables are used to control properties of the circles - radius, source or centre position, then the red, green and blue colours. These are set to random values within a given range, so that we get different circles displayed on screen each time the main do loop runs. Next two for loops are used. The first for loop sets the variable y start point to the negative value of the radius variable. The end point gets set to the radius variable. If the radius was assigned to 100 then this for loop would run from -100 to 100. This allows us to plot a line along the y axis. The next for loop repeats the process, but this time using the variable x, which is used to plot a line along the x axis. The contents of the second for loop check whether the x and y are within the required radius for the circle. If this is the case then a sprite is positioned at this point. The two loops combine to repeat the process, eventually drawing a filled circle.

Note how the call to the sync command (that refreshes the contents of the screen) has been placed within the first for loop. This has been done to slow down the program to let you see the circle being built up and drawn. If this call was to be moved outside of the for loop then the program would run much faster and you would see a full circle being drawn and placed on the screen.

Here's a slightly altered version of the program. This time extra for loops have been added that plot rectangles on screen.

SetVirtualResolution ( 1024, 768 )
EnableClearColor ( 0 )
SetSyncRate ( 250, 0 )


CreateImageColor ( 1, 255, 255, 255, 255 )
CreateSprite ( 1, 1 )
SetSpriteSize ( 1, 1, 1 )


do
	radius = random ( 20, 100 )
	sourceX = random ( 0, 1024 )
	sourceY = random ( 0, 768 )
	red = random ( 0, 255 )
	green = random ( 0, 255 )
	blue = random ( 0, 255 )


	for y = -radius to radius
		for x = -radius to radius
			if x * x + y * y <= radius * radius
				SetSpritePosition ( 1, sourceX + x, sourceY + y )
				SetSpriteColor ( 1, red, green, blue, 255 )
				DrawSprite ( 1 )
			endif
		next x
	next y
	

	minX = random ( 0, 1024 )
	maxX = minX + random ( 10, 100 )
	minY = random ( 0, 1024 )
	maxY = minY + random ( 10, 100 )
	

	for y = minY to maxY
		for x = minX to maxX
			SetSpritePosition ( 1, x, y )
			SetSpriteColor ( 1, red, green, blue, 255 )
			DrawSprite ( 1 )
		next x
	next y
	

	sync ( )
loop

As you can see using loops in this manner is incredibly useful.