

People have used all sorts of numeral systems. To accommodate these extra fingers, we include the letters A to F. Just imagine some alien race with sixteen fingers. You’ve probably been wondering where those letters from, right? Well, hexadecimal is a base-16 system.

In lesson 1.2 you received little explanation for how hexadecimal actually works. Don’t worry, though, this conversion process is handled for you by Processing so that you’ll never need to deal directly with binary. If you were using your friends to help hold digits, counting to 32 requires five assistants. The table below provides binary-to-decimal conversions for powers of two. When counting in binary (base-2), every time you reach some power of two an additional digit’s required. Once you’ve counted to two, you run out of ‘stumps’ to count on. Now, imagine you had no fingers (or thumbs). From this exercise, we gather that for each power of ten you require an additional digit – i.e. To proceed beyond a hundred with this system, you’ll need to find another friend. Your friend's final count is 2 (left) yours is 6 (right). When you reach twenty, your friend extends her left index finger, and you start at one again.

You then close your fists beginning at one again (your left thumb). For the eleventh passerby, you ask a friend sitting beside to ‘store’ a one on her fingers. You reach ten people and have run out of fingers. I know this seems menial but bear with me. For the second person, you extend your left index finger and so forth. To keep track, you begin by forming a fist with each hand when the first person passes you, you raise your left thumb. For instance, suppose you are counting the number of people who pass you in the street. We count on our fingers, so a base-10 (decimal) system is fitting. Below is an abridged conversion table: Decimal But what about 2? Binary has only two digits to work with, whereas decimal has ten. To convert from a zero in decimal to a zero in binary is easy – it’s 0 in both systems. It figures, right? Because binary comprises ones and zeroes, and so do bits. Information stored digitally requires conversion to binary. Alternatively, we could rewrite this using decimal values:Īlas, this still isn’t pure ones and zeroes. But how exactly does a TIFF store pixel values, and what is the relation to size? To begin to answer this question, consider the hexadecimal value for red:Įach pair of digits has been coloured according to the RGB primary it controls. Recall that Processing uses no compression when saving TIFF files, so this is no surprise. The “bands.tif” file is by far the largest, weighing in at a comparatively hefty 31 kilobytes. there are 8 bits in a byte, for example, 10110110.you know that computers store digital information as ones and zeroes you refer to each 1 or 0 as a bit (a binary digit).bands.gifīefore proceeding with an explanation for these differences, here’s a 3-point primer on file size: Instead, focus on what the display window renders (a red and white striped pattern) and the file sizes of each version saved. TARGA (.tga) is also an option, but these lessons avoid covering it in favour of focussing on the more common web-browser-supported formats.īelow is a screenshot of a sketch. With TIFF, Processing employs no compression resulting in larger files. Alternatively, a (filename) argument ending in. Using the saveFrame() function one can capture the current frame in TIFF (. Like a GIF, JPG, or PNG image, the graphic presented in the display window is raster-based. Image FormatsĮach time you run a sketch, Processing generates a new or updated display window. To begin, we’ll peek under the hood of some image file formats this will provide useful insight into how the colours of individual pixels are controlled. To manage these arrays of pixel values, we’ll rely on a number of the techniques that you picked up in lesson 5, in particular, the combining of loops with lists. We’ll look at reading values off individual- as well as groups of pixels and then manipulating them to create Photoshop-esque filters. GIF, JPG, and PNG files are all raster graphics formats – that’s, digital images comprised of a pixel grid. You are already familiar with the image() function, which you’ve used in combination with loadImage() to draw image files to the display window. In this tutorial, we’ll look at a few cool image processing techniques.
