Archive of July 2009

July 30, 09

Pulling the quotes with CSS

Never thought I was ever gonna blog about the CSS, but this time it's an exception – couldn't find the solution on the web, yet it turned out to be very simple – CSS pullquotes. Most of the [solutions that I found]( were based on using background elements for quote characters, the problem with this is that the closing quotes are not aligned with the last letter of the quote. So I've tried :before and :after CSS pseudo selectors to inject quotes and it worked fine with Safari4/FF3 but older browsers were ignoring postion: absolute setting on them. No positioning, no joy. I took the path of the least resistance and used <span> tags to mark the quotes, and here's the result:
...This is just a simple example to show how to style the blockquote element with pullquotes. Happy birthday Mum!

**The HTML looks like this:** <blockquote>    <span class="open">“</span>...This is just a simple example to show how to style the blockquote element with pullquotes.<span class="close">”</span> </blockquote> **And the CSS:** blockquote { font-family: Arial, _sans; position: relative; text-indent: 15px; font-size: 14px; line-height: 1.3; display: block; width: 295px; margin: 0; } blockquote span { /* Define custom font for quotes here */ font-family: Georgia, _serif; text-indent: 0; font-size: 50px; position: absolute; color: #fc0; } blockquote .open { /* May need to adjust the position depending on the font type/size */ top: -15px; left: -5px; } blockquote .close { /* May need to adjust the position depending on the font type/size */ margin-left: 0px; /* Alternatively use padding-top */ margin-top: -5px; }
01:10 PM | | 0 Comments | Tags: ,
July 19, 09

Realtime Terminator Salvation "Machine Vision" fx

Have you seen Terminator Salvation yet? There's a bunch of cool visual effects developed by Imaginary Forces, it shows the [world as seen by machines]( There's a lot of object tracking going on there, I was thinking whether I could recreate the whole thing just in pure AS3. And, well, here's the result (which I am actually very proud of) ;-)
Terminator Salvation Machine Vision in AS3 by Og2t
**Click image to activate, wait for the video to buffer (1.6MB) press EDIT button to play with the filters (in full screen mode).** Enable your webcam (if you have one) and play about with sliders and checkboxes – try if your face can be tracked too – but then watch for evil Terminators – they'll come and get you! ;-) Btw. you can turn histograms for every filter - thanks to [Quasimondo]( for the code. This is a part of the whole video filter framework I am developing just now, the inspiration came from [Joa Ebert's Image Processing]( library (as far as I know, he's cooking a complete rewrite). **The full source code (including Pixel Bender kernels and examples) will be soon released on Google Code and will feature face/eye tracking/gestures and few other things (surprise!)** A lot of people are very sceptic about the whole eye tracking idea, they don't believe it's precise enough to make any use of it – I will prove that it is, and it works! (just watch closely how it tracks my eyeballs on the video!) My approach is to make everything as much simple as I can. If something cannot be achieved using this rule, I either abandon the idea completely or look for a simpler solution. The face tracking is actually relatively simple, I will briefly describe each step: 1. **Brightness/Contrast (HBSC filter)** - initial adjustment of the input (will be replaced with auto levels) 2. **Motion Capture** - works the same way as the "movement watchdog" that's implemented in brains of almost all animals (including humans) in order to survive – it finds the rectangle area of the all the differences between two frames. This step could be much more complicated (i.e. I might use face detection or [Eugene's motion tracker]( once he decides to release the source) but simple motion capturing is good enough for Machine Vision experiment here. 3. **Shape Depth Detector** – finds centres of colour local maximums, **play with the levels slider carefully to get more details** – it works by posterising the image then does a [very fast blob detection]( on every result colour – thanks to [Kynd]( and [Kampei Baba]( for sharing this technique. 4. **Color Grading** – identical to Photoshop's Gradient Map – uses paletteMap to remap the colors. 5. **Machine Vision** – the final and the most complicated filter – utilises [Delaunay triangulation and Voronoï diagram by Nicoptere]( – it's fast enough to process it realtime (thanks for sharing!). Then it plots the points and lines and applies my spotlight effect class (another blog post on that subject coming soon) to achieve the final look. Btw. I've found another [very cool experiment using Delaunay for face triangulation by Neuro Productions]( Other thanks goes to Mr. Doob for his stats widget, Bit-101 for the Minimal Comps and [SubBlue]( for lots of inspiring technical discussions we've had during lunch breaks at [tictoc]( Feel free to leave any comments questions and suggestions, I am really interested what you think. You can also follow my [blog updates]( on Twitter or RSS. It's getting very late now, so I better go. **UPDATE: I am giving up, it's just too hard to track human's head, I gonna do next experiments with chickens:**

**UPDATE 2:** If you liked this experiment, make sure you see the [new version](
11:53 PM | | 5 Comments | Tags: , , , , , ,