The clever guys at Credit Score Blog made the research and design on this brilliant infographic for Focus.com about the pros and cons of Skype’s acquisition by Microsoft last Week. There has been lost of posts about the strategy behind Microsoft’s choice, and the value of the transaction. This infographic presents an overview of the evolution of Skype, features added and owners through the years. It shows some financial figures as well as how Skype is positioned inside Microsoft’s Galaxy and where it stands from a competitor’s point of view.
I have always been fond of subway map. love the graphic quality of it!
I thought I would give it a quick try in Flash and in 3D. This experiment draws a random subway map every time you refresh the page.
“Spheres on a plane” by Dead Roman – a real-time motion graphics experiment. It placed 4th in the annual demoscene competition at The Gathering 2011 in Norway.
This is an art installation which is able to create a visionary beautiful dots pattern of blinking innumerable illuminations floating in all directions on the air.
The number of balls with a built-in LED, pass through one after another on the rail “8-spiral shape.” We see this phenomenon like “the light particle float around” because the balls radiate in various timing.
The position of each ball is determined via total of 17 control points on the rail. Every time a ball passes through one of them, the respective ball’ s positional information is transmitted via a built-in infrared sensor. During the time the ball travels between one control points to the next, this position is calculated based on its average speed.
The data for regulating the balls’ luminescence are divided by the control point segments and are switched every time a ball passes on a control point.The audiences can select a shape from several patterns floating in aerial space using an interface of the display.The activation of the virtual balls on the screen are determined by the timing which a ball moving on the rail passes through a certain check point on the rail and the speed which is calculated by using average speed values.
The sound is generated from the ball positions and the information of LED flash pattern and is played through 8ch speakers.The board inside the ball is an Arduino compatible board based on the original design from Arduino Fio v2.1.
My Blog got hacked last week, and I am still recovering my files and experiments. Had not backed up my content properly, lesson learmed the hard way! So whoever is passing by, I am currently re-uploading my content, feel free to come back a little later for a full visit ;D
I really enjoyed Grant Skinner’s drawing of a tree, and I thought, I could give it a try as well. I got some help with Duarte Peixinho’s experiment you can find on the wonderful website. I tweaked many of his variables and added a few things, like stopping the Listeners when the tree is drawn. So here it is !
Not fully optimized so I won’t release the code right now, but I think the result is worth this post ! click on the movie to refresh the tree
This is my creative response to the great post “Stop trying to make the Internet boring!” by Andreas about all the crap on section 3.3.1 on the apple developper’s user agreement.
Watch out coz it’s pretty CPU intensive (more than 3000 particles on this one, updated on the fly)
Hope you enjoy it , and that it may inspire someone else ! You can also drag the stage if you want to explore different angles.
All images are under the copyright of Tina Persson, an amazing contemporary artist, which is another great source of inspiration ! Check out her website at www.stinapersson.com
// almost 8 times faster than the Math.version
// benchmark can be found here : http://www.calypso88.com/?p=539
Math.pow(i, 2);
i * i;
Math.min(i, 50000);
(i > 50000) ? 50000 : i;
Math.max(i, 50000);
(i < 50000) ? 50000 : i;
Math.abs(i);
(i < 0) ? -i : i ;
Math.floor(i);
int( i );
Math.ceil(i);
(i % i) ? int(i) + 1 : i;
Math.round(i);
int(i + .5);
OTHER BITWISE OPERATIONS
//Fast modulo operation using bitwise AND
//If the divisor is a power of 2, the modulo (%) operation can be done with:
//modulus = numerator & (divisor - 1);
x = 131 % 4;
x = 131 & (4 - 1);
//Check if an integer is even/uneven using bitwise AND
isEven = (i % 2) == 0;
isEven = (i & 1) == 0;
//Right bit shifting to divide by any power of two:
x = x / 2;
x = x >> 1;
x = x / 64;
x = x >> 6;
//Left bit shifting to multiply by any power of two
x = x * 2;
x = x << 1;
Using MODULO GRIDS is faster than multidimensional array
const ROWS:int = 30;
const COLUMNS:int = 88;
const ITEMS:int = ROWS * COLUMNS;
var s:Shape ;
var i:int = 0;
for(i; i < ITEMS; i++)
{
s = new Shape();
s.x = int(i / ROWS) * 5;
s.y = (i % ROWS) * 5;
s.graphics.beginFill(0x666666);
s.graphics.drawRect(0, 0, 4, 4);
addChild(s);
}
I was surfing on the web last week when I found a map of the world drawn with separated pixels.
It was static jpeg, and I thought, hey why not draw this dynamically, and animate it on mouse over ?
This my first script really using flash player 10. In fact I am using the vector class which is a top level class inside flash player 10. The properties and methods of a Vector object are similar — in most cases identical — to the properties and methods of an Array. In any case where you would use an Array in which all the elements have the same data type, a Vector instance is preferable. It will (and should though I did not test it) increase the speed and optimize the data you are working with.
I first found a map in two colours : grey and white:
And here is the commented code to guide you trough all the steps:
// output bitmapData
private var _map:BitmapData;
// vector objects = typed arrays
private var _pts:Vector.<Point> = new Vector.<Point>();
private var _origin:Vector.<Point> = new Vector.<Point>();
// width and height of the map
public static const HEIGHT:int = 272;
public static const WIDTH:int = 500;
// a reference to the lenght of our vector
private var points_nb:int;
public function PixelMap()
{
addEventListener(Event.ADDED_TO_STAGE , _init );
}
private function _init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE , _init );
stage.quality = "medium";
// create an instance of Map object embed inside the library
var map:Map = new Map(WIDTH, HEIGHT);
// Draw map inside temp BitmapData
var temp:BitmapData = new BitmapData(WIDTH, HEIGHT, false, 0x0);
temp.draw(map);
// fill our _map bitmapData with black ,
// dimenseions ares the size of the stage = Map size
_map = new BitmapData(WIDTH, HEIGHT, true, 0x00000000);
// define the step to pick the pixels
var margin:int = 3;
var iy:int;
var ix:int;
// loop inside temp BitmapData for every one out of three pixels
// if this pixel is not white, draw one black point inside our _map instance
for(iy = 0; iy < HEIGHT; iy += margin)
{
for(ix = 0; ix < WIDTH; ix += margin)
{
// if the color being returned is not white
if(temp.getPixel32(ix,iy) != 0xFFFFFFFF)
{
//color the pixel at positions ix, iy
// with white in the _map bitmapData instance
_map.setPixel32(ix, iy, 0xFFFFFFFF);
// get a random position for each white pixels
_pts.push(new Point(Math.random() * 500,Math.random() * 272));
// keep a reference to the original
// position of the pixel inside a Vector instance
_origin.push(new Point(ix,iy));
}
}
}
// a reference to the length of
// our vector instance
points_nb = _pts.length;
// create a new bitmap
// with the newly organized _map bitmapData
addChild(new Bitmap(_map));
// add animation
addEventListener(Event.ENTER_FRAME , _update );
}
private function _update(e:Event):void
{
// mouse X & Y positions
var __x:int = mouseX;
var __y:int = mouseY;
var i:int = 0;
// reference to the point we are moving
// it is drawn inside the _map bitmapData
var p oint;
// reference the same point
// with the originals x & y coordinates
var o oint;
// vars to store the temp x & y
var px:int;
var py:int;
var ox:int;
var oy:int;
var prox:int;
var dify:int;
var difx:int;
// loop inside the vector's instance which stores all our points
while(i < points_nb)
{
// reference the pixel we are playing with
p = _pts[int(i)];
o = _origin[int(i)];
// store its x & y coordinates
px = p.x;
py = p.y;
// get the originals x & y coordinates of the point
ox = o.x;
oy = o.y;
// how far is the point from the mouse position?
prox = Math.sqrt((__x - px) * (__x - px) + (__y - py) * (__y - py));
// if distance between the mouse and the point
// is less than 12 pixels
if(prox <= 12)
{
// change this point's color to black
_map.setPixel32(px, py, 0x000000);
// calculate the new random coordinates for that point
// this is where we want to move the pixel
px = px + Math.round(Math.random() * 60 - 30);
py = py + Math.round(Math.random() * 60 - 30);
// color the point at the new coordinates in white
_map.setPixel32(px, py, 0xFFFFFFFF);
// store the new coordinates inside the point instance
// which is stored inside the vector's instance
p.x = px;
p.y = py;
}
else
{
// if the point's position we are looking at
// is different from its original one
if(p != o)
{
// calculates the distance between
// the origine and the current position
difx = px - ox;
dify = py - oy;
// change the point's color to black
_map.setPixel32(px, py, 0x000000);
// if the point is closer than 1 pixel, then use the original coordinates,
// else ease back the point to its inital position
difx < 1 ? px = ox : px = px - difx * 0.1 ;
dify < 1 ? py = oy : py = py - dify * 0.1 ;
// color the point at the new position
_map.setPixel32(px, py, 0xFFFFFFFF);
// and store the new point's position inside the vector's instance
p.x = px;
p.y = py;
}
}
// increase i to loop inside the vector's instance
i++;
}
}