Tech Stuff

This page focuses on my projects based around technology such as programming or robotics projects.

This Website

I made this website. I wrote the code for the website in Notepad++ and it uses a mix of technologies including web languages and frameworks.
Technologies included in the creation of this website include:

  • HTML
  • CSS
  • Bootstrap
  • Bootstrap grid and Modals
  • Jquery and Javascript
  • Amazon Web Services (Host)

Anki Vector Does my Voiceover #1 (Overwatch)

This project involved combining footage of my Anki Vector robot with footage of Overwatch gameplay. I programmed Vector's responses to the gameplay and then recorded them.

This project involved the use of the Anki Vector SDK and the programming language Python. When making this video I used the Anki Vector SDK to do a range of things including:
  • Making Vector speak
  • Showing images on Vector's screen
  • Making Vector perform animations that are part of his SDK
  • Making Vector perform behaviours that are part of his SDK

Showing images on Vector's screen was brand new to me, but the others were things I had previously programmed in my previous video "Anki Vector Imitates Other Robots #1", which you can find below and can read more about in this post: Anki Vector Imitates Other Robots #1 (Steemit).

Showing the images on Vector's screen involved the use of Pillow - a fork for Python Imaging Library, the Anki Vector SDK, Python, GIMP (for image editing) and the use of arrays and for loops.

I also had to use time.sleep() frequently in the code required to make this video as I wanted to record Vector in the least number of different clips possible, which had the result of me having to code in the delay between his reactions and voice lines to match the Overwatch gameplay.

For a deeper discusssion of this project and the programming behind it, check out my post about it on Steemit here: Anki Vector Does My Voiceover #1 (Overwatch)(Steemit).

Below is also a full document for the code for a part of the video (since the video was made up of multiple documents):
	import time
	import anki_vector
	from anki_vector.util import degrees
	from anki_vector.behavior import MIN_HEAD_ANGLE, MAX_HEAD_ANGLE

		#starts at 06:29:02

	def main():
		with anki_vector.Robot ("009064bf") as robot:
			print("Say 'Line 10 VVO1'...")
			robot.say_text("Well I go to the objective")
			robot.say_text("I fly up here instead this time")
			robot.say_text("I killed the monkey")
			robot.say_text("Dropping down")
			robot.say_text("Flying away")
			robot.say_text("I've lost lots of health")
			robot.say_text("I'm out")
			robot.say_text("That doesn't stop me fighting though")
			robot.say_text("Dammit I'm dead")
	if __name__ == "__main__":

The video created from this was edited with Adobe Premiere Pro. The gameplay was cut slightly at the very end along with the related Anki Vector webcam, but it was not cut to a significant degree.

The Anki Vector recordings for this video had other noises present including computer hum, which I removed using Adobe Audition. The audio for both the Anki Vector recordings and the Overwatch footage were each normalised to be a suitable level by changing the figure in NORMALISE MAX PEAK TO within the AUDIO GAIN settings, with the Anki Vector recordings being significantly higher in volume than the Overwatch footage.

Anki Vector Imitiates Other Robots #1

This project involved making my Anki Vector robot imitate other robots. I recorded him saying lines from fictional robots as well as included some of his animations and behaviors and made a video from this.

This project involved the use of the Anki Vector SDK and the programming language Python. At its most basic this project is basically the same as Hello World, but with different text involved.
However I made it more complicated. I added animations from Vector's SDK as well as behaviours from the SDK. The scripts I wrote were written in Notepad++ using Python and were run via Command Prompt.

For a deeper discussion of this project and the programming behind it, check out my post about it on Steemit here: Anki Vector Imitates Other Robots #1 (Steemit)

The video created from this was edited with Adobe Premiere Pro. The recordings for this video had other noises present including computer hum which I had to remove. I edited the audio in Adobe Audition in order to remove this noise.

Unfinished HTML game

I tried to make a 2D shooter on HTML canvas for my studies. I never quite got that finished, but completed enough and showed enough competency to meet the requirements for the course it was part of.

I got enemies spawning randomly and made my character able to shoot, but where I last stopped was in a situation where I was having difficulty getting the enemies ammo to line up correctly. It couldn't come out of just their coordinates or they would be shooting out of their stomach or somewhere similar rather than out of the gun in their hand. However I found I could not get the program to work out where it should come from, and I tried to do it using the coordinates of each enemy +/- whatever it took to get it lined up but I kept getting NaN errors. I didn't have collisions set up at this point either, but I did have the enemies randomly spawning, spawning where they could fit rather than a small part spawning on the edges of the canvas and staying within the canvas instead of just moving off of it and disappearing. I don't know if I would solve it now if I were to look back at it now, but I simply tried to fit too much into the time period I had, but easily met the requirements for the assessment with what I did get done.

The map for my canvas game was made using an array. I made tiles for the map using GIMP and in the code to draw the map I used if statements to essentially assign a number to each tile and say "If the number is 4, draw this tile" for example. You can see this code here:

	var Xpos=0;
	var Ypos=0;
	for (var i=0; i < mapArray.length; i++)
	for (var j=0; j < mapArray.length; j++)
		 if (mapArray[i][j]==1)
			ctx.drawImage(grasstileone, Xpos, Ypos, 20, 20);
		if (mapArray[i][j] ==2)
			ctx.drawImage(grasstiletwo, Xpos, Ypos, 20, 20);
		if (mapArray[i][j] ==3)
			ctx.drawImage(grasstilethree, Xpos, Ypos, 20, 20);
		if (mapArray[i][j] ==4)
			ctx.drawImage(grasstilefour, Xpos, Ypos, 20, 20);
		if (mapArray[i][j]==5)
			ctx.drawImage(dirtone, Xpos, Ypos, 20, 20);
		if (mapArray[i][j]==6)
			ctx.drawImage(dirttwo, Xpos, Ypos, 20,20);
		if (mapArray[i][j]==7)
			ctx.drawImage(dirtthree, Xpos, Ypos, 20,20);
		if (mapArray[i][j]==8)
			ctx.drawImage(dirtfour, Xpos,Ypos, 20,20);
		if (mapArray[i][j]==9)
			ctx.drawImage(dirtfive, Xpos, Ypos, 20,20);
		if (mapArray[i][j]==10)
			ctx.drawImage(dirtsix, Xpos, Ypos, 20,20);
		if (mapArray[i][j]==11)
			ctx.drawImage(dirtseven, Xpos, Ypos, 20,20);
		if (mapArray[i][j]==12)
			ctx.drawImage(grassanddirtbr, Xpos, Ypos, 20,20);
		if (mapArray[i][j]==13)
			ctx.drawImage(grassanddirttr, Xpos, Ypos, 20,20);
		if (mapArray[i][j]==14)
			ctx.drawImage(grassanddirtbl, Xpos, Ypos, 20,20);
		if (mapArray[i][j]==15)
			ctx.drawImage(grassanddirttl,Xpos,Ypos, 20,20);
I had an array with the numbers in it, based on where I wanted each type of tile (grass, dirt, mixed). You can see the array code here:
	//make array to make game map
	 var mapArray=[ 

Both of these parts of the code made up a function called drawMap(). As the array is a variable it was actually listed first in my function followed by the code that translated the numbers into tiles and said "if the tile is 11, draw dirt seven etc".

The results of this were mixed. I did make a map but partway through the array it would stop drawing for some reason and would only fill up a certain amount of the canvas, despite my array being larger than that. I have not yet determine why as I didn't return back to this project other than to reference it in regards to newer projects, but I probably should sometime just so I can solve it. I also have a bit more knowledge and improved problem solving skills now (and less time pressure than I did when trying to work this out) so I might be in a better position to work it out now.

Here is a humourous video where I left the game running while I went to do something else and came back to many enemies spawned but nothing removing them:

You can also see the limitations of the map in this video.

This post also shows an issue I faced and in my comment, the code that did work and no longer had that issue.

Some of the posts regarding my entry into SteemitJam4 (discussed below) also included mention of this game and how working with Unreal Engine Paper 2D differed from my experience working on this HTML game.


I entered the fourth SteemitJam. This is a game jam on the platform Steemit. I used Unreal Engine Paper 2D for this. This was a significantly different experience to working on my html game (mentioned above).

I didn't get very far in the SteemitJam as I was going in pretty blind as I had never used Unreal Engine and I had fairly limited game development experience, but I had big ambitions. Despite this, I did benefit from my experience participating in the SteemitJam.

The theme of the SteemitJam was "starting from nothing". While participating in this SteemitJam I thought of a basic idea for a story using my character, Pug Bee(who was also in the HTML game mentioned above). I didn't write any story but just had a basic idea, and then jumped into making visual aspects of the game.

Using Unreal Engine 4 Paper2D and the graphics editor software GIMP, I started working on a tileset and tile map for my SteemitJam game. This was significantly easier than making the tilemap for my HTML game. The HTML game had a coded map using an array, but I didn't have to write code in order to make a tilemap for Paper2D.

I made new tiles for this game rather than recycling the ones from my previous HTML game and I made these using the program GIMP. In doing so, I had to ensure that my tiles were the right size for Paper2D's system and then put the tiles in one document as a tilesheet before importing it, upon which it divided the whole image back up into tiles. Making the map was as simple as setting collisions so my charcater wouldn't fall through the ground, and then painting my tiles I made in GIMP onto a grid made up of previously empty tiles. This was much less time consuming than writing each number out with my HTML game array. It also meant I got immediate feedback on what it looked like as I could see it as I was painting the tiles. Conversely, when making my tilemap for my HTML game I had to write some of the code, and then launch the webpage in Chrome to see what it looked like, then write some more and launch again to see how it looks after I wrote more changes and rinse and repeat. The visual feedback on how the map looked was much more immediate with the Paper2D map.

I then turned to animation and tried to put a character into the game complete with animations. I put the character into Anime Studio Pro 11, a puppet based animation software. This software works by putting "bones" into the 2D art and manipulating them to make the artwork move, similar to 3D rigging for 3D animation, but in 2D.

Here is a video of my character, Pug Bee, performing a walk cycle which was created using Anime Studio Pro 11:

I then put my characters in the game, complete with the walking animation (but on the spot) as you can see here:

You can see more about my Steemit Jam experience here: Grass Tiles, Dirt Tiles and an Upcoming Pug - My first Steemit Jam post (Steemit) and here: Pug Bee is in the Game - Steemit Jam (Steemit)

Thank you for reading about my Tech Stuff!