Saturday, September 24, 2011

Flare3D- Error #3702: Context3D not available

This is gotcha number one if you for any reason decide to take the html rapper off.
You could get the the Error #3702 way to fix it(that I have found). is to open the htmlTemplate->index.template.html file. and put in params.wmode = "direct";

Just another thing to think about when making your 3d games. I will post any other gotchas I come across as I develop.

Wednesday, August 31, 2011

HTML 5 simple animation

So as it turns out my html /javascript animation is quite different from flash animation. For Practical reasons a client may need or want an HTML 5 animation project done so I am now including a simple animation with HTML 5.
With this example you have to first make a canvas tag. Think of the Canvas tag as the part of screen our animations will show. This is where we will do most of our work . Once we defined a canvas tag in HTML. Make sure that the browser loads all of objects by listening to the load event. you can do this in a number of ways I like the addEventListener method as its close to what I do in Actionscript.

window.addEventListener('load', eventWindowLoaded,false);

Instead of going through the drawing code step by step, I will talk about the reasoning and the design. the Canvas object works in what is called immediate mode. What this boils down to is you have to update the scene every iteration of your game loop, like a flip book. This also means before you draw on the canvas(using the drawing API) you must erase it first or the previous drawn artifact will be there. So in stead of drawing a circle moving you get a snake growing. Here is how I do this

function drawScreen(){
context.clearRect(0, 0, canvas.width, canvas.height);
x+=speed;
context.fillStyle = "#000000";
context.beginPath();
context.arc(x,y,15,0,Math.PI*2,true);
context.closePath();
context.fill();
.

}

note this: call clear rect before you actually draw on the canvas(context.fill).

Here is my simple example the canvas on the bottom is not clearing on each iteration.

There are some really cool animations that can be done with the drawing API, but next time I will show you guys animations with actual pictures.

Monday, August 29, 2011

First Look at Javascript animation

Javascript and AS3 are based off of similar coding principles in that they are based on ECMAscript 5. But trying to do a simple animation in Javascript is alot different.for instance If I wanted to move a block across the screen in flash I would follow these steps.
1. take the blocks x corrdinate and call and onEnterEvent add 1 to the value blocks x position.

this would look something like this (if I was writting a timeline script).

addEventListener(Event.ENTER_FRAME, doMove);
doMove(event:Event){
block.x += 1;
}

In javascript it is a little different this is because the position of an element in the DOM is apart of the elements style property. First you have to make sure that the element is positioned absolutely. So what I did was make a div called box.
than in the css file I gave the box some style

#box{
width:50px;
height:50px;
background-color:#003366;
position:absolute;
left:1px; <--- this is important
}

Now the interesting thing to note is that even though you could physically see the box on the screen. if you did not explicitly set the left attribute, you could not access it. This must have something to do with the browsers ability to read and write CSS rules( not sure).
For instance in AS3 you can access an objects x field with out having to first initialize it because it is a member of the object when it is made. That being said:
//I make a box object called box1 it is global only for this example
var box1 = null;
// I then give a default value for the left position
box1.style.left = '1px';
//than I make a function that will update the left value every iteration of a loop
function doMove()
{
box1.style.left = parseInt(box1.style.left)+1+'px';
setTimeOut(doMove,20);
}
//start the function when the you click the screen
window.onmousedown= doMove;

Here is a link to the box moving in javascript.

I am Back

After a very long break.I have returned to continue my quest. I now have a few series I will be writing about. These are:
  1. low level programming to understand API's like molehill and WebGL
  2. JavaScript animation and development with html(not html 5)
  3. and of course HTML 5 animation and development
I had promised back in may to make a flash based study tool to help on our quest so I will renew that course of action. Of course all of this will take time. I will probably just bust it out over a weekend.
My goal is to build a foundation of knowledge to start really doing some impressive stuff with these technologies.

Wednesday, May 25, 2011

I have all these books what now

So my point in telling you about my journey into the unknown world of bytes n' bits. I will be writing a simple flash card program that has the notes from all the books and chapters I read. This program will basically take text files and turn them into flash cards. As I develop it I will post the notes I make from the material. So here are the first half of my notes

Q. who is the author of write great code?
A. Randal Hyde

Q.How do you convert Hexadecimal representation of a number to binary?
A.To convert the hexadecimal representation of a number into binary, substitute the corresponding four binary bits for each hexadecimal digit.

Q. How do you convert the binary representation of a number into hexadecimal?
A.The first step is to pad the binary number with zeros to make sure it is a multiple of four bits long. For example, given the binary number 1011001010, the first step would be to add two zero bits to the left of the number so that it contains 12 bits without changing its value. The result is 001011001010. The next step is to separate the binary value into groups of four bits: 0010_1100_1010. The last step is to convert the binary digits to hexadecimal.

Q.What is a nibble?
A. A nibble is a collection of four bits. Most computer systems do not provide efficient access to nibbles in memory. However, nibbles are interesting to us because it takes exactly one nibble to represent a single hexadecimal digit.

