by edvakf

in my.opera

Subscribe to RSS feed

Playing MMD in browsers

I always wanted to learn WebGL, but every time I attempted, I was lost in the concept. I had given it up three or four times.

About a month ago, I came across ammo.js and bullet.js, which are both 3D physics engine Bullet Physics ported to JavaScript. Then I thought "Hmm, it may be cool to write an MMD clone."

I started writing, knowing nothing about 3D. To my surprise, just after a month, I'm half-way there.

Play the demo

Some controls:

*Mouse drag: View angle
*Shift+Mouse drag: Center position
*Mouse wheel: Distance

You can view the source here. I'm now learning ammo.js. Hopefully, it will soon be fully physics powered!

Opera's browser.js history in a Git repository

, , ,

A while ago I came to know that we can download the entire history of browser.js from here. Apparently it started in Opera 8.50.

Then someone had the idea of putting everything in a version control system, to make the diffs viewable. I thought that was a wonderful idea. So I did it.

https://github.com/edvakf/browser.js/network

I took all the files that start with "browserjs-" (so it's not "everything", but missing some early ones), and created a branch for each version of Opera.





There are 13 versions so far, namely, 8.54, 9.00, 9.03, 9.10, 9.20, 9.50, 9.60, 10.00, 10.50, 10.60, 10.70, 11.00 and 11.10. Each version (call it A) forks from the previous version (call it B) at the time when the first file named with that version (A) was released. Obviously, the previous version (B) is still maintained for a while, so the tree looks quite interesting.

You can also see a nice tree in an application like Git GUI.



In case you want to run it on your machine, here is the source code of the script to create the repo.

https://gist.github.com/891925

Shift+Drag to resize textarea on Opera

,

I made a small but useful extension called "Drag-Resize TextArea".

https://addons.opera.com/addons/extensions/details/drag-resize-textarea/

This blog post is dedicated to a support of the extension. Please leave comment below so that I can (occasionally) reply to them.

Tweet From Address Bar Restarted

Two years ago I posted How to post on twitter from Opera's address bar.

The method ended it's life since twitter stopped basic API a month ago.

So I made a new method to do the same thing. It now works on Firefox as well as Opera.

It's now much easier than before. Just go to http://atsushuu.appspot.com/tw/ and follow the 3 step instructions. That's all.

Enjoy tweeting!

HTML is a fashion brand!



How cool is that!?

http://plaza.rakuten.co.jp/namincyu/diary/200906150001/

http://item.rakuten.co.jp/icefield/c/0000000218/

Apparently, this is a serious fashion brand and there's nothing geeky about wearing it in Japan.

How to Overcome a Minimum Time Interval In JavaScript

Every JavaScript programmers should know that the setTimeout and setInterval invoked with a small number in their second argument would not be called in that time.

So the below script would not alert 0, but some number between 5 to 15 (in the unit of ms).

var startTime = new Date;
setTimeout(function() {
  alert( new Date - startTime );
}, 0);


@bcherry wrote a script to test this latency time.

As far as I ran the test on Mac OS X, Opera, Firefox and Safari all return around 10 ms, and Chromium returns about 4.5 ms.

Now, this latency is not big for usual use cases. When we write an animation in JavaScript, we usually pass a number between 30 and 50 to setTimeout/setInterval. That's around the number that something is apparently moving smoothly to the human eye.

But there are times we want as small time interval as possible, for example, when you run a terribly heavy loop and want to split the process into many asynchronous processes. The advantage of doing that is so that the browser's main process does not stop. JSDeferred has it's example in the sample page (look at the brainfuck interpreter example). When doing this kind of thing, length of the time out is crucial to the performance.

What JSDeferred does in order to overcome a minimum time interval is to use asynchronous DOM interfaces. In short, here is more or less how it's done.

function async(callback) {
  var img = new Image;
  img.addEventListener('error', callback, false);
  img.src = 'data:,';
}


It's that simple. This code unfortunately doesn't work in IE, so it's slightly more complecated.

function async(callback) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src  = "javascript:";
  script.onreadystatechange = function () {
    document.body.removeChild(script);
    callback();
  }
  document.body.appendChild(script);
}


