Getting Started with Phaser Part 3: Sprites and Movement

In the last part, we added the Phaser framework to a web page and said “hello” on a canvas element. In this part, we create a simple sprite (a ball) and move it around the canvas.

Why a ball? I consider it to be a test of whether gaming is possible on a particular platform. In the simplest sense, reading user input and moving an object (a filled circle, in this case) shows that real time interactivity is possible. This can be on a computer with a keyboard or on an 8×7 LED array with a joystick.

Directory Structure

In your Games directory, create a new folder named BallWorld. In that directory, create two more directories, js and img. This process should look familiar; the only new thing is that we added an img directory, which is where we’ll store our image files.

Directory structure for BallWorld

Draw a Sprite

There are plenty of ways to create 2D graphics for your game. In these tutorials, we will rely on the free GNU Image Manipulation Program (GIMP) to create sprites. Head to GIMP’s download page and download the latest stable version for your operating system. Run the installer, accepting all the defaults.

Open up GIMP, and select File > New. You will be presented with a new image dialog. Set the Width to 20 and Height to 20. Click on Advanced Options and set Fill with to Transparency.

Creating a new GIMP image

Click OK to create a new image. If you don’t see the Toolbox window, select WindowsToolbox. From the Toolbox, click on the Ellipse Select Tool.

Ellipse select tool in GIMP

Back in your image window, create a circle by dragging a region from one corner to the opposite corner.

Making a circle in GIMP

In the Toolbox, select the Bucket Fill Tool.

GIMP Bucket Fill Tool

Click the color swatch at the bottom of the Toolbox to select a new color. In the Change Foreground Color window, choose the color red (e.g. set the HTML notation to ff0000).

GIMP color selector

Click OK. Click inside the selection circle in the main image window. The circle will fill in with red, and you will notice that some of the pixels around the edge are semi-transparent. This is a technique called antialiasing, which works to make the edges of an image look smoother.

Filled circle

Select File Export As… Save the file as ball.png in …/Projects/Games/BallWorld/img. When prompted, keep the default options in the Export Image as PNG window.

GIMP export image

Click Export. And that’s it! Creating a simple ball sprite is relatively easy. Creating great looking sprites, however, is its own art form. If you are feeling particularly lazy, you are welcome to save the sprite from this image:

Ball sprite

Create the Web Page

In an editor, enter the following:

Save it as index.html in …/Projects/Games/BallWorld. There are a few difference between the HTML in this example and in the last part.

We change the title to <title>Ball World</title> , which simply updates the name of the page. The name is often displayed in the tab on the browser.

We also add

to the body’s CSS. This explicitly sets the margin and padding of the body element to nothing. The body element contains all of the page’s main content. In this case, it holds the Phaser canvas, and by explicitly setting the margin and padding, we can later configure the canvas to fill up the browser window (as much as possible while still maintaining the original aspect ratio).

