HTML5 Smash the Video: The cyprus EU presidency video.

I found this video for the cypriot EU presidency to be a farce.  So I’m trying to take the Mickey out them by digitally smashing the video.

Click here to Smash the VideoClip

I think it’s more fun on a tablet were you actually get to tap and smash the video :) Enjoy!

 

 

The source code:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
 

 

<html><head>
<pre>&lt;title&gt;HTML5 Video Destruction&lt;/title&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
&lt;script type="text/javascript"&gt;

var video;
var copy;
var copycanvas;
var draw;
//the more you decrease the tile H and W the more resources/graphic power you need.
var TILE_WIDTH = 16;
var TILE_HEIGHT = 12;
var TILE_CENTER_WIDTH = 16;
var TILE_CENTER_HEIGHT = 12;
var SOURCERECT = {x:0, y:0, width:0, height:0};
var PAINTRECT = {x:0, y:0, width:1000, height:600};

function init(){
    video = document.getElementById('sourcevid');
    copycanvas = document.getElementById('sourcecopy');
    copy = copycanvas.getContext('2d');
    var outputcanvas = document.getElementById('output');
    draw = outputcanvas.getContext('2d');
    setInterval("processFrame()", 33);
}
function createTiles(){
    var offsetX = TILE_CENTER_WIDTH+(PAINTRECT.width-SOURCERECT.width)/2;
    var offsetY = TILE_CENTER_HEIGHT+(PAINTRECT.height-SOURCERECT.height)/2;
    var y=0;
    while(y &lt; SOURCERECT.height){
        var x=0;
        while(x &lt; SOURCERECT.width){
            var tile = new Tile();
            tile.videoX = x;
            tile.videoY = y;
            tile.originX = offsetX+x;
            tile.originY = offsetY+y;
            tile.currentX = tile.originX;
            tile.currentY = tile.originY;
            tiles.push(tile);
            x+=TILE_WIDTH;
        }
        y+=TILE_HEIGHT;
    }
}
// no such thing like random numbers :p
var RAD = Math.PI/180;
var randomJump = false;
var tiles = [];
var debug = false;
function processFrame(){
    if(!isNaN(video.duration)){
        if(SOURCERECT.width == 0){
            SOURCERECT = {x:0,y:0,width:video.videoWidth,height:video.videoHeight};
            createTiles();
        }
        //this is to keep my sanity while developing
        if(randomJump){
            randomJump = false;
            video.currentTime = Math.random()*video.duration;
        }
        //loop
        if(video.currentTime == video.duration){
            video.currentTime = 0;
        }
    }
    var debugStr = "";
    //copy tiles
    copy.drawImage(video, 0, 0);
    draw.clearRect(PAINTRECT.x, PAINTRECT.y,PAINTRECT.width,PAINTRECT.height);

    for(var i=0; i&lt;tiles.length; i++){
        var tile = tiles[i];
        if(tile.force &gt; 0.0001){
            //expand
            tile.moveX *= tile.force;
            tile.moveY *= tile.force;
            tile.moveRotation *= tile.force;
            tile.currentX += tile.moveX;
            tile.currentY += tile.moveY;
            tile.rotation += tile.moveRotation;
            tile.rotation %= 360;
            tile.force *= 0.9;
            if(tile.currentX &lt;= 0 || tile.currentX &gt;= PAINTRECT.width){
                tile.moveX *= -1;
            }
            if(tile.currentY &lt;= 0 || tile.currentY &gt;= PAINTRECT.height){
                tile.moveY *= -1;
            }
        }else if(tile.rotation != 0 || tile.currentX != tile.originX || tile.currentY != tile.originY){
            //contract
            var diffx = (tile.originX-tile.currentX)*0.2;
            var diffy = (tile.originY-tile.currentY)*0.2;
            var diffRot = (0-tile.rotation)*0.2;

            if(Math.abs(diffx) &lt; 0.5){
                tile.currentX = tile.originX;
            }else{
                tile.currentX += diffx;
            }
            if(Math.abs(diffy) &lt; 0.5){
                tile.currentY = tile.originY;
            }else{
                tile.currentY += diffy;
            }
            if(Math.abs(diffRot) &lt; 0.5){
                tile.rotation = 0;
            }else{
                tile.rotation += diffRot;
            }
        }else{
            tile.force = 0;
        }
        draw.save();
        draw.translate(tile.currentX, tile.currentY);
        draw.rotate(tile.rotation*RAD);
        draw.drawImage(copycanvas, tile.videoX, tile.videoY, TILE_WIDTH, TILE_HEIGHT, -TILE_CENTER_WIDTH, -TILE_CENTER_HEIGHT, TILE_WIDTH, TILE_HEIGHT);
        draw.restore();
    }
    if(debug){
        debug = false;
        document.getElementById('trace').innerHTML = debugStr;
    }
}

