Here’s one I just made that strips everything on Google Maps but the map itself. Put the browser fullscreen and you’ve got the whole world to printscreen desktop images from. Siberia has some pretty awesome landscapes.

I first tried it the easy way, by injecting jQuery and taking it from there. Worked fine on maps.google.nl but curiously maps.google.com wasn’t too keen on script injection (even threw a warning). So I rolled up my sleeves and rewrote it to pure js.

Here it is.

Drag the above link to your bookmarks bar and head out to Google Maps to test it.

The post Bookmarklet for fullscreen Google Maps appeared first on Sjeiti.

Watch:

var ability = {
	WALK:1
	,CRAWL:2
	,RUN:4
	,FLY:8
	,SWIM:16
};

function creature(name,abilities){
	return {
		toString: function(){return '[object creature "'+name+'"]'}
		,name: name
		,can: function(ability){return !!(ability&abilities)}
	};
}

var humans = creature('humans',ability.WALK|ability.RUN|ability.CRAWL|ability.SWIM);
var fishes = creature('fishes',ability.SWIM);
var turtles = creature('turtles',ability.SWIM|ability.CRAWL);
var pigs = creature('pigs',ability.WALK|ability.SWIM);

humans.can(ability.WALK); // returns true
fishes.can(ability.WALK); // returns false
turtles.can(ability.RUN); // returns false
pigs.can(ability.FLY); // returns false

So the abilities itself are stored in a single private variable, but we can easily test any ability with the creature.can method. Nice huh?

Spoiler alert

But let me take some of the magic away by explaining what really happens.
As you might have noticed the abilities are powers of two (1,2,4,8,16…). This corresponds to the binary equivalent of the decimal power of ten. The same sequence in binary is: 1,10,100,1000,10000.
So adding any of the properties will always result in a unique number: ie the decimal 2 and 8 result in the binary 1010 (the properties are not really added but we’ll come to that).

Bitwise AND

The trick lies in the & operator, or bitwise AND. Bitwise operations are extremely fast calculations because they are handled directly by the processor.
Bitwise AND compares the binary equivalent of two numbers and returns a new number where the 1′s coincide. Like this:

0101 & // 5
0011 = // 3
0001   // 1

In the example a pig is able walk and swim, so that’s 1|16=17, which is 10001 in binary. So to test if pigs can fly you’d do 17&8, which is zero because:

10001 & // 17
01000 = // 8
00000   // 0

Bitwise OR

You might also notice that the abilities are added by means of another bitwise operator: the bitwise OR, represented by the pipe sign: |. Bitwise OR is not the same as adding, but we are dealing with powers of two, so in this case it is. Bitwise OR really works like this:

0101 & // 5
0011 = // 3
0111   // 7

Impress your friends

So that’s basically how it works. Fast. Practical in numerous cases (for storing a bunch of checkboxes in a database for instance). Very useful to keep your code clean and minimal (assuming you know how to read bitwise operators, but now you do). Plus looking at the variable ‘ability’ alone immediately tells you a great deal about the rest of the code:

• capital properties tells you they are constant, so they don’t change
• binary sequence tells you the properties are stored as a single variable
• binary sequence also tells you an object can have multiple properties, but only one of each

There is however a maximum to all this. Bitwise operations in Javascript are done on 32 bit numbers. But that should be more than enough for most.

The post Storing multiple properties in one integer using bitwise AND appeared first on Sjeiti.

If you have a basic understanding of Perlin noise you’ll know that it consists of interpolated random numbers. People mostly use it in two dimensions. But it’s also useful in one dimension (movement for instance), in three dimensions (cylindrical and spherical mapping of 3D objects) and even four or five dimensions.
You can use four dimensional noise to create a tileable 2D image. Thinking in four dimensions is not an everday practice so we’ll take it one dimension at a time.

In the examples I’ve used Simplex noise with two octaves. Simplex noise is faster in higher dimensions and it looks better because of it’s triangular nature.
I’ve written a small function called drawNoise to deal with canvas creation and pixel array looping. You can download the examples here.

One dimensional tileable noise

In one dimension the noise is an endless smooth line (my noise implementation starts at two so I’m using a constant for the second parameter). Here you can still really see it’s just interpolated random numbers.

