This is a quick and dirty post because I found out with html5 you can do something like this.

1

<input name="search" id="search_field" type="text" autofocus="autofocus" />

Bam! Now you have an html5 auto focussing field. Don’t forget your doctype!

Related posts:

1. An Introduction to the Canvas

Introductions

An array is simply a list of data contained in one variable and accessed by indices. An example of an array would be an array of ages containing 0, 1, 2, 3 etc. The array doesn’t have to be integers, it can be an array of strings, objects or even arrays.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Create an array
var ages = new Array(1,2,4,99,54,23);
 
// Create another array
var names = new Array(“bill”, “bob”);
 
// Create a literal array
var games = [“minecraft”,”half life”,”freecell”];
 
// Add values to an empty array
var ages = new Array();
ages[0] = 1;
ages[1] = 2;
ages[2] = 9;

It is important to know that the array is actually an object that contains values. Because this type is actually an object there are properties that can be called to help handle the information inside of the array.

Helper Functions And Properties

In javascript, along with many other languages, there are functions built around arrays that will allow you, the developer, to better use them and be more efficient in your coding. The length property is one of the most commonly used properties when going through an array.

1
2
3
4
5
6
7
8
9

// Going through the items in an array.
// Create the array
var ages = new Array(1,2,3,5,7);
 
// Loop through using the length property
for(var x = 0; x < ages.length; x++) {
// Print out the items one by one with an alert.
<p dir="ltr">alert(ages[x]);</p>
}

Array push and pop are commonly used to add items to the array without having to get the position of where the item will be added yourself.

1
2
3
4
5
6
7
8

// Create an array with one item
var names = [“bob”];
 
// push an item onto the array.
names.push(“caleb”);
 
// the resulting array will now be the same as it would be if you created it like this.
var names = [“bob”,”caleb”];

Now we are going to pop an element off of the end of the array and return the item. This call not only returns the value but it will alter the array in memory changing the values within it.

1
2
3
4
5

// create a new array of names that we will play with
var names = [“chewbacca”,”yoda”,”skywalker”,”ben”];
var poppedValue = names.pop();
 
// As a result the names array will no longer have “ben” in it and the poppedValue will contain the string “ben”;

Two Dimensional Array

The concept of a 2D array can seem a little intimidating at first until you realize that you need to look at the data as columns and rows. Here is an example of what a 2D array would look like.

1
2
3
4

// Creating a 2D array
var x = new Array(0,1);
x[0] = new Array(0,0);
x[1] = new Array(0,0);

In order to access a property within the second array you will just need to fetch the value using the key.

1
2

// Display the item that is in the first column of the first row.
alert(x[0][0]);

Another way to create an array like this is to loop through the items upon creation.

1
2
3
4
5
6
7
8
9
10
11

//Create the array container
var names = new Array();
 
for(var x = 0; x < 10; x++) {
names[x] = new Array();
// Go through the second dimension and set the values.
for(var y = 0; y < 10; y++) {
// Assign the value of the item to bob.
names[x][y] = “bob”;
}
}

Note: in strongly typed languages an array must consist of the same data types. Since javascript is not a strongly typed language; the information stored can consist of mixed data types.

Related posts:

1. Javascript Hoirzontal Menu
2. Javascript Canvas: Basic Game Logic and Movement
3. Java: Tutorial about Arrays vs Static Arrays

Introduction

Google Drive is out! Yes that’s right, Google’s Drive project which allows users to store content onto a Google server and pull it from any device is now available. This product offers 5GB free to google users with additional packages for extra money.

This is a pretty cool thing and not just because Google is doing drop box properly but more so because they are doing drop box across the Google platforms and offering an API to those of us that are interested in developing for it.

My plans

My plan over the next couple of days is to create a way to store server logs and general statistics for my server to the Google Drive. This will allow me to easily check on how things are going from my mobile device.

Google Drive API

If you are interested in working with Google Drive than I suggest that you take a look at the API that Google has provided us. https://developers.google.com/drive/v1/reference/

If you are going to work with the API that is available you will have to register your own app. https://developers.google.com/drive/register

Performance

The API has some interesting features for performance. When performing an update you can receive a partial response. This response type will only return the specific fields that you ask for rather than the entire object. The API also supports a header type of gzip to allow for speedier and smaller sent and received packets of information.

