gd

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.

If you've ever looked at the settings in a digital camera, or have experience with image processing programs like GIMP, then you may have seen a colour histogram. This is a simple graph that shows the amount of different shades of colour are present in the image.

They are created by looking at the number of colours in a given image and them mapping their red, green and blue values against a the frequency of their occurrence in the image.

Colour histograms are useful for looking at the overall colour distribution within an image and can also be used to simplify the colours of an image by restricting how much of a certain colour is allowed based on its frequency.

Embedding image within pages of content helps both within the design of the page and when shared on social media. If you set up meta tags to point at a particular image then that image will appear when the page is shared on social media. This makes your page stand out more.

A while ago I added a header image to the articles in the form of a field that references a media item, which is quite typical when adding images to pages. To add an header image to an article I just had to upload an image and Drupal would handle the size, placement and meta data for that image.

With the field in place, however, I spent a while adding a default header image to new articles so I haven't been making good use of it. My GIMP skills aren't that amazing and so the prospect writing an article and spending time fiddling with text elements on an image every week wasn't that appealing.

Colourising images is fairly simple to accomplish, especially using PHP's GD library. All we need to do is load an image, create a blank image of the same size in a particular colour and then merge the two images together.

In fact, we can do this entirely with the imagecopymerge() function, but creating a function to wrap all of this makes sense as well.

The following function takes an image resource (as created by imagecreatefrompng()), the red, green, and blue values of the colour, and the percentage to overlay the colour on top of the image. The percentage can be set to 0 for no effect and 100 to fully replace the image with the given colour.