function explode(x, y){
    for(var i=0; i&lt;tiles.length; i++){
        var tile = tiles[i];

        var xdiff = tile.currentX-x;
        var ydiff = tile.currentY-y;
        var dist = Math.sqrt(xdiff*xdiff + ydiff*ydiff);

        var randRange = 220+(Math.random()*30);
        var range = randRange-dist;
        var force = 3*(range/randRange);
        if(force &gt; tile.force){
            tile.force = force;
            var radians = Math.atan2(ydiff, xdiff);
            tile.moveX = Math.cos(radians);
            tile.moveY = Math.sin(radians);
            tile.moveRotation = 0.5-Math.random();
        }
    }
    tiles.sort(zindexSort);
    processFrame();
}
function zindexSort(a, b){
    return (a.force-b.force);
}

function dropBomb(evt, obj){
    var posx = 0;
    var posy = 0;
    var e = evt || window.event;
    if (e.pageX || e.pageY){
        posx = e.pageX;
        posy = e.pageY;
    }else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    var canvasX = posx-obj.offsetLeft;
    var canvasY = posy-obj.offsetTop;
    explode(canvasX, canvasY);
}

function Tile(){
    this.originX = 0;
    this.originY = 0;
    this.currentX = 0;
    this.currentY = 0;
    this.rotation = 0;
    this.force = 0;
    this.z = 0;
    this.moveX= 0;
    this.moveY= 0;
    this.moveRotation = 0;

    this.videoX = 0;
    this.videoY = 0;
}

/*
    getPixel
    return pixel object {r,g,b,a}
*/

function getPixel(imageData, x, y){
    var data = imageData.data;
    var pos = (x + y * imageData.width) * 4;
    return {r:data[pos], g:data[pos+1], b:data[pos+2], a:data[pos+3]}
}
/*
    setPixel
    set pixel object {r,g,b,a}
*/

function setPixel(imageData, x, y, pixel){
    var data = imageData.data;
    var pos = (x + y * imageData.width) * 4;
    data[pos] = pixel.r;
    data[pos+1] = pixel.g;
    data[pos+2] = pixel.b;
    data[pos+3] = pixel.a;
}
/*
    copyPixel
    faster than getPixel/setPixel combo
*/