For more information on Google Drive API performance: https://developers.google.com/drive/performance

Related posts:

1. Google’s Plus 1 Button Integration And Options
2. Decrease Javascript Load Times and Increase Script Speed

Introduction

If you are interested in writing a game in javascript using the new canvas tag than look no further. In this lesson I will be going over the game loop and what is required to get started with your own. If you have not yet gone through the introduction to the canvas you should click here. It only takes a couple minutes to go through and it will have the required code for this lesson.

The Basic Loop

In order to create a loop we are going to base it off of seconds using the set_interval() function. This function will allow us to call on a function x times per second. This is a good function to use when making a loop based game because it will wait for the function to finish before calling on it again even if the time is exceeded.

1
2

// call on a function every 100 milliseconds.
setInterval(“methodName()”, 100);

Drawing to the canvas

For now we are going to simply draw to the canvas using a draw function. You can call on a class.method in the set interval function. In the draw function that we are creating, we are going to have to draw something to the canvas. In the following code we will draw a line from point a to point b.

1
2
3
4
5
6
7

function draw() {
ctx.strokeStyle = “#333333”;
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(60, 50);
ctx.stroke();
}

If the setInterval function has been properly setup, to take the draw function, than you should see a line appear on the canvas. Now lets get a little wild and crazy and give that line some movement.

Layers

The canvas works in layers. If you draw something to it, the item will stay until something has been drawn over it. Because of this the canvas needs to be reset and will need to be reset and have everything drawn back on to it in layers from the background to the foreground.

In a two dimensional game you are going to want to draw the items from the bottom up. The items should be drawn in the following order if you are looking at the ground from a birds eye view.

Draw the dirt
Draw the grass
Draw the trees
Draw the birds

Movement

Create public variables for x position, y position and counter.

1
2
3

var posX = 50;
var posY = 50;
var counter = 0;

Within the draw function we are going to add the following code which will increase the counter and set the position of the line. In the draw method we will need to redraw the background to clear the canvas. Add the following code to the function and place it above everything else within the code block.

1
2

ctx.fillStlye = “#ffffff”;
ctx.fillRect(0,0,800,400);

This will clear the previous items on every draw event. Now we can draw the items onto this layer by adding some logic to the draw function and changing the lineTo using the x and y positions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function draw() {
 
// redraw the background.
ctx.fillStyle = “#ffffff”;
ctx.fillRect(0,0,800,400);
 
// increase the counter
counter++;
 
// reset the counter so the line doesn’t get out of hand.
if(counter == 100) {
counter = 0;
}
 
// Stroke the line.
ctx.strokeStyle = “#333333”;
ctx.beginPath();
ctx.moveTo(posX,posY);
ctx.lineTo(posX + counter, posY + counter);
ctx.stroke();
}

You will now have a moving line on the canvas that will reset every 100 updates.

Related posts:

1. An Introduction to the Canvas
2. JavaScript: setTimeout Firing Immediately
3. Javascript Hoirzontal Menu

Before we get started we are going to need to setup our coding environment. This will be a quick and dirty copy paste solution for you.

We need two files. The first will be index.html and the second file will be: main.js Fill the index.html file with the following code…

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE HTML5>
<html>
<head>
<script src="main.js"></script>
<title>Caleb Jonasson Canvas Demo</title>
</head>
<body onload="onLoad()" style="margin:0px; padding:0px;">
<canvas id="canvas" width="800" height="400"></canvas>
</body>
</html>

Now paste this code into the main.js file. The two files should be placed in the same directory.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var ctx = null;
 
function onLoad() {
// Get the context from the canvas
ctx = document.getElementById("canvas").getContext("2d");
 
// Add an event listener
document.addEventListener("click", registerInteraction, true);
 
}
var registerInteraction = function()
{
var x = window.event.pageX;
var y = window.event.pageY;
log("clicked: x"+x+", y"+y);
}
function log(content) {
console.log(content);
}

Using the Context

You will notice that in the onLoad function we are getting the context of the canvas from the page. This ctx value will allow us to draw on the canvas. The common variable for the context is either “ctx” or “context”. This value is declared at the top of the document and will be public for everything to use.

