image

Have you ever noticed the slightly green colouration in the movie The Matrix? The movies are full of different colour pallets, but when inside The Matrix everything gets a slight green colouration.

This is colour pallet is created as a post processing step, using a colour grading algorithm. The original colours of the film are passed through a filter to tweak the colours slightly for the scenes inside the simulation.

In this article we will look at how we can convert a pixel so that it has the green colour grading found in the matrix, and how to use the system on images in PHP.

If you have ever used a paint program then you might have used a flood fill algorithm. This is a mechanism by which an area of an image can be filled with a different colour and is normally depicted by a paint can pouring paint.

The flood fill algorithms used to fill in spaces in images are well known, and have been used for decades in all kinds of systems, not just graphics processing programs.

When researching about drawing parabolic curves in PHP a few sources looked at filling in spaces inside the curve using a flood fill algorithm. I looked a little at the PHP function imagefill(), but I was more interested in the core principles of the flood fill algorithms, and how they worked.

A common web design pattern is to incorporate an image into the design of the page. This creates a tighter integration with the image and the rest of the page.

The main issue in designing a page around the image is that the colours of the page must match the image. Otherwise this creates a dissonance between the image and the styles of the site.

In this article I will look at extracting a colour palette from an image so that it can be used in the design of a web page.

I was watching a video from NDC by Dylan Beattie the other day on The Story of Typography and a particular section stood out to me.

The talk ranges from the initial start of writing symbols to the formation of typography as an art form and the creation of eInk displays. Well worth a watch if you have some time to spare.

The part that was interesting to me was then discussing early word processors and the ASCII character standard. Early word processors couldn't store the amount of data required to fully render a font, so characters were rendered using a bitmap system.

A parabolic curve is a type of curve where every point is an equal distance from a focal point. There a number of different way to generate this sort of curve using math, but one of the simplest is to use straight lines to create the illusion of the curve.

The curve is created by diving two axis into equal points and then drawing a line from the first point on one axis to the last point on the opposite axis. Each line of the curve is drawn in the same way, repeating the process of drawing a line between opposite points for every point along the axis.

A sparkline is a very small line graph that is intended to convey some simple information, usually in terms of a numeric value over time. They tend to lack axes or other labels and are added to information readouts in order to expand on numbers in order to give them more context.

Sparklines tend to be around 20-30 pixels height and up to 150-200 pixels wide. The are generally best when you want to show between 5 and 15 items as adding more items to such a small graph can make things a little messy.

Steganography is the practice of placing a secret message inside another message and only by looking at the original message in a different way can the hidden message be seen. This might be as mundane as writing a page of text and hiding a message in the text using the first letter of every sentence. Only by collecting the first letter of each sentence together can the hidden message be seen and read.

Modern steganography is defined as hiding a message (or file) inside a file. For example, you might look at an image and see an image, but if a message has been hidden you would also be able to extract it if you know where to look.

To desaturate an image means to remove all non-greyscale colours from it, essentially creating a black and white version. To do this you can use the function imagecopymergegray(), which is part of the GD image library. This function is a little difficult to figure out, but what is does is sample one image into another and optionally changing the amount of colours that are kept during the sampling process. The function can be made to sample just a section of the image, or the whole thing. The parameters of the function are as follows.

Use the following snippet to convert any jpeg image into the equivalent image in ASCII format. It works by loading an image using the PHP GD2 library function ImageCreateFromJpeg() and then figures out the height and width of it. It then uses these values to loop through every pixel in the image and figures out the colour of that pixel. It uses this value to create a "span" element that uses the text colour of a # to change the colour of the text.

An additional time (and space) saver for this function is that it detects any pixels that are just off white and simply displays a   character instead.

One thing that comes in useful when linking to other websites is to use a little thumbnail of the site as part of the link. Although it is possible to do this it usually involves having command line access to the server so that you can install various different programs and extensions.

The simplest mechanism accomplish this is to use third party sites to create the thumbnail for you. Here are a few examples of free thumbnail services.

www.thumbshots.org

Thumbshots provides access to small images (thumbnail size) of many different websites. However, they are very small, with no way to change this, and can often be weeks out of date if the site has had a redesign. You can access Thumbshots from any webpage by using an image with a source that reads from the Thumbshots website.