function copyPixel(sImageData, sx, sy, dImageData, dx, dy){
    var spos = (sx + sy * sImageData.width) * 4;
    var dpos = (dx + dy * dImageData.width) * 4;
    dImageData.data[dpos] = sImageData.data[spos];     //R
    dImageData.data[dpos+1] = sImageData.data[spos+1]; //G
    dImageData.data[dpos+2] = sImageData.data[spos+2]; //B
    dImageData.data[dpos+3] = sImageData.data[spos+3]; //A
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body onload="init()" style="margin:0px;"&gt;
&lt;!-- sources to your videos, not all browsers support the same video types. --&gt;
&lt;div style="display:none"&gt;
        &lt;video id="sourcevid" autoplay loop&gt;
            &lt;source src="data/cy_eng(480).mp4" type="video/mp4"/&gt;
            &lt;source src="data/cy_eng(480).webm" type="video/webm"/&gt;
            &lt;dource src="data/cy_eng(480).theora.ogv" type="video/ogg"/&gt;

        &lt;/video&gt;
        &lt;canvas id="sourcecopy" width="640" height="360"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
    &lt;div&gt;&lt;center&gt;
        &lt;div style="z-index:1;position:relative;text-align:center;font-size:16px;font-weight:bold;width:1000px;top:60px;"&gt;Welcome to blowing up the video! Click to destroy! Enjoy :-) &lt;/div&gt;
        &lt;canvas id="output" width="1000" height="600" onmousedown="dropBomb(event, this)" style="border: solid 5px #666666"&gt;&lt;/canvas&gt;&lt;/center&gt;
      &lt;blockquote&gt;
        &lt;p&gt;
          &lt;center&gt;
            &lt;br/&gt;
          &lt;/center&gt;
        &lt;/p&gt;
      &lt;/blockquote&gt;
    &lt;/div&gt;</pre>

 

 

 

 

 

 

 

 

 

 

Unable to process application info.plist validation at this time due to a general error

…and then you decide to submit your app to the app store…

 

seems that it occurred twice on the 31-12 because of new years I assume and today (31-08) because winter is coming.

just my luck I guess. Maybe monday is better day for app submissions :-)

POSIX-Portable Operating System Interface based on uniX Cheatsheet Commands

This is a quick reference guide, mostly made of standard Unix commands.Basically because I got fed up of googling them all the time. (POSIX utilities, every Unix / Linux distribution has these POSIXstands for Portable Operating System Interface based on uniX).

For more information about each command, refer to a Unix manual or the man (stands for manual) command. Type man command at a TelNet/SSH Client Software prompt etc… to get info about using the “man” command.

at

: execute commands at a specified time/date.

awk

: a scripting language, especially useful for manipulating text and automation.

bash

: invokes the Bourne Again Shell (standard on most boxes).

batch

: execute commands when load permits.

bc

: interactive C-like calculator (integers only).

cal

: displays a calender, also lets you choose month/year using parameters.

calender

: invoke a reminder service.

cancel

: cancel request to calender.

cat

: concatenate files (displays a file without scrolling ability. Simply dumps it to the standard output. Can be useful when chaining multiple applications to do complicated jobs, so one application can use another’s output as input).

cd

: change the current working directory.

chgrp

: change group ownership of a file.

chmod

: change access patterns (permissions) to files.

chown

: change user ownership of files.

clear

: clear the screen.

cmp

: compare two files.

cp

: copy files.

cpio

: archive and extract files.

cron

: clock deamon (executes “batch” and “at” commands).

crontab

: schedules commands at regular intervals.

crypt

: encrypt , decrypt files using altered DES, standard to Unix passwords (restricted distribution).

csh

: invoke the C shell.

csplit

: split file into several other files.

cu

: call up another unix terminal.

cut

: cut selected fields from each line of file.

date

: displays the time and date (can also change it if you’re root).

dd

: convert and copy a file.

df

: reports space (free, total etc’) on all mounted file systems.

diff

: compare two files.

diff3

: compare 3 or more files.

dircmp

: compare two directories.

du

: report disk usage.

echo

: echo argument to standart output.

ed

: line oriented editor.

egrep

: extended version of grep (searches for extended regular expressions).

fgrep

: same as grep, only it interprets patterns as a list of fixed strings.

expr

: evaluate boolean and arithmetic expression.

false

: return nonzero (false) exit status.

file

: report type of file.

find

: find matching files and run specified programs on them (optional).

finger

: report user information (operates remotely only if a finger server is running on the remote host).

ftp

: (file transfer protocol) a client for FTP servers.

grep

: search files for regular expression matches.

haltsys

: gracefully shutdown sytem (can only be run by root. halt in Linux).

head

: display first 10 lines of a file.