We are going to start this lesson by drawing a background onto the canvas so we know where it starts and ends. Add the following code to the onLoad function.

1
2

ctx.fillStyle = "#94B73E";
ctx.fillRect(0,0, 800, 400);

The fill style is a variable sets the fill color of the item. The fillRect function simply fill a rectangle. The first two parameters are the x and y coordinates of where you would like to start drawing the rectangle. The second parameters are the ending coordinates of the rectangle. Upon running the script you will notice that we now have a solid background.

Related posts:

1. Javascript Canvas: Basic Game Logic and Movement
2. Javascript Arrays

I’ve been getting a lot more traffic lately and therefor I have added two advertisement spots on the site. I know this is a pain but it does help pay for hosting and it isn’t very intrusive. The ads I have picked will just be images that do not expand or make sounds.

Once again, my apologies, it helps though.

No related posts.

Sum3 progress has been rather slow and not as much content has been posted as I would have liked. A solution to this is to promote the project to students but that seems rather impractical for such a small and featureless project.

The other evening I decided to start working on canvas tutorials and write proper tutorials rather than lessons involving the steps required to make a game. The basic theory behind frames, object handling, collision, logic and mathematics will be some of the items included in the process.

Even though I have been on a bit of a php data mining and javascript game development kick over the last year, I would still like to get back into writing some c++ tutorials since it is one of the most useful languages that you can learn these days providing you want to be an engineer and a diverse one at that.

More information on side projects can be at http://cjonasson.com

Related posts:

1. Project: Mobile/Project Update Blog

Javascript is not the fastest of languages but it is one of the most adaptable and dynamic of languages. Because the script runs at run time there is no single compiled code base there for there is going to be some overhead assuming you are coding with industry standards.

Compression

One of the best ways to increase javascript efficiency that requires almost no time at all is to add all of your scripts into one file. Not only will this only send one request to the server it will allow you to compress all of the contents and greatly decrease the through the wire size of the content. (pending on your server zip settings) Compressing code will remove everything that is not required to run the script such as white space and comments. Compressing the code in this way will also change the names of variables and functions to shorten the file as much as possible.

Here is an excellent application created by google that will allow you to compress the javascript file. http://closure-compiler.appspot.com/home 

Efficiency

Another way to greatly improve efficiency within a js file is to decrease repeated operations as much as possible. This consists of optimizing object handlers and adding dynamic event listeners in larger applications. Should you be using set interval it is a good idea to lessen the amount of times that the value is refreshed by. An animation of ui elements do not require a high frame rate to seem impressive.

Profiling and Debugging

Many developers like to use an application called FireBug. I prefer to use the built in utilities that come along with Google Chrome. Both of these options allow profiling and debugging options for your javascript application along with a console that allows you to trace methods and objects within your development process.

Unit Testing

The final thing that I would like to mention for those using javascript at home or in the office is that they should use unit tests to make sure that their code is solid and stable. There is a full set of how you can use JsUnit to tests here.

Related posts:

1. Remove images and increase load times with CSS3
2. Javascript Arrays
3. Javascript Canvas: Basic Game Logic and Movement

I have been moving my attention towards mobile development recently but I will still be doing the standard web development stuff here. I would like to split up the two and make this site more focussed towards tutorials and articles pertaining to code, design (not graphics) and all that fun stuff.

If you would like to check out some of the stuff going on at the other website you can visit it here. http://cjonasson.com

Related posts:

1. Sum3 Project Update

Recently I pulled an all nighter and coded a user widget using the Dream In Code API. The project is currently unfinished but it is very usable. The idea of the project is to allow the users of dream in code to show off their reputation, posts and group on their website, blog, etc. It also gives users the ability to support and promote Dream In Code and the community behind it.

The code for the user widget is as follows:

1
2
3
4
5
6
7

<iframe
    scrolling="no"
    style="width: 282px;
        height: 76px;
        border: none;"
    src="http://atomicbucket.com/dreamincode/?id=175017"
></iframe>

Once the code has been added to a website it will look as follows:

In order to get your own widget you must:
A) become a member of dream in code.
B) Take the id in your user profile and insert it into the id that is within the embed code’s url.

Note: There will be additions to this project regarding options for sizes that the widget can come in.

No related posts.