// one dimensional line
fNoiseScale = .02;
drawNoise(function(i,x,y){
	var v = Simplex.noise(
		 123+x*fNoiseScale
		,137 // we just need one dimension so this parameter is a constant
	);
	return v*iSize>y?255:0;
}).img();

You can use this in your animation by recalculation the noise value for each millisecond but you could also create a loop and precalculate the values. The values in the image above do not loop. But looping is quite easy, all it takes is an extra dimension and a loop… or eeh circle.

A one dimensional loop

For most of you Perlin noise looks something like the following image.

If we were to draw a circle in there and read out the noise values on that circle we’d have a one dimensional loop.

In code this looks like this:

// one dimensional loop
drawNoise(function(i,x,y){
	var fNX = x/iSize // we let the x-offset define the circle
		,fRdx = fNX*2*Math.PI // a full circle is two pi radians
		,a = fRdsSin*Math.sin(fRdx)
		,b = fRdsSin*Math.cos(fRdx)
		,v = Simplex.noise(
			 123+a*fNoiseScale
			,132+b*fNoiseScale
		)
	;
	return v*iSize>y?255:0;
}).img().div(2);

You can probably already see where we are going with this. For looping a two dimensional image we’ll need a three dimensional noise map (at least).

A cylindrical map

Perlin noise was originally created for continuous 3D texturing (Tron). Instead of the image map being a piece of paper wrapped around an object the image map is calculated by the location in the three dimensional noise field. So when slicing the object you’d still be able to calculate the map for the newly created surface.

Before our ultimate goal of a tileable image we will first create one that just tiles left and right. It’s like the two dimensional circle for our one dimensional loop but with one extra dimension: a cylinder.

// three dimensional cylindrical map
drawNoise(function(i,x,y){
	var fNX = x/iSize
		,fRdx = fNX*2*Math.PI
		,a = fRdsSin*Math.sin(fRdx)
		,b = fRdsSin*Math.cos(fRdx)
		,v = Simplex.noise(
			 123+a*fNoiseScale
			,132+b*fNoiseScale
			,312+y*fNoiseScale // similar to the one dimensional loop but we add a third dimension defined by the image y-offset
		)
	;
	return v*255<<0;
}).img().div(2);

A spherical image map

You might think a sphere would come in handy for our tileable image but you're wrong.
As a small sidestep I'll show you how to calculate a spherical image map and what it looks like.

// three dimensional spherical map
document.body.addChild('h2').innerText = 'three dimensional spherical map';
fNoiseScale = .1;
var oSpherical = drawNoise(function(i,x,y){
	var  fNX = (x+.5)/iSize // added half a pixel to get the center of the pixel instead of the top-left
		,fNY = (y+.5)/iSize
		,fRdx = fNX*2*Math.PI
		,fRdy = fNY*Math.PI // the vertical offset of a 3D sphere spans only half a circle, so that is one Pi radians
		,fYSin = Math.sin(fRdy+Math.PI) // a 3D sphere can be seen as a bunch of cicles stacked onto each other, the radius of each of these is defined by the vertical position (again one Pi radians)
		,a = fRdsSin*Math.sin(fRdx)*fYSin
		,b = fRdsSin*Math.cos(fRdx)*fYSin
		,c = fRdsSin*Math.cos(fRdy)
		,v = Simplex.noise(
			 123+a*fNoiseScale
			,132+b*fNoiseScale
			,312+c*fNoiseScale
		)
	;
	return v*255<<0;
}).img();

Cubical panorama map

The sphere we just made can also be used as a panorama if we'd put the camera in the center of the sphere. But a better technique is a cubical panorama because it has far less faces. The sphere is mapped onto the six sides of a cube as indicated by this sketch.

For each pixel on the face of the cube we have to calculate the intersection between our viewpoint C in the center and the sphere. This might sound difficult but really isn't.

We can perceive the line CA as a vector. And vectors can be normalized, so it's direction doesn't change but it's length is reduced to 1. Which makes all our vectors together look like a sphere.

Normalization is also quite simple, we just have to divide the xyz values of the vector with the total length of the vector. The length of the vector can be calculated using the theorem or Pythagoras.

