You have probably seen all these fancy recipes, that are available through Google. You can have that kind of attractive links to your site too. How to do that? Let the search engine (SE) understand what is the actual meaning of the information you have on your site. We will use RDFa for this purpose.

So the thing you need to do to help SE understand your site is mark specific type of information. For example if your site contains some information about certain people:

<div>
Mr. Bob Henderson is the CFO of Fiction Ltd. Friends call him Bob.
</div>

There is a huge amount of valuable information in these short sentences. For now, this information is not explicitly visible to SE.

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
<span property="v:title">Mr.</span> 
<span property="v:name">Bob Henderson</span> 
is the <span property="v:role">CFO</span> of 
<span property="v:affiliation">Fiction Ltd</span>. 
Friends call him <span property="v:nickname">Bob</span>.
</div>

After inserting the code above not only human but also any good SE understands what is the meaning of the key words (like “CFO”, “Bob”) and their relationship to Bob Henderson. The semantic metadata is added in order for the SE to achieve better understanding of information.

This is only the very first step. Some say that it is the hardest step to make, but you should judge that on your own after studying these:

• Google’s information about rich snippets,
• The definition of things we used in the example,
• numerous blog posts about the whole concept.

Enjoy!

Maybe it was because I recently watched Ridley Scott’s Blade Runner with it’s extraordinary lighting. Or perhaps it is because of the never ending dark winter in my town allowing neon lights to shine twice as long as usual?

Anyway, look at the pictures:

Intro Lee Brimlow has two really good video tutorials that will help you get over the hump of learning pixel bender – so I won’t repeat those. Check them out below! Learn Pixel Bender Putting Filters into Flash 10 But in this post, I’ll give you a ton of pixel bender filter algorithms and programs. Keep in mind pixel bender is extremely easy to use and extremely easy to learn!!! I once took a filters class, never thought I’d ever use it. I was up … Read More

via Professional Papervision3D Book

An old effect in photography I wanted to check out as a custom shader for Flash 10 Astro – beta version needed for this demo to show correctly: Pixel Bender -bytecode. Pixel Bender -source. LinearBlurFilter.as. It works with three parameters: one float3 for line equation where the picture appears sharp (coefs like in Ax+By+C=0, in the demo there’s two dragable blue blocks to modify that), two scales for the blur radius, in parallel and perpendicu … Read More

via Pixelero

What should be the input data of our shader?

• First of all the image to process.
• Then we must know where is the center of our circular blur.
• It would be nice to know the blur level.
• Since our effect will be used along with animation we should also know the rotation’s direction.

There is one thing missing here. You can see that in the built-in implementation of the blur filter you can set the quality of blurring. In fact, we will include this parameter in our actionscript too, but not in the Pixel Bender shader. We are going to utilize the method presented in this post, which means that we will be processing the input image several times with several circular blur shaders. The number of passes will be directly connected with the quality parameter. Why do we need several shaders? This is due to the prosaic fact that Pixel Bender doesn’t support loops.

Let’s now focus a little bit on the direction and the blur level parameters. The best way to represent the blur level in circular blur is to use the angle of blur. It can be negative or positive. Thus, it can represent clockwise as well as counterclockwise blurring movements.

So here is the shader:

<languageVersion: 1.0;>
kernel CircularBlur
<
	namespace: "com.wordpress.lapasoft";
	vendor: "LapaSoft";
	version: 1;
	description: "Circular blur shader";
>
{
	input image4 source;
	output pixel4 target;

	const float pi = 3.1415;

	parameter float blurLevel
    <
        minValue : -360.0;
        maxValue : 360.0;
        defaultValue : 0.0;
        description : "The angle of blur";
    >;

    parameter float2 rotationCenter
    <
        defaultValue : float2(0.0, 0.0);
        description : "The center point of rotation";
    >;

	void evaluatePixel()
	{
		float2 position = outCoord();
		float2 translation = -rotationCenter;

		float angle = radians(blurLevel);

 		float sine = sin(angle);
 		float cosine = cos(angle);
 		float2x2 rotation = float2x2(cosine, -sine,
								sine, cosine);

		position = position + translation;
		position = position * rotation;
		position = position - translation;

		pixel4 thisPixel = sample(source, outCoord());
		pixel4 rotatedPixel = sample(source, position);

		target.rgba = mix(thisPixel.rgba, rotatedPixel.rgba, 0.5);
	}
}

