Archive for the ‘Articles’ Category

Announcing a New, Free, Online App: Bayesian Probability Calculator

Wednesday, June 3rd, 2020

Bayesian Calculator icon Announcing a new project I just completed, a Bayesian probability calculator! This is a personal project I began in 2018 and have recently revisited, improved, and finished up. I took an interest in Bayesian probability (learn about Bayes’ theorem here at some years ago when I recognized how powerful of a tool it is to, basically, help calculate how likely things are to be true (based on the information that you have available). It’s all about taking your prior belief (or the “prior probability” as some value between 0% and 100%) about whether some idea or hypothesis is true, and when you come across some new evidence relating to it, revising the belief by properly factoring in the evidence through considering how expected it was assuming the hypothesis is true and how expected it was assuming the hypothesis isn’t true. It’s not too different from how people might generally take new information into account for informing their beliefs, but Bayes’ theorem frames the question precisely, reminding us to pay attention to false positives and our prior beliefs. So by applying Bayes’ theorem, when we make some new observation, we can consider how expected that observation would be if our prior belief was true and how expected it would be if it wasn’t true, and we can consider that given what we previously thought the chance was for it to be true.

The equation itself looks like P(H|E) = [P(H) × P(E|H)] / [P(H) × P(E|H) + P(¬H) × P(E|¬H)], which means that the probability that a belief is true given new evidence (P(H|E)) can be calculated by multiplying the prior probability for the hypothesis by the expectation for the evidence given the hypothesis (P(H) × P(E|H)), divided by the total expectation for that observation, which is itself the prior probability times the likelihood for the evidence given the hypothesis plus the prior belief that the hypothesis was wrong times the expectation for the evidence given that the hypothesis was wrong (P(H) × P(E|H) + P(¬H) × P(E|¬H)). For a great and intuitive explanation of exactly why this works, I recommend this wonderful video by 3Blue1Brown on YouTube.

To give a simple example of Bayes’ theorem in action, let’s say you’re wondering whether your new friend shares your passion for geology (but you don’t want to, you know, actually ask). “My friend loves geology” may be your hypothesis. And let’s say you initially don’t think it’s very likely to be the case; maybe you think only 20% of people like geology as much as you. So 20% is your prior probability. But then you hear your friend make a geology pun! (“You know, it’s important not to take all igneous rocks for granite!”) Hearing that, you’ll probably automatically think it’s more likely that they do love geology, but how much more likely? In comes the handy Bayesian reasoning, allowing you to take into account the proportion of geology fans who would make a pun like that and the proportion of non-fans who would, in the context of how many people are or aren’t geology fans in the first place. Simply multiply the percent of geology fans (20%) by the percent of geology fans who would make such a pun, which maybe you’ll estimate that at about 80% (since they love their puns!), giving you 16%. Then multiply the percent of non-fans (80%) by the percent of non-fans who would make the pun, which maybe you’ll estimate that at about 10%, giving you 8%. That original 20% vs 80% population split now is whittled down by those who tell puns to become 16% (geology fans) vs 8% (non-fans). With that, you can intuitively recognize now that it’s twice as likely that your friend is a geology fan than that they aren’t. Putting the numbers into the final form of the equation, you can see that the probability is 0.16/(0.16+0.8), which, based on those assumptions, equals a 66.7% chance that your friend loves geology as much as you do.

Bayes’ theorem can be useful when intuitively applied, but I wanted to make a tool that would allow me to quickly and easily calculate exact probabilities. After all, plugging and chugging the numbers into an exact equation like P(H|E) = [P(H) × P(E|H)] / [P(H) × P(E|H) + P(¬H) × P(E|¬H)] can be cumbersome. When searching, I found that there were some other Bayesian calculators online, but I felt that they were limited in how much input could be made, or how intuitive they were to use, or how fast they worked. So I set out to create a tool where I could easily calculate probabilities and add multiple pieces of evidence and tweak values, with instant results at every change. Hence, my Bayesian Calculator for Updating Probability with Multiple Conditionally Independent Variables.

Link to this entry on my portfolio:

Bayesian Calculator

I originally designed the calculator to apply the basic arithmetic of Bayes’ theorem with the standard JavaScript operators, where additional pieces of evidence could be added with ease, where the operation would be able to simply repeat itself, taking the posterior probability from the results of the first evidence to become the new prior for the next, which is perfectly valid, as long as each piece of evidence is distinct. Since it operated on client-side JavaScript, all the math could happen instantly, without having to wait for the inputs to be processed by a web server. I packaged it in an HTML5 webpage with CSS3 styling to have a responsive design that works well across platforms, and I added explanatory text and instructions for anyone else who might want to use the calculator. As I continued to experiment with it and develop it and work on debugging and find any areas that may lead to errors and require custom alert messages, I also observed that there could be certain (albeit pretty rare) inputs that have too many decimal places for JavaScript to properly handle, so I then incorporated the Big.js JavaScript library to perform the math and work with larger numbers of decimal places. Most recently, I added something called the Bayes’ factor to the outputted results, which rather than telling you a final probability which is dependent on your own prior probability input, the Bayes’ factor also tells you how significant the evidence itself is.

When I was satisfied that the calculator was working well and could be a fun and useful tool for others, I finally set it up to be published and accessible online. Check out the Bayesian calculator here!

iPads and Pixels

Monday, April 9th, 2012

Today, photographer and blogger Tom McLaughlan asked me why the social media icons looked pixelated (particularly when zoomed in) on his new iPad on a website he was building. (The icon set has 32- and 128-pixel sizes, along with an SVG source file.)

Pixelated icons

After emailing back, I wanted to share my answer not only with him, but with the whole world:

The issue is not so much with the icon set as it is a broader issue with scaling pages that have what’s known as raster graphics: In virtually all images used on the web, not just photographs but icons and logos too, the images are made up of a finite set of pixels. When viewed at its intended size, the image appears smooth to the eye. However, once it is scaled up, the image and its pixels get larger, resulting in a pixelated appearance. This traditionally hasn’t been a major issue as websites are almost always viewed at 100% scale. On the new iPad, the screen resolution is very high, so to make the page appear the proper size, it has to zoom in behind the scenes, causing graphics to look a little less sharp than they should. It gets even worse when you zoom in further. (If you look very carefully, you’ll notice the same thing for photographs, but it’s harder to notice.)

Aside from raster graphics, there is a class of images called vector graphics where images are not produced with colored pixels but instead with outlines based on mathematical expressions. With a vector graphic, it doesn’t matter how far you zoom in: the edges will always appear crisp. Since Apple and Adobe introduced TrueType and Type 1 fonts back in the late 1980s, text has mainly been in this class of vector graphics. That is why on your iPad, text still looks good even at high zoom.

There are image file formats (not just font formats) for vector graphics as well. A few well-known vector formats can be attributed to Adobe (AI, EPS, PDF), and there are a number of other proprietary vector image formats out there from other companies too. One open vector graphics standard is SVG (Scalable Vector Graphics). Because of its open nature, SVG graphics can be opened and edited with a number of tools, including a free one called Inkscape. Also because of its nature, support for it has begun to be implemented, along with the rest of what some know as HTML5, in modern web browsers. An SVG graphic used in a website will theoretically remain sharp regardless of the scale or resolution. The main roadblock to this becoming mainstream is Internet Explorer: As long as people continue using Internet Explorer 8 (or older), they won’t be able to properly see websites that implement SVG graphics. However, in theory (and I suggest this only in theory), you could create SVG images for every icon from the SVG source file included with the icons and embed these in your site instead of the regular icons.

A more realistic solution would be to use the 128px size icons instead of the current 32px ones on your site and to specify with CSS (or HTML if you’re more comfortable with that) that the width (and/or height) should be 32px. This will take the images ever so slightly longer to load, but the result should be sharper display on the iPad. (In fact, you could even produce higher resolution images from the included SVG source file if you want the graphics to still appear sharp when zoomed way in.)


Found this article useful? I don’t use advertisements on this site, so if you’d like to help support content like this, consider making a voluntary donation using the PayPal donation button below. It would be greatly appreciated!

76 Free Social Media icons

Sunday, August 14th, 2011

So today I decided to make some free social media icons, and now you can use them for your own web projects! (And I’ve been adding to the set over the years.) No attribution required (but if you’ve found the icons useful, a “thank you!” in the comments would be very much appreciated!).

To download the icons: Click here to download the Social Media icon set. They’re nice and neutral (dark gray circles and white) and fit in with plenty of designs. I’ve saved them out in PNG at 128px by 128px. I also included the SVG vector source as well as a PDF vector in case you want to edit them or add color or save the icons in custom resolutions or whatever.

(I would like to note that when I originally posted the icon set, it contained a fraction of the icons as they do now. So if you want an icon that’s missing from the list, ask!)

Included are the following social media icons:

Facebook, Twitter, LinkedIn, Google+, MySpace, Foursquare, Meetup, Skout, Snapchat, Periscope, Discord, Instagram, Flickr, Google Photos, SmugMug, Photobucket, YouTube, Twitch, Vimeo, TikTok, Share (generic), Email (generic), Pinterest, Tumblr, Blogger, WordPress, Medium, Drupal, Blog (generic), FeedBurner, RSS, Creative Commons, Print (generic), Reddit, StumbleUpon, Digg, deviantART, Behance, Dribbble, Forrst, GitHub, DropBox, Google Drive, Yelp,, Etsy, eBay, PayPal, iTunes, Spotify, SoundCloud,, Evernote, Heart (generic), Google, Yahoo!, Bing, OpenID, Quora, Wikipedia, Goodreads, Apple App Store, Google Play, Microsoft Windows, Linux, Contact (generic), Google Hangouts, Google Meet, Skype, Zoom, WhatsApp, Signal, Telegram, Chat bubble (generic), Bookmark (generic), Home (generic).

(The copyrights and trademarks of any logos are owned by their respective copyright and trademark holders.)


Help Keep This Free (Icon Set Continues, Below)

If you like this icon set, please consider taking a moment to make a donation to allow me to continue providing and maintaining free projects like this. Thank you! PayPal donation button below:


Social Media icon set:

Icon preview

Camera Settings Explained

Thursday, January 29th, 2009

What do camera settings mean?

Sometimes when explaining how to take a certain kind of picture, photographers mention the camera’s settings and what manual modes are used for the picture. These settings look much like this: f/2.8, 1/125s, 400mm, ISO: 200. (Other settings may include white balance, saturation, or image sharpness, but I’m not going to get into that.) These are the lens’s and sensor’s specifications during the shot are are controlled automatically by the camera in Point and Shoot (P&S) models, or manually by the photographer on the lens or in manual mode (M), program mode (P), aperture priority (A or Av), shutter priority (S or Tv), the camera’s zoom controls and internal digital camera menus.


So what do all these things mean? Let’s take them one at a time…

Part 1: Explanation of the modes (M, P, A/Av, and S/Tv)

Part 2: Explanation of the settings these modes control (f-number, shutter speed, viewing angle (zoom), and ISO)


Part 1: Explanation of the modes (M, A/Av, S/Tv, P)


Typical camera dial showing various camera modes.

(The terms, “shutter speed,” “f-number,” and “aperture,” are explained below in Part 2)

M (manual mode) – In manual mode, you have control over both the shutter speed and f-number without the camera doing any automatic exposure calculations. There is often an indicator or a bar showing if your chosen values of the shutter speed and f-number will produce an over-exposed shot, and under-exposed shot, or a properly exposed shot, though it does not take into account special lighting conditions which would cause you take full control.

A or Av (aperture priority) – In aperture priority mode, you tell the camera to use a specific aperture (f-number), and the camera calculates the shutter speed needed to produce a properly exposed shot. You can also tell the camera to over-expose or under-expose the shot by a certain amount, and it will take this into account when calculating the shutter speed.

S or Tv (shutter priority) – In shutter priority mode, you specify a shutter speed for the camera to use and it calculates the corresponding f-number needed to properly expose the shot. As in aperture priority mode, you can instruct the camera with regards to how the image should be exposed.

P (program mode) – In program mode, you tell the camera to make a type of balance between an f-number or shutter speed, so it will try to use a specific value for one or both of these, but it will be able to vary from these values, if need be. As with aperture and shutter priority modes, you can tell the camera to under-expose or over-expose the shot.

ISO settings are usually accessed though the camera’s menus. Zoom is usually set with wide-angle/telephoto buttons, often found at the upper-right of the back side of the camera.


Part 2: Explanation of the settings: f-number, shutter speed, viewing angle (zoom), and ISO
(For information on what the modes do and how they work, refer to Part 1)

f-number: f/2.8 (Use A/Av, P or M mode) – This is called the f-number or f-stop and refers to the aperture (shutter opening) size. There are many, though specific, common aperture sizes, often denoted by f/[a number] (that number usually being a multiple of 1.4 or 2), which are used when photographing in various situations. The f-number can be written in different ways. For example, instead of writing f/2.8, the f-number might be written as F2.8, f-2.8, or even as 2.8. As you can see from the below aperture diagram, the larger the number, the smaller the aperture. A complete f-stop increase or decrease (like from f/8 to f/5.6 or from f/2.8 to f/4 respectively) doubles or halves the aperture size and amount of light entering the camera.

Diagram illustrating common f-stop aperture values.

Don’t be confused by the numbers, though. You might think to say that a larger number should mean a larger opening. However, it actually refers to the fraction of light being stopped by the aperture. Another (technically incorrect but more intuitive) way to think of it is to see that f is being divided by that number, so, mathematically, it makes sense that the larger the number, the smaller the fraction and total aperture size. Practically speaking, now, the lower the f-number, the more light comes in through the lens and the narrower the depth of field (DOF — distance from the camera in which objects are in focus).

shutter speed: 1/125s (Use S/Tv, P or M mode) – Shutter speed. The shutter speed is the length of time the aperture remains open for a given exposure. The shutter speed is given in a similar format to the aperture: 1 divided by a number. For example, 1/500 means that the shutter will be open for one five-hundredths of a second. As is the case with the aperture, shutter speeds can be denoted in various ways, including 1/125s, 1/125 or just by 125. The larger the number, the shorter the shutter speed. When the shutter speed is one second or longer, it is often indicated by 1″ or 1s. Fast shutter speeds (like 1/1000s) are used when trying to freeze action but decrease the amount of light entering the camera which must be compensated by widening the aperture, increasing the ISO (explained below), or by using photo-editing programs. Slow shutter speeds, like 2s, are often used for night shots or when trying to show motion. If it is bright where the picture will be taken, but one wants to show motion, one may shrink the aperture, use a low ISO, or use polarizer or neutral-density (ND) filters to block out the light.

zoom (viewing angle): 400mm (Wide-angle/Telephoto Zoom controls) – x mm (millimeters) refers to the focal length of the lens and is the camera’s zoom. The “standard” focal length is 35mm and has a viewing angle which is close to that of the non-peripheral part of the human eye sees. When the mm number increases or decreases, the camera is zoomed in more or less, respectively. For those who think in basic terms of “x times zoom,” let us call 35mm “1 x zoom” (although actual times zoom will vary by camera and lens), since 35mm is generally the standard, widest-angle on most attached-lenses cameras. When the mm is doubled, to 70mm, you are now at 2x zoom. Similarly, a camera at 2x zoom probably is at around 70mm. 400mm would be 11.5x zoom. (It should be noted that most point-and-shoot cameras actually have smaller focal lengths for the same viewing angles that an SLR camera has. So instead of 35mm it could be 12mm, but these cameras can still be said to have a 35mm “equivalent” at these focal lengths.) Greater “zooms” (higher mm numbers – telephoto shots) lead to narrower DOFs. Photos of flowers, insects and other macros are often shot at high zoom with a close focus to make the object large in the photograph and stand out against the background or foreground. Wider-angle mm numbers, like 18mm (or 0.5x zoom), lead to very wide DOFs and are often used in landscapes to take in the whole scene.

ISO: 200 (Internal camera menus) – The ISO setting refers to the “film speed” or sensor sensitivity to light. Common ISOs are 50, 64, 100200, 300, 400, 600, 800, 1000, 1600 and 3200. The ISO is directly proportional to the amount of light it senses. In basic terms, higher ISOs mean the sensor (or film) is more sensitive to light, while lower ISOs mean the sensor will be less sensitive to light. The main downside to higher ISOs is that high ISOs lead to noisy and grainy photos with less details. (Photo noise is two or more colors which are similar in brightness or color to one another showing up where only one solid color should exist.) Low ISOs are usually used in long-time-exposures (LTEs) because they are less-sensitive to light and better preserve detail than high ISOs.


Found this article useful? I don’t use advertisements on this site, so if you’d like to help support content like this, consider making a voluntary donation using the PayPal donation button below. It would be greatly appreciated!