join

: display the combination (lines with command field) of two fields.

kill

: send a signal to terminate a process.

ksh

: invoke the korn shell.

line

: read a specific line out of a file (shell script usage).

ln

: create a link to a file/directory.

logname

: gets your login name.

whoami

: which user you are logged in as at the moment. If you, for example, switch to a different user, logname will show the original username you logged in as, and whoami will show the current user.

lpr

: sends a request to printer.

lprint

: prints on local printer.

lpstat

: reports printer status.

lpq

: same as above.

ls

: lists the contents of directory.

mail

: send and recieve mail.

man

: displays manual pages.

mesg

: grant or deny permissions to recieve messages from other users using the write command.

mkdir

: create a new directory .

mknod

: build a special file.

more

: display file one page at a time.

mount

: mount a storage device.

mv

: move or rename a file.

news

: display news item from NNTP servers.

nice

: change priorities of processes.

nohup

: run a command after logout (ignores hangup signals).

nroff

: format files for printing.

nslookup

: retrieve information from DNS servers.

od

: displays a file in 8-based octals.

passwd

: create or change login password.

paste

: merge lines of files.

pr

: format and print file.

ps

: reports status of active processes.

pstat

: report system status.

pwcheck

: check /etc/passwd (default) file.

pwd

: display current working directory.

rm

: remove (erase) files or directories (unrecoverable).

rmdir

: remove an empty directory.

rsh

: invoke Restricted Bourne Shell.

sed

: the stream editor.

set

: assign value to variable.

setenv

: assign value to enviroment variable.

sh

: invoke Bourne shell.

sleep

: suspend execution of a command for a given period.

sort

: sort and merge files.

spell

: find spelling errors.

split

: split file to smaller files.

stty

: set options for a terminal.

su

: spawns a subshell with a different username, requires other user’s password, unless you’re root.

sum

: compute checksums and number of blocks for files.

tabs

: set tabs on a terminal.

tail

: display last 10 lines of file.

tar

: a simple compression tool that merges multiple files into a single one, originally made to make backing up materials on backup tapes easier.

tee

: create a tee in a pipe.

telnet

: access remote systems using the telnet protocol.

test

: test various expressions and files.

time

: display elapsed time (execution, process, and system times) for a command.

touch

: change time/date stamps of files.

tr

: substitutes sets of characters.

translate

: translates files to different format.

troff

: format files to phototypester.

true

: return zero (true) exit status.

tset

: set terminal mode.

tty

: report a name of a terminal.

umask

: set file-creation mode (permissions) mask.

umount

: unmount a device.

uname

: display the name of the current system.

uniq

: report any duplicate line in a file.

units

: convert numbers from one unit to another.

unzip

: extract files from zip archive.

uptime

: report system activity.

uucp

: copy files between two unix systems (oldie but still beautiful).

uulog

: report uucp status.

uuname

: list uucp sites known to this site.

uudecode

: decode to binary after “uuencode” transmission.

uuencode

: encode binary file for email transmission.

uustat

: report status of uucp or cancel a job.

uupick

: receive public files sent by uuto.

uuto

: send files to another public Unix system.

uux

: execute command to remote Unix system.

vi

: a screen oriented (visual) editor (cool ,but Vim is better).

wall

: sends message to all users (root only).

wait

: await completion of background process.

wc

: count lines, words, bytes etc’ in one or more files.

who

: report active users.

whois

: search for user information.

write

: send a message for another user (see mesg).

zip

: archive file or files in zip format.

 

Examining Virality

Virality: The act of content on the web being spread by users sharing it, bringing new users to the original content and therefore adding additional utility.

Virality is the noun for the adverb viral and it has been thrown about these days when it comes to the online world. Virality refers to a sort of new metric system used to determine the “pace” in which information is transmitted over the internets.Borrowed from biology and perhaps misused from the silicon tech and digital marketing community. Ironically the words “infection” or “infected” have been left out of the social media jargon perhaps due to the negative connotation it might have. Coming to think of it users who abstain  from social media platforms are immune  to virality.  So abstainace helps your “immune” system and keeps you in the dark ages. But humour aside an attempt should be made to formulate this phenomenon from a digital point of view.