In the code below you can see the normalize calculation is first done for a single face. Then the noise is calculated for al six faces simultaneously since its just a matter of swapping xyz values to get the position on another face.

// 3D panoramical cube map
document.body.addChild('h2').innerText = '3D panoramical cube map';
// we're not using the drawNoise function because our canvas is rectangular
var mCubemap = document.createElement('canvas')
	,iW = 6*iSize;
mCubemap.width = iW;
mCubemap.height = iSize;
var  iHSize = iSize/2 // half the size of the cube
	,oCtx = mCubemap.getContext('2d')
	,oImgData = oCtx.getImageData(0,0,iW,iSize)
	,aPixels = oImgData.data
	,aa = 123
	,bb = 231
	,cc = 321
;
for (var i=0,l=iSize*iSize;i<l;i++) {
	var  x = i%iSize		// x position in image
		,y = (i/iSize)<<0	// y position in image
		,a = -iHSize + x+.5	// x position on the cube plane, the added .5 is to get the center of the pixel
		,b = -iHSize + y+.5 // y position on the cube plane
		,c = -iHSize		// z position of the cube plane
		,fDistanceAB = Math.sqrt(a*a+b*b) // to calculate the vectors length we use Pythagoras twice
		,fDistanceABC = Math.sqrt(fDistanceAB*fDistanceAB+c*c)
		,fDrds = .5*fDistanceABC // adjust the distance a bit to get a better radius in the noise field
		,v = 1
	;
	a /= fDrds; // normalize the vector
	b /= fDrds; // normalize the vector
	c /= fDrds; // normalize the vector
	//
	// since we now know the spherical position for one plane we can derive the positions for the other five planes simply by switching the x, y and z values (the a, b and c variables)
	var aNoisePositions = [
		 [a,b,c]	// back
		,[-c,b,a]	// right
		,[-a,b,-c]	// front
		,[c,b,-a]	// left
		,[a,c,-b]	// top
		,[a,-c,b]	// bottom
	];
	for (var j=0;j<6;j++) {
		v = Simplex.noise(
			 aa + aNoisePositions[j] [0]
			,bb + aNoisePositions[j] [1]
			,cc + aNoisePositions[j] [2]
		);
		var pos = 4*(y*iW+j*iSize+x); // the final position of the rgba pixel
		aPixels[pos] = aPixels[pos+1] = aPixels[pos+2] = v*255<<0;
		aPixels[pos+3] = 255;
	}
}
oCtx.putImageData(oImgData,0,0);
document.body.addChild('img',{src:mCubemap.toDataURL("image/jpeg")});

Here are the six sides stuck into a single image plus a screenshot of what it looks like from within the cube. The source code also has an actual 3D example done with threejs.

A 2D tileable image

