The only requirement I had was that I supply the pId (process ID) and the application takes a screenshot of that process for me...but the application can be very easily extended to accept a process name or anything that can identify a process.
As usual, the source for this project resides on github.
How it's done
In a nutshell, I basically do a Google Custom Search API call with a randomly constructed query and then show the first result from the collection of hits.
The server
On the server, I have a file of ~8.5k commonly used English words, and based on the length query string value, I select a number of these words in a random manner.
Note that I enforce a hard limit on the range for the allowed values of length; currently, the range is [0, 10]. If no length is specified, I default it to 3.
So what the client does is an Ajax call to this PHP script to get the query and then do an Ajax call to the Google Custom Search API to get a list of hits. Btw, I'm also using a query string which I termed iesux which I use for a unix timestamp, and I had to do this because calls to the same url were being cached by Internet Explorer and so I needed this timestamp to introduce variety to the urls.
What I then show on screen is the first result from the list of google hits from that query.
Why not embed an I'm Feeling Lucky link in the iframe?
Halfway during the project, I realized that this functionality is pretty similar to the I'm Feeling Lucky functionality that Google still offers (for some reason?).
I figured that this way, I would eliminate the need to use the API (which, btw, has a 100 queries a day limit) but instead use an I'm Feeling Lucky url (like http://www.google.com/search?&btnI=745&q=obfuscation) for the source of the iframe.
But after I tried a couple of queries like this, I realized that sometimes, an I'm Feeling Lucky url redirects to an actual Google Search page and since Google prevents their site to be rendered in an <iframe>, I was getting a lot of blank pages in the <iframe>...and that sucks.
What about the 100 query limit?
For the free offering of the Google Custom Search API, Google enforces a 100 queries per day (per project) limit.
To work around this, I created five projects (i.e. 5 API keys) and whenever someone loads the page, I serve one of the five keys at random. If it turns out that that particular key is used up, the client requests another API key.
You can also specify your own API key (make sure your that the the Custom Search API service is turned on) using the key query string, as follows:
You can also specify a custom message to be displayed on the infobar, as opposed to the default message:
$.fn.extInfobar({
id: 'nbilgjjflfiiijecdjpnbganoiafneph',
message: 'This is my custom message I want to show on the infobar'
});
There are three other optional parameters you can pass; redirectIfInstallFails, rememberClose and rememberRedirect. All three default to true if unspecified.
$.fn.extInfobar({
id: 'nbilgjjflfiiijecdjpnbganoiafneph',
message: 'This is my custom message I want to show on the infobar',
redirectIfInstallFails: false,
rememberClose: false,
rememberRedirect: false
});
redirectIfInstallFails specifies whether the plugin should redirect the user to the extension's Chrome Webstore page if the installation happens to fail or if the site you're using the plugin on is not verified (more info on that below).
When the user clicks on the close button, the action is remembered via localStorage so that the bar is not displayed again for him but the rememberClose parameter allows you to override this functionality; so if you set it to false, the bar will keep appearing on subsequent page visits even if the user closed it.
The last parameter, rememberRedirect, is used to save the action of the plugin redirecting the user to the extension's Chrome Webstore; by default, the action is saved which means that once a user is redirected to the Chrome Webstore page, the bar will not be shown to him on subsequent visits to your page, but you can of course override this functionality by setting rememberRedirect to false.
How it works
The plugin makes use of Chrome's inline installation functionality, but note that this only works if your extension's website is verified and this plugin is invoked from the same domain as the verified site.
When you click on the 'Install' button on the infobar, and the context meets the two aforementioned criteria, the following modal dialog will pop up:
Otherwise, the user will be redirected directly to the extension's page on the Chrome Webstore (unless the redirectIfInstallFails option is explicitly set to false).
A functionality in browsers, specifically Google Chrome and Mozilla Firefox, which I find extremely comfortable is "Paste and Go".
This pastes in your clipboard contents in the address bar and submits it automatically at one go, which is a step less than pressing Paste and then submitting manually.
Because I like this functionality a lot, I decided to try and emulate it for input textboxes on websites with a Google Chrome extension.
When invoking it (Right Click -> Paste and Go), the extension grabs reference to the input text box where you right clicked, clears its value and pastes in the contents of your clipboard.
It then searches for the closest <form> to your text box with jQuery's closest function and if it finds a form, it submits it.
Note that closest only traverses up the DOM tree, so it will not find <form>s which are either below (in the tree) or adjacent (siblings) to your input text box.
If no <form> is found, another approach is taken. This time, the extension searches for the closest button to your input text box and if it finds one, it clicks it. This time though, I couldn't use jQuery's closest since, most of the time, submit buttons in <form>s are placed after the input text box. Therefore, I wrote this function to find the 'closest' button:
var getClosestButton = function (el) {
var buttons;
while ((el = el.parent()).length) {
buttons = el.find(":button, input[type=submit]"); // :button -> "input[type=button], button"
if (buttons.length) {
return buttons.eq(buttons.length - 1);
}
}
};
Once a button is found, a click event is simulated on it.
A word of caution
This extension may not always work as expected. This is because it assumes that the first <form> it finds closest (upwards only) to your input box is the correct form which needs to be submitted, or that the 'closest' button that's found near your input box is the button that needs to be clicked...and the extension may not always find the correct button or submit the correct form; although the later is very rarely an issue.
Therefore, use it at your own risk.
Here are some of the places where it worked successfully:
Facebook
docs.jquery.com
Stackoverflow
Twitter
Google
Yahoo!
Bing
YouTube
The Pirate Bay
And here are some of the sites in which it didn't work as expected:
Grooveshark
Gmail
CodePlex
Where did you try it, and did it work as expected?
After my last post on simulating the Monty Hall problem, I decided to go a step further and actually write the game itself. Since I wrote the simulation using JavaScript, I kept at it by writing the game using JavaScript by making use of the canvas element.
The code leaves much to be desired but since this was a quick weekend project (...although some tweaks did spill over to the rest of the week), I didn't worry too much about it.
To implement the colorful background, I'm using a cylindrical-coordinate representation of the RGB color model, known as HSV (Hue Saturation Value). Keeping the saturation and value to a constant 100 (max), I'm iterating through values 0-360 for the hue thus achieving the blending of colors. When the hue reaches 360, I reset it back to 0 and the cycle starts over.
The initial value of the hue is randomly chosen at the beginning.
Balls
All of the balls' attributes are randomly generated i.e. the initial position, size, color, speed and angle.
Since collision detection is only applied once the balls hit the edges of the browser window and the edges are axes aligned, I'm simply inverting the part of the velocity's depending to which edge is hit.
If the ball hits either the left or right edge, the x is inverted and if the ball hits the top or bottom edge, the y is inverted.
Resizing the window
I'm hooking to window.onresize so that once the browser window is resized, I adjust the width of the canvas appropriately and also remove the balls that are now out of screen.
This is my first attempt at experimenting with a genetic algorithm. The following is an application that evolves a string given a destination to converge to.
Here is an example run:
> StringEvolver -m 0.25 -s 0.6 -c 2000 -e 0.1 --fitness=hamming --ctype=one -t 0.3 "Charles Darwin was right!"
Evolution Destination: Charles Darwin was right!
Mutation Rate: 25%
Crossover Rate: 60%
Truncation Rate: 30%
Chromosomes / population: 2000
Elitism / population: 200 (0.1%)
Fitness Calculator: Hamming Distance
Crossover Type: One Point
1: L<eI`Y@ D#raF'JKJ7DUAg"GR
2: L<eI`Y@ D#raF'JKJ7DUAg"GR
3: chNOLe"5]={Iiyrgk*,rEpE/!
4: L<eI`Y@ D#ra nR$C1SrYqha+
5: L<eI`Y@ D#ra nR$C1SrYqha+
6: lpa5`Y@ D#ra nR$C8y.iqrt5
7: C]Y&hJ1 %aRwi< aaB,r_Zh68
8: 1s[r.ts %aGwi< _a"=rjXyN!
9: chNOlFsyD#rwi< }aB,r_Zh68
10: chNO9e" D#rwi< }aB=rPgh6!
11: chNO9e" D#rwi< }aB=rPgh6!
12: 1s[r.Ks D#ra n}way rAght!
13: C}hplFs D#rwi.}way rPgh6!
14: C'aclos Da{]inrwas r.ghx!
15: C'aclos Da{]inrwas r.ghx!
16: ChNrlFs Da>win}was `gha!
17: ChNrlFs Da>winlwas r;gh6!
18: Ch[rlFs Da>wi< was rAght!
19: Chacle@ D#rwin was rjght!
20: Chacle@ D#rwin was rjght!
21: ChNrles Darwin}was rAght!
22: ChNrles Darwin}was rAght!
23: Charles Darwin}was r`ght!
24: Charles Darwin}was r`ght!
25: Charles Darwin was rAght!
26: Charles Darwin was rAght!
27: Charles Darwin was rAght!
28: Charles Darwin was rAght!
29: Charles Darwin was rAght!
30: Charles Darwin was right!
Found in 30 generations
Time Taken: 00:00:00.4730271
The mutation rate determines the probability of how often a selected chromosome mutates. Mutation is very important in a genetic algorithm because it helps in keeping diversity in the population, thus avoid local minima which can slow or even halt further evolution.
The application currently uses a mutation operator called Single Point Mutation. For our current application, it works by randomly selecting a point in the string and switching the character at that point to another random character.
As an example, say the chromosome to be mutated currently contains the string "aBcdE". The single point mutation operator then randomly chooses position 2 (0-based) and replaces the character 'c' with the randomly chosen character 'W'.
This way, the chromosome "aBcdE" has now been mutated to "aBWdE".
-s, --crossover=VALUE
A value between 0-1
The crossover rate determines how often two selected chromosomes are sexually combined to produce two separate offspring.
For this application, there are two available crossover operations: One Point Crossover and Two Point Crossover. These operators are discussed further in the ctype argument.
-e, --elitism=VALUE
A value between 0-1
The elitism rate determines the number of the fittest solutions that are directly (untouched) transferred to the advancing population.
Elitism can help in preventing the potential loss of possibly good solutions and can lead to quicker convergence.
-c, --crcount=VALUE
A value greater than 1
The chromosome count determines the number of chromosomes that each population will have. The greater the number of chromosomes, the more time a population takes to advance to the next.
--fitness=VALUE
VALUE = sum, levenshtein or hamming
The fitness calculator determines which algorithm is used to calculate how fit a given chromosome is.
There are currently three fitness calculators to choose from:
Sum
The sum calculator calculates the ASCII difference between each character of the target strings.
public override double CalculateFitness(Chromosome ch)
{
var distanceToTarget = Target.Select((t, i) => Math.Abs(t - ch.Value[i])).Sum();
return 1.0 / distanceToTarget;
}
Levenshtein Distance
The Levenshtein distance between two strings is the minimum number of edits needed to transform one string into the other. The transformation can include insertion, deletion and substitution. This distance is also referred to as the edit distance.
Hamming Distance
The Hamming distance between two strings of equal length is the number of positions at which the corresponding symbols are different. The reason Hamming distance requires the strings to be of equal length is because unlike the Levenshtein distance, the Hamming distance only allows substitutions.
As an example, the Hamming distance between "janica" and "jenixo" is 3.
public override double CalculateFitness(Chromosome ch)
{
if (ch.Value.Length != Target.Length)
{
return 1.0 / double.PositiveInfinity;
}
var difference = 0;
for (int i = 0; i < Target.Length; i++)
{
if (ch.Value[i] != Target[i])
{
difference++;
}
}
return 1.0 / difference;
}
--ctype=VALUE
VALUE = one or two
The crossover type determines which crossover operator is to be used when sexually combining two chromosomes.
There are currently two available methods to choose from:
One
The One-Point Crossover method chooses a random point (called a locus) in the string and all the data beyond that point in either chromosome is swapped between the parent chromosomes. The resulting two chromosomes are the children.
public Tuple<Chromosome, Chromosome> Crossover(Chromosome c1, Chromosome c2)
{
var locus = random.Next(0, c1.Value.Length + 1);
string ch1 = c1.Value.Substring(0, locus) + c2.Value.Substring(locus),
ch2 = c2.Value.Substring(0, locus) + c1.Value.Substring(locus);
return new Tuple<Chromosome, Chromosome>(new Chromosome(ch1, fitnessCalculator), new Chromosome(ch2, fitnessCalculator));
}
Two
The Two-Point Crossover method is very similar to the One-Point Crossover method but this one chooses two random points along the string rather than one. The data between the two points is swapped and the resulting chromosomes are the children.
The Truncation value determines how many chromosomes of the current population should be kept and used for the selection, crossover and mutation operations. Note that before the truncation is performed, the chromosomes in the population are sorted in descending order by their fitness, so the fittest chromosomes are kept after the truncation.
A value of 1 uses all of the chromosomes and a value of 0.5 uses half of the population (the better half, of course)
The A* search algorithm ("A star") is used for path finding and graph traversal. The following is my implementation in XNA.
The A* algorithm itself is very similar to Dijkstra's algorithm but the A* uses heuristics to achieve better performance.
Screenshots
Usage
Left Mouse Click - Create a barrier CTRL + Left Mouse Click - Set the source ALT + Left Mouse Click - Set the destination Space - Toggle grid lines Enter - Start pathfinding! ` - Open the developer console
Heuristics
The A* algorithm uses a heuristic to improve performance by trying to "guess" the best path, although this will not, unlike Dijkstra's which does not use a heuristic, guarantee the shortest path.
The console supports pasting via CTRL+V but this requires the game to be running in a Single Threaded Apartment.
To do this, add the STAThread attribute to the entry point of your game:
static class Program
{
/// <summary>
/// The main entry point for the application.
/// </summary>
[STAThread]
static void Main(string[] args)
{
using (Game1 game = new Game1())
{
game.Run();
}
}
}
There are currently 2 ways how to add custom commands to the console:
1. Using IConsoleCommand
Console commands can be built via the IConsoleCommand interface.
The following is an example of a command:
class MovePlayerCommand:IConsoleCommand
{
public string Name
{
get { return "move"; }
}
public string Description
{
get { return "Moves the player"; }
}
private Player player;
public MovePlayerCommand(Player player)
{
this.player = player;
}
public string Execute(string[] arguments)
{
var newPosition = new Vector2(float.Parse(arguments[0]), float.Parse(arguments[1]));
player.Position = newPosition;
return "Moved player to " + newPosition;
}
}
Such a command can then be added to the console like such:
Commands can also be added without using IConsoleCommand, like the following:
console.AddCommand("rotRad", a =>
{
var angle = float.Parse(a[0]);
player.Angle = angle;
return String.Format("Rotated the player to {0} radians", angle);
}, "Rotates the player");
The advantage of adding a command like this is that in the Func<> you have access to the variables outside the closure.
The console can be customized with a number of options. These options can be accessed through the GameConsoleOptions class.
To set the initial options, instantiate a new GameConsoleOptions class, set your desired options and pass it through one of the GameConsole's overloaded constructors:
To launch the game, fire up your terminal, navigate to the game's directory and run main.rb with the ruby interpreter: ruby main.rb
Or ruby1.9 main.rb if you have multiple versions of ruby installed.
After you click start game on the main screen, you will see the player selection, similar to the second screenshot above. If you do not have any joysticks connected, you will only be shown 1 player slot and the game will be unable to start since it requires 1 < players <= 4. Therefore, with a single joystick connected, you will be able to play a 2 player game...one player with the keyboard+mouse and the other player with the controller.
Make sure that the joysticks are connected before you go into the player selection screen because the amount of player slots that the screen will display depends on the number of connected controllers.
Additional Notes
Joystick support
The game requires at least one joystick to be connected. Since I had very limited time in building this game, I only pre-set configuration for PS3 controllers. You can try and play it with other controllers but it's unlikely that the usable buttons will be comfortable to use, and the axis may not even be configured correctly.
If you want to use a different controller, you need to add a new configuration in the gamestate.rb file, similar to the PS3 one:
I now plan to make other individual posts explaining some of the stuff I did, like Gosu Joystick support on linux, Health Bars with RMagick, Parallax scrolling, the Menu system and others.
Just a couple of weeks ago, Marc Tanti and I decided to check out Microsoft's XNA and what better way to do it than building a game in about 24 hours of sleepless coding and caffeine intake ?
You can checkout with: hg clone https://typocalypse.googlecode.com/hg/ typocalypse
Some notes...
Audio
The in-game music is the theme from the Amiga game The Great Giana Sisters, overlayed with some sound effects recorded by Marc Tanti. All of the other sound effects in the game where also recorded by Marc Tanti.
Text Input in XNA
Since XNA does not provide native support for text input, I used global hooks with these set of classes developed by George Mamaladze to capture keystrokes.
Prefix Matching
Prefix matching was done via a Trie and this is described in more detail at Marc Tanti's post.
jsLaTeX is the latest plugin I developed for jQuery and I wrote it so that I could easily be able to embed LaTeX directly into my blog but anyone can use it for their site.
The plugin works by taking the inner HTML of the specified container obviously assuming that it is valid LaTeX, and displays the image using CodeCogs LaTeX engine. The rendered output replaces the equation inside the container.
The plugin also accepts 3 optional parameters:
format
url
callback
[format]
The format parameter is used to specify the format of the returned output. There are currently 3 supported formats:
gif
png
swf
[url]
The url parameter is used to change the engine of the LaTeX generator. Let's take an example with a different engine, and in this case I will be using SITMO's LaTeX engine.
The url SITMO's engine uses to render the output is as follows:
The plugin currently supports another specifier: {f} and this is used for those engines that allow you to specify a file-format output. The file-types that are currently supported are the ones mentioned in the [format] section.
If we take the 'original' engine url, we can turn into a url with specifiers like such:
http://latex.codecogs.com/{f}.latex?{e}
Here are examples of Engines you can use (ready with specifiers):
[callback]
The callback parameter allows you to pass a function that will be executed after the image has been retrieved. In your callback function, this will refer to the newly created element (as a jQuery object) that contains the rendered output.
The following example will set a border around your rendered output.
