Checking source codes of image, audio and video files

[onauc]

Hello everybody,

I am very curious to see the source codes that describe an image. I want to actually check the source-codes of gif, jpeg etc. files.

Also, I am very curious to see the source codes that describe an sound. I want to actually check the source-codes of mp3 etc. files.

I use winamp and windows media to listen to listen to audio files or view video files.
I have lots of winamp audio and video files on my computer. So, how do I check the source codes of each of these audio and video files.
Look at it this way, if we ever want to check the source codes of a webpage loaded on-to our browsers, all we have to do is right-mouse-click and click the "view source" option to see the html source codes that describe a webpage's text and lay-out (design).
So, similarly, there must be some way to check a still image file and an audio and a video file's source-code.
When I check the source codes of a webpage, if that webpage has an image file then the source codes of that image file is not shown.
What is the solution ?

Thanx

[onauc]

eg.

pixel 1 (starting from top left corner of screen) to pixel 100 = navy blue

pixel 100 to pixel 150 = yellow


Get the picture ?
I just described which pixels are navy blue and which pixels are yellow in an image.
I guess all pixels are described like that but I want to see how they are described. I just used plain english so you understand what I am on about.
From checking the images descriptions (source codes) I will try to understand which code represents navy blue and which code represents yellow and then I will change the source code something like this :


pixel 1 (starting from top left corner of screen) to pixel 100 = yellow blue

pixel 100 to pixel 150 = navy blue

