Number Inputs

An easy way to input numbers into an HTML document is with the input tag.

Here it is on chrome

Here it is on firefox

Here it is on internet explorer. Not a fan of IE11 but it's the only one that shows the slider value.

I could choose 20 and 80 exactly!

Number Systems

*** VAR is being phased out use LET instead ***

The VAR is the most important building block in javascripts arsenal. Unlike C, C++, C#, all data types are declared with VAR. Javascript figures out how you want to use it.

var str = "hello there";

Will create a string.

var num = 128;

Will create a number equal to 128 in decimal.

var snum = str + num;

Will create the string "hello there128"

Take the basic HTML5 template and add the extra following code.

You can format numbers into different number systems and display them as strings.
The output of this HTML5 file is:

The first is 128 in binary, Second is 128 in octal, finally 128 in hexadecimal. This comes in very handy as you will soon see.

Back to Basics

Firstly the best place to go to learn HTML5 is w3schools.

This link will take you there:

http://www.w3schools.com/

Has everything you need to know to get started, I spent many months at this site.

However this is the template I created to use as the base for all my HTML5 projects.

If you have written this in notepad select SAVE AS...

Change the 'Save as type' to All Files.
Make sure the encoding is UTF-8.

Once the page has Loaded the Start() function is executed. This is where you can initialize data and setup the canvas etc...

Hello World!

Been very busy studying HTML5. Was about to launch a Silverlight website to host a casual game site. Was put off by the need to have every user install Silverlight on their machine. Was reading a tutorial on Visual Studio 2012 on HTML5 and Javascript.

Been studying HTML5 for the last 3 years and I would like to share my results with anyone who is interested.

Firstly get this book!

Has the best explainations and code for anyone who wants to learn HTML5.

Here is a quick tour of the Blog.

Turn bitmaps into strings then add to a javascript array.

Create dynamic data, with touchscreen sliders.

Write an image to the canvas, and change the output.

Change image and canvas data in realtime. Recycle data as much as possible.

Add Graph3D to a canvas, ADSW controls movement and touch controls camera position.

Use image and canvas to create 3D worlds with Graph3D.

Create infinite data using only 3 numbers.

Use CSS styles to make heightmaps from 3 numbers.

Get data from google earth and streetview simultaneously.

Create a 3D sand simulator with Graph3D.

Create particle physics with Graph3D.

Create block styled worlds with a 3D version of old 2D MAME games.

Access the devices camera and capture frames to a canvas.

Write the devices camera to a canvas using a timer. Allows for realtime manipulation of video.

Find and use the devices accelerometer.

Combine all this together and you have actuality!

All code will be on a PNG file.

ENJOY!