A 2D tileable image might seem easy but I find it the most difficult of the ones I described here because understanding it requires you to think in four dimensions. The closest we really got was the cylindrical map (with it's horizontal repeat), so we'll take that as our starting point.
In the cylindrical map we used the image horizontal position for the circle; so the horizontal image position provided us with two coordinates x and y in the noise xyz field. The image's vertical position corresponded to z in the noise field.

We also want the image to tile vertically so if we add an extra dimension we can use it to create a second circle to replace the fields linear z value. It's almost like creating two cylinders in a four dimensional field. I tried to vizualize it a bit in the following sketch, it's not accurate but I'm trying to convey the general idea, not draw a four dimensional cylinder.

The code pretty straightforward; just two circles in four dimensional noise space.

// four dimensional tile
fNoiseScale = .003;
drawNoise(function(i,x,y){
	var  fNX = x/iSize
		,fNY = y/iSize
		,fRdx = fNX*2*Math.PI
		,fRdy = fNY*2*Math.PI
		,a = fRds*Math.sin(fRdx)
		,b = fRds*Math.cos(fRdx)
		,c = fRds*Math.sin(fRdy)
		,d = fRds*Math.cos(fRdy)
		,v = Simplex.noise(
			 123+a*fNoiseScale
			,231+b*fNoiseScale
			,312+c*fNoiseScale
			,273+d*fNoiseScale
		)
	;
	return (Math.min(Math.max(2*(v -.5)+.5,0),1)*255)<<0;
}).img().div(2,2);

And here's the result:

The post Creating tileable noise maps appeared first on Sjeiti.

Unlike what Github says you should do to migrate I started at Google Code itself. Google Code also supports Git and they have excellent instructions to convert your existing Subversion repository into a Git repository.

Since my project didn’t have any tags the Google Code instructions sufficed. If your project does have tags and you want to convert them properly you might be better off following Githubs suggestion to use the svn2git tool (there’s also the git-svn-migrate tool, I have no idea which is better). My main reason for not using svn2git was that it requires Ruby. And although I think I have that installed I didn’t want to overcomplicate things because I already didn’t know what I was doing learing Git and all.

Once you’ve followed the instructions you should have a checkout of your project on your local machine. Now all that is left is to move it to Github.

I’m mainly using Git Bash here but I also have Tortoise Git installed and Githubs own Windows client (although the latter sucks a bit).

Presuming you have a Github account and created an empty project to push the lot into; you first have to add the Github remote to the project (Unlike Subversion a Git project can have multiple locations called ‘remotes’):

$ git remote add origin git@github.com:GITHUB_USERNAME/REPO_NAME.git

You can check yourself we now have two remotes: googlecode (you added earlier) and origin.

$ git remote
googlecode
origin

Before we can push to Github (origin) we must do a pull. And since origin is not our default remote (googlecode is) we must also specify which branch to pull from (the master branch).

$ git pull origin master

Since your repo is now up-to-date you can push:

$ git push --all origin

…and that’s it!

Now for the issues, this proved somewhat more laborious. This piece of Python code does the trick. I speak as much Python as I speak Japanese so I hardly bothered checking the code. I only added my login data, altered it to move everything instead of only the open issues and commented out ln 13 ‘from __future__ import print_function’ since that line prevented it from running.

This worked with only two minor mishaps: all thirty or so closed issues I had were now open on Github and all issues on Google Code were now tagged ‘migrated’ and open. For the latter I just added the migrated tag to the closed issues list on Google Code. On Github I just closed the issues by hand.
So next time I’ll try to alter the script a bit to actually close the closed issues (also some good Python practice for me).

The post Migrating a subversion repository from Google Code to Github appeared first on Sjeiti.

But I got a little overexcited and redesigned my site. One thing let to another and I decided to redesign my logo. Then I thought: you know what would be freaking cool, a logo made of one HTML element and pure CSS.

Which worked out just fine if I may say so myself:

#logo {
	width: 67px;
	height: 108px;
}
#logo:before, #logo:after {
	content: '';
	position: relative;
	top: 14px;
	left: 4px;
	display: block;
	width:56px;
	height:28px;
	background-color: #000;
	border-radius: 0 28px 0 28px;
	transform: rotate(40deg) skewx(-3deg) skewy(-3deg);
}
#logo:after {
	top: 29px;
	left: -6px;
	width:80px;
	height:32px;
	transform:rotate(46deg) skewx(-9deg) skewy(-9deg);
}

Now the only problem is: how the hell do I turn this into vector?

The post Logo appeared first on Sjeiti.

A while ago I got a ticket on Tinysort asking if I was planning to migrate to Github. I said not anytime soon but that was a while ago.
And now I’m still not sure whether I should make the switch because I still suck at Git (stupid confusing terminologies between SVN and Git). But then again, I’ll keep sucking at it if I don’t use it.

So here’s a Google Doc survey:

Well, with about a hundred entries the result of the tiny survey should be clear, Github it is.

The post Tinysort: a tiny survey appeared first on Sjeiti.

Anyway, here’s a little thing I wrote on a phone to see what the DOM on that phone browser really looked like.

http://test.sjeiti.com/DOM/

Types are neatly color coded, objects and functions can fold, and booleans toggled.

Vacation or not, I just can’t go that long without coding anything.

The post Android phone DOM appeared first on Sjeiti.

Here’s an easy solution I used for a site I recently made.
In LESS create class rules within a non-existing id. Then read them by traversing the document.styleSheets.

Here’s a Github gist and here’s a fiddle.

So in my LESS file I have the following:

@thumbsWidth: 654px;
@thumbsTop: 123px;
#less {
	.thumbsWidth { width: @thumbsWidth; }
	.thumbsTop { width: @thumbsTop; }
}

