Activate your free membership today | Log-in

Monday, June 22nd, 2009

HTML 5 and the Wizard of Oz

Category: Fun, HTML

Kyle Weems, the CSS Squirrel and author of the occasional and bizarre comic of the same name, targets his latest rendering at Ian Hickson:

Click-through to see the full comic. The related blog entry fleshes out the basic complaint some more:

Why is it that the person who is the center of this process is allowed to be a man who rejects consensus, actively denies issues (based on his own admitted policy) and substitutes expert advice in important areas like accessibility with analyzing data from the Google Index and parsing numbers? Numbers that we cannot have a third party confirm because every request to do just this is ignored?

There is no doubt in my mind that Ian is brilliant. However no man, no matter how brilliant, should be allowed to be so influential on a spec when he is bringing all this baggage to the table with him.

The number of grievances folks have with any standards process are legion, but wouldn’t life be more fun if they all came with comics?

(As I wrote this, Dion leaned over and said, “I used to work with Ian, I find it funny to think of anyone trying to control him.”)

Posted by Ben Galbraith at 1:05 pm
11 Comments

++++-
4.4 rating from 25 votes

Friday, May 1st, 2009

Deep Leap: Teasing John Resig

Category: Fun, Games, JavaScript

John has been working on a very fun scrabble typing game called Deep Leap and although he hasn’t finished it yet, people found it (John, time to learn about .htaccess ? ;)

Just to tease him a little more and get the word out before it is finished, check it out!

Posted by Dion Almaer at 4:33 pm
9 Comments

++---
2.7 rating from 45 votes

Tuesday, April 28th, 2009

Happy Birthday, Opera

Category: Fun, Opera

You may have already seen Opera’s celebratory home page marking their fifteenth anniversary:

But did you also notice the comic depicting their founders’ story?

Happy Birthday, Opera.

Posted by Ben Galbraith at 10:58 am
6 Comments

++++-
4 rating from 28 votes

Friday, April 24th, 2009

Mouse Gestures with GWT

Category: Flash, Fun, Gears, UI

Marc Englund wrote to us about his recent experiments with mouse gestures and GWT:

SimpleGesture is a GWT (and IT Mill Toolkit) implementation of the mouse gesture recognition method described by Didier Brun at bytearray.org (as I understand it). It allows you to register easy to understand (human readable) gestures, and receive events when these occur. Additionally, SimpleGesture can record new gestures, so that you don’t have to write them by hand.

In this video demo, he’s using a Wii to show it off (this confused me at first, but he’s using the Wii as a mouse and isn’t doing anything with the Wii-specific inputs):

You can also play with a live demo.

SimpleGesture relies on a bit of Flash to do its thing:

I have used the bytearray mouse gesture library for a Flash project before, and I love how simple the method is, and yet it works very well.
The method works by assigning a number depending on which direction the mouse moves in (moving right will produce “0″, moving down will produce “2″, and so on), and comparing the resulting string of numbers to the registered gestures. The gesture with the lowest Levenshtein distance (and below a set threshold), is considered a match.

Posted by Ben Galbraith at 9:00 am
5 Comments

+++--
3.5 rating from 22 votes

Monday, April 20th, 2009

Visualizing sort algorithms with Canvas

Category: Canvas, Fun

The image above is a visualization of a bubble sort with 15 elements.

Jacob came up with the goods again as he was inspired by Aldo Cortesi’s work doing this with Cairo.

Nicely done guys. If we ever get a sort algorithm question again not only will we be able to give the big O notation, but imagine pulling out some Canvas code to visualize ;)

Posted by Dion Almaer at 2:36 am
1 Comment

++++-
4.1 rating from 16 votes

Tuesday, April 14th, 2009

Metatunnel: The (Future) Web Strikes Back

Category: Canvas, Fun

Last week, we posted a story on the Metatunnel demo, a concisely-written Linux and Win32 demo that Paulo Falcão ported to JS. We looked at the pitiful performance of the JS version as evidence that, high-speed JS engines notwithstanding, the web's got a ways to go on the fx front.

We didn't dig deep enough.

Someone posted a follow-up to our story saying that the JS code was poorly optimized and that the JS version could be made to run faster. That got me wondering how efficient the desktop version was, and how apples-to-apples the versions were in terms of total calculations performed per frame. My thinking was that if the JS version could be made faster but via optimization contortions that the desktop version didn't require, that's missing the point.

It turns out the desktop source is trivial: it's an assembler bootstrap for passing OpenGL shader instructions to the system's OpenGL driver:

