somewhere to talk about random ideas and projects like everyone else

stuff by antimatter15

Hi. I’m Kevin Kwok, and I’m currently a junior at MIT, and this is my obligatory online presence or whatever.

This is my little corner of the internet, where I talk about random projects and ideas and stuff.

If you want to contact me or read obnoxiously nostalgic autobiographical trivia, check out the about section.


Archive

Tags

3D actionscript ajax ajax animator api apple arduino art awesome blog browser bugfix canvas change chrome code color colors css design doge elitist evil experiment export extension ExtJS fast features firefox flash format function future GAE github google google code google wave graphics hacking hardware hosting html5 idea image internet exploder ipad javascript json library light lines linux login magical meta microsoft microwave mirror mit multitouch new nostalgia ocr offline old onlypaths pi progress prototype python raphael release rewrite school security shiny ShinyTouch simple site small speed SVG touch update upload user interface vector vectoreditor version video vision vp8 vX JS wave webcam wikify wikipedia wordpress

August 2011 Archive

Surplus 19 August 2011

In a continuation of my rather unhelpful habit of documenting my activities on this blog long after you probably already know about it, I guess it’s time for me to discuss Surplus, my wildly popular (at time of writing) chrome extension which integrates Google+ notifications into Chrome.

Even more impressive, the name, which is a fairly common word is actually on the first page of a Google search for the word (around eighth result). It peaked at around 53,000 users and at one point made me the 329th most followed person on Google+.

 

Generating the iOS 5 Linen texture with Canvas 19 August 2011

Screenshot
noise
I guess the linen texture which is way too prevalent in Lion and iOS 5 looked pretty cool so I tried replicating the effect in canvas. It’s not instant but the texture is generated fairly quickly. It’s all done in around 20 lines of code. The basic idea is to first create a bunch of semi-transparent noise such as the stuff on the right (Though in the real one the opacity is only 3% and in the one on the right it’s been increased to 70%). To do that, we createImageData and set every fourth pixel to 6 if Math.random() < 0.1. That means approximately 10% of the canvas will be semi-transparent with the rest being totally transparent. I’m not clever enough to embed some steganographic message in the ostensible noise pattern, because I’m just way too lazy for that sort of stuff. But if you think that that last sentence was actually a decoy for my master plan, feel free to waste time decoding a message which probably isn’t there.

After that, the canvas is converted to a DataURL so it can be loaded as an image. After loading the image, we iterate 40 times and call drawImage on the original canvas with an offset to make every single point into a cross-shape. Demo.

« Archives