release 0.3

I just achieved the 3D part of the text() function (ticket) in Processing.js. So far the test look identical compared with the same code in Processing.

Screenshot and Test

existence problem

the performance is too bad. almost 80% of time is spending on the text() function.
hope somebody can figure out a way to re-use the texture, so that it doesn't need to re-create texture when everytime it runs.

step closer to the 3D text

It have been almost a week since my last post, but I am still working on the 3D text and now it is getting closer to achieve.

Problem that I encountered

• missing a comma in one of the statement in my code
• someone type a "3" instead of a "2" in one of the statement inside the project

What I have now

Bugs that I know

• eating tons of memory
• crash the browser(detail). It crashes because of webgl software rendering.

To-do

• need to think up a way to reuse the texture for text in order to reduce the use of memory
• update the text 2D so that they can work together smoothly

JavaScript and ActionScript

Since my uncle came this weekend, I really didn't a time to focus on coding. However, I read something interesting about JavaScript, ActionScript, Canvas and Flash.

JavaScript and ActionScript

JavaScript and ActionScript are brothers. They both come from ECMAScript. No wonder why I am so easy to understand the syntax of JavaScript. (Background: I started to learned Flash 5 years ago. Check one of my little flash example in my previous post.)
They are different with C++. As my opensource professor David said, they are functional language. Function is the basics. Therefore, you can do something impossible in C++, and they are easier. For example,

for(var i=0;i<10;i++){
  this["t"+i].i = i;
  this["t"+i] = function{
    return this.i;
  }
}

it will create ten functions inside the global scope, let's say. The name of them are t0,t1,t2 and so on until t9. and they will return 0,1,2 and so on until 9 for each. It doesn't have any meaning in the code, but if I need to do it in C++, then I need the create ten functions and store the pointer of the funtions into an array. That is the reason why I think JavaScript and ActionScript are easier than C++.

JavaScript vs ActionScript

I don't think they have anything to compare with, because JavaScript manage the element of HTML page, and ActionScript is for a better graphics and animation. Everything is so peaceful until Canvas come up.

Canvas vs Flash

Canvas, one of the new element in HTML5.
Flash, a wide using web element since 1996.
There are a lot of voice on the web talking about Canvas and Flash.
Adobe, Microsoft Spar Over Flash, Silverlight, HTML5
HTML5 and the future of Adobe Flash
Flash Player: CPU Hog or Hot Tamale? It Depends.
Lots of, Lots of articles.

My point of view

It is unfair to say which is good or not since HTML5 is still under experimental. In China, there is an old said that, "Hundred Schools of Thought". For me, the programming field is still growing, and looks healthy.

Release 0.2

Background

the release includes the work that I have done for pjs tickets #213 and #422. #422 was originally belong to #213, but first, Anna suggested me to seprate them; Second, there are realy too many differences between the 2D text and 3D text.

Things have done

2D part (#213)

• completed the funtionalities since release 0.1

• fixed a little syntax error
• requested review

3D part (#422)

• implemented the prototype (post)

Challenges

• Using & Managing git.
• WebGL is truly tough. I am still confused how to organize the code of the 3D part
• Javascript. Understaning the sytax, but maybe working more a little bit on that will be much better
• Merging code.

3D text on HTML5 continue

this is the second post of the 3D text on HTML5.

How far have I reached

What is that

As you see, it is a 3D text at the top of a square and a triangle. As the same with the last one, it refers to WebGL Lesson 5 and a textdemo from glge, and plus three lines of code from WebGL Lesson 8. The square and triangle are coming from the Lesson 2 in order to highline the 3D text.

A list of my references for 3D canvas

• WebGL Lesson series Lesson 5, Lesson 8 and Lesson 2 - actually, all the lessons that inside the WebGL are very using. They are easy understanding, great instruction and open source.
• GLGE - a javascript library using the WebGL. They have a lot of exciting demos using WebGL. It is a good place to look at.
• Mathematical Concepts of 3D - an guide of math from seneca game programming course.
• a tutorial of openGL - a tutorial of openGL. i had only read the one that I linked to, but it already brought me a lot of understanding.

Next Step

The easiest is breaking someone's code. Second is writing my own code. After that, reading others codes. The most difficult is combining other people's codes with my own code and make sure didn't break anything. Now, I am going to the last step. Pushing my code in to code of processing.js. If luckily, I will be able to release the whole text() function before weekend. Otherwise, at least, I put out a 3D text() preview.