Image for post
Image for post
Photo by Brett Jordan on Unsplash

The excellent math.js library provides a flexible and extensive range of functionality to complement JavaScript’s own Math object. This includes a wider selection of trigonometric functions than Math and in this post I will use them to provide a crash course in trigonometry.

Core Concepts

If we have the length of two sides of a right-angled triangle*, or the length of one side and one angle, we can calculate the other lengths and angles. …


Creating string representations of images that you can embed in HTML or CSS

Image for post
Image for post
Image: Pixabay

JIMP is the JavaScript Image Manipulation Program which is actually an NPM package, and one of its many features is the ability to create a Base 64 string from an image file. This has various uses (some nefarious…) and in this post I will demonstrate embedding a Base 64 encoded graphic as an img src in an HTML document. This is useful for small images such as logos or button graphics to reduce the number of HTTP requests, and although I am using HTML the Base 64 string can also be used in CSS.

As you probably know, base 10 (decimal) uses digits 0–9, and base 16 (hexadecimal) uses digits 0–9 plus the letters A-F. Base 64 of course needs 64 different characters and uses the 26 upper case letters, 26 lower case letters, numbers 0–9 and the plus and forward slash characters, as well as the equals sign for padding. (There are also a few other less common standards.) Therefore any code converting a file, stream or buffer to Base 64 will provide a string containing only ASCII characters which can be safely transmitted using any protocol. …


Spotting accidental duplication or deliberate theft of images

Image for post
Image for post
Image: Pixabay

The JIMP npm package provides us with methods to compare image files for the purposes of identifying inadvertent duplication or deliberate plagiarism. In this article I will demonstrate how to use them, and along the way we will find out just how similar two images must be to be considered the same.

JIMP and its Image Comparison Methods

JIMP is the JavaScript Image Manipulation Program, and you can read the full documentation on its npm page.

If you just want to install it for this project then run:

npm install --save jimp

I will be using three methods for comparing images:

  • hash: this returns a 64 bit perceptual hash of an image. Unlike the cryptographic hashes you might be familiar with, perceptual hashes vary in a way roughly proportional to the differences in input, so the hashes of similar images will also be similar. …


Image for post
Image for post
Image: Pixabay

A while ago I wrote a post on implementing the Caesar Shift Cipher in Python. I will now expand on the theme by implementing the Vigenère Cipher.

The Vigenère Cipher

The Vigenère Cipher was invented in 1553 by the Italian Giovan Battista Bellaso but is now erroniously named after the Frenchman Blaise de Vigenère. It was not broken until 1863 although these days it is highly insecure and is now only useful as an interesting programming exercise. If you want to read up on it in full check out the Wikipedia article

The problem with the Caesar Shift Cipher is that each letter is always enciphered the same way, so for example if E, the most common letter, is always enciphered as S then simple frequency analysis will reveal the shift if you have a reasonably long piece of encrypted text. …


A simple but powerful image manipulation technique

Image for post
Image for post
Photo: Chris Webb

The phrase “convolution matrix” sounds a bit scary if you are not familiar with the topic but it is actually a very simple concept to understand and extremely powerful. The process is best explained with a diagram.

Image for post
Image for post

On the left is a grid of pixels representing a section of a digital image, on the right is the new value for the centre pixel, and the two centre grids show how the new value is calculated.

To obtain the new value for the centre pixel, which is currently 128, we multiply each of the values in the grid by its corresponding value in the kernel matrix. The results are shown in the Products matrix. These nine values are then added to give a final value, and the process repeated for every pixel in the image. …


Image for post
Image for post
Photo: Chris Webb

The JavaScript Image Manipulation Program, known as JIMP to its friends, is an NPM package providing a range of methods for editing image files in JPEG, PNG and a few other formats. Its most common use case is probably processing images uploaded to a Node-based website, and in this article I will demonstrate how to use it for resizing an image, creating a thumbnail and adding a watermark.

In future articles I will explore a few more of JIMP’s capabilities.

Background

I have been working on a Node site for my photographs for an embarrassingly long time, adding small bits of functionality every once in a while. It is approaching a stage where I can launch it with at least basic functionality, and this article describes a condensed version of the code I wrote to process images after they have been uploaded. …


Image for post
Image for post
Photo: Chris Webb

Digital photos have embedded within their files various pieces of information about the image: the camera make and model, shutter speed and aperture, the date and time etc. This is called Exif data (an acronym for “Exchangeable image file format”) and can be read and displayed by suitable software. In this post I will show how to read Exif data using Python and the Pillow library.

I recently wrote an article on Pillow which you might like to read first.

Unfortunately Exif is not easy to deal with. It would be nice if the data consisted of a string of XML or JSON so that it could be handled using ubiquitous techniques and libraries, but the format itself is rather quirky, made worse by inconsistent implementations by different manufacturers and sometimes different devices from the same manufacturer. …


Image for post
Image for post
Photo: Chris Webb

Pillow describes itself as “the friendly PIL fork”, PIL being the now-defunct Python Imaging Library. Fortunately Pillow is still very much alive and provides comprehensive image editing functionality.

You could in principle use it as the basis of a sort of lightweight Photoshop type application using perhaps Tkinter or PyQT, but its typical use case is for back-end processing, for example creating thumbnails and adding logos or watermarks to images uploaded to a website.

Despite its powerful and comprehensive abilities it is extremely easy to use and I will introduce what to most users are likely to be its most useful features. …


Image for post
Image for post
Image: Pixabay

The electromagnetic spectrum covers a vast range of wavelengths and frequencies, only a tiny fraction of which is visible to the human eye. Wavelengths and frequencies are inversely proportional and the relationship between the two can easily be plotted. In this post I will write code in Python to do just that, using the actual colours each wavelength/frequency combination represents.

Wavelengths of electromagnetic radiation range from 1 picometre (one trillionth of a metre) to 100,000 km (about a quarter of the way to the moon). …


Image for post
Image for post

Simple codes such as substitution cyphers can be cracked or broken using a technique called frequency analysis which I will implement here in Python.

In a previous article I implemented a very simple and very insecure substitution cypher. …

About

Chris Webb

I am a software engineer based in London and I write articles on JavaScript, Python, C and other programming topics.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store