JSON => PNG (Javascript)

Coding Critique is the place to post source code for peer review by other members of DevNetwork. Any kind of code can be posted. Code posted does not have to be limited to PHP. All members are invited to contribute constructive criticism with the goal of improving the code. Posted code should include some background information about it and what areas you specifically would like help with.

Popular code excerpts may be moved to "Code Snippets" by the moderators.

Moderator: General Moderators

Post Reply
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

JSON => PNG (Javascript)

Post by pickle »

A project I'm starting to work on will be an entirely browser based game. I had an idea to somehow use images as the save files.

The script/function set I came up with will take any javascript variable (array, scalar, object), and convert it into a PNG file. This is done by first JSON.stringify()ing it, then converting ascii to hex, then hex to RGB, then using <canvas> to set individual pixels to those RGB values. I also wrote functionality to then read a PNG file & convert it back to ASCII.

Rather than post it all here, I've made a working example here: http://jsfiddle.net/SzPMj/7/

In the future I'll probably work this all into one big class - this is just a proof of concept more than anything.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: JSON => PNG (Javascript)

Post by Weirdan »

I had an idea to somehow use images as the save files.
That's the most interesting part. How would you use them, and what's the advantage over, say, LocalStorage?
max529
Forum Commoner
Posts: 50
Joined: Sat May 19, 2007 4:10 am

Re: JSON => PNG (Javascript)

Post by max529 »

what is the practical application of this procedure?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: JSON => PNG (Javascript)

Post by pickle »

The main reason for doing this was to see if I could. I'm thinking I'll store all the game data in one central object, then write that object to file when saving. To load a save game, just upload a save file image, it'll be read in, and the game initialized.

LocalStorage is limited to 5 MB. While I doubt the PNG files I need to generate will be anywhere close to that, it's nice to not have a limit.

Image files can also be downloaded and moved around, say from computer to computer. So, when my game becomes wildly popular, the throngs of fans will be able to swap saved games.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
max529
Forum Commoner
Posts: 50
Joined: Sat May 19, 2007 4:10 am

Re: JSON => PNG (Javascript)

Post by max529 »

This is good as long as people don't take screenshots from their monitor or take a snap on their mobiles in hopes of getting the save data to transfer to another instance of a game(like QR code). Or will it work so?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: JSON => PNG (Javascript)

Post by pickle »

I doubt it, the images in the example are zoomed in 2000% - the actual generated image is much smaller. Reading the image back in requires pixel perfect accuracy, so screenshots will almost certainly fail.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: JSON => PNG (Javascript)

Post by social_experiment »

The idea (and application) is pretty good; reminds me of steganography.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
tr0gd0rr
Forum Contributor
Posts: 305
Joined: Thu May 11, 2006 8:58 pm
Location: Utah, USA

Re: JSON => PNG (Javascript)

Post by tr0gd0rr »

A while back this technique was used in the 10K apart contest. Here are details: http://www.iamcal.com/png-store/
Post Reply