Today, Google publish a pacman logo to celebrate pacman's 30th birthday. However, have you awared that the logo is playable and it is done by div tag, one image, css and javascript.
More than that, the most exciting thing is it is open, so that you can see the source code and to study it.
the javascript source code is available on http://www.google.ca/logos/js/pacman10-hp.2.js. and you can see a formated code here.
and you can check the html source code which is relatedto pacman and well formated here.
and the only image is
So, those are all you need to made a pacman game on a page.
Friday, May 21, 2010
Monday, April 12, 2010
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.
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.
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.
Wednesday, April 7, 2010
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
Monday, March 29, 2010
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.
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,
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.Sunday, March 21, 2010
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
Challenges
Thursday, March 18, 2010
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.Sunday, March 14, 2010
3D text on HTML5
I have to say this is very difficult, and I am still not very sure how it works.
What I made
What is that
I combine the code from WebGL Lesson 5, the WebGL series Lesson that Soctt mentioned about, with a textdemo from glge. This example will be the prototype of my release 0.2.The idea
The idea of how to implement 3d text is draw the text as texture, then transparent the background. Therefore, I still have a long way to good.Wednesday, March 10, 2010
pjs branch update
Labeled my branch as "text", and updated it with Anna's 0.7. Also, changed the code and made it ready for release 0.2 (3d text).
I don't know if I updated my branch correctly or if I should do so, but it seem to make sense for this moment. After reading something articles about the Git, I start to have the feeling what exactly it is and realize I still need to learn more about it. Not only Git, but as well as SVN and HP. They are so powerful and also difficult for me. It just like the history happen again. Back to my first knew Flash, it took me a long long time to learn it ( bg: Actionscript is my first programming language ).
Now there are still a little confusion in my mind, but as long as I keep touching it, it will be better. Just like what happen before.
I don't know if I updated my branch correctly or if I should do so, but it seem to make sense for this moment. After reading something articles about the Git, I start to have the feeling what exactly it is and realize I still need to learn more about it. Not only Git, but as well as SVN and HP. They are so powerful and also difficult for me. It just like the history happen again. Back to my first knew Flash, it took me a long long time to learn it ( bg: Actionscript is my first programming language ).
Now there are still a little confusion in my mind, but as long as I keep touching it, it will be better. Just like what happen before.
Monday, March 8, 2010
Thunderbird Lab
After I finished the Liunx Socket assignment, I finally have some time to go back and work on the Thunderbird Lab. Since a lot of classmate have blogged it, I have lot of example to refer to - Crystal, Jianming, Scott, Thanh and Harjinder, and therefore, it much easier than I thought.
Learning from Crystal, I pick up an example from the real Bugzilla to file my bug.
6 days to build Thunderbird are really a lot of time, but I learn something as well. Tracking Tinderbox, Revert code from Repository.
Whatever, it is a good experience. ( I still need to fix the code, and find someone to review, but that is the story later on.)
Learning from Crystal, I pick up an example from the real Bugzilla to file my bug.
6 days to build Thunderbird are really a lot of time, but I learn something as well. Tracking Tinderbox, Revert code from Repository.
Whatever, it is a good experience. ( I still need to fix the code, and find someone to review, but that is the story later on.)
Saturday, March 6, 2010
network reconnected and thunderbird got built
The day before yesterday, people on IRC seneca channel may wonder why I asked a question and left without a answer. The reason was I lost the Internet connection after that day afternoon. Then, it continued on and off for the next two days. Looks like someone has a big TV series to download and shot the router down. I cann't stand for that and I logined in to the router, upgraded it. Well, I shouldn't do because I didn't have the permission to do so, but now the network looks like a little bit better.
Thunderbird built
As I mentioned before(post: keep-failing-on-building-thunderbird), I kept failing on building thunderbird. However, I finally built it successfully yesterday. And now, I am working on the lab.What is reason?
It got built is not only by luck but a lot of trying. Maybe it is good for me that I lost the network connection when I asked people because the reason is pretty obvious, and I even blog that on my last post (keep-failing-on-building-thunderbird) - My firewall detected and removed the crash testing file 485217.xsl. I noticed that almost at the thirtieth time when I build it.How does it make the build fail?
It actually doesn't make the build fail. Although you remove that file, as long as you build the thunderbird with "ac_add_options --disable-tests", it will succeed. Then why? The truth is, it fails the command "python client.py checkout". What this command does is to update Comm.Central and pull the latest Mozilla_Central. My firewall detected and removed the crash testing file 485217.xsl when that command is pulling the Mozilla_Central. After the pull, the command will update the files. At this moment, the command detected the the crash testing file 485217.xsl is missing, then it stops. and now, the mozilla_central locally is not completed. And then, I use those source code to build the thunderbird. Failure is definite.Conclusion
Keep the network connected, ask people, keep trying and never give up.Sunday, February 28, 2010
keep failing on building thunderbird
Since last Wednesday my first try on building thunderbird(blog), it keeps failing on building thunderbird, and, now, I have total no idea why that happen.
Anyway, David told me some method that may help me on my build.
ac_add_options --disable-tests // ignore all the testing when it build
make -f client build >log.txt 2>&1 // this is a remind. put all the output into a file called log.txt
One is I build thunderbird basic on my previous failure build. It looks like it just enter the directory, nothing to be done, leave that, again and again. Finally, it said there are "No targets specified and no makefile found", then error, error, error and exit.(screen shot)(build log)
Another way is I remove everything about thunderbird, then clone the the source code again and build. And it just pause on some point (screen shot). then I close the command line, build it again, same result as my first situation.
I have no idea what is going on and just try to build it again and again. If I still cannot get it built tonight, then, I will go to ask someone inside the community tomorrow.
Suggestion
I talked about that with David on Thursday class. He said he didn't know exactly why this happen. There is a funny thing that my firewall detected and removed the crash testing file 485217.xsl...Anyway, David told me some method that may help me on my build.
ac_add_options --disable-tests // ignore all the testing when it build
make -f client build >log.txt 2>&1 // this is a remind. put all the output into a file called log.txt
What I get
Basically, I use two different way to build thunderbird.One is I build thunderbird basic on my previous failure build. It looks like it just enter the directory, nothing to be done, leave that, again and again. Finally, it said there are "No targets specified and no makefile found", then error, error, error and exit.(screen shot)(build log)
Another way is I remove everything about thunderbird, then clone the the source code again and build. And it just pause on some point (screen shot). then I close the command line, build it again, same result as my first situation.
I have no idea what is going on and just try to build it again and again. If I still cannot get it built tonight, then, I will go to ask someone inside the community tomorrow.
Thursday, February 25, 2010
build Thunderbird
Yesterday I was trying to build Thunderbird. I try more than 10 times in three different way, and all of them have failed.
At first, I google how to build Thunderbird, and I found an instruction on Mozilla. I thought I could use the same one I build Firefox, but it is wrong. It failed. It said I don't have the mail/build.mk file.
I thought, perhaps it was because I can build it on there or is something wrong on my mozilla source. Then, I cloned the source following the instruction, and built it again. However it still fail.
on the third try, I gave up the software(TortoiseHg) I used to clone the source, and used the command line from mozilla build. I cloned the source, and run the "python client.py checkout", and build it. Everything looks good. but failed agian in some where.
To here, I don't how to go the next step. I should bring the question to class since i have the test on the next day.
At first, I google how to build Thunderbird, and I found an instruction on Mozilla. I thought I could use the same one I build Firefox, but it is wrong. It failed. It said I don't have the mail/build.mk file.
I thought, perhaps it was because I can build it on there or is something wrong on my mozilla source. Then, I cloned the source following the instruction, and built it again. However it still fail.
on the third try, I gave up the software(TortoiseHg) I used to clone the source, and used the command line from mozilla build. I cloned the source, and run the "python client.py checkout", and build it. Everything looks good. but failed agian in some where.
To here, I don't how to go the next step. I should bring the question to class since i have the test on the next day.
Monday, February 22, 2010
breaking the firefox
Since last Thursday when Dave taught us how to use ms visual studio(ms vs) to attach a process to debug, I started to want to figure how Firefox call its functions that inside the js files.
What I did last Thursday
I attached to Firefox and went through the source code about how it handle the windows message event. However, I could only be able to work on that for three hours, and then I have to concentrate my attention on my project management course. And it keeps me busy until this after.
What I did today afternoon
At last time, I already saw some familiar windows api. Therefore, this time, I directly setup a break point at the message WM_LBUTTONUP(line 4139 of /widget/src/windows/nsWindow.cpp). What I want is try to find out where it connect to the js source code. Then I step into, step over again and again. I suddenly I lost on there. It looks like a maze. I am going to the same source code again and again. and then I realize my thought that the message WM_LBUTTONUP triggers the addTab(definition)(my previous post) directly is wrong. It is INDIRECTLY! There are many other message have been called between them. The ms vs is very slow, so that I can't go through them one by one.
To solve this problem
I put a line 'printf("zbhuang1 Msg: %d", (int)msg);' before line 3739 of /widget/src/windows/nsWindow.cpp. By the way, when you are holding the scroll bar of debug terminal, the minefield will be pause. Ok, the build is done. I click the "open a new tab" button at the tab bar,then pause the browser, release it, pause it... try to get the message which show up when a new Tab is display.
What I get
3 Full HD 1080p screen shot, no.0, no.1, no.2.
What I wonder is the message 133 and 144, because they only display once each time. Then, I setup the break point at there like this. It turns out that actually the message 15 display the tab which doesn't make sense for me.
What I go to do next
I put a 'print("disk cache read broken!");' (copy and paste, and forgot to change. lol) into addTab. Now it is building. Hope it will tell me which windows message call it. And I need to prepare my dinner :)
Concision
Maybe what I have done so far is meaningless, but that kind of structure have seeded in my mind. There are many many questions in my mind now. Why they use such a difficult structure? How they make Mozilla cross platform? How they make the Cpp program call a js function?
There are so many questions I cannot answer by this time, but I know if I keep going I will fine the answer.
What I did last Thursday
I attached to Firefox and went through the source code about how it handle the windows message event. However, I could only be able to work on that for three hours, and then I have to concentrate my attention on my project management course. And it keeps me busy until this after.
What I did today afternoon
At last time, I already saw some familiar windows api. Therefore, this time, I directly setup a break point at the message WM_LBUTTONUP(line 4139 of /widget/src/windows/nsWindow.cpp). What I want is try to find out where it connect to the js source code. Then I step into, step over again and again. I suddenly I lost on there. It looks like a maze. I am going to the same source code again and again. and then I realize my thought that the message WM_LBUTTONUP triggers the addTab(definition)(my previous post) directly is wrong. It is INDIRECTLY! There are many other message have been called between them. The ms vs is very slow, so that I can't go through them one by one.
To solve this problem
I put a line 'printf("zbhuang1 Msg: %d", (int)msg);' before line 3739 of /widget/src/windows/nsWindow.cpp. By the way, when you are holding the scroll bar of debug terminal, the minefield will be pause. Ok, the build is done. I click the "open a new tab" button at the tab bar,then pause the browser, release it, pause it... try to get the message which show up when a new Tab is display.
What I get
3 Full HD 1080p screen shot, no.0, no.1, no.2.
What I wonder is the message 133 and 144, because they only display once each time. Then, I setup the break point at there like this. It turns out that actually the message 15 display the tab which doesn't make sense for me.
What I go to do next
I put a 'print("disk cache read broken!");' (copy and paste, and forgot to change. lol) into addTab. Now it is building. Hope it will tell me which windows message call it. And I need to prepare my dinner :)
Concision
Maybe what I have done so far is meaningless, but that kind of structure have seeded in my mind. There are many many questions in my mind now. Why they use such a difficult structure? How they make Mozilla cross platform? How they make the Cpp program call a js function?
There are so many questions I cannot answer by this time, but I know if I keep going I will fine the answer.
Thursday, February 18, 2010
Let Firefox listens to my order
I was breaking the source code of Firefox last night. It was assigned by Dave. All I need to do is changing the code of Firefox, and let it directs to the homepage while it opens a new tab. Since I forgot the exactly filenames of source code for how to create a new tab, I have to search their location again.
Beginning
I targeted on the navigator bar because it has the new tab button and the home button, which creates a new tab and opens the homepage. Then I went to mxr and searched the label of new tab button, "Open a new tab". follow that was searching, searching and searching.
Found the place
I don't remember how long I spent to find the right place. There are two critical files:
\browser\base\content\tabbrowser.xml line 1256
\browser\base\content\browser.js line 1720
the function addTab() inside the first file response open a new tab. the function gHomeButton.getHomePage() in the second file return the url of homepage.
What I changed
What I changed is I put two lines inside tabbrowser.xml
if(!aURI)
aURI = gHomeButton.getHomePage();
before
var blank = !aURI || (aURI == "about:blank");
then, I built the Firefox, and it works.(actually, I built 6 times last night to reach this T_T )
Concision
It is a great experience to modify such a huge open source project. Although it is not much work to do, it still prove I have the ability, possibility and permission to do what I want to do.
BTW, I am read the post from G-Lewis and Scott Downe. They also have a very good post and they remind me I also need to enable the user to optionally set the tab to open homepage or to remain with blank page. Maybe I will try to accomplish that later.
Beginning
I targeted on the navigator bar because it has the new tab button and the home button, which creates a new tab and opens the homepage. Then I went to mxr and searched the label of new tab button, "Open a new tab". follow that was searching, searching and searching.
Found the place
I don't remember how long I spent to find the right place. There are two critical files:
\browser\base\content\tabbrowser.xml line 1256
\browser\base\content\browser.js line 1720
the function addTab() inside the first file response open a new tab. the function gHomeButton.getHomePage() in the second file return the url of homepage.
What I changed
What I changed is I put two lines inside tabbrowser.xml
if(!aURI)
aURI = gHomeButton.getHomePage();
before
var blank = !aURI || (aURI == "about:blank");
then, I built the Firefox, and it works.(actually, I built 6 times last night to reach this T_T )
Concision
It is a great experience to modify such a huge open source project. Although it is not much work to do, it still prove I have the ability, possibility and permission to do what I want to do.
BTW, I am read the post from G-Lewis and Scott Downe. They also have a very good post and they remind me I also need to enable the user to optionally set the tab to open homepage or to remain with blank page. Maybe I will try to accomplish that later.
Wednesday, February 17, 2010
pjs text() release 0.1
I am working on the ticket #213 of processing.js(pjs) this three weeks. I separated this ticket into three parts - 2D text, 3D text, dependent functions(previous post "Project plan initialization"). In this release(related to previous post "initialize git & detail of release 0.1"), I have completed the 2D text - text(val), text(val,x,y,w,h).
How it looks like now
this is the test (click to see the example):
By this moment, I have implemented almost everything about 2D text. One thing left is the processing for "\n" inside the text(val,x,y). I want to do this by substring something, but my knowledge doesn't cover that yet.
My Solution - diff(changes in line 469 and 4176)
Basically, only text(val,x,y)(line 4200) actually draw the text, and it will become text(val,x,y,z) in the next release by the way.
Every time the functions such as text(val),text(val,x,y,w,h) are called. They will do anything they need, and finally call text(val,x,y)(line 4200) to draw the text.
This is similar to the original processing source code. It reduces the difficulty for maintaining the code, and reduces the file size.
I am not satisfied with its performance because text(val,x,y,w,h) draws the text letter by letter(line 4274). I will change it as soon as I find out something like substring.
Conclusion
It is only some work for two or three days, but I spent three weeks. Anyway, as I knew nothing about JavaScript and this project three weeks ago, it is not a bad result. However, no matter what, I have to speed up in the next release.
Now I am waiting for the first review. Hope everything goes smoothly.
Saturday, February 13, 2010
Reference materials sort out
Since it is the last day of the year of the lunar calendar, a lot of things need to be done by this time. Assignments, my website, Greeting Call, going out and housework. Fortunately, release 0.1 is almost done and only little modify need to do. Therefore, I can relax and sort out what I have so far and get ready for release 0.2.
What I have so far
The most importance thing is a website I found when I was working on the processing.js(pjs) function text(val,x,y,w,h). The website introduces 3D text with canvas setTransform. Here is what it looks like (click to see the real example):
Although it is not done by pjs, it still a good start for me to implement 3d text(pjs function text(val,x,y,z)).
Second thing is remind myself there are some useful link for me to check on when I get lose.
Release 0.2 Plan (draft)
I am going to implement text(val,x,y,z), and text(val,x,y,w,h,z). However, as I said before, I may need the function called translate(). It may lead me heading to ticket #71. What is going next? I don't know, but just let it goes on. It must will be done.
What I have so far
The most importance thing is a website I found when I was working on the processing.js(pjs) function text(val,x,y,w,h). The website introduces 3D text with canvas setTransform. Here is what it looks like (click to see the real example):
Although it is not done by pjs, it still a good start for me to implement 3d text(pjs function text(val,x,y,z)).
Second thing is remind myself there are some useful link for me to check on when I get lose.
- HTML 5 canvas - the basics - a very good brief introduce the basics of canvas 2d.
- pjs ticket #71 - according to the processing source code, I will need the function translate().
Release 0.2 Plan (draft)
I am going to implement text(val,x,y,z), and text(val,x,y,w,h,z). However, as I said before, I may need the function called translate(). It may lead me heading to ticket #71. What is going next? I don't know, but just let it goes on. It must will be done.
Wednesday, February 10, 2010
before release 0.1 part2
In last post, I implemented text(val). Today, I was working on text(val,x1,y1,width,height).
To wrap the text, the very first thing came into my mind was TextArea. TextArea allows the text wrap automatically. If I can use get the text of each line inside the TextArea, I can use the same technique as I used in my last post. Then, I went to search how to do that. And it wasted me almost 6 hours. What I got for that is it is impossible to let TextArea return only one line of text.
When I was going to stop, I wonder why I don't take a look at the canvas instruction again. I looked at HTML 5 canvas - the basics, and search how to draw the text in canvas, and I got this page - Drawing text using a canvas. There is a method called mozMeasureText() which can actually solve the problem of my last post (why didn't I see this earlier). Anyway, I implemented text(val,x1,y1,width,height) and upgrade the text(val). Now they both look very good.
The next thing I need to do is, do my best to make the code better, and reorganize the tests.
this is the preview (see this in Firefox):
To wrap the text, the very first thing came into my mind was TextArea. TextArea allows the text wrap automatically. If I can use get the text of each line inside the TextArea, I can use the same technique as I used in my last post. Then, I went to search how to do that. And it wasted me almost 6 hours. What I got for that is it is impossible to let TextArea return only one line of text.
When I was going to stop, I wonder why I don't take a look at the canvas instruction again. I looked at HTML 5 canvas - the basics, and search how to draw the text in canvas, and I got this page - Drawing text using a canvas. There is a method called mozMeasureText() which can actually solve the problem of my last post (why didn't I see this earlier). Anyway, I implemented text(val,x1,y1,width,height) and upgrade the text(val). Now they both look very good.
The next thing I need to do is, do my best to make the code better, and reorganize the tests.
this is the preview (see this in Firefox):
Monday, February 8, 2010
before release 0.1
I am working on text(val) of processing.js (ticket #213) this morning. The most challenge of that is it should be able to draw immediately right of the last string placed.
About how to do that, M. Lam mentions that it is possible if we draw the new text base on the length of the last string added. And I think it is good for a try.
Follow that clue, I look into the original source code of processing again.
How it work is, it calculate each char by char, and store the final offset plus the start position. When the text(val) is called, it calls text(val,x,y,z) with ending position of the last call instead.
I know how it work, but how to do it in JavaScript? Don't even need to think, I Google JavaScript font width. Then, a page call JavaScript/CSS Font Detector flash into my eyes.
How they do is, they create a span element, put the text into it and get the offsetWidth back.
Now, what I do is, I do the same thing as they do, but after I get the width back, I delete the element.
The result is good. However, there is an error. When the text is getting longer, the bigger offsetWidth than it should be is returned. Anyway, it is not perfect yet. I will come back to this after I finish the text(val,xl,yl,x2,y2).
the code is available on here.
About how to do that, M. Lam mentions that it is possible if we draw the new text base on the length of the last string added. And I think it is good for a try.
Follow that clue, I look into the original source code of processing again.
How it work is, it calculate each char by char, and store the final offset plus the start position. When the text(val) is called, it calls text(val,x,y,z) with ending position of the last call instead.
I know how it work, but how to do it in JavaScript? Don't even need to think, I Google JavaScript font width. Then, a page call JavaScript/CSS Font Detector flash into my eyes.
How they do is, they create a span element, put the text into it and get the offsetWidth back.
Now, what I do is, I do the same thing as they do, but after I get the width back, I delete the element.
The result is good. However, there is an error. When the text is getting longer, the bigger offsetWidth than it should be is returned. Anyway, it is not perfect yet. I will come back to this after I finish the text(val,xl,yl,x2,y2).
the code is available on here.
Saturday, February 6, 2010
initialize git & detail of release 0.1
Since I have been watching the source code of text for couple days, today, I was working on setting up git on my computer. I installed msysgit on my windows, and cloned the source code from MinyXO. MinyXO's code have implemented the PMatrix3D which I think I am going to need it in the future. As I followed the tutorial (I lost the page but you will see it before you initialize), everything went smoothly until I try to upload my copy from my laptop. It needs to setup a SSH public key to before I upload, and I don't know what is that. Once again, I took a look at the tutorial, and there is a page talking about that.
After the Git has been setup, I reviewed my ticket once again. I couldn't do the 3D stuff before I clearly understand how it works on canvas. Therefore I am focusing on text(val) and text(val,xl,yl,x2,y2).
According to the ticket description and the original processing, there are some point I need to notice.
for text(val):
for text(val,xl,yl,x2,y2):
It seem to be very easy butt think it will take me a while to figure out how to implement :)
After the Git has been setup, I reviewed my ticket once again. I couldn't do the 3D stuff before I clearly understand how it works on canvas. Therefore I am focusing on text(val) and text(val,xl,yl,x2,y2).
According to the ticket description and the original processing, there are some point I need to notice.
for text(val):
- text must be placed to the immediate right of the last string placed using text()
- doesn't need to wrap
for text(val,xl,yl,x2,y2):
- wrap the text
- doesn't need to display the text out of the rectangle.
It seem to be very easy butt think it will take me a while to figure out how to implement :)
Thursday, February 4, 2010
build FireFox cont
On my last post, I was building FireFox. This post is about what happened on that day and the day after.
So, I was building FireFox that night, and then, I fell asleep:) then, on the next day, when I woke up, it was done already. It didn't bring me to any problem. I think that is because I followed the Build Documentation exactly.
after that, I tried to build it again and this time it brought me some problem. There are some problem on me .mozconf file. Obviously, I wrote something wrong this time. then I changed it back, and it worked prefect again.
at that time, I have two debug build. I asked myself why not build a release. Then, I did it as I said. And it was still work perfectly.
I want some problems. What if I build it without the mozilla-build? What if I build other software? I gotta try it someday.
So, I was building FireFox that night, and then, I fell asleep:) then, on the next day, when I woke up, it was done already. It didn't bring me to any problem. I think that is because I followed the Build Documentation exactly.
after that, I tried to build it again and this time it brought me some problem. There are some problem on me .mozconf file. Obviously, I wrote something wrong this time. then I changed it back, and it worked prefect again.
at that time, I have two debug build. I asked myself why not build a release. Then, I did it as I said. And it was still work perfectly.
I want some problems. What if I build it without the mozilla-build? What if I build other software? I gotta try it someday.
Tuesday, February 2, 2010
building firefox
On my today's open source class, Dave introduced us how to build the firefox. It is very exciting for me to build such a big program.
Now, I am building the firefox. My laptop is very slow when I write this post. Hope its T8300 2.4GHz cpu is strong enough to finish this before I go to bed. So far, it looks very good, and I have to say it is very easy to build the environment. Almost everything can be found on the web. and there is a very good tutorial on mozilla's website for that.
Oh, my cpu is getting hot, and now it is 83 degree. I have to stop here. Hope there will be another post later tonight.
Now, I am building the firefox. My laptop is very slow when I write this post. Hope its T8300 2.4GHz cpu is strong enough to finish this before I go to bed. So far, it looks very good, and I have to say it is very easy to build the environment. Almost everything can be found on the web. and there is a very good tutorial on mozilla's website for that.
Oh, my cpu is getting hot, and now it is 83 degree. I have to stop here. Hope there will be another post later tonight.
Sunday, January 31, 2010
text() in processing and processing.js
I've started to compare the differences between processing and processing.js about how they implement the text().
How processing draw the text into the canvas?
the main idea is: translate the matrix of the text base on the parameters, then draw the text.Where the code are?
In processing, we can find the code for text() in section TEXT/FONTS of the file PGraphics.java. Also, the translate() can be found in PMatrix2D.java or PMatrix3D.java.In processing.js, we can find text() as p.text() inside the processing.js file.
Other resource
HTML 5 canvas - the basics - this is the page from Opera that introduce the basics of canvas 2d. It describes how the Text API work, and it also mentions that, "the Text API is only available in recent WebKit builds, and in Firefox 3.1 nightly builds".Need to solve
- To implement the 3D Text in processing.js, I need a 3d translate(). However, it is still missing.
- How to get their codes or the latest code with the 3d implementation? There are many people working on the processingjs 3d implementation. Some of them have made somethings already. They must have a very good idea about how to deal with the 3d matrix.
- How the canvas work in 3d? I get basics of 2d, but where is the 3d?
Concluded here Today. Will continue tomorrow.
Friday, January 29, 2010
Project plan initialization
This post is about to tell you my work on Processing.js project.
Honestly, I am big fan of Flash web application, but I hate the performance of Flash especially when it is running with 3D things. Also, always requiring to install a latest version is a big problem. Therefore, it is amazing for me to see those examples of processing.js. Draw directly to the web page is unbelievable, and it also supports webGL. This is the dream of any programmer.
Also, all the code I have done can be traced on google code/osd600.
WebGL API - this is where the core is
asalga's blog and annasob's blog - see what they have done
Processing.js
Processing.js is a open source project from processing which in an open source programming language that allow users to program images, animations, or interactions. And Processing.js is a project that inherits all the features of Processing.Honestly, I am big fan of Flash web application, but I hate the performance of Flash especially when it is running with 3D things. Also, always requiring to install a latest version is a big problem. Therefore, it is amazing for me to see those examples of processing.js. Draw directly to the web page is unbelievable, and it also supports webGL. This is the dream of any programmer.
Where I am
This is my official blog for this project. It is welcome to follow me to received further information as I proceed.Also, all the code I have done can be traced on google code/osd600.
Release 0.1
Asalga suggested me to pick text() which is already exist. However, we still have a lot of work to do on that until it becomes a member of 3d family. The first thing I do on this will be the comparison of the 2d text() syntax between the processing code and processing.js code.Release 0.2 and 0.3
Once I done the Release 0.1, I will keep going to the 3d text(). It is difficult to say the detail, but I will post it once it is clear to me.Things need to learn
Processing source code and OpenGL API - expect to understand why there are OpenGL API calls in the processing source code, and how they were usedWebGL API - this is where the core is
asalga's blog and annasob's blog - see what they have done
Barriers
- English problem. Oral and communicated skill limitation. Resolution - be prepared
- OpenGL and WebGL. As this is the basics of what I am going to do, I definitely need to understand them well enough. It will be a challenge, and I expect that
Wednesday, January 27, 2010
3d in processing
Today, I was trying to build some 3d stuffs by using processing. However, it fails no matter how I try. Let's see two examples:
The first one is done by processing, and the second one is done by flash. They are using the same algorithm so that it should display the same things. However, processing fail on this. I don't know why at this moment, but I try to replace the sin and cos functions and it still does the same thing. Therefore, I guess it may be a problem about <canvas> tag. Anyway, I need try more different codes and what is the problem. So, I think I can work on this on my open source course.^^
The first one is done by processing, and the second one is done by flash. They are using the same algorithm so that it should display the same things. However, processing fail on this. I don't know why at this moment, but I try to replace the sin and cos functions and it still does the same thing. Therefore, I guess it may be a problem about <canvas> tag. Anyway, I need try more different codes and what is the problem. So, I think I can work on this on my open source course.^^
Tuesday, January 26, 2010
processing.js
In my today's open source lecture, my professor, David, introduced us the processingjs project.
Here is an example came with the source(IS NOT WORKING ON IE):
It is very awesome. Before I know this amazing project, I thought I was definitely going to join a flash 3d engine project like Sandy or Away3d. However, now I think it is much better to play around with processing. Since I have a full day tomorrow, why not try to use processing to build somethings and see the difference with flash.
Another thing is about how to put the processing works into Google Blogger.
Here is an example came with the source(IS NOT WORKING ON IE):
It is very awesome. Before I know this amazing project, I thought I was definitely going to join a flash 3d engine project like Sandy or Away3d. However, now I think it is much better to play around with processing. Since I have a full day tomorrow, why not try to use processing to build somethings and see the difference with flash.
Another thing is about how to put the processing works into Google Blogger.
- download the processing.js and init.js(not sure if this one is needed) from here
- put them into a onlineline hosting so that, in your web page, you can link to them
- put the processing code into this tag<script type="application/processing">code</script>
- put this, <canvas height="74px" width="900px"></canvas>, after </script>
Friday, January 22, 2010
my experience in community
On the Mozilla Community lecture, Mike take about the IRC. I happen to have a similar experience like that. I am a technical member in a Flash group on QQ (an instance messenger from China which has a function called group similar as channel in IRC). I entered that group because I wanted to learn something about flash. At first, I was a beginner of flash, but now, I am already a technical member responsible to answer people's questions. I can say I have learned a lot when I ask questions and answer people's questions. Therefore, I have confidence with getting into a open source channel in IRC and I am going to learn a lot.
Friday, January 15, 2010
my thought of "Revolution OS"
When I was watching the video, I was thinking about why there are so many people using Windows rather than Linux. I look arround my friends and myself who like to play games. Obviously, Windows is the only choice for us. Although I could play warcraft 3 on Linux by using wine, but we all know that the performance of that is not that good, and it is difficult to the beginner. Why there is not a good-looking game on Linux? Why EA games don't run on Linux? I think none of a game company will open their source code. Second, I like the way how Linux work - programmer are available to modify the source code, to fix a bug and so on. But it is not easy to find a program and install it sometimes. Rather than that, I like the way how windows work - double click, next, next and finish.
Bazaar brings us the freedom and free software, and Cathedral represent convenience. Freedom is good, but I don't need the code of the software in my daily life. Thereforce, for now Windows is still my first OS choice and I will keep using the opensource software.
Bazaar brings us the freedom and free software, and Cathedral represent convenience. Freedom is good, but I don't need the code of the software in my daily life. Thereforce, for now Windows is still my first OS choice and I will keep using the opensource software.
subtitles of "Revolution OS"
I am feeling a little bit different to listen every word a hundred percent clear for the video. therefore, I found the subtitles from here.
Download the video into your harddisk. In the same folder, create a new text file call that as "Revolution OS.srt", then paste everything inside that web page into the file. and load the subtitles when you use the player to play it.
hope it is helpful for whom need it.
Download the video into your harddisk. In the same folder, create a new text file call that as "Revolution OS.srt", then paste everything inside that web page into the file. and load the subtitles when you use the player to play it.
hope it is helpful for whom need it.
who am I?
Who am I? Well, my name is Zhibin Huang. I am an international student from China. I came to Canada last August (in the year of 2008). I am focusing on c++ and flash actionscirpt. I also like to play game during my spare time. and like to make friends. hopefully we can be friend.
Thursday, January 14, 2010
Hello, Open Source!
Two years ago, when I first heard about the open source, I never throught about I could get involve in it. What will happen when I encounter the open source? I don't know it, but it must be fun.
Subscribe to:
Posts (Atom)