Then call the function: getLessVars('less');

Which returns the following object with the LESS variables:

{
	thumbsWidth: 123,
	thumbsTop: 456
}

easy

The post LESS variables to Javascript appeared first on Sjeiti.

As you might suspect fluid dynamics is really complex stuff. In computational programming it is mimicked by using Navier-Stokes equations. Olivers fluid solver is based on a 2003 paper by Jos Stam describing a fast implementation for realtime use.

The first thing I did is grab his script and implement it roughly. Only it worked wrongly for non square images. So I looked around some more for other implementations of fluid dynamics and found one in Actionscript by Eugene Zatepyakin. Since Actionscript is my second language and Eugene is an excellent programmer I decided I’d port his code to Javascript (+Eugenes version had viscosity implemented).

When I got the port up and running it ran faster than Olivers script but it had the same vertical vs horizontal discrepancy. Luckily, while optimizing, I found out why and fixed it.

Porting stuff from C++ to Java to Actionscript to Javascript does not go by unpunished. The Webkit browers will run it quite nicely but Firefox really sucks at it (even moreso than IE).

Here it is:

In the above implementation I’ve used the raw fluid in a canvas, and the red dots are tiny 1px divs above it. You can also watch it fullscreen from http://test.sjeiti.com/fluidSolver or download the source.

With it I’ve made a minimal dusty look on ronvalstar.nl (only Webkit since Firefox and IE aren’t fast enough). It uses only the velocity field for the dust particles. It starts with a low number of particles that is in- or decremented depending on the framerate. The dust particles are influenced by mouse movement, but also by interacting with the menu and/or projects.

The post Interactive fluid dynamics in Javascript appeared first on Sjeiti.

It took me a while to to get this right. So much for Google because everybody with a similar problem posted the same solution, mostly with the same cumbersome code (why bother writing a new post if you’re just gonna copy-paste the code from someone elses blog).

But before I proceed: carefull not to turn this post into a rant I’ll say it now just to get it over with: “Wow, what a bunch of poorly documented, badly written spaghetti code WordPress is”. That’s it.

If you look a bit closer to the admin source you’ll find a Javascript click-implementation for all ‘a.thickbox’ (media-upload.dev.js ln 65-71).
A bit further you’ll see that the upload uri for that ‘a.thickbox’ can be retreived with the PHP function ‘get_upload_iframe_src($type)’. Now it doesn’t say anywhere what that $type is supposed to be but digging through the code (media.php) and doing some trial and error it seems a string of the possible values: image, video, audio, file or media (where the latter is any of the previous but file). If you want extra types checkout add_filter with ‘upload_mimes‘.

All we need now is to add a javascript callback function.
The javascript callback function is a global. This is bloody ridiculous but not surprising if you’ve ever inspected window or $_GLOBAL in WordPress.
The callback function returns a different HTML string depending on the type of file you’ve selected (type image has an image tag inserted).
What all these identical solutions on Google do wrong is that they set this global javascript callback function (and add placeholders) the moment you enter the page. It is neater to set it the moment you press the ‘a.thickbox’ button, this way you can adjust your callback when you have multiple uploads (ie an image and a pdf).

Once you’ve added the thickbox and setup the javascript callback you should be able to use the WordPress media library.

But what if you do not want that HTML that is returned but, say, a post_id (more experienced WordPress users will know that posts, pages, attachements, images and everything are all stored in the table [wp]_posts). With the post_id (or attachement_id) you’d be able to use more than just an image- or attachement uri, you can also use the title and/or description of a file.

