Andy Li's Blog

>>Demo<< (Click to toggle filter)

source (Flex project including pbk)

I have been very busy since the last few weeks… so the chroma key filter was put aside for a long time until today

I have used conditional compile in the filter to avoid having if-else in the runtime, hopefully can increase performance… Anyone volunteer to measure it and post the different?

In the last week I have tried to make some CSS-only experiments. Originally it’s just an idea to play some effects with CSS animation which now available in webkit. But at the end I am obsessed and making games with CSS… Yup, that’s embedding game logic in the place which designed to be presentation layer only…

Video first, description follows:

Mouse shadow

Open experiment

It works on webkit browsers only (Chrome, Safari).

What I want to create is just some old-school shadow, fading etc. Turn out using a deeply-nested div for the effect is quite stylish. The divs are assigned to different classes based on their nested level to improve performance because div > div >div > … is just too slow…

Gear

Open experiment

Again, works on webkit browsers only (Chrome, Safari).

I find the deeply-nested div has quite a potential to make some more things, so here is another product of it. Swapping the CSS transition with CSS transform achieved something very similar to fractal.

One little defect is I used percentage for the size of divs and the rounding number cause some gaps between divs… It is more noticeable when using resolution 3.

Pixel art

Open experiment

This one works on all major browsers (IE 6/7/8, Firefox, Safari, Chrome)

This is a drawing board that you can click to draw pixel.

I remembered there are hackers tried to get users’ browsing history by using color-change of visited link. It impressed me to store valued in the browsing history. Originally I used links with hash values (ie. <a href=”#123″></a>) and it works in all the browsers… except IE. IE will turn the color when you click on it but it does not store it in the history. So I switched to use iframe, that is setting the links to open in the iframe and serve a dummy webpage with random URL…

Click Challege

Open experiment

This one is webkit browsers only (Chrome, Safari).

This is the latest experiment I made, which is really a playable game. CSS keyframe animation is used to simulate a timer. Lots of identical checkboxes to act as an area to let user clicks on. They are removed when clicked on it, using :checked in CSS. Finally a CSS counter is used to label the checkboxes (actually a ordered list will be fine).

2009-11-26: Gear is now on Chrome Experiments! Being the first CSS-only experiment over there

When writing BrainFlash, I was thinking if the string concatenations for program output will slow down the whole interpreter. That is because I was once hit that a year ago when dealing with XML.

I asked for better handling methods over StackOverflow. It is interesting that some of the answers shown that using “+=” is already the fastest. But I still want to know more about that, so I wrote my own simple testing program, which is below:

ActionScript version

Methods used are:

1. str += concateString;
2. str = str.concat(concateString);
3. array.push(concateString); … str = array.join(“”);
4. vector.push(concateString); … str = vector.join(“”);
5. byteArray.writeUTFBytes(concateString); … str = byteArray.readUTFBytes(byteArray.length);
6. byteArray.writeMultiByte(concateString,”us-ascii”); … str = byteArray.readMultiByte(str.length,”us-ascii”);

The result shows that fastest method is using “+=”, but using Array/Vector is still very close to it. Using ByteArray is slow and with ASCII instead of UTF-8 is even slower…

And all the methods are performed reasonably fast, what is slow is when showing the resulting string on TextArea… It takes a few seconds! But when it is drawn, run it again and it will become normal speed, maybe there is some caching?

JavaScript version

I coded a JavaScript port too. See it here.

Methods used are:

1. str += concateString;
2. str = str.concat(concateString);
3. array.push(concateString); … str = array.join(“”);

Interesting enough, the result is very similar to AS3. It is the opposite of what we believe using the Array trick will let it performs faster. “+=” is the fastest in most cases, if not, that’s not much difference.

I’ve only tested in IE8(Win), Firefox 3 (Win/Mac), Safari 4 (Win/Mac), Chrome 3 (Win). The really really really interesting part is in Chrome 3, using the concat method of String is x7000 SLOWER than the other two!! What are your results?