Road to work.

Categories art

 

My daily walk from home to the office in the old town of Nicosia Cyprus within the Venetian Walls. the walk starts near the “OHI” roundabout and end ends somewhere between the Famagusta gate and the Archbishop’s palace. During this walk I pass from the narrowest street in old Nicosia that of Hadjigeorgakis Kornesios and the Liberty Monument.

Food-Meat

Categories blog

I am never going to be a vegetarian because I can’t find the reasoning behind it. These photo’s though make you think of your food.

Tiny rabbit heads
Tiny rabbit heads
Pig in the oven
Pig in the oven
Lamb head and bone
Lamb head and bone

 

Select All Friends on Facebook

Categories blog, code, facebook

0I am managing a quite a few Facebook accounts and I was getting tired of outdated chrome/FF plugins. Firefox has been updating itself frequently so most plugins cease to work. Anyhow I thought around this one based on the assumption that “whatever a user can do a script can do better” here goes:

How to select all friends at once to invite friends on Facebook.

  1. Open Google Chrome / Firefox
  2. Go to your event, invite to like your page and generally whatever requires a lot of clicking on check-boxes in order to invite your friends.
  3. Scroll at the bottom of the (pseudo)popup window Facebook generates with all your contact and wait till it has fully loaded.
  4. MAC Users: ⌥⌘J for Chrome and ⌥⌘K for Firefox , WINDOWS Users: CTRL+SHIFT+J (for Chrome), CTRL+SHIFT+K (for FireFox)
  5. The console will appear somewhere on your browser
  6. Paste this line of JavaScript code in the console.
  7. Et Voila, all the checkboxes have been checked :|

javascript:elms=document.getElementsByName(“checkableitems[]”);for (i=0;i<elms.length;i++){if (elms[i].type=”checkbox” )elms[i].click()};

HTML5 Smash the Video: The cyprus EU presidency video.

Categories blog, code

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:

 

[cc lang=”javascript”]

 

 

<html><head>

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

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 < SOURCERECT.height){
		var x=0;
		while(x < 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<tiles.length; i++){
		var tile = tiles[i];
		if(tile.force > 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 <= 0 || tile.currentX >= PAINTRECT.width){
				tile.moveX *= -1;
			}
			if(tile.currentY <= 0 || tile.currentY >= 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) < 0.5){
				tile.currentX = tile.originX;
			}else{
				tile.currentX += diffx;
			}
			if(Math.abs(diffy) < 0.5){
				tile.currentY = tile.originY;
			}else{
				tile.currentY += diffy;
			}
			if(Math.abs(diffRot) < 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<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 > 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
}
</script>
</head>

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

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

[/cc]