Q. What is a byte?
A. A byte is eight bits and it is the smallest addressable data item on many CPUs. That is, the CPU can efficiently retrieve data on an 8-bit boundary from memory. For this reason, the smallest data type that many languages support consumes one byte of memory (regardless of the actual number of bits the data type requires).

Q.what us a word?
A.The term word has a different meaning depending on the CPU. On some CPUs a word is a 16-bit object. On others a word is a 32-bit or 64-bit object. In this text, we'll adopt the 80x86 terminology and define a word to be a 16-bit quantity. Like bytes, we'll number the bits in a word starting with bit number zero for the LO bit and work our way up to the HO bit (bit 15), as in Figure 2-4. When referencing the other bits in a word, use their bit position number.

Q. What is double word?
A.A double word is exactly what its name implies, a pair of words (sometimes you will see 'double word' abbreviated as 'dword'). Therefore, a double-word quantity is 32 bits long.

Q. How many values can you represent with a n-bit string?
A. up to 2n different values

Q. How many signed values can you represent with a n-bit string?
A. In general, with n bits we can represent the signed values in the range 2n1 to +2n11.

Q. How does the 2's compliment system represent signed numbers?
A. The two's complement system uses the HO bit as a sign bit. If the HO bit is zero, the number is non-negative; if the HO bit is one, the number is negative

Q. how do you negate a 2's compliment number?
A. To negate a two's complement number, you can use the following algorithm:
  1. Invert all the bits in the number, that is, change all the zeros to ones and all the ones to zeros.

  2. Add one to the inverted result (ignoring any overflow).

Q. How do you -negate a negative 2's compliment number?
A. The same operation for vice versa
To negate a two's complement number, you can use the following algorithm:
  1. Invert all the bits in the number, that is, change all the zeros to ones and all the ones to zeros.

  2. Add one to the inverted result (ignoring any overflow).

Q. What happens if the LO n bits of a binary number all contain zero
A. The number is equally divisible by 2n

Q. What happens if the binary number contains a one in the bit position n and zeros everywhere else?
A. that number is equall to 2n

Q. What happens if you shift all the bits in a binary number to the left one position?
A. the number gets multiplied by two

Q. What happens if you shift all the bits in a binary number to the right one position?
A. Shifting all the bits of an unsigned binary number to the right by one position effectively divides that number by two.(this does not apply to signed integer values). Odd numbers are rounded down.

Q.
A. Multiplying two n-bit binary values together may require as many as 2*n bits to hold the result.

  1. Inverting all the bits in a binary number (that is, changing all the zeros to ones and all the ones to zeros) is the same thing as negating (changing the sign) of the value and then subtracting one from the result.

  2. Incrementing (adding one to) the largest unsigned binary value for a given number of bits always produces a value of zero.

  3. Decrementing (subtracting one from) zero always produces the largest unsigned binary value for a given number of bits.

  4. An n-bit value provides 2n unique combinations of those bits.

  5. The value 2n1 contains n bits, each containing the value one.

Tuesday, May 24, 2011

The Quest for low level knowledge

I have been coding for a long time but the thing is I taught myself. There have been project websites and blog entries that have me befuddled. Allot of the people I look up to in this field like Thibault Imbert have an amazing grasp of these low level aspects of computer science. I seek to understand this so that I may turn my software creations into powerful inventions I can use to help people. Truly computer science feeds into my passion for invention and design.
That being said I have chosen some books to consume!
These are :
  1. Concrete Mathematics
  2. Introduction to 80x86 Assembly Language and Computer Architecture
  3. Code—The Hidden Language of Computer Hardware and Software
  4. Design and Graphics - Complete - Digital Design
  5. Write Great Code: Understanding the Machine, Volume I
I believe these books will take me to the mother land which is only the first few steps on my adventure. I am also reading the first few chapters of Thibault's book:
  1. What can you do with bytes.

Friday, December 31, 2010

Getting ready for molehill part 1

I was over at theflashblog, and saw the video that had an interview of Thibault Imbert. In part of his interview he talks about how we as flash developers should prepare for molehill. One of the things i took to heart was the learning of Opengl es. I want to make sure I know my stuff so when the beta comes out I will be able to really kick the tires and lite the fires! So I decided to use my blog as a way to write down what I am learning and to see if what I am learning truly helps in my development.
Since this is a blog I will be placing my learning schedule here and I will write a quick test to make sure i know my stuff at the end which I will post here also so anyone else can test the know-ledge!
I will be taking stuff from various sources (like old math books and online articles, and books I buy) when there is a relevant source I will site it. I will also put some of my tests here when the beta comes out.
I may or may not use an api on top of molehill but I love learning how the nuts and bolts of things work so even if I do I will teach myself how to write my own api.

My first topic will be linear algebra as it relates to opengl es I am reading the book Mobile 3D Graphics: with OpenGL ES and M3G.

my notes for chapter 2.1 will be in next post



*********** As a big disclaimer I have no math background or degrees. Everything I learned or have learned I have taught myself including what i know about as3. I am a firm believer, that with dedication and hard work anything is possible. So if you feel overwhelmed or don't have the training and feel less than ok with the topic dont worry start with what you know and Google and you should be able to get very very far(as long as you have patience). We can also use this as a way to ask questions we might not know about.
t