JAVA:
  1. // we don't have a "shader" syntax highlighting;
  2. // using "Java" instead :-)
  3. vec2 v=(gl_FragCoord.xy-vec2(400,300))/vec2(400,300);
  4. float w=dot(gl_Color.xyz,vec3(1,256,65536))*.25;
  5. const float s=0.4;
  6.  
  7. float obj(vec3 pos){
  8.         float final=1.0;
  9.         final*=distance(pos,vec3(cos(w)+sin(w*0.2),0.3,2.0+cos(w*0.5)*0.5));
  10.         final*=distance(pos,vec3(-cos(w*0.7),0.3,2.0+sin(w*0.5)));
  11.         final*=distance(pos,vec3(-sin(w*0.2)*0.5,sin(w),2.0));
  12.         final *=cos(pos.y)*cos(pos.x)-0.1-cos(pos.z*7.+w*7.)*cos(pos.x*3)*cos(pos.y*4.)*0.1;
  13.         return final;
  14. }
  15.  
  16. void main(){vec3 o=vec3(v.x,v.y*1.25,0.0);
  17.         vec3 d=vec3(v.x+cos(w)*.3,v.y,1.0)/64.0;
  18.         vec4 color=vec4(0.0);
  19.         float t=0.0;
  20.         for(int i=0;i<75;i++) {
  21.                 if(obj(o+d*t)<s){
  22.                         t-=5.0;
  23.                         for(int j=0;j<5;j++){
  24.                                 if(obj(o+d*t)<s){
  25.                                         break;
  26.                                 }
  27.                                 t+=1.0;
  28.                         }
  29.                         vec3 e=vec3(0.01,.0,.0);
  30.                         vec3 n=vec3(0.0);
  31.                         n.x=obj(o+d*t)-obj(vec3(o+d*t+e.xyy));
  32.                         n.y=obj(o+d*t)-obj(vec3(o+d*t+e.yxy));
  33.                         n.z=obj(o+d*t)-obj(vec3(o+d*t+e.yyx));
  34.                         n=normalize(n);
  35.                         color+=max(dot(vec3(0.0,0.0,-0.5),n),0.0)+max(dot(vec3(0.0,-0.5,0.5),n),0.0)*0.5;break;
  36.                 }
  37.                 t+=5.0;
  38.         }
  39.         gl_FragColor=color+vec4(0.1,0.2,0.5,1.0)*(t*0.025);
  40. }

Shoot, passing instructions to the video card? That's not a fair fight. It turns out Firefox 3.5 has a prototype Canvas 3D plug-in, and it exposes an OpenGL API. It was quick work for one of Mozilla's graphics gurus and the plug-in's primary developer, Vlad Vukicevic, to port the Metatunnel demo to Canvas 3D. The result is quite impressive:

See for yourself, but you'll need Firefox 3.5 Beta 3 or later and the Canvas 3D plug-in.

We should also mention that Paulo, Jacob Seidelin, and Hans Schmucker collaborated on optimizations in the JS software-rendering version that resulted in much higher FPS on "next-gen JS" browsers (Safari 4, Chrome, and Firefox 3.5). Note, on this demo you can use the Q and W keys to adjust quality.

Posted by Ben Galbraith at 7:00 am
9 Comments

++---
2.9 rating from 25 votes

Friday, April 10th, 2009

Metatunnel 1k Demo: JS vs. OS

Category: Canvas, Fun

Dion and I talk frequently about how the web platform's capabilities are approaching the desktop, which features like canvas and faster JavaScript run-times. It's great to get a piece of humble pie like this one.

FRequency created an interesting demo (as in "demo scene") of a "metatunnel":

Paulo Falcão ported this to JavaScript using <canvas>; how well does the JS version perform, you ask?

You get about 5 FPS at that size on Google Chrome, Safari 4 and Firefox 3.5 pre-releases; much worse on earlier browsers of course.

We've got a ways to go. ;-)

Posted by Ben Galbraith at 7:00 am
16 Comments

++---
2.5 rating from 14 votes

Tuesday, April 7th, 2009

CSS is Awesome, so what about JavaScript?

Category: CSS, Fun

That is a great mug, but the question is..... what can we do for JavaScript or HTML?

Posted by Dion Almaer at 1:13 am
12 Comments

++++-
4.1 rating from 26 votes

Tuesday, March 17th, 2009

Unobstrusive Image Puzzle Maker with Canvas

Category: Canvas, Fun

Wow. Christian Effenberger pointed us to his impressive Snapfit.js project.