The success of a viral application relies on number of posible receptors in an online ecosystem and the percentage of users that where indeed infected or converted. The formula below depicts the virality coefficient.

k=icdot conv%

The virality coefficient kappa  , where i equals the number of posible receptors(or invites) and conv% the conversion percentage. The assumption here is that each user sends his invites once is a single batch.

The following formula measures users over time.

U(t)=U(0)cdotfrac{K^{(frac{1}{p}+1)}-1}{K-1}

The time need for a new user to send invites is given by p. The number of epochs the invite process has gone through is represented by frac{t}{p}. The significance of introducing p in the formula is that it shows that it’s easier to increace U(t) by reducing p rather than increasing K.

Verbalizing the aforementioned, lowering the amount fo time necessary for a user to invite other users to a site may be more effective than increasing the numer of invitations users send or the rate at which invited non-users convert. Lowering p increases the power while increasing K only increases the base.

In most cases p is ignored. It is more likely than K to be amenable to change. So perhaps it would be a good idea to invest in minimizing p.

An example of how the formula works is shown on the table below indicating how invitations increase the size of a user base over time. Say K=2 and U(0)=5 and N the number of completed Epochs.

Epochs 0 1 2 3 4 5
New Users added this Epoch 10 20 40 80 160
Total Users 5 15 35 75 155 315

 

It is apparant that the New Users  row doubles every round. The number of New Users for round i  , is given by

U(0)K^i

and the Total Users  is the running sum of New Users; hence the total number of users is given by the summation

U(t)=sumlimits_{i=0}^N U(0)K^i = U(0)cdot sumlimits_{i=0}^N K^i

There is a known identity for sums of powers.

sumlimits_{i=0}^{M-1}r^i=frac{1-r^M}{1-r}

We use it here with N=M-1

U(0)cdotsumlimits_{i=0}^{N}K^i=U(0)cdotfrac{1-K^{(N+1)}}{1-K}

 

Multiply the term on the right by -1/-1

U(0)cdotfrac{1-K^{(N-1)}}{K-1}

Replace N  with frac{t}{p}

U(t)=U(0)cdotfrac{K^{(frac{1}{p}+1)}-1}{K-1}

Bringing us back to the original formula; hence in oder to increace  U(t) maximize  K and minimize  p .

In one sentence: Make the users send out more invites and most importantly faster, you knew it, now you got the proof  :-)

Now that you know the math you understand why online poker became so popular the past 10 years.

LaTeX for wordpress gotta love it.

Special thanx

Special thanks to the great programmers of these libraries :

* FatFree PHP Framework: http://fatfree.sourceforge.net/

* Elastic CSS Framework: http://elasticss.com/

* HTML5 Boilerplate.com: http://html5boilerplate.com/

* SimplePie: http://simplepie.org/

* jQuery: http://jquery.com/

* WideImage: http://wideimage.sourceforge.net/

* iScroll: http://cubiq.org/iscroll

* htmLawed: http://www.bioinformatics.org/phplabware/internal_utilities/htmLawed/

* PHP Universal Feed Generator: http://www.ajaxray.com/blog/2008/03/08/php-universal-feed-generator-supports-rss-10-rss-20-and-atom/

* twitteroauth: https://github.com/abraham/twitteroauth

* floIcon: http://www.phpclasses.org/package/3906-PHP-Read-and-write-images-from-ICO-files.html

* modernizr: http://www.modernizr.com/

* keyboard shortcuts: http://www.openjs.com/scripts/events/keyboard_shortcuts/

* jsmin: https://github.com/rgrove/jsmin-php/blob/master/jsmin.php

* cssmin: http://code.google.com/p/cssmin/

*zazar: http://www.zazar.net