The shader simply calculates the position of the currently evaluated pixel rotated by a given angle around a given point. Next, both points are sampled and the output color is calculated as an average of both samples.

If you use the shader right away you’ll see that it hardly blurs anything. It simply copies the image and rotates it. See the picture below.

To obtain the desired blur effect we have to use the shader several times using actionscript. Here is the class:

// Code was based on the work of pixelero
// see links on the bottom of this post

package com.lapasoft
{

	import flash.display.Shader;
	import flash.events.*;
	import flash.net.*;
	import spark.filters.ShaderFilter;

	public class CircularBlurFilter extends EventDispatcher {

		private var _quality:int = 1;

		private var _rotationCenterX:Number = 0.0;
		private var _rotationCenterY:Number = 0.0;

		private var _shaders:Array = [];
		private var _blurLevel:Number = 0;

		public var filters:Array = [];

		public var isLoaded:Boolean = false;
		private var shaderLoader:URLLoader;

		public function CircularBlurFilter(rotationCenterX:Number, rotationCenterY:Number, quality:int, blurLevel:Number)
		{
			_quality = quality;
			_blurLevel = blurLevel;
			_rotationCenterX = rotationCenterX;
			_rotationCenterY = rotationCenterY;

			// load shader bytecode
			shaderLoader = new URLLoader();
			shaderLoader.dataFormat = URLLoaderDataFormat.BINARY;
			// add COMPLETE event listener to the loader
			shaderLoader.addEventListener(Event.COMPLETE, shaderLoaded);
			// Use your own path to the pbj file here
			shaderLoader.load(new URLRequest("../pbj/CircularBlur.pbj"));
		}

		private function shaderLoaded(event:Event):void {
			// create shaders and filters
			_shaders = new Array(_quality);
			filters = new Array(_quality);

			for (var i:int=0; i<_quality; i++) {
				_shaders[i] = new Shader(shaderLoader.data);
				filters[i] = new ShaderFilter();
				filters[i].shader = _shaders[i];
				_shaders[i].data.rotationCenter.value = [_rotationCenterX, _rotationCenterY];
			}

			calculateBlurLevels();

			isLoaded=true;
			this.dispatchEvent(new Event(Event.COMPLETE));
		}

		public function setRotationCenter(x:Number, y:Number):void {
			for(var i:int = 0; i<_quality; i++) {
				_shaders[i].data.rotationCenter.value = [x, y];
			}
		}

		public function set blurLevel(value:Number):void {
			_blurLevel = value;
			calculateBlurLevels();
		}

		public function set quality(value:Number):void {
			var q:Number = Math.max(Math.min(1, value), 15);
			if(q == _quality) {
				return;
			}

			_quality = q;

			_shaders = new Array(_quality);
			filters = new Array(_quality);

			for (var i:int=0; i<_quality; i++) {
				_shaders[i] = new Shader(shaderLoader.data);
				filters[i] = new ShaderFilter();
				filters[i].shader = _shaders[i];

				_shaders[i].data.rotationCenter.value = [_rotationCenterX, _rotationCenterY];
			}

			calculateBlurLevels();
		}

		//this function calculates the blur levels so they look like x, x/2, x/4... their sum is == 1
		private function calculateBlurLevels():void {
			for(var i:int = 0; i<_quality; i++) {
				_shaders[i].data.blurLevel.value = [_blurLevel*(Math.pow(2, _quality-i-1))/(Math.pow(2, _quality)-1)];
			}
		}

	}
}