and then save the changes and then check how the image now looks like.
This time the yellow parts should look navy blue and the navy blue parts (pixels) look yellow.
Really want to learn what code (that a browser understands) describes a pixel and a colour.
I will then write codes and then check the image and see if I am able to create a beutiful image completely with "coding" and not using any image editors like paint pro.
I guess the codings would be in C.
If so, then must understand how C is describing each pixel and colour.
Frankly, I have thought of a compression algorithm that can describe an image and I just want to make sure that, this algorithm is not already in use.
Look at it this way.
Imagine that an image only has (for explanation's sake) has 3 by 4 pixels and the image's top half is navy blue and the bottom yellow.
Now, I expect the non-compressed image to be described like this (pixel by pixel):

PIXEL 1 = navy blue, PIXEL 2 = navy blue, PIXEL 3 = navy blue
PIXEL 4 = navy blue, PIXEL 5 = navy blue, PIXEL 6 = navy blue
PIXEL 7 = yellow, PIXEL 8 = yellow, PIXEL 9 = yellow,
PIXEL 10 = yellow, PIXEL 11 = yellow, PIXEL = yellow

Now, I would describe like this so less codes describe an image 3 by 4 :

PIXEL 1 - 6 = navy blue
PIXEL 7 - 12 = yellow

Now, isn't this less codes describing the same image ?
Yep. Instead of describing each pixel one by one, I just use the first pixel and the last pixel of a colour and all the in-between pixels of that same colour with the "-". This way, less codes describe the same image.
Now, you might say that, this "algorithm" of mine is nothing new because already compression algorithms exist that use the "-" to describe all the pixels that are "in-between" when describing a colour.
But, really, I have other techniques that really shorten the description and it's not just dependant on the "-".
Now, before I put my algorithm to test I must first open an image file and see what codings are used to describe an image's every pixel and it's colour.
I must know how a pixel is described and how a colour is described.
In my non-compressed example, I described a pixel like this :

PIXEL 1, PIXEL 2, PIXEL 3 and so on.
On my compressed example, I explained the pixels like this :

PIXEL 1 - 3.

But, if I open an image file and write some-thing like the above in plain english, then the browser will not understand it unless I write it in it's language that it understands.
Imagine that I found the image described like this :

p1 - p6=nb
p6 - p12 = y

I would have the common sense to understand the pixels are described with a "p" followed by the pixel number and the colours are described using the first part of the letter.
Now, to change the image, I would then write something like this :

p1 - p6=y
p6 - p12 =nb

this would change the colour of the image.
This time, the top part would be yellow and the bottom navy blue.

So, at this moment, I just want to see how each pixel is described and how each colour is described. Once, I learn that, I'll try to get a programmer to teach the gecko browser engine to describe an image according to my algorithm.

[onauc]

Ok, according to other people's suggestions :

I opened a jpeg file (it's a picture of my friend) in notepad and viewed the code and then copied it and pasted.

So, if the code looked like this first :

blahblahblah
blahblahblah

now it looks like this :

blahblahblah
blahblahblah
blahblahblah
blahblahblah

This means, the image of the new version should show 2 copies of my friend but it doesn't. Instead I get amessage the "image could not be viewed".

Why don't you try it out ?
I don't understand why this is happening.
If I copy a website's source code that looks like this :

<html>
get lost
</html>

and paste it twice which looks like this :

<html>
get lost
</html>
<html>
get lost
</html>

or even this :

<html>
get lost
get lost
</html>

then it will be shown by the browser like this :

get lost
get lost

so, since I copied the image's source code twice and saved it then when I view the image it should show 2 copies of my friend just like it shows to copies of "get lost".

Mmm. What's wrong ?
Maybe, this is what is wrong.....
Maybe the gibberish code described the original image like this :

pixel 1 - 3 = blue
pixel 4 - 6 = blue
pixel 7 - 9 = yellow
pixel 9 - 12 = yellow

(each pixel described once only).

pixel 1 - 3 = blue
pixel 4 - 6 = blue
pixel 7 - 9 = yellow
pixel 9 - 12 = yellow

pixel 1 - 3 = blue
pixel 4 - 6 = blue
pixel 7 - 9 = yellow
pixel 9 - 12 = yellow

(thus describing a pixel twice).
Maybe, the computer got confused because the image file was describing each pixel twice ?
Do you think that is the case ?

Maybe also, the copy version has the opening and ending tag twice and the computer got confused ?
I mean, if I want to repeat text in an html file, I would do it like this :

<html>
get lost
get lost
</html>

and not like this :

<html>
get lost
</html>
<html>
get lost
</html>

because doing the above will mean writing the opening and ending tags twice which copuld confuse the browser.
Maybe, the image file's code has an opening and an ending tag like that ?
Maybe, when I duplicated the image's codes and saved it, I also duplicated the opening and ending tags of an image file (if such tags do exist) and that is why the computer got confused ?
What do you think is the real problem ?

Maybe, I should create an image file in one colour and then open it with notepad and then see it's colour description and then create another file with another colour and then open that to get that colour's description ?
This way, I can understand what description described a pixel's colour to a browser ?

If I drop a line to the guys who created the jpeg format to give me the codes that describe each pixel and each colour then do you reckon they would agree ?
Anyway, which companies created the bmp, gif and jpeg formats ?

[speed]

You can't open images in notepad and play with the colours etc, apart from anything else the file is a binary format.

Sticking to JPEG for a second, JPEG is a lossy compression format which basically means that there is not a 1:1 correlation between the pixels stored in the file and the original image, there are also headers etc in the image file that describe it.

If you really want to find out about JPEG go to the official site at http://www.jpeg.org
There's a C library on there somewhere that will allow you to read and write JPEG files.

PNG format is at http://www.libpng.org/pub/png/
Just Google for the bmp and other formats you want.

With the exception of the .bmp format working with the raw image data is not a trivial exercise.

PIXEL 1 - 6 = navy blue
PIXEL 7 - 12 = yellow

Now, isn't this less codes describing the same image ?
Yep. Instead of describing each pixel one by one, I just use the first pixel and the last pixel of a colour and all the in-between pixels of that same colour with the "-". This way, less codes describe the same image.

You are describing run-length encoding (RLE) of the image data there, I think you'll find JPEG produces much smaller files although RLE tends to be lossless compression. This is also the basis for .bmp files if I remember correctly.

There was a book on image file formats you might want to look up:

Encycolpedia of Graphics File Formats
O'Reilly & Associates, Inc
ISBN: 1-56592-058-9

While creating your own format for fun this is Ok, if you build a site using a custom image format then you will loose visitors as most/all will not have the required functionality in their everyday browsers to view custom images.

[paulhiles]

The only graphics format I know that you can open in Notepad and modify is SVG (scalable vector graphics).
The format is a W3C recommendation and is XML based (rather than a binary format), but it's been slow to be picked up by the major browser and software manufacturers.

Sample code behind an SVG graphic would look something like this:

 <?xml version="1.0"?>
 <svg xmlns="http://www.w3.org/2000/svg">
   <g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
     <circle cx="6cm" cy="2cm" r="100" style="fill:red;" 
                     transform="translate(0,50)" />
     <circle cx="6cm" cy="2cm" r="100" style="fill:blue;"  
                     transform="translate(70,150)" />
     <circle cx="6cm" cy="2cm" r="100" style="fill:green;" 
                     transform="translate(-70,150)"/> 
   </g>
 </svg>

The resulting graphic is displayed below:



[image hosted at the Mozilla SVG Project site]

Paul

[speed]

There are some other text based file formats around e.g. VRML, but text based formats are really for vector graphics as is SVG.

From onauc's description about packing pixel colours I think bitmap formats are what onauc was after experimenting with.

Personally I don't think I've ever seen a site using SVG, shame really.

[paulhiles]

Originally Posted by speed

Personally I don't think I've ever seen a site using SVG, shame really.

There have been sites constructed solely from SVG, but currently there's no "built-in" / native SVG support in the majority of browsers.

Adobe produce the most popular SVG viewer which is simple to install, and which then allows you to view SVG content (plenty of examples if you look out for them!) :o)

Paul

[onauc]

SORRY. I HAVE USED CAPS SO YOU CAN EASILY SPOT MY QUESTIONS BELOW.

Originally Posted by speed

You can't open images in notepad and play with the colours etc, apart from anything else the file is a binary format.

SO, HOW COME WE CAN SEE SOURCE CODES OF WEBPAGES IN NOTEPAD AFTER RIGHT MOUSE CLICKING (VIEW SOURCE) AND HOW COME WE CAN SAVE THAT FILE AFTER MODIFYING IT AND PLAY WITHIT ?

Sticking to JPEG for a second, JPEG is a lossy compression format which basically means that there is not a 1:1 correlation between the pixels stored in the file and the original image, there are also headers etc in the image file that describe it.

I UNDERSTAND WHAT YOU MEAN BY LOSSY COMPRESSION.
I AM GOING TO CHECK IF JPEG WEBSITE SPELLS OUT WHICH GIBBERISH CODE (THAT I FOUND WHEN OPENING AN IMAGE FILE IN NOTEPAD) REPRESENTS WHICH COLOUR.
IN HTML WE GOT COLOUR CODES LIKE

FFFFFF = white
000000 = black

AND I AM EXPECTING SOMETHING LIKE THAT FOR BITMAP, JPEG, GIF FILES AND ANY OTHER IMAGE FILE FORMATS YOU GUYS RECOMMEND.
THE SAME I AM LOOKING FOR IN AUDIO FILES SO I CAN CHECK-OUT WHICH CODE REPRESENTS WHICH SOUND.
AFTERWARDS, I'LL CHANGE THE CODES AND THEN HEAR THE SOUND FILE AND SEE IF THE MUSIC HAS CHANGED OR NOT.

If you really want to find out about JPEG go to the official site at http://www.jpeg.org
There's a C library on there somewhere that will allow you to read and write JPEG files.

PNG format is at http://www.libpng.org/pub/png/
Just Google for the bmp and other formats you want.

NEVER HEARD OF PNG FORMAT BEFORE.
ARE PNG FILES UPLOADABLE TO WEBSITES ?

With the exception of the .bmp format working with the raw image data is not a trivial exercise.

You are describing run-length encoding (RLE) of the image data there, I think you'll find JPEG produces much smaller files although RLE tends to be lossless compression. This is also the basis for .bmp files if I remember correctly.

WHAT DO YOU MEAN BY RLE ? DO YOU MEAN "THE LENGHTY DESCRIPTION", "NON-SHORT-HAND DESCRIPTION" ?
YEAH, I LEARNED FROM HOWTHINGSWORK.COM READING "HOW COMPRESSION FILE WORKS" THAT .BMP FILES ARE NOT COMPRESSED IMAGE FILES WHICH I GUESS MEANS THE CODES DESCRIBE THE IMAGE PIXEL BY PIXEL (NON-SHORT-HAND) LIKE THIS :

PIXEL 1 = YELLOW, PIXEL 2 = RED
PIXEL 3 = YELLOW, PIXEL 4 = RED

OR LIKE THIS :

PIXEL 1= X1Y1=PINK, PIXEL 2 = X2Y1=GREEN
PIXEL 3 = X1Y1=RED, PIXEL 4 = X2Y1=BLACK
(XY ARE CO-ORDINATES LIKE YOU HAVE IN GRAPHS)

FROM THE 2 EXAMPLES ABOVE, I HAVE SHOWN 2 FORMATS OF A NON-COMPRESSED IMAGE.
I JUST WANT TO SEE IF THE BITMAP CODES EXPLAIN THE COLOURS AND PIXELS (CO-ORDINATES) IN THE SAME MANNER OF ANY OF THESE 2 EXAMPLES. IF SO, THEN EXACTLY HOW.



There was a book on image file formats you might want to look up:

Encycolpedia of Graphics File Formats
O'Reilly & Associates, Inc
ISBN: 1-56592-058-9

WOULD THAT BOOK EXPLAIN THE COLOUR AND PIXEL CODES.

ISN'T THERE A WEBSITE INSTEAD ?
STILL, THANX FOR THE BOOK NAME.

While creating your own format for fun this is Ok, if you build a site using a custom image format then you will loose visitors as most/all will not have the required functionality in their everyday browsers to view custom images.

DON'T WORRY. AT THIS MOMENT, I AM NOT INTERESTED IN ACQUIRING VISITORS TO MY WEBSITE WHO ARE "CAPABLE" TO VIEW MY IMAGES. FIRST THINGS FIRST.
FIRST LETS LEARN WHAT CODE REPRESENTS WHAT COLOUR AND WHAT CODE REPRESENTS WHICH PIXEL AND WHAT WHAT CODE REPRESENTS WHAT SOUND JUST LIKE WE CAN EASILY LEARN WHAT CODE (EG FFFFFF = white) REPRESENTS WHAT COLOUR IN HTML.

[onauc]

Originally Posted by paulhiles

The only graphics format I know that you can open in Notepad and modify is SVG (scalable vector graphics).
The format is a W3C recommendation and is XML based (rather than a binary format), but it's been slow to be picked up by the major browser and software manufacturers.

Sample code behind an SVG graphic would look something like this:

 <?xml version="1.0"?>
 <svg xmlns="http://www.w3.org/2000/svg">
   <g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
     <circle cx="6cm" cy="2cm" r="100" style="fill:red;" 
                     transform="translate(0,50)" />
     <circle cx="6cm" cy="2cm" r="100" style="fill:blue;"  
                     transform="translate(70,150)" />
     <circle cx="6cm" cy="2cm" r="100" style="fill:green;" 
                     transform="translate(-70,150)"/> 
   </g>
 </svg>

The resulting graphic is displayed below:



[image hosted at the Mozilla SVG Project site]

Paul

HEY MAN PAUL, THAT'S RIGHT. YOU'VE UNDERSTOOD WHAT I WANT. FROM JUST LOOKING AT THAT XML CODES, WHICH IS IN ENGLISH LETTERS AND HUMANLY READABLE FORMAT (I REALLY DON'T KNOW XML) I CAN UNDERSTAND USING COMMON SENSE HOW AN IMAGE FILE IS BEING EXPLAINED TO A BROWSER (WHICH PART OF THE CODE EXPLAINS THE CIRCLE COLOUR, CIRCLE SIZE, AND CIRCLE POSITIONS ON THE SCREEN).
SIMILARLY, I WAS LOOKING FOR IN ENGLISH AND HUMANLY READABLE FORMAT TO SEE WHICH CODES EXPLAIN THE COLOURS AND EACH PIXELS IN .BMP, GIF AND JPEG FILES AND HOW EACH FREQUENCY OF SOUND IS EXPLAINED TO THE SOUND FILE PLAYER (EG. WINAMP) IN AUDIO FILES LIKE MP3.
BUT, WHAT I AM GATHERING RIGHT NOW FROM THIS THREAD IS THAT THE .BMP, GIF AND JPEG IMAGE DESCRIPTIONS ARE NOT IN HUMANLY READABLE FORMATS BUT BINARY (ONE AND ZEROS).
MAYBE, MP3 FILES'S CODES ARE ALSO IN BINARY ?
WELL, IF THAT IS THE CASE, THEN WHAT CAN I DO ?
AM STUCK !
I MUST ATLEAST GET THE CODES HOW A COLOUR AND PIXEL IS DESCRIBED TO THE BROWSER FOR A BITMAP FILE.
MUST FORGET ABOUT COMPRESSION IMAGE FILES FOR THE TIME BEING AND CONCENTRATE ON NON-COMPRESSED IMAGE FILES (.BMP).
AND THEN I'LL MOVE ONTO THE CODINGS OF COMPRESSED FILES (GIF, JPEG). AND, FINALLY, TO THE SOUND FILES.

[onauc]

This is what one guy replied when I posted the same message (check above for my 3rd post in this thread that starts with
"Ok.
I tried as you suggested. ")
on another forum :

" No, it isn't getting confused. You are using an ASCII proggie to open a binary file. So, you are going to see muddled crap. Indeed, if you look on the internet, you will be able to, especially after visiting some advanced C/C++ groups(dealing more with the win32/*nix programming and specifically OpenGL/DX), you should uncover the libraries(which are freely available), that are used to created, edit and view images in the way you choose to.

However, you should also consider looking over colorbit models(to see that one pixel is actually 15+ bits), and not a simple hex or base-ten number.

Here are a few sites to get you started:

http://datacompression.info/SourceCode.shtml
http://www.dogma.net/markn/articles/IntelJpgLibrary/
http://www.vbaccelerator.com/home/V...les/article.asp
http://www.webstyleguide.com/graphics/displays.html
http://www.gamedev.net/reference/ar.../article541.asp
http://scv.bu.edu/Tutorials/ImageFiles/image101.html
http://www.zedec.com/articles/image_basic.htm

Hope this helps, or at least get's you pointed a better direction.

Take care, and good luck. I 'loved'*lays sarcasm on thick* learning the better points of DX color handling for dynamic images

Later "

And this is what another guy said :

" The reason you can't just paste an image is because only part of the file is the image. There is also a header that describes
* number of colors
* number of rows
* number of columns
* the color pallet (sometimes)
and many other items. The best type of program to display this info is a binary dump program. Many exist free for download.

Check out these sites:
http://www.wotsit.org/
http://www.daubnet.com/formats/
http://www.dcs.ed.ac.uk/home/mxr/gfx/2d-hi.html

"

And this is what another guy said :

" Another reason why it wouldn't work, even if you did copy the whole thing in Notepad, is because most text-editors replace all NULLs with spaces, so opening and resaving something with NULLs (such as a bmp or exe) would result in a corrupted file. "

What have you all got to say now ?

[speed]

SO, HOW COME WE CAN SEE SOURCE CODES OF WEBPAGES IN NOTEPAD AFTER RIGHT MOUSE CLICKING (VIEW SOURCE) AND HOW COME WE CAN SAVE THAT FILE AFTER MODIFYING IT AND PLAY WITHIT ?

The image files are binary file format while the pages are (X)HTML which is text based file format.

AND I AM EXPECTING SOMETHING LIKE THAT FOR BITMAP, JPEG, GIF FILES AND ANY OTHER IMAGE FILE FORMATS YOU GUYS RECOMMEND.
THE SAME I AM LOOKING FOR IN AUDIO FILES SO I CAN CHECK-OUT WHICH CODE REPRESENTS WHICH SOUND.
AFTERWARDS, I'LL CHANGE THE CODES AND THEN HEAR THE SOUND FILE AND SEE IF THE MUSIC HAS CHANGED OR NOT.

If you use the JPEG C Libraries then you can load and decompress the image using them then you can access the pixels uncompressed as you want to. I hope you know C/C++.

NEVER HEARD OF PNG FORMAT BEFORE.
ARE PNG FILES UPLOADABLE TO WEBSITES ?

Yes, but IE is buggy when you use transparency.

WHAT DO YOU MEAN BY RLE ? DO YOU MEAN "THE LENGHTY DESCRIPTION", "NON-SHORT-HAND DESCRIPTION" ?

Run-length encoding is a form of compression where in it's simplest form you have a tag followed by 1 or more pixel codes.

The tag contains the number of pixel code following it and either says this is a run of a single colour or a run of multiple colours. Obviously if there is only a single colour in the run you only need to store the tag + colour and hence compression.

WOULD THAT BOOK EXPLAIN THE COLOUR AND PIXEL CODES.

Some of them, but for JPEG you need to get the C/C++ library and spec from their site and read that if you aren't a C/C++ programmer don't bother.


The post from the other forum sounds about right.

I think you should stop now, and put up a post describing what you are trying to archive (forget pixels and things, but instead give us a high level overview of the project) as there are simpler ways of manipulating images without getting into the file formats and compression algorithms.

For example you could use PHP on the server to load the bitmap into memory or create a clean one and manipulate it, or maybe Flash is a better answer.

If none of these simpler options are right for you then I suggest you find a competent programmer and engage their services.