Snapfit takes any picture and, if the browser has support for canvas (or VML), will make it into a puzzle. Not just any puzzle, mind. A potentially wicked hard puzzle where the pieces can be mirrored in either axis. But, not to worry, if you need the puzzle solved, it will do an animated transition showing where the pieces should go, etc.

Christian sent us a few notes about performance, etc.:

The speed depends generally on picture dimension and number of puzzle pieces and particularly on browsers Javascript-Canvas-Performance.

It seems that Opera 9.x and Firefox 1.5 are to slow to be practicable, at least on my system (G4/1.25GHz).
Internet Explorer implementation in VML do not support all features and is unable to provide sub pixel precision. So don't expect to much.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari.
On older browsers, it'll degrade and your visitors won't notice a thing.

Drop it into your site!

Posted by Ben Galbraith at 7:00 am
2 Comments

++++-
4.6 rating from 23 votes

Monday, March 16th, 2009

More Particles in JavaScript

Category: Fun, JavaScript

A long time ago we covered a simple particle engine in JavaScript, used to produce a toy fire effect (about two years later it was ported to canvas and got much faster).

Pawel Witkowski wrote in with another particle demo, this one as a teaser to his promised future full-featured JavaScript particle framework:

I spent some of mine free time to create this nice effect in pure Javascript. Actually I plan to make a whole libary for it. Just to show you what it might give you i prepared some cool example...

He goes on to discuss performance a touch:

Please don't blame me for performance :) I tried almost everything I could get to make it faster. I used and tested a few trick of optimalisation to give you some result of mine tests:

1. Hiding element, moving it then showing - does not increase performance. In fact it is faster to do:

JavaScript:
  1. element.style.top="10px";
  2. element.style.left="10px";

This is what I observe in this application, but also in mine application that I currently work in my job (moving map tiles).

2. Fastest way to move object is to directly set style attribute via:

JavaScript:
  1. element.setAttribute("style","left: 10px; top: 10px");

But this does not work in IE. Instead you could use:

JavaScript:
  1. element.style.cssText="top:10px; left:10px";

But to make things strange - this is slower in IE than setting style.top, and style.left separately.

Canvas, my friend, canvas. My favorite part of the source code is the in-line font definition, partially reproduced here:

JavaScript:
  1.  
  2. var font=
  3. [
  4. "    :::$    ",
  5. "  :+: :+:$  ",
  6. " +:+   +:+$ ",
  7. "+#++:++#++:$",
  8. "+#+     +#+$",
  9. "#+#     #+#$",
  10. "###     ###$",
  11. ":::::::::$ ",
  12. ":+:    :+:$",
  13. "+:+    +:+$",
  14. "+#++:++#+$ ",
  15. "+#+    +#+$",
  16. "#+#    #+#$",
  17. "#########$ "

Posted by Ben Galbraith at 9:00 am
3 Comments

++++-
4.1 rating from 25 votes

JavaScript version of XEyes

Category: Fun, JavaScript

Let's start out the week with a bit of fun. David King has a little "port" of the good 'ole xeyes into JavaScript and it is a surprisingly small amount of code.

He goes into how it all works in his article, covering the code like this:

JAVASCRIPT:
  1.  
  2. // Get the distance with pythagoras
  3. var difX = mouseX - eyeX;
  4. var difY = mouseY - eyeY;
  5. var dist = Math.sqrt ((difX * difX) + (difY * difY));
  6.  
  7. // Now get the angle of the dangle
  8. var dTan = Math.atan2 (difX, difY);
  9.  
  10. // Now we get to work out where the pupil should be
  11. var maxDist = 600;
  12. dist = Math.sin ((dist> maxDist ? 1 : dist / maxDist));
  13. var newX = Math.round (Math.sin (dTan) * dist);
  14. var newY = Math.round (Math.cos (dTan) * dist);
  15.  

Happy Monday.

Posted by Dion Almaer at 7:48 am
4 Comments

+++--
3.5 rating from 31 votes

Wednesday, March 11th, 2009

De-crocking HTML5

Category: CSS, Fun

Stephen Celis has a fun post talking about Douglas Crockfords HTML 5 comment, namely:

…the HTML5 project is misguided… It is trying to do too much without a clear mission that defines the problems it is solving. I think the project needs a reset.

He comes back:

Where’s the glitz, though? The dazzle? What can an artist do without a canvas? We could have audio and video, and no plugin! You won’t miss my congratulatory advertisement this time. You deserve to know. And to know the joy of SQL, finally, in the browser. Forms with placeholders and validations built-in! Vectors! details! And the semantics, oh the semantics! What’s a poor old Google to do, parsing through divs and spans when it could have nav, article, and aside? Won’t somebody please think of the robots?

But let’s leave the HTML argument be, for now. We can at least agree that CSS is in a wonderful place. JSON’s little half nephew is doing all right.

And then he finishes up with the fun demo that is embedded in the video above too, else point Safari 4 or Chrome.latest.devchannel to his post.

Posted by Dion Almaer at 8:42 am
6 Comments

++---
2.3 rating from 23 votes

Monday, March 2nd, 2009

Secret: Time for some Monday fun

Category: Fun, JavaScript

Allan Jardine, a chap who I am a big fan of as he does great work, has a bit of Friday fun that I couldn't resist putting up on a Monday. He has created Secret "a Javascript library which provides the functions required for scanning an HTML document for certain characters, locating those characters on the rendered page and then displaying them in a rather fun Harry Potter style":

What Secret does is to take a string and then locate each individual character from that string on a rendered page. It will then duplicate each found character in place and finally display the original string in a rather fun 'magical' manner. It's really an experiment to see if I could get the location of an individual character since that kind of information isn't presented by browsers.

You can check out the code to get the fun details in how this all works:

The way Secret works is to firstly discover what HTML elements are currently displayed inside the browser viewport (it is preferable to take characters from the text which can be seen rather from any random point in the document), and read the text from each of the text nodes with in these visible elements. For each character in your message, Secret will scan through the text which has been found and randomly select one for display. If one can't be found then it would fall back to look outside the hidden areas as well, and finally fail if a suitable character can't be found.

Once a character has be found, it position in the document must be determined. Browsers don't provide a convenient method for doing this with text nodes, and specifically individual characters, so what Secret does is to wrap a 'span' tag around the target. From there the getBoundingClientRect() method can be used to determine its location.

After that, its a case of calculating where on the screen the character should be displayed, relative to the other characters in the string (line breaks etc. must be considered) and animating the element into position. The animation is provided by the YUI library, which made this animation exceptionally simple to implement (thank you to the YUI team!). The core of Secret is independent of any library so you can use that for any application you which, only the animation requires YUI.

Posted by Dion Almaer at 4:01 am
7 Comments

+++--
3.9 rating from 21 votes

Friday, December 19th, 2008

Browser version 10 the new Y2K

Category: Fun, Opera

Here is a fun one for Friday, Hallvord Steen discusses the error reports coming in for Opera 10 that are to do with the version number.

That's right, it appears that a number of people use the first character as the version number, which means that Opera 10 is showing up as Opera 1:

So we're busy preparing the major upgrade from 9.5x and 9.6x - and what's more obvious than calling it Opera 10? What's in a name, or a version number?

Apparently a lot of trouble.

As Andrew Gregory already noticed, we're the first browser ever to release with a two-digit version number. If websites assume that version numbers always have a one-letter "major" part and look for a single digit, they are going to "detect" Opera 1!

Since we released the first preview of Opera 10, we're seeing the bug reports come in. Web sites go belly up because of their bad sniffing.

Posted by Dion Almaer at 3:30 am
11 Comments

++++-
4.9 rating from 29 votes

Friday, December 12th, 2008

Travians: Sims meets Cultures, with Ajax

Category: Fun, Games

Steve Mattison let us know about a new AJAX game has been released by the makers of that old popular PHP-based village building game Travian. This one is more like Sims meets Cultures, and it is called Travians:

"Travians is a browser game in which you rise to the challenge of
everyday life as a villager. This means more than just specializing in
your occupation, building your own home or deciding whether you enjoy
games more than fighting: The most important thing is communication
within the huge village community. This is the only way to get fun
clubs and strong guilds. Become a Travian and experience a whole new
online world!

Posted by Dion Almaer at 7:44 am
11 Comments

+++--
3.6 rating from 39 votes

Friday, November 21st, 2008

Digg Attack: A Canvas Game

Category: Canvas, Fun, Games

Fun news for a Friday. From Jacob Seidelin--the dude behind JavaScript Super Mario Brothers--comes Digg Attack, an original JavaScript game using <g;canvas> for visuals (and Flash for music).

As an added twist, the game uses Digg to provide a sort of unique twist; enemies in the game are based on stories in the Digg API feed and their ratings.

Posted by Ben Galbraith at 7:00 am
2 Comments

++++-
4.2 rating from 18 votes

Next Page »