Next, we can use the filters field of our CircularBlurFilter class to set the filters field of any DisplayObject. Note that the quality corresponds to the number of used filters. Lastly, we can admire the result of our work (quality=5, blurLevel=10):

PS

Here is my inspiration for this post: http://pixelero.wordpress.com/2008/08/28/pixel-bender-blur-with-linear-focus/.

[...] zbiór, który:

• ma nietrywialną strukturę w każdej skali,
• struktura ta nie daje się łatwo opisać w języku tradycyjnej geometrii euklidesowej,
• jest samo-podobny, jeśli nie w sensie dokładnym, to przybliżonym lub stochastycznym,
• jego wymiar Hausdorffa jest większy niż jego wymiar topologiczny,
• ma względnie prostą definicję rekurencyjną,
• ma naturalny (“poszarpany”, “kłębiasty” itp.) wygląd.

Na pierwszy rzut oka nic nie jest tutaj jednoznacznie określone. Wszystko opiera się na intuicji. Może oprócz punktu piątego.

Ale o co chodzi z tym wymiarem? Wymiary są matematycznie zdefiniowane i przez to jednoznaczne. Ale z czym je kojarzyć?

Wymiar Hausdorffa (szerzej: wymiar fraktalny) jest pewną miarą tego, jak dana figura “wypełnia przestrzeń”. Np. prosta i odcinek wypełniają sobą w całości przestrzeń jednowymiarową. Kwadrat czy koło dwuwymiarową. Sześcian trójwymiarową. Wymiary fraktalne tych figur są liczbami całkowitymi. Ale np. krzywa Kocha (brzeg szarego obszaru na rysunku) jest tak poszarpana, że “zajmuje przestrzeń” w trochę większym stopniu niż linia, ale nie w aż tak wielkim jak np. kwadrat. Jej wymiar Hausdorffa jest liczbą pomiędzy 1 i 2.

Główna zasada jest taka, że im większy wymiar fraktalny, tym bardziej fraktal jest “zbity”. W przeciwnym wypadku jest “rozstrzelony” podobnie np. jak rozsypane ziarenka piasku.

Właśnie ta cecha wymiaru fraktalnego może być pomocna przy analizie obrazu. Pozwala ocenić “zbicie” figury niezależnie od jej wielkości.

PS

• Bardzo ciekawe informacje o fraktalach, wymiarze fraktalnym i nawet o kwestiach implementacyjnych z nimi związanych: http://classes.yale.edu/fractals/
• Inne ciekawe zastosowanie wymiaru fraktalnego: http://portal.acm.org/citation.cfm?id=122235.1045578

Ten tutorial jest poświęcony Flexowi, ale oczywiście da się to zrobić i dla aplikacji flashowej (będzie to pewnie pokazane w kolejnej notce).

Zrobimy sobie prosty komponent będący po prostu listą linków, którą można zamieścić na stronie internetowej. Lista linków będzie pobierana z bazy danych.

Środowisko

Będziemy pracować na lokalnej maszynie, także trzeba ściągnąć sobie serwer obsługujący php i jeszcze serwer baz danych MySQL. Najlepiej jest pobrać sobie np. WampServer, bo zawiera w sobie wszystkie te rzeczy, a jego instalacja trwa może minutę. Oprócz tego potrzebujemy również implementacji AMF. W tym tutorialu użyjemy ZendAMF (części frameworku Zend). Do dzieła.

Po pierwsze instalujemy sobie Wampa. Po instalacji i uruchomieniu po wpisaniu w przeglądarce http://localhost/ powinien się pojawić mniej więcej taki ekran:

Trzeba jeszcze stworzyć bazę danych, z której będzie korzystać nasza aplikacja. Najłatwiej po prostu kliknąć w link phpMyAdmin, który jest widoczny na powyższej stronie (po kliknięciu w ikonę wampa w trayu też można dostać się do phpMyAdmin). Trzeba stworzyć bazę danych o nazwie FLEX_LINKS a w niej tabelę LINKS o kolumnach ID (int, auto_number, primary key), URL (varchar(100)), SHORT_URL (varchar(25)), DESCRIPTION (varchar(50)). Żeby wszystko dobrze działało z polskimi literami najlepiej w każdym możliwym miejscu wybrać utf8 jako kodowanie.

