About the Grid

Zareste's Grid is a giant 2d board where anyone can add a picture, free of registration. It's designed so you can scroll around and view pictures using an out-of-the-way interface. You don't have to search for anything specific - just wander around if you like. Pictures are grouped by space, so you can hang out in an area and find related stuff there, or scroll around find random things.

How it works

A Grid can be huge - they have a height and width up to 32,768 pixels and potentially thousands of pictures each. When you connect, you're downloading all of these coordinates. That's a lot of stuff to download, yet it takes only a few seconds thanks to an algorithm that transfers each image position with two bytes. While normal web pages use human-readable text to set an image (<img src="image.jpg" width="128" height"128">), the Grid uses only one byte for the horizontal position and one for the vertical. The applet uses an actual 'grid' of 128 pixels to position the picture, so it reads two bytes from the coordinate file, and if - say - the first two bytes are 2 and 3, the Grid sets the image at 256x384, if the second two bytes are 1 and 4, the second image is put at 128x512. It then assumes the first image is 0.jpg and the second is 1.jpg, etc.

This way, the picture can be set at positions up to 32,768x32,768 using only two bytes, resulting in a very condensed coordinate file. So a coordinate file for 5,000 pictures will be 10kb, which is one-third the size of a small web page.

The display

On a Grid with 5,000 pictures, you can't download them all at once, nor display them all at once. A lot of computers would explode if I did that. So it only displays pictures in the surrounding space - the applet size x 2. Any images that haven't been downloaded will download and fade into view from the middle of the screen outward.

When you reach the edge of one display area (the applet size x 2), the current pictures are dumped and a new display area is created. Your computer reads the coordinates, finds nearby pictures, and puts them on display, including pictures that were already visible. All this happens in a few milliseconds while you scroll.

The server

A PHP program receives sent pictures and creates previews. Data on the pictures is kept in my own database format (not SQL) for speed and control. When you connect, you receive three streams:

-An image-position file

-A deletion list

-User info

The deletion list tells which pictures not to download. When I personally delete an image, the image-files are deleted but its positions are kept so not to disrupt the byte order in the position file. Each deleted image is represented by two bytes giving the image number. On deletion, the checksum hash of the image is also kept to prevent it from being reposted.

User info tells the browser name and applet location for in case the Grid needs to adjust for a browser or domain.

When you send an image, it's streamed to the server along with the position, and processed by a PHP file. The PHP creates a checksum hash of the image (a set of numbers that are unique to the file) and checks the hashes of other files to make sure the image is not a duplicate. The code then optimizes the image's filename (removing server-unfriendly characters and keeping the length under 32 characters), it creates a preview of the image, then saves the information on position, hash and filename. It returns the file information to the Flash, which displays the image.

The Grid client updates the board and chat box about every 10 seconds. The server keeps an update file showing the number of recent users, recent chat information, and recently sent pictures - all with timestamps. The Flash client retains a timestamp of the last time it updated, and any information with a more recent timestamp is relayed to the Flash. Once updates are received, the Flash updates the board, the chat and the user number. If no updates are received, it increases the update latency to 20 seconds, then 30 seconds, up to 60 seconds. This prevents unnecessary server relays.

Origins

The concept came easy. I was surfing Google Earth and thought "what if people could add anything to this?" Like a giant free-for-all board.

My original plan was a huge environment where you could draw or model anything alongside other people, but programming difficulties and web limitations got in the way. So instead I made a quick proof-of-concept: A giant board where people can add pictures.

At first I wanted pictures to be added full-size, and downloaded in chunks like on Google Earth so you can zoom in and out. Unfortunately this would take more code than I expected, and pictures would have re-compression artifacts. So instead I had a PHP program create preview images. When a user clicks, the full-size image would come up, and it would move along with the mouse, similar to the zoom option in OS X - this makes it easy to view big pictures no matter what size the applet is.

The first working Grid was a rough model. It didn't have the 128-pixel 'grid', meaning you could put a picture anywhere instead of in certain spots, but pictures overlapped rampantly, and the coordinate file (downloaded on connection) was much bigger. It was human-readable, causing its file-size to reach about 500KB.

BUT it was a hit on Flash sites and 4chan, if only for the concept. So, I started a major upgrade. The coordinate file was converted to today's denser machine-format, and things like the map were added. Unfortunately the old Grid swf was still circulating around the internet and couldn't receive updates, which were necessary to use the new format. So we ended up with two Grid systems supported at the same time, and I couldn't do anything to fix the old one. Images posted on the old Grid would show up on the new one thanks to some backward compatibility, but pictures added to the new Grid couldn't show up on the old one.

Eventually, I cut off support for the old Grid. It would show up blank and the chat box would show a link to the new Grid. The new Grid has a special container so it can receive updates after being posted to other sites.

The future

I want a Grid more like the one I planned - an all-content Grid with text and pictures and animations and sound, and even drawing tools. And anything you make is instantly viewable by other people.

The idea is, basically, a new internet. No more domains or hosting issues, no HTML, no compatibility problems, no standards limitations. Someone who has never used a computer could go on and add things to it. The Grid would be an ever-changing centralized board where people are always making new things.

Drawing will be done straight to the Grid - as people watch. I'm just about done programming a brush system almost as good Photoshop's brushes. (as in, better than most internet painting systems) Animations will be simple as well. Most data will be recorded as strokes and text and vectors instead of pixels, so most pictures will transfer faster than a JPEG or GIF, and without loss of quality. People will see the picture as you draw it, and if you get tired of drawing, someone can copy it and finish it without affecting your original. You can see any nearby users by their mouse cursors, and everyone can talk in real-time.

My favorite part of this theoretical Grid is the navigation. Instead of using a search engine to get around, you can pan through the Grid until you see something you like, not having to search for anything specific. If you like ninjas, you can hang out in the ninjas area, or make your own ninja area. Of course, searches can still be done as content can be tagged.