Introducing vectors, the hidden arrows that make your images sharp

Normally, computers don’t draw lines. They only draw dots.

“Green dot,” they say, “green dot, green dot, blue dot, blue dot, green dot, blue dot, blue dot.” When pictures are saved, computers save the colour of each dot separately.

Sometimes, they find a faster way to save it. “Three green dots,” they say, “two blue dots, a green dot, and two blue dots”. Or, “Three, two, one, and two green and blue dots”. There are many ways to compress the picture, to find a faster way to say it. But in the end, it’s all about the colours of dots.

Digital cameras works the same way. When they look at something, they divide what they see into many small dots. Then they look at the colour that each dot has, and note it down.

Of course, not all dots have only one colour inside them. Most of them have many. So the camera kind of smears the colours together to get an average colour: a colour as close as possible to all the colours in the dot.

That means the saved picture won’t be like the original thing. Normally, the dots are so small you wouldn’t notice. But if you take any digital photo and zoom in close enough, you’ll see that it’s actually made of dots.

If you try that on a smartphone, you may not manage. Most smartphones don’t let you zoom in so close.

What about when you look at the picture? Computer, smartphone and tablet screens are divided into pixels. But what are pixels? Just a slightly squarish kind of dot. And when other computers are putting pictures on the screen, that’s how they do it: dot by dot.

The screen dots are small enough that you usually don’t notice them. And screens shine out such bright light that your eyes won’t think of looking close. But if you look carefully, you might still see that the screen is made out of many dots.

Because the dots are so small, you won’t notice even if a few of them change. That allows computers to compress the pictures, by changing some pixels to make the easier to write down. For example, “three green, one blue, two green” is longer than simply saying “six green” — and usually, the people looking at the picture won’t notice the difference.

People can’t make out the difference in dots, but computers can. That’s how people can hide secret messages in pictures. They change some of the picture’s pixels in special patterns — patterns which make up a hidden message. They can then send the modified pictures to each other. Most people will think they’re just ordinary pictures, but the person who receives it can look at the changed pixels to get the hidden message!

That’s one form of ‘steganography’, the art of hiding messages in such a way that they won’t be discovered.

In 2010, Apple released the iPhone 4 with the world’s first ‘retina display’. The retina display has a high resolution, which is another way of saying there’s a high number of dots that the screen is divided into. In this case, the screen was divided into a 960 x 640 grid, which, in an iPhone screen, is more than the eye can make out. Looking from a normal distance, you can never see that it’s made of dots.

Nowadays, many devices have high-resolution displays. They’re not called ‘retina’ because that term is patented by Apple, but their pixels are still small enough that you can’t see them.

Of course, if the picture itself is a lower resolution, you’ll still be able to see those dots. So retina displays work best with high-resolution pictures.

Even printers print things dot by dot. The print head goes back and forth, tracing a line across the paper. As it goes, it prints whatever’s supposed to come on that line. But what line is it? A line of dots.

For every dot, the printer places the colour that goes on that spot.

Printers are quite different from painters. When painters paint, their brushes move in strokes. They don’t draw in dots, they draw in lines.

Imagine if you had to paint a picture, left to right, top to bottom, one dot at a time! It would take very long. And if you wanted to tell someone else how to paint that way, it would take a very long list of instructions.

But what do computers do, to display pictures? They display them, left to right, top to bottom, one dot at a time. And how do they save a picture? By writing down how to make it again, in a long list of instructions.

If you were telling someone how to paint what you had in mind, it would be much faster to say things like “draw this shape” and “colour this brown” instead of “dot, dot, dot, dot, dot”. If you speak to people that way, why not to computers too?

That’s why people invented Vector Graphics.

Vector images aren’t made of dots. They’re made out of lines and curves. So when you tell a vector image to have a line from here to there, they do just that:

Of course, they need a way to say what “here” and “there” is. So they do have a grid, same as normal pictures. But the grid isn’t filled with pixels. It’s filled with points.

Every point has a name. The top-left is called (0,0), and all the other points’ names tell how far they are from the centre point. But if you’re using a drawing program like Inkscape, you won’t have to worry about them at all. Just move the mouse and click.

If vector graphics could only do straight lines, it wouldn’t be very useful. But it can do much more. You can join many lines to make it zigzag.

More importantly, you can pull their sides to make them curve.

Wait, what’s that other green dot that’s come out of nowhere? That’s a ‘control point’ that tells the line how much, and in what direction, to curve.

Inside the computer, control points are actually the ends of arrows, telling the computer what to do.

Those arrows are called ‘vectors’. That’s the name for any arrows that have a specific length and point in a specific direction. And that’s where ‘vector graphics’ gets its name from.

But vector graphics isn’t only about vectors drawing lines. You can also tell the lines what colours to have, and make other shapes like stars and squares. You can fill areas with certain colours, and even make them fade from one colour to another. In fact, you can do anything you would with a normal paint program.

Vector drawings are easy to edit. Made a mistake? You don’t have to draw the whole line again. Just adjust the control points!

For things like photos, vectors don’t work so well. That’s because there are so many dots of different colours already. So converting them to vectors will just replace the thousands of dots with thousands of arrows. However, they’re perfect for fonts, icons, logos, and anything else you can think of drawing on the computer. And they’re also easy to animate. Instead of re-drawing the whole picture for every frame, you can just tell the arrows where to move.

But what makes vector graphics stand out is the way you can look at them. In vector pictures, there are no dots that become big when you zoom in. All that happens is that the lines get thicker. You can zoom in to a vector image as close as you want, and it’ll still stay as sharp as ever.

Of course, if you look too closely, you’ll still see the dots that the screen is made of. That’s because they haven’t yet made vector screens.

Have something to say? At Snipette, we encourage questions, comments, corrections and clarifications — even if they are something that can be easily Googled! Or you can simply click on the ‘👏 clap’ button, to tell us how much you liked reading this.