Teraz rozpakowujemy sobie Zenda. Najważniejszym dla nas folderem jest library, gdzie przechowywane są pliki, z których będzie korzystał skrypt php, który zaraz stworzymy.

PHP

Potrzebujemy 3 rzeczy w php:

• Klasa definiująca obiekty przekazywane pomiędzy Flexem i php (/application/model/Link.php):

<?php

class Link {
// url linku
public $url;

// krótki url będący wyświetlany na liście
public $shortUrl;

// opis wyswietlany pod linkiem
public $description;
}

?>

• Klasa definiująca usługi wywoływane przez Flexa (/application/services/LinksService.php):

// importowanie klasy Link
require_once dirname(__FILE__) . '/../model/Link.php';

class LinksService
{
private $connection;

// wygodnie jest tworzyć połączenie w konstruktorze
public function __construct()
{
// domyślny użytkownik bazy mySql Wampa
$this->connection = mysql_connect('localhost', 'root', '');

// aby poprawnie przekazywane były polskie znaki..
mysql_query("SET NAMES utf8");
mysql_query("SET CHARACTER_SET utf8_unicode_ci");
mysql_select_db('FLEX_LINKS');
}

// tą metodę będziemy mogli wywoływać z Flexa
// zwraca po prostu wszystkie zapisane linki
public function getAllLinks()
{
$links = array();
$result = mysql_query("SELECT * FROM LINKS ORDER BY ID", $this->connection);

while ($row = mysql_fetch_object($result))
{
$link = new Note();
$link->id = $row->ID;
$link->url = $row->URL;
$link->shortUrl = $row->SHORT_URL;
$link->description = $row->DESCRIPTION;

array_push($links, $link);
}

mysql_close($this->connection);
return $links;
}
}

?>

• Endpoint AMF (tutaj użyjemy ZendAMF) – z tą częścią będzie się komunikował bezpośrednio Flex (/public/amf.php).

<?php
// ścieżka musi być ustalona tam, gdzie jest zawartość katalogu
// library wypakowanego z pliku
// ściągniętego ze strony zend framework
ini_set('include_path', ini_get('include_path') . PATH_SEPARATOR . '');

// import klasy Server z Zenda
require_once 'Zend/Amf/Server.php';

// tworzenie <a href="http://framework.zend.com/manual/en/zend.amf.server.html">serwera AMF</a>
$server = new Zend_Amf_Server();

// usługi udostępniane przez ten amf będą klasami z tego folderu
$server->addDirectory(dirname(__FILE__) . '/../application/services');

// import klas definiujących model
require_once dirname(__FILE__) . '/../application/model/Link.php';

// ustawienie mapowań klas - pierwsza nazwa to klasa w AS a drugi w php
$server->setClassMap('Link', 'Link');

// start serwera
echo $server->handle();
?>

Foldery application i public zamieszczamy wraz ze znajdującymi się w nick plikami w folderze /www/FlexLinks. Teraz po wpisaniu w pasku adresu przeglądarki http://localhost/FlexLinks/public/amf.php powinien się pojawić napis ZendAMF Endpoint albo zacznie się ściągać dokument xml o właśnie takiej treści.

W php to już wszystko. Teraz przejdźmy do Flexa.

Flex