As said, the callback function returns a different types of HTML. The image HTML snippet contains the attachement_id but the others don’t. When you trace back where the callback function is invoked you’ll find an add_filter hook called ‘media_send_to_editor’. It’s nowhere to be found on codex.wordpress.org but it’s easy enough to implement. The call itself is done in media.php ln 488 (apply_filters(‘media_send_to_editor’, $html, $send_id, $attachment)). And if you look through the surrounding function you’ll see the $send_id is exactly what we need. Not only that; the $attachement parameter is an associative array filled with other usefull stuff (title,description etc…).
We overwrite the $html parameter (the filter callback expects $html returned) and set the priority of the filter to something really high so we know for sure it’s the last function applied… and we’re there…
…or are we?
Hooking up to ‘media_send_to_editor’ will also cause whatever you do in that function to happen in the normal text editor (after all: that’s what we’re hacking into).
So we need to try to determine were we come from. There is the $_POST['_wp_http_referer'] but if you examine it you’ll see that it does not contain the $GET vars we added to the upload button href. It took me a while to notice: if you check the upload iframe uri you’ll see that somebody did a very sloppy job off chopping of the last $GET variables after ‘TB_iframe’ (WTF WordPress, seriously?!). So don’t append or use add_query_arg but insert your extra variables.

So since we now know where we come from we can use this in our hook function. We don’t even have to parse an HTML string. We just want some data so we’re going to parse JSON.

Here is an example custom post type: foobarbaz.zip (simply add it to your theme dir and include the php file in your functions.php).

There are two important lines in the PHP (the rest is mainly for building a custom post type):

$sUri = esc_url( str_replace('&type=','&target=foobarbaz&input='.$sInputName.'&preview='.$sPreview.'&tab=library&type=',get_upload_iframe_src($sSubType)) );

This is the code for creating the uri used in the upload button. Notice the insertion of the $GET vars.
And there is the entire mediaSendToEditor function on line 81.
file: posttype-foobarbaz.php

function mediaSendToEditor($html, $attachment_id, $attachment) {
	// check for the GET vars added in boxView
	parse_str($_POST['_wp_http_referer'], $aPostVars);
	if (isset($aPostVars['target'])&&$aPostVars['target']=='foobarbaz') {
		// add extra data to the $attachement array prior to returning the json_encoded string
		$attachment['id'] = $attachment_id;
		$attachment['edit'] = get_edit_post_link($attachment_id);
		$attachment['input'] = $aPostVars['input'];
		$attachment['preview'] = $aPostVars['preview'];
		if ($aPostVars['type']=='image') {
			foreach (array('thumb','medium','large') as $size) {
				$aImg = wp_get_attachment_image_src( $attachment_id, $size);
				if ($aImg) $attachment['img_'.$size] = $aImg[0];
			}
		}
		$html = json_encode($attachment);
	}
	return $html;
}

There’s also a tiny caveat conserning the ‘Insert into post’ button in the upload iframe. If you create a custom post type that does not support ‘editor’ you’ll have to add this button yourself.

Here’s the js responsible for the callback:
file: scripts/foobarbaz.js

(function($){
	var fnOldSendToEditor;
	$(function(){
		// store original send_to_editor function
		fnOldSendToEditor = window.send_to_editor;
		// add a different send_to_editor function to each thickbox anchor
		var $Box = $('#foobarbaz-box');
		if ($Box.length) {
			$Box.find('a.thickbox').each(function(i,el){
				var $A = $(el).click(function(){
					window.send_to_editor = getFnSendToEditor($A.data('type'));
				});
			});
		}
		// hack tb_remove to reset window.send_to_editor
		var fnTmp = window.tb_remove;
		window.tb_remove = function(){
			if (fnOldSendToEditor) window.send_to_editor = fnOldSendToEditor;
			fnTmp();
		};
	});
	function getFnSendToEditor(type){
		return function(fileHTML){
			var oData = JSON.parse(fileHTML);
			//console.log(oData);
			$('#'+oData.input).val(oData.url);
			$('#'+oData.preview).text(type+': '+oData.url.split('/').pop());
			tb_remove();
		}
	}
})(jQuery);

First the original send_to_editor function is stored. Then each a.thickbox is assigned an onclick to replace the send_to_editor. This function creates and returns an anonymous function in order to parse the ‘type’ parameter through it’s scope (not manditory but a nice alternative to the insertion of the $GET vars).
Then we hack into tb_remove to restore the original send_to_editor function (since we also want this to happen when you simply close the upload iframe).
You’ll also notice that the original global ‘send-to-editor’ function is stored and restored on callback so as to maintain it’s original texteditor functionality. And that’s it.

So there you have it…

(once again: foobarbaz.zip)

The post Using WordPress media library in a plugin appeared first on Sjeiti.