Additionally, we change the page’s background color to black ( #000000 ), which works well for many games, as it mimics a black border or bezel.

Finally, we removed the line  <div id="area"></div> as we want Phaser to just append its own div to the page. By letting Phaser control the div, we can more easily set the canvas to fill up the browser window.

Write Some JavaScript

To install Phaser, copy phaser.min.js from the downloaded Phaser ZIP file to …/Projects/Games/BallWorld/js.

We will write the main game code one piece at a time so we can discuss each section. The code in its entirety will be posted at the end (if you just want to scroll down and copy it).

Create a new text file and start by defining a new Phaser game object. Note that we no longer specify the div parameter as we did in Part 2. By leaving the div id parameter as an empty string, Phaser will automatically create a canvas element and append it to the page’s body.

To this, add the preload() , create() , and update()  functions. For now, leave the functions empty. This is our single-state Phaser template.

In the create()  function, set the scaleMode  and pageAlign  properties. By setting scaleMode  to SHOW_ALL , the canvas stretches to fill as much of the browser window as possible while maintaining the previously defined proportions (1:1 in this case, as we set the game area to 500×500). By setting pageAlignHorizontally  and pageAlignVertically  to true , we move the game area to the middle of the page.

Stretching the game area and moving it to the middle works as a good compromise for playing games on desktop and mobile devices, regardless of portrait or landscape orientation.

Finally, set the game area’s background color to light blue ( #87CEEB ), which contrasts the web page’s black background.

At this point, you should be able to run the game with:

Open up a web page, navigate to http://localhost:4242/, and you should be presented with a blue square that stretches to fill up the height or width of the page (whichever is smaller).

Blue background in Phaser

Back in the code, add  game.load.image('ball', 'img/ball.png') to the preload()  function. We use the game object to load the ball.png image (the one that we made in the Draw a Sprite section) and assign it to the asset label 'ball'  (also known as a key).

In create() , we add the sprite using game.add.sprite()  and position it at the center of the game area, which can be found with game.world.centerX  and game.world.centerY . We then set the origin of the sprite, using this.ball.anchor.set(0.5, 0.5) , to the middle of the sprite to make it easier to center.

Note that after adding the sprite to the game, we assign the sprite object to the variable ball. If we just use var ball , the object would only live within the scope of the create()  function. In order to access the ball object from other functions, like update() , we attach the object to this , which refers to the game state (created as the fifth parameter in new Phaser.Game(...) . Any time we want to access the ball object within this particular game state, we need to use this.ball .

If you refresh the page (assuming the server is still running), you should see a red circle appear in the middle of the game area.

Loading a sprite in Phaser

To move the ball, we need to define a default velocity for the ball (i.e. how many pixels does the ball move each frame) and add some key listeners to the game.

We could hardcode the ball’s velocity, but that’s generally considered bad practice. By keeping all of the game’s parameters in one place, we can tweak the game design without having to hunt down all the hardcoded values. For our purposes, we will define a single global object with the game’s name. This object will hold key/value pairs that set the game’s parameters.

To hold the game’s parameters (we only have 1 right now), create a global object with var BallWorld , and assign it the property velocity: 8 .

In create() , create a keyboard listener using game.input.keyboard.createCursorKeys()  and assign it to this.keys  (another custom game state property).

In the update()  function, we check for specific key presses with this.keys.KEY_NAME.isDown . We can then move the ball’s position using this.ball.x  and this.ball.y .

Refresh the page again, and use the arrow keys to move the ball.

Key listener in Phaser

You might notice that you are able to drive the ball past the edges of the game area. This is usually not a desirable behavior, so we can add bounds checking on the ball each frame. This is accomplished by setting the ball’s edges’ x and y coordinates to the bound’s edge should the ball pass the boundary.

In update() , add the following:

Try refreshing the page one more time, and you should notice that the ball is unable to move outside the game’s boundaries.

Checking game boundaries with Phaser

Conclusion

At this point, you should have the basics for drawing sprites and moving them around the screen. While this is a seemingly simple step, it is an important one for creating the basics of arcade and sprite-based games.

 

 

Getting Started with Phaser Part 2: Drawing Text

In the first part, we created a simple web server and page. We didn’t even touch Phaser! However, that is about to change. In the second part of this series, we create a game area in an HTML div and draw some simple text on it using Phaser.

Directory Structure

In your Games directory, create another folder named HelloPhaser. Much like HelloWorld in the previous example, this will house our HTML and JavaScript files for serving the web page and game. Within HelloPhaser, create directory named js. This folder will hold all of our JavaScript.

Directory structure for HelloPhaser

Install Phaser

To install Phaser, we are going to download the library and simply copy it to our js directory. Start by navigating to Phaser’s GitHub page, and click Clone or download followed by Download ZIP.

Download the Phaser library

Once downloaded, unzip the file. Find the unzipped directory, and navigate to phaser-master/phaser-master/build. There, copy the file phaser.min.js. Go back to your Projects directory and paste the file in Games/HelloPhaser/js.

Create the Web Page

Create a new text document and copy in the following (note: I recommend manually typing each line so you get a feel for writing HTML and JavaScript. I’ll talk about what the code does after the code block).

Save the document as index.html in Games/HelloPhaser.

This file acts as our basic web page. Its primary purpose is to set up a game area (div) on the page and load in JavaScript. The JavaScript handles the bulk of the drawing in the game area.

In the <head> section, we use some simple CSS via the background property to set the web page’s background color to white (#FFFFFF). See this table for colors and their hexadecimal codes. We also load in the Phaser library using the <script> tag.

In <body>, we define a <div> and name it “area.” We will reference this div later in our JavaScript code and draw Phaser objects in it. Finally, we load in another script, named “start.js,” which is where our main game code will live. We have not written start.js yet; that comes next.

Write Some JavaScript

Create a file and copy in:

Save the file as start.js in Games/HelloPhaser/js.

At this point, you should have index.html in your page’s directory (HelloPhaser). Under the js directory in HelloPhaser, you should have phaser.min.js and start.js.

Files in HelloPhaser

Let’s look at what the code is doing. In the very first line (after the //… comment), we create a Phaser.Game  object and assign it to the the variable game . Phaser.Game is predefined in the Phaser library (documentation on it can be found here), and it is the core of the Phaser framework.

The first two parameters for Game  define the resolution of the game area. In this case, we set it to 500 pixels wide and 500 pixels high. I’m a big fan of square game areas, as it works well on desktop and mobile devices without needing to skew the graphics when switching between portrait and landscape modes. Feel free to change it for your application, though.

The next parameter, Phaser.AUTO, sets the renderer for the game area. As of the time of this blog post, there are three types available:

  • Phaser.CANVAS – Canvas element for drawing 2D graphics. Canvas is supported on most modern browsers.
  • Phaser.WEBGL – Use hardware-accelerated graphics to draw on the canvas. Some browsers support WebGL, and the user’s device must have the requisite hardware. 3D graphics are possible with WebGL.
  • Phaser.HEADLESS – Do not use any renderer. This is useful when you don’t want any graphics (such as running a game server).

In general, Phaser.AUTO is advisable, as it initially tries to use WEBGL and if the browser does not support it, the renderer reverts back to CANVAS.

The fourth parameter, ‘area’, tells the Game object where to draw. In this case, it is creating a canvas inside the div named ‘area’ (remember how we created a <div> element with the id “area” in our HTML?). If you leave this parameter blank, Phaser will simply append the Game object to the page.

The fifth parameter is the initial game state. If this parameter is set, Phaser will immediately start running the functions in this state. Note that Phaser supports multiple states in a game, and these can be things like start screen, game play, game over screen, menus, etc. For now, we will only use one state. Examining this state object, we see:

Phaser states have a number of reserved names for functions. We are using preload , create , and update . We assign the functions (similarly named preload, create, and update) to the specially named keys, which are defined by Phaser.

The state will first run preload() , which is generally where assets like sprites and sounds are loaded. Since we don’t have any assets, the function is left blank. The function is still explicitly written here for the sake of clarity; we will add code to it later.

Second, the state will automatically run the create()  function once the preload has finished. This is where you can draw sprites, text, add key handlers, and so on. We add a single line of text, “Hello, Phaser!” to the game area, set at (250, 250), which is the middle of the area. We set the text’s anchor to (0.5, 0.5), which changes the origin point for the text to its center. For anchors, (0, 0) is the top left, and (1, 1) is the bottom right.

Finally, we define the update()  function. This function is automatically called every frame, and it is where we would put things like input polling, checking for collisions, etc. Because our “game” is just static text right now, there is no need to have anything happen in the update function.

Run It!

Open up a command prompt, navigate to your Games directory, and run the server (note that we need to specify HelloPhaser as our web page directory):

Open up a web browser and navigate to http://localhost:4242. You should see your game (albeit a rather boring game):

My first Phaser game!

You can’t do much with this game, as we have not added any type of input handling or graphics updating. That will come next.

Conclusion

While it was not much of a game, we did use the Phaser framework to create some text in a canvas element, which is a huge step! This template (index.html, phaser.min.js, and start.js) will form the basis for future tutorials. You can simply copy phaser.min.js into your other games, although I recommend checking Phaser’s GitHub page for updates regularly.

If you are new to JavaScript, I highly recommend working through some chapters in the book Eloquent JavaScript (it is the book I used to teach myself JavaScript). The book is available online for free as well as in paperback copy on Amazon.

Continue to Part 3 to learn how to create sprites and add movement with key presses.

Getting Started with Phaser Part 1: Web Server

As I learn to use the Phaser framework to make simple browser-based games, I figured I would chronicle my adventures and hopefully help others out.

“Why a web web server?” As it turns out, when most browsers run a page as a local file, it locks down access to many other files, which we need for our games. To read more about this, see this article.

To properly serve these files, we can use any number of existing web server software, but we will write a simple one using the Express framework in Node.js. In the future, we can modify this simple server to receive information back from our game to do things like control hardware and *gasp* make multiplayer games.

Install Node.js

Navigate to the Node.js download page and choose the installer for your operating system. Run it, and accept all the defaults to install Node.js on your computer.

If you are using Linux, most package managers can install it for your. For Debian, try  apt-get install nodejs npm . For other distros, see this page.

If you are weird like me and enjoy the Linux command line but work in Windows, I highly recommend installing Git Bash through the Windows git installer. We’ll need to use git later, as GitHub allows us to host our projects for free. All of my command line screenshots will be from Git Bash.

Install a Text Editor

For these simple programs, we’ll use a basic text editor to write our code. If you haven’t already, install the text editor of your choice. You can use Notepad, but I’ll make a few recommendations for programming-focused editors:

Directory Structure

Create a folder named Games in a place where you like to keep your projects (e.g. My Documents/Projects). In Games, create another folder named HelloWorld.

Directory structure for our game server

The goal is to create a web server that lives in Games. Whenever we want to test a game, we run the server with Node.js and pass it the folder (as an argument) of the desired web site (e.g. “HelloWorld”).

A web site, in a practical sense, is just a collection of files on a computer that get served to a client upon request. For us, each project folder under Games will be its own site, and we just point our simple server to that folder in order to host the site.

Install Express.js

Express.js is a web application framework made for doing, well, lots of web stuff in Node.js. For our purposes, we are going to use it to make a simple web server that just serves files when asked (via HTTP requests). We could write our own server using the http module, but Express.js just makes things easier.

Open up a command prompt (e.g. Git Bash), navigate to your Games directory, and install Express.

You might notice that this creates a directory named node_modules in Games. This is where Node.js modules, like Express, are stored.

When you execute node and it attempts to load a module (i.e. through the require() instruction), Node.js first looks in the current directory for a folder named node_modules. If a module with the name in require() is not found, it begins to work its way up directories looking for node_modules. If the module is not found at all, the require() command will throw an error, and your program will fail.

Write the Server Code

Open up your text editor and copy in the code:

That’s right, in about 15 lines of actual code, we have a functioning web server. Neat. In all honesty, though, Express is doing most of the heavy lifting for us.

Save the file as SimpleServer.js in the Games directory.

Create a Simple Web Site

Our site will be a single page with a title and some text in the body. In later parts, we will add a Canvas element and begin using Phaser to create games.

Create a new text document in your editor and copy in the following:

Save it as index.html in Games/HelloWorld. At this point, your directory structure in <PATH_TO_PROJECTS>/Games should look like this:

Games directory tree

 

Run the Server

In your command prompt, navigate to the Games directory and run the server, specifying the HelloWorld directory as the root for your web site.

If all goes well, you should see a note appear in the console that the server is running at http://localhost:4242.

Running a simple server

Open up a web browser and navigate to http://localhost:4242. You should see your page.

My first page

If you look at the console, you’ll see that a ‘/’ has appeared.

Console showing HTTP request

This means that a client requested the website’s root directory (‘/’). The server responded by sending index.html as a result, which is the default file for most websites. In this case, the root directory is HelloWorld, as we specified when we started the server.

Conclusion

We did not even touch Phaser in this part. Crazy, I know, but we needed to create a basic structure for hosting our games before we can even make them. Such are the joys of browser-based games.

If you aren’t familiar with HTML, now is a good time to play with the web page, index.html. We won’t actually do too much in HTML, but it’s good to be familiar with how tags, loading files from source, and a little bit of CSS work. Geek Champ has a great getting started with HTML tutorial.

When you are ready, continue to Part 2.

Getting Started with EasyEDA Part 2: Schematic Capture

Placing Parts in the Schematic

We made the parts we need in Part 1, so now we can create the schematic for our linear regulator. Click on the File icon, select New, and click Schematic.

Creating a new schematic

In the parts selector, make sure My Parts is selected, click on our custom part (CON_BARREL_JACK), and click somewhere on the schematic to place the part. Continue reading

Getting Started with EasyEDA Part 1: Part Creation

Introduction

Free, online development and CAD tools are becoming more popular and powerful, and PCB layout tools are no exception. In this, we are going to look at how to create a simple schematic in EasyEDA, turn it into a PCB, and send out the design files to a PCB house for fabrication.

We will do this in several parts–starting with part creation, then schematic capture, and PCB layout before sending out files for board fabrication. By the end, we’ll have made a simple linear regulator that supplies 5V and up to 1A to a breadboard and accepts a barrel jack from a wall adapter to provide power.

Signing Up

Head to easyeda.com, and click Login at the top of the page. While you can start without an account, being able to save projects to your account is quite useful.

Register for an account

Fill out your information and click Register. Continue reading

Cross Compiling on Linux for the Edison

Cross compile for Edison

Since I had a couple requests on how to cross-compile C/C++ programs for the Edison, I figured a quick post wouldn’t hurt. Note that I am using Ubuntu 14.04 (64-bit) for this example.

Download “SDK – Cross Compile Tools” from https://software.intel.com/en-us/iot/hardware/edison/downloads.

Unzip and run the installer. Note that the name of the files may change depending on the version of the SDK and your operating system. Continue reading

Run a Script on Edison Boot

Edison Base Block

Image courtesy of sparkfun.com

This one took me forever to figure out, and thanks to some posts over at the Intel Edison forums, I finally managed to get a JavaScript program to run as soon as the Edison starts. I know that the XDK also runs a service to execute JavaScript programs on boot, but I wanted a more general solution. One could configure the systemd service file to run any program/script on boot (assuming the Edison has the right interpreter). Continue reading

Writing Your Own UPM Module: Getting Started

Intel-IoT_LogoImage courtesy of Intel iot-devkit GitHub account

UPM (Useful Packages and Modules) is a high-level library that relies on MRAA to talk to hardware peripherals over GPIO, SPI, UART, etc. Both libraries were created by Intel and come packaged with the Galileo and Edison boards. MRAA has support for other single board computers, like the Raspberry Pi and Beaglebone Black, according to the MRAA documentation.

MRAA is the low-level driver that controls the individual bits for the GPIO. UPM is a collection of libraries (modules) that provides the necessary software for various sensors, motor drivers, etc. Continue reading

Creating a Custom Linux Kernel for the Edison (release 2.1)

In this post, I will go over how to create a custom Linux image for the Intel Edison using the Yocto Project Edison source code release 2.1.

Intel Edison_and_Pi_Block

Apparently, it’s been almost exactly a year since I originally posted how to create a custom Linux kernel. Weird.

Well, since that time, I’ve had some people ask about updating that tutorial, as a few steps no longer apply and the whole thing is out of date. It seems that the Yocto Project also grows and changes over the months.

I created this tutorial with the help of the Yocto Project Getting Started Guide, the Intel Edison Board Support Package, and this thread on the Intel forums.

A few notes before we get started:

  • All of these steps are performed on a Linux host machine. I recommend Ubuntu (or another Debian distribution), as I use apt-get liberally.
  • You will need at least 50 GB of free hard drive space. The Yocto Project can be quite large.
  • The hard drive should be a Linux partition (e.g. Ext4). Trying to execute some of the scripts from an NTFS drive proved difficult.

Continue reading

Bluetooth Low Energy Peripherals with JavaScript

Edison with wires!

Previously, I’ve shown how to enable Bluetooth Low Energy (BLE) connections using Python. In the past few months, I have been furiously learning JavaScript for an upcoming set of tutorials dealing with the Intel® Edison. Along the way, I needed to make a demo using BLE and JavaScript, which invariably led me to the bleno module.

Bleno is a great tool, but I found some of the examples a little confusing to follow (I get easily lost when a program is split into more than 2 files without a well-documented API). As a result, I constructed a simple echo server demo program that illustrates how characteristics work in BLE. Continue reading

Quick Tip: HTTP GET with the ESP8266 Thing

The SparkFun ESP8266 “Thing” is one of the cheapest Internet of Things (IoT) platforms available.

SparkFun ESP8266 Thing
Photo courtesy of sparkfun.com

There are some great examples on how to post data to data.sparkfun.com, but we need to modify that code in order to pull data from a website. That is accomplished with the humble HTTP GET request. I put together a quick example that pulls www.example.com and prints it to the serial console. Note that you will need perform some slight modifications to the board (or use Realterm) to see the serial data. Continue reading

Learning the Teensy LC: Input Capture

Teensy LC input capture test

As a third step to learning the Teensy LC, I decided to tackle input capture. I discovered that there is no separate interrupt vector for input capture; it is the same vector used by the timer interrupt. This means that if we are looking for a timer overflow event as well as a pin change for input capture, we must check for that specific interrupt flag within the interrupt service routine (ISR). Continue reading

Learning the Teensy LC: Interrupt Service Routines

Custom ISR in the Teensy LC

As a follow-on to my PWM experiments, I wanted to create a custom interrupt service routine (ISR) in the Teensy LC. This would be similar to using the ISR() macro in an ATmega-based Arduino. Because the ARM has different vectors (and some other weird/cool things, like configurable interrupt priority levels), I knew the normal ATmega vectors would not work. Luckily, PJRC created a set of vectors to work with the Teensy, which can be found in this code.

You don’t need any additional components for this example. We are just going to flash the on-board LED using our custom ISR. Continue reading

Using Python and BLE to Receive Data from the RFduino

Edison and RFduino

It’s should be no surprise that I enjoy working with the Edison. It may not be as easy to work with as the Raspberry Pi, but I still like it.

My current project includes getting the Edison to talk Bluetooth Low Energy (BLE) to another device. The RFduino is the device in question, as I should be able to receive data as well as control peripherals attached to the RFduino. The final project will be an addition to the IoT YouTube series that I am working on (at SparkFun). I’m not spoiling anything! Continue reading

Learning the Teensy LC: Manual PWM

Teensy_LC_PWM

I’m in the process of learning how to use the Teensy LC, which is the newest Arduino-compatible module from PJRC. It is built around the MKL26Z64VFT4 (ARM Cortex-M0+), which can be had for around $2.20 for 100 (according to Digi-Key). I really like the microcontroller, as it is much more powerful than the ubiquitous ATmega 328p (not that I don’t like the 328p) for about the same price.

The awesome people at PJRC have gone through the process of creating a set of libraries and hardware definitions so that you can program the entire Teensy line from Arduino. It is quite slick, and if you have not tried it yet, I suggest you give it a shot. It does require installing some software on top of the Arduino IDE, but it opens up the world of ARM to Arduino users.

Because I have decided to use the Teensy LC (or, more specifically, the MKL26Z64VFT4) for a personal project, I wanted to learn how to manually set up interrupts. As it turns out, ARM interrupts are more complicated than the interrupts found in most ATmega processors. More importantly, I wanted to learn how to do this from the Arduino IDE (because reasons). PJRC still has many of the labels for registers and bit fields set to the Teensy 3.1, which work well enough for the Teensy LC, but might not be correct. Continue reading

Quick Tip: Reading Fuse Bits in an Arduino

If you are playing around with avrdude and fuses in an Arduino, you might run into an error like:

This is because the Arduino bootloader cannot access fuses in the ATmega. To fix this, we can use another Arduino as an in-system programmer (ISP). Continue reading

Creating a Custom Linux Kernel for the Edison

[Edit – 12/20/15] – This guide is now out of date. A new walkthrough showing how to build a custom Linux image with the Yocto Project and Edison source code (release 2.1) can be found here.

Intel Edison image courtesy of SparkFun Electronics
Intel Edison image courtesy of SparkFun Electronics

If you want to add custom options to the Edison Linux kernel, you will need to compile it from source and enable the options you want. This tutorial is based on Intel’s Edison BSP User GuideVijayNooki‘s post in the Intel Forum, and hammock‘s post in the Intel Forum.

You will need to perform these steps on a Linux host machine with apt-get installed (e.g. Ubuntu). Continue reading

Quick Tip: Changing Default Directory of Git Bash

I don’t know why this gave me so much trouble, but it did. When I installed Git for Windows, the default, Bash-like Windows terminal for git, it insisted that its home directory was /s (nowhere near my Documents folder in windows).

Here is a quick tip to make Git Bash change its home directory automatically (so you don’t have to cd /blah/blah/blah every time you open it). Continue reading

Classroom Project: DIY Stirling Engine

Stirling Engine example courtesy of Wikimedia Commons

 Stirling engine example (“Ericsson style hot air engine” by Rob Skinner on wikipedia.org)

This past week, we had the president of Cool Energy, Sam Weaver, speak to us at work about his commercial Stirling engines. I had known about Stirling engines for a while but was unsure on their specific operation. Sam gave a great talk along with an educational demonstration of a small, tabletop engine.

That’s when it dawned on me. What about having students build their own version of a tabletop Stirling engine? It’s a great way to show how the expansion and contraction of a gas can be transformed into rotational energy. Continue reading

Getting Started With NVIDIA CUDA on Ubuntu 10.04

NVIDIA Graphics Card

DISCLAIMER: This is a post from my old blog that I copied here to help out anyone interested in installing  CUDA on Ubuntu. Please keep in mind that it was written a few years ago with Ubuntu 10.04 and the CUDA toolkit 3.2.16. Obviously some things have changed, but it should at least provide a decent starting place. Continue reading

How To Give the Olimex A13-OLinuXino-MICRO a Static IP Address

If you’ve been following along, you should have a basic Debian Linux installation on your Olimex A13-OLinuXino-MICRO board and able to connect to WiFi. Make sure that the SSID and WPA password settings are correct in the /etc/wpa_supplicant/wpa_supplicant.conf file. See my guide on setting up WiFi with the A13-OLinuXino-MICRO and scroll down to the section on configuring wpa_supplicant.

Assuming you’re able to login to the OLinuXino and connect to a WiFi access point, we can change the default of DHCP to a static IP address. Continue reading

Getting WiFi Working on the A13-OLinuXino-MICRO

This tutorial will guide you through setting up WiFi on the A13-OLinuXino-MICRO board and connecting to a WPA-enabled network. Because the MICRO board has no wired Ethernet, we’re going to have to download Debian packages for wpa_supplicant on the host machine and install them on the MICRO. Continue reading

Configure an SD Card Image for Better Compression

If you’re working on a Linux image for your single board computer (e.g. Raspberry Pi, OlinuXino, BeagleBone Black, etc.) and you notice that the compression of gzip sucks for the backup image, you need to re-format the SD card. For example, I created a Debian image on a card, which was partitioned for the whole 4GB. Now, we know that only the first few megabytes will be used, and the rest will be empty. However, if you’ve previously used the card (or you might see this with a factory-fresh card), the rest of the card will not be zeros. This will result in a poor compression ratio. My 4GB compressed to 3.1GB. Not great. Continue reading

How To Backup an SD Card Image

Backing up an image for the Raspberry Pi, BeagleBone Black, OLinuXino, etc.

Let’s say you’re trying to build Linux for your single board computer, and you need to back up the operating system (which, more than likely, is on an SD card). With a relatively small SD card (say, 4GB), you can copy the whole card, zip it, and be able to store/share the image file. It also makes restoring pretty simple. Continue reading

Getting Started with the Olimex A13-OLinuXino-MICRO

Building Debian Linux for the Olimex A13-OLinuXino-MICRO

A13-OLinuXino-MICRO_FTDI

References

https://olimex.wordpress.com/2012/10/12/building-bootable-sd-card-with-debian-linux-image-for-a13-olinuxino/

https://www.olimex.com/forum/index.php?topic=790.0

Install required packages

I like sudo, as it prevents me from doing stupid stuff. However, feel free to use “sudo su” if you don’t feel like typing “sudo” for half the commends. If you just copy and paste the commands, however, it really doesn’t matter. Continue reading