Projekt nazwiemy FlexLinks. Podczas tworzenia projektu należy w polu Application Server Type wybra PHP. Po kliknięciu Next trzeba podać ścieżkę do katalogu publicznego Wampa (np. D:\wamp\www) i jego adres URL (np. http://localhost). Podanie tych wszystkich danych usprawni proces zamieszczania flexowych aplikacji na serwerze.

Po utworzeniu projektu pierwszą rzeczą, którą zrobimy będzie określenie adresów i rodzajów usług, które będzie wykorzystywał Flex.We właściwościach projektu w sekcji Flex Compiler dodatkowe argumenty zmieniamy z domyślnych -locale en_US na -locale en_US -services “services-config.xml” . To wskaże kompilatorowi lokalizację pliku xml definiującego usługi. Teraz ten plik trzeba stworzyć. W katalogu src projektu Flexa tworzymy plik services-config.xml z następującą zawartością:

<div><?xml version="1.0" encoding="UTF-8"?></div>
<div><services-config></div>
<div><services></div>
<div><service id="zend-flashremoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage"></div>
<div><destination id="zend"></div>
<div><channels></div>
<div><channel ref="my-zend"/></div>
<div></channels></div>
<div><properties></div>
<div><source>*</source></div>
<div></properties></div>
<div></destination></div>
<div></service></div>
<div></services></div>
<div><channels></div>
<div><channel-definition id="my-zend"></div>
<div><endpoint uri="http://localhost/FlexLinks/public/amf.php"/></div>
<div></channel-definition></div>
<div></channels></div>
<div></services-config></div>

Plik definiuje usługę wykorzystującą kanał AMF łączący się z naszym wcześniej stworzonym w php endpointem.

Teraz trzeba też zdefiniować klasę będącą odzwierciedleniem tego, co nam będzie przesyłać AMF. W katalogu src tworzymy katalog model i tam plik Link.as:

package model
{
[RemoteClass]
[Bindable]
public class Link
{
public function Link()
{
}

public var id:int;
public var url:String;
public var shortUrl:String;
public var description:String;

}
}

Nazwy pól są identyczne jak w klasie php. Nad klasą są dwa meta-tagi. Pierwszy oznacza, że jest to klasa przekazywana przez AMF, a drugi umożliwia związanie wszystkich właściwości klasy (dokumentacja).

Teraz w automatycznie utworzonym głównym dokumencie mxml naszej aplikacji (pewnie jest nazwany FlexLinks.mxml) trzeba utworzyć mechanizm wykorzystujący opisane usługi i wyświetlający je w jakiejś zgrabnej formie:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
<mx:Script>
<![CDATA[
import flash.net.navigateToURL;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import model.*;
import renderers.*;

// metoda wykonywana po inicjalizacji aplikacji
private function init():void {
remoteObject.getAllLinks();
}

// tu będziemy przechowywać dane linków
[Bindable]
private var dataArray:ArrayCollection = new ArrayCollection();

// metoda obsługująca wywołanie metody getAllLinks
private function getAllLinksHandler(event:ResultEvent):void {
dataArray = new ArrayCollection(event.result as Array);
}

// metoda otwierająca nowe okno przeglądarki
public function navigateToLink(url:String):void {
navigateToURL(new URLRequest(url), "_blank");
}
]]>
</mx:Script>
<mx:List x="10" y="10" id="linksList" dataProvider="{dataArray}" width="200" height="273">
<mx:itemRenderer>
<mx:Component>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Button maxWidth="180" label="{data.shortUrl}" click="{parentApplication.navigateToLink(data.url)}"/>
<mx:Text selectable="false" paddingLeft="3" width="160" text="{data.description}" />
<mx:LinkButton paddingLeft="3" label="Kopiuj link"  textAlign="left" click=quot;{System.setClipboard(data.url)}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>

<mx:RemoteObject id="remoteObject" destination="zend" source="LinksService" fault="Alert(event.type.toString())" showBusyCursor="true">
<mx:method name="getAllLinks" result="getAllLinksHandler(event)" fault="Alert(event.type.toString())"/>
</mx:RemoteObject>

</mx:Application>

Dla komunikacji z wykorzystaniem AMF kluczowy jest tak definiujący remoteObject oraz jego metody. W atrybutach tego tagu podana jest nazwa usługi (klasy php zarejestrowanej w serwerze stworzonym za pomocą Zenda) i nazwa celu, pod którym jest endpoint ZendAMF.

Dodatkowym elementem jest sposób wyświetlania listy. Używamy własnego ItemRenderer aby zrobić to w miarę ładnie. Jest w nim zawarty przycisk przenoszący nas pod link i taki, który po naciśnięciu kopiuje link do schowka.

I to by było na tyle. Oczywiście w tagu RemoteObject można zdefiniować inne metody, których wykonanie np. zmienia coś w bazie danych (musiałoby to być zaimplementowane w klasie php), ale dla tej naszej miniaturowej aplikacji chyba nie ma to sensu. Dziękuję za uwagę 

PS

Dla ciekawskich link do Censusa, czyli interaktywnego porównania różnych metod przesyłania danych do Flexa.

Komunikacja przebiega w kilku etapach:

1. Flash wysyła żądanie do skryptu php.
2. Skrypt php łączy się z bazą danych MySQL i wysyła do niej zapytanie w SQL.
3. Baza zwraca wynik do skryptu.
4. Skrypt generuje z wyniku dane w formacie strawnym dla Flasha.
5. Flash odczytuje dane i je wyświetla.

Mamy we flashu przycisk i chcemy, aby po jego naciśnięciu w polu tekstowym pojawił się napis, którego elementami będą dane ze skryptu php. W pierwszej klatce zamieszczamy sobie taki kod:

stop();
// tworzymy sobie obiekty przechowujące
// dane wysyłane i otrzymywane przez flasha
var varsOut:LoadVars = new LoadVars();
var varsIn:LoadVars = new LoadVars();
// po naciśnięciu przycisku
button_btn.onRelease = function() {
// zapisujemy zmiennych wyjściowych
// jakąś wartość dla skryptu php
varsOut.outVar = 10;
// zmienne wyjściowe są wysyłane do script.php
// wynik zostanie zapisany w varsIn
// a wykorzystana zostanie metoda POST
varsOut.sendAndLoad("script.php",varsIn,"POST");
};
// kiedy już załaduje się to,
// co dostaniemy jako wynik skryptu
varsIn.onLoad = function(success) {
if (success) {
// jak się udało to zaktualizuj tekst w polu
textArea_txt.text = "Odczytane dane to:\n" + varsIn.myVar;
textArea_txt.text += "\ni\n"+ varsIn.myVar2;
} else {
// a jak nie to wypisz tam komunikat
textArea_txt.text = "Nie udało się odczytać danych.";
}
};

Kod jest wyjaśniony przez moje komentarze. Teraz brakuje nam tylko skryptu php.

<?php
// odbieramy z żądania parametr
$outVar= $_POST['outVar'];

// łączymy się z MySQL
$link = mysql_connect('mysql_host', 'mysql_user', 'mysql_password');

// wybieramy bazę danych
mysql_select_db('my_database');

// tworzymy zapytanie (uwaga na SQL Injection!)
$query = "SELECT * FROM my_table WHERE id=$outVar";

// wykonujemy zapytanie
$result = mysql_query($query);

// czytamy rezultaty
$line = mysql_fetch_array($result, MYSQL_ASSOC);

// zapisujemy rezultaty
$myVar = $line['my_column1'];
$myVar2 = $line['my_column2'];

// wypisujemy
echo("myVar=$myVar&amp;myVar2=$myVar2&amp;");
// końcowy '&amp;' się przydaje, bo
// często ktoś coś nam dokleja do wyniku skryptu
// i nie chcielibyśmy aby zostało to potraktowane

// jako część wartości myVar2
// zwalniamy pamięć i zamykamy połączenie z bazą
mysql_free_result($result);
mysql_close($link);

?>

Oczywiście w bazie danych musi istnieć tabela, która ma odpowiednią nazwę i zwiera odpowiednie dane.

Skrypt po prostu nam tworzy taki ciąg: zmienna1=wartość1&zmienna2=wartość2& …

Na dobrą sprawę jeżeli byśmy zamiast wczytywać wynik działania skryptu php zechcieli wczytać plik tekstowy z takim ciągiem to niczym by się to nie różniło. Może tym, że w skrypcie możemy połączyć się z bazą danych i z niej wyciągnąć jakieś potrzebne rzeczy

Żeby usprawnić przekazywanie parametrów można np. w skrypcie php wartości zwracane przez ten skrypt zapisać w formie tablicy asocjacyjnej, a następnie potraktować funkcją http_build_query.

Jeszcze jedna uwaga. Jak widać zarówno flash jak i php muszą zapisywać dane w zmiennych o nazwach, które są wzajemnie znane skryptowi flash i php. Inaczej manipulowanie nimi jest niewygodne. Dlatego ta metoda przesyłania danych pomiędzy php i flashem sprawdza się kiedy wysyłamy i zwracamy dane o znanej z góry długości (np. dane pojedynczego rekordu z bazy danych a nie zmiennej liczby rekordów).

To samo da się zrobić używając klasy XML a nie LoadVars. Wtedy oczywiście wszystko będzie przesyłane w formacie XML.

Szczerze mówiąc, to odkąd zaczynam się zaznajamiać z AMF przedstawiony wyżej sposób komunikacji przestaje mi się w ogóle podobać. Także czekajcie na posta o AMF

obrazek.scaleY=0.6; //         skalowanie
obrazek.scaleX=0.6; //         skalowanie
TweenLite.to(obrazek, 3, {rotationY:360, ease:Strong.easeIn});
// animacja polegająca na zmianie atrybutu rotationY
// wykorzystuje GreenSock TweenLite

Fajne, ale czemu w ogóle o tym piszę? Bo kiedy w środowisku Flasha kliknę “Test movie” wyświetlane jest to inaczej! Tak samo jak wtedy, gdy Flash Playerem otworzę plik swf znajdujący się u mnie na dysku, albo uruchomię plik Windows Projector z tą animacją. Wtedy podczas obrotu wokół osi Y obrazek skaluje płynnie się do swojej początkowej wartości scaleX (jest analogicznie, kiedy obraca się wokół osi X). O co w ogóle chodzi? Przecież nie zmieniam scaleX!

Czemu inaczej wyświetla w Projectorze i w przeglądarce? Różne wersje Flash Playera? Nie wiem. Ale sprawa skalowana jest z pewnością spowodowana tym, że obiekty są domyślnie we Flashu dwuwymiarowe. Ich pozycja jest opisana macierzą przekształceń liniowych dla 2 wymiarów (w takim wypadku jest to macież 3×3). Obiekt staje się trójwymiarowy wtedy, kiedy np zaczniemy zmieniać jakiś jego atrybut związany z trójwymiarem (np. rotationX). Wtedy macierz dla 2 wymiarów jest przekształcana na taką dla trzech. Do macierzy można się dostać tak:

obrazek.transform.matrix; // macierz dla 2D
obrazek.transform.matrix3D; // macierz dla 3D

Problemem jest to, że nie ustawiliśmy scaleZ. Można go uniknąć wymuszając przejście do macierzy 3D przed skalowaniem. Np. w taki sposób:

obrazek.transform.matrix = null;
// automatycznie tworzy się macierz 3D
obrazek.scaleX = 0.5;
obrazek.scaleY = 0.5;
obrazek.scaleZ = 0.5;
// skalowanie

dokumentacja

Trzeba też pamiętać, że jeżeli chcemy równomiernie powiększać nasz obiekt, to musimy robić to nie tylko za pomocą scaleX i scaleY, ale również scaleZ!

Typowy schemat użycia transformaty wygląda następująco:

1. Obraz wejściowy
2. Wykrycie krawędzi
3. Transformata Hough’a
4. Wybranie linii na podstawie wyniku TH czyli przestrzeni Hough’a

Szybkie, miłe i przyjemne? Nie do końca.

Wykrywanie krawędzi oczywiście nie stanowi problemu. Wystarczy użyć któregoś z dostępnych i dobrze udokumentowanych algorytmów. Na obrazie przedstawiony jest wynik działania wykrywania krawędzi metodą Canny’ego (Canny edge detector), którego implementacja w Javie jest dostępna za darmo.

Teraz pora na TH. Załóżmy, że obrazem wejściowym dla TH jest taki obraz, którego pixele mogą być tylko białe lub czarne. Czarne mogą oznaczać krawędź a białe jej brak. Każdy czarny pixel “głosuje” na wszystkie przechodzące przez niego linie. Wynikiem tej operacji jest zbiór wszystkich możliwych linii z przypisami do nich liczbami głosów. To właśnie przestrzeń Hough’a. Te linie, które zawierają najwięcej czarnych pixeli będą miały najwięcej głosów i właśnie je wybieramy w kolejnym kroku postępowania.

Teraz trzeba tylko określić jak zapisać “wszystkie możliwe” linie na obrazku. Z podstawówki wiadomo, że wykres funkcja liniowej ma wzór:

y = ax+b ,

gdzie a i b to współczynniki równania. Wykresem takiej funkcji jest linia. Czyli linie można zapisać po prostu jako pary współczynników a oraz b. Musimy sobie jeszcze ustalić z jakich przedziałów mogą pochodzić wartości współczynników. Mając czarny pixel o znanych współrzędnych x oraz y dla każdej możliwej wartość a obliczamy wartość b i dla każdej tak otrzymanej pary (a, b) zwiększamy liczbę głosów jej przyporządkowanej.

To podejście jest użyte w applecie, który znalazłem na stronach Politechniki Brunszwickiej. Wystarczy jednak zobaczyć co się stanie, jeżeli na obrazie wejściowym pojawi się linia pionowa żeby przekonać się o niedoskonałości takiej reprezentacji. Po prostu linii pionowej nie da się tak zapisać. Dlatego częściej w użyciu jest inna reprezentacja.

Prostą można przedstawić jako odległość prostej od początku układu współrzędnych (ρ) i kąt pomiędzy odcinkiem łączącym prostą i początek układu współrzędnych a osią OX (θ).

Wzór tak określonej prostej wygląda następująco:

ρ = x cos(θ) + y sin(θ) .

Taka reprezentacja jest użyta w tym applecie.

Mamy już przestrzeń Hough’a (przedstawia ją obraz w 3. punkcie), ale trzeba jeszcze z niej “wyciągnąć” najlepsze linie.

Jak widać na ilustracji przy punkcie 3. przestrzeń Hough’a prawie zawsze jest dość “poszarpana” co zdecydowanie utrudnia wyłowienia z niej tych linii, które są naprawdę istotne dla obrazu. Przestrzeń zatem należy wygładzić a później znaleźć na niej maksima lokalne, które będą reprezentowały najistotniejsze linie.

Na obrazie przy punkcie 4. przedstawiono wyniki takiej operacji. Jak widać nie eliminuje ona wszystkich “dublujących” się linii o podobnym umiejscowieniu, jednak w znacznym stopniu zmniejsza ich liczbę.

To chyba wszystko jeżeli chodzi o TH dla linii prostych. Oczywiście wymyślono rozliczne usprawnienia i modyfikacje TH takie jak ograniczenie “aktywnego” obszaru przestrzeni Hough’a, wykorzystanie informacji o ułożeniu pixeli krawędzi na obrazie w celu zmniejszenia liczby głosów. Na dodatek TH została również wykorzystana do rozpoznawania krzywych, okręgów i innych kształtów (uogólniona transformata Hough’a). W miarę proste i jednocześnie silne narzędzie.

Użyte obrazy pochodzą z prac:

Leandro A. F. Fernandes, Manuel M. Oliveira. Real-time line detection through an improved Hough transform voting scheme. Pattern Recognition (PR), Elsevier, 41:1, 2008. pp. 299-314.

oraz

R.O. Duda and P.E. Hart, Use of the Hough Transformation to Detect Lines and Curves in Pictures. CACM, 1972, 15(1), pp. 11-15. 2.