15

All disc-shaped images I see are actually within a rectangular box, and have the sides (black portions in the below image) made transparent.

disc-shaped image

Is it possible to have a circular canvas itself? Or were images always designed to be rectangular in shape?

If yes, how?

Anirudh Ramanathan
  • 46,179
  • 22
  • 132
  • 191
  • I'm sure it's impossible to have any non-rectangular shape, but I'm curious to see some creative answers. – Marcelo Assis Jul 31 '12 at 15:40
  • Is there some standard defined someplace? Why is it impossible? :) – Anirudh Ramanathan Jul 31 '12 at 15:41
  • 1
    All images are rectangular because it's easier for a computer render objects represented by less cartesian coordinates. To generate a non rectangular image would require much more effort. I think it's impossible nowadays, maybe someone can create it in the future, if really needed. – Marcelo Assis Jul 31 '12 at 15:50
  • Well, a circle, would require just 3 parameters to be rendered. The position of its center in 3d-space, its radius and the orientation of its normal. So, it should be easier to render than the 4 vertices of a rectangular object. – Anirudh Ramanathan Jul 31 '12 at 15:52
  • 1
    For sure it's not easier to render a circle, as graphic computing is based on grids. Try to generate a square and a circle, using only pixel programming and you'll understand. For the square, you just need two simple loops, one for columns, and one for rows. For a circle you'll need to make a lot of geometry calculations. – Marcelo Assis Jul 31 '12 at 15:56
  • I see your point. But has the world unanimously agreed on this? :) – Anirudh Ramanathan Jul 31 '12 at 16:03
  • It's not my point, it's a known fact. Wait for other answers/comments and make some experiments and you'll understand. – Marcelo Assis Jul 31 '12 at 16:05
  • 2
    Incidentally, what you show is not a ring but a disk. – High Performance Mark Jul 31 '12 at 16:09
  • I see no reason why It shoud be impossible. You could imagine something like the [plain pbm](http://netpbm.sourceforge.net/doc/pbm.html) format, for example, where the length of each line implicitly defines the bounding box. – mobeets Dec 21 '16 at 04:05

5 Answers5

9

You're right that any non-rectangular graphic really does live inside a bounding rectangle that is aligned with the axes. It's done that way because rectangles are so simple to deal with. The whole display itself is just a rectangular arrangement of pixels.

Determining whether a point is inside a rectangle is quite easy: if the X coordinate lies between a given Xmin and Xmax point, and the Y coordinate lies between a Ymin and Ymax, that point is in the rectangle. And those two tests are independent -- the Xmin and Xmax values don't depend on the Y value, and vice-versa. That's easier than determining whether a point lies within a circle, triangle, or any other shape, where you would need operations like multiplication or a large lookup table.

And think about the basic operations that happen in a windowing system. First it has to render the complete picture on the screen. The system internally has a bunch of overlapping windows to represent, and in order to form the picture, it has to decide what color each individual pixel on the screen needs to be. That's easiest with rectangles. The system scans over each row and column, and determines the uppermost window that contains a given X,Y coordinate, using the simple bounds test. Then it's up to that window to choose the color for the pixel.

Conversely, when the mouse is clicked somewhere on the screen, the system has to determine which window or object was clicked on, and then send it a click message. It's really the same problem, easily handled by walking down the list of overlapping objects, and testing the mouse pointer coordinates against the rectangular limits of each one.

Those two basic operations can be done easily in software, or even in dedicated hardware. Some other method not based on rectangles would be much more work.

Carl Raymond
  • 4,429
  • 2
  • 25
  • 39
  • Sound reasoning. But as @High Performance Mark suggested, could vector graphics be the key to having such images? – Anirudh Ramanathan Jul 31 '12 at 16:30
  • 1
    In a vector system (like the old Asteroids arcade game), you would represent screen contents completely differently. Instead of a rectangular bitmap of the character "A", for example, there would be a list of lines to draw, represented by their coordinates. You can get away with much less memory in a vector system, because you don't need a whole screen buffer like you do with a raster system. That's why some really old computers used vector displays. But it would be very hard to have a vector display that looked anything like a modern computer display. RAM is cheap now. Rasters are easy. – Carl Raymond Jul 31 '12 at 16:39
3

I have never come across a raster graphics file format that stored anything other than a rectangular array of pixels -- or a compressed version thereof. To store some arbitrary shape the file would have to contain a specification, in some form, of the shape into which the pixels in the file would be filled. I can see how it could be done, but I've never seen it done.

One way would be very simple:

  • store a rectangular array of 0s and 1s, where the 1s represent the pixels for which the file contains a specification;
  • store the pixels themselves, one for each 1 in the aforementioned array.

Another way would be to store:

  • the dimensions (in pixels) of the rectangular bounding box of the image;
  • the position, in the data section of the file, of the first pixel in each line wrt the rectangular bounding box;
  • the pixels themselves.

It's difficult to see a compelling reason for dealing with the complications that this sort of approach throws up.

Vector graphics, of course, are a different kettle of fish.

High Performance Mark
  • 77,191
  • 7
  • 105
  • 161
  • The two ideas are nice! But I was leaning towards an existing system that allowed for irregular canvases. Does a vector graphic have a bounding-box around it at the time of rendering? – Anirudh Ramanathan Jul 31 '12 at 16:23
  • To render an image *means* to turn it into a collection of pixels for display on a screen (or on paper). Screens (and paper) are rectangular. A vector graphic file may specify a bounding box, but any representation in visual form will, inexorably, have such a box. – High Performance Mark Jul 31 '12 at 16:29
3

I know this isn't what you had in mind, but infinitely many, infinitesimally thin, perfectly positioned rectangular images could be combined to create any arbitrary, non-rectangular shape.

See http://meyerweb.com/eric/css/edge/raggedfloat/demo.html .

Of course, in the real world you'd be restricted to minimum 1 px height/width.

Robbie Rosati
  • 1,205
  • 1
  • 9
  • 23
1

Computer programming is based on matrix which has definite rows and column that too at 90 degree. So devices are manufactured in such a way to run the program therefore the screens are rectangular.

Thommen Shaji
  • 11
  • 1
1

The issue is that your pixels wouldn't be identical. One of the key feature of an image is that all of the rows are the same size. This is because the array wouldn't have consistent dimensions if the rows were of different lengths. The only way to symmetrically divide a circle up in that manner would be by using diameters and circles inside of the circle. So the pixels in a circular image would look like this: Not geometrically perfect, homemade

The reason it would look like this is pretty simple. Consider the most effective way to get coordinates on a rectangle. This would of course be via tuples of (distance x,distance y), since for some arbitrary limit to the maximum x, and a separate limit to the y, the range of these coordinates is a rectangle. However, a range of coordinates that would fill a circle would consist of pairs of (distance x,degree y). To use (x,y) coordinates is possible, but it would be essentially making a square around the circle and finding points on that square where some are not allowed. When we partition the circle coordinates into pixels, they look like the above. Each of the sections here would be a pixel. However, there's a pretty huge problem: the pixels closest to the edge are bigger than those towards the center. In order to get high definition outer pixels, you'd need an unreasonable image quality in the inner pixels. That would be a huge waste of space. The reason images of circles look like the one you posted is because rectangles partition evenly and thereby don't have this problem. Hence, people generally prefer to just take the square surrounding the circle. It would be ridiculous to make a new image format just to exclude a fairly small number of pixels in the corners, so they just use an existing one. Hope this was the answer you were looking for.

Losing Face
  • 31
  • 4