I tested performance using @bcherry's script, but changing setTimeout(fn, 0); to async(fn); with the async function I defined above. The average latency was about 0.16 ms on Chrome, 0.64 ms on Safari, 0.53 ms on Firefox, 0.059 ms on Opera 10.10 (wow!), and 0.52 ms on Opera 10.50 (degraded from 10.10...).

So, my async() is an order faster than setTimeout().


That there are other ways to implement the async() function, these apparently are not as universal as capturing img.onerror. Here is an example.

function async(callback) {
  var script = document.createElement('script');
  script.onload = function() {
    document.body.removeChild(script);
    callback();
  }
  script.src = 'data:,';
  document.body.appendChild(script);
}


This takes 0.14 ms on Safari (notably faster than the above), 0.48 ms on Chromium, 0.50 ms on Firefox, but doesn't work on Opera.

Another one is this.

function async(callback) {
  var xhr = new XMLHttpRequest;
  xhr.open('GET','data:text/html,<html>',true);
  xhr.onreadystatechange = function() {
    xhr.onreadystatechange = null;
    callback();
  };
  xhr.send(null);
}


This takes only 0.076 ms on Opera (both 10.10 and 10.50), and 0.64 ms on Safari. On Chromium and Firefox, it raises an error.

In conclusion, setTimeout is slow. Use other async APIs when performance is crucial.

Lorentz Attractor demo by Canvas

I created another demo of HTML Canvas.

Lorentz Attractor with Canvas

It makes use of sylvester_canvasviewer.js which I created, and publishing under public domain. It's a 3D graph plotting library that works on top of Sylvester.

Ripple effect by Canvas

, , , ...

Here is a demo I made today.

http://atsushi-takayama.com/junk/ripple/



I tested it on Safari, Opera, Firefox. But Opera 9.64 has a bug about transparency of the canvas, so the color is worng. Opera 10 alpha works fine.


You can also copy the JavaScript source (link below) and paste it in the address bar to run as a bookmarklet, on any page you like.

http://gist.github.com/105217

AutoPagerize - Don't Click "Next Page" Any More

AutoPagerize is the revolution of User Interface.

Imagine when you search something on Google, Yahoo, MSN, you name it. The most annoying thing is that you have to click "Next" again and again and again...

You click, wait for the next page to load, scroll, click, wait to load, scroll, click, wait again, and then "Oh, what was written just two pages ago." Now you go back and back. I don't know how much time we are wasting there.

AutoPagerize is a User Script that was written to optimize the web experience, by cutting this stress. Not just redusing it, but by making it absolutely zero.

The script automatically fetches the "next page" and inserts it into the current page as you scroll. No need for clicking. Simple as that. Because it adds the next page while reading the current page, the waiting time is almost zero! (I'd say completely zero but sometimes there is network delay and so on, huh?)

If you want to go back, simply scroll up. Or do in-page search. No more waiting.



What? "90% of the links clicked on Google search results are on the top 3 result pages?" Just forget it already. It's yesterday's web. Now you can search as much as you want.

Good thing is that the script is not only for the search results. But for columns, blogs, etc. At the moment the coverage is limited to only A FEW THOUSAND websites. But you can contribute to increase it. All you need to do is edit SITEINFO.



So where is the script?

It's AutoPagerize for Firefox/Greasemonkey, and oAutoPagerize for Opera, Google Chrome, Safari/GreaseKit.

The Greasemonkey version is easy to install if you know how to use Greasemonkey. There is even painless AutoPager add-on for Firefox too.

oAutoPagerize can be a little bit complecated to use. That's why I was editing this wiki page. I hope I made everything clear for all of you.

Also if you are using the Firefox version and wondered what SITEINFO is, take a look at the wiki.

Pixel-wise Manipulation of Canvas on Opera

Yesterday, I saw a cool demo of <canvas>

Opera canvas sand


Opera has 'opera-2dgame' context for <canvas>. One of the things you can do with it is that you can manipulate the canvas pixel by pixel (link below). It's using that to get the animation effect looking as if the image is blown away by a wind.

The 'Opera-2dgame' Canvas Context - By Web Applications

Nice, isn't it?