Introduction: Organic Media: the Map

About: I'm an applied physicist by training(phd Yale 2006, BA Berkeley 1998, math and physics), and have done physics research in the federal government and product development in the private sector, starting two of …

Organic media is media which behaves like a living thing. Primarily what I mean by that is that it self-replicates. This is the single thing that makes living things more unlike anything that is not alive: replication.

This bit of media is called "The Map". It is a way of making a web page. This is not part of a network or company. You use existing free resources to follow these instructions to replicate the system: free web servers and a computer you already have. When you're done, you'll have made a tiny "map" of images, text, and links, which can be used to create a vast universe of possible web pages: memes, geographic maps, conceptual maps, directories, library catalogs, etc. And there is no reason this can't scale for free to billions of maps: it needs only infrastructure that already exists. You can do all this on a free computer in a public library, using free web hosting, and occasionally some paid hosting if it's for a business. All without anyone starting any company or buying any new computer infrastructure!


To start all you really need is access to a computer. It could be a
laptop or desktop, mac or pc, doesn't matter. It would be hard to do this with a mobile device but not impossible, I recommend a computer. The other thing that is useful is some basic art supplies: just a marker and paper or even pen and paper or index card--anything you can write on and give to people or leave somewhere. You will also need an email address. If you don't have one you can get one for free from gmail, yahoo, or hotmail. Ask anyone with some computer experience to help you get setup with a free email if you don't have one.

Step 1: Sign Up for a Free Web Hosting Account With 000webhost

All you need is an email address and you can sign up for a free web hosting account at They will try to get you to sign up for paid hosting with their host company hostinger, and I'll be dealing in a later tutorial with how to do that but for now just keep clicking through on the "free" option and sign yourself up for a hosting account.

You will need to choose a name for your page. This is where I'm going to get philosophical about what we're doing here. Do not choose your name or your dog's name. What we are building is a map of Things that exist in our mental universe, outside of our selves. So a place is the first choice, as a framework for future maps to connect to. A great choice is an intersection near where you live of two roads, a bus stop you wait at, or perhaps a location in a local park. Something like "broadway-and15th-street" is fine. This is just to get started, and you can repeat with other email addresses and page names later.

If you follow the instructions on the page, you'll get a confirmation email to complete sign up. Click on the link in that email to confirm and you're ready for the next step. When you're asked what goal you have, click "other". For a "method to start building" you want "upload".

Step 2: Create the Replicator Program

Navigate to the "upload files" part of the interface on 000webhost, and click on the "create new file" icon as shown in the images here(a plus sign on a document icon). Create a new file called "replicator.php", and copy the code in the following text file into it:

link to code here

Note that copying random code onto your web server is not something you should do on a server you care about. But that's part of the point of all this: to build a more robust web where by not having personal or private information we care less about the nefarious effects of random code. Just think of it like a chalk board in a hallway: anyone can write and anyone can erase, and that's ok. If this all works out, we plan to build a whole universe of free and open chalk boards, the scale of which has never even been contemplated.

Save the file, and close. Sometimes the interface can be a little touchy and you might have to save it a couple times. I am not totally sure when or why this happens, just if you get stuck on the next step, go back to here and try again.

Step 3: Replicate!

Navigate your web browser to the web site indicated by 000webhost as your new page. This will be:

[the name of your site] Note that this is "000webhostapp" not "000webhost".

You should see a link there to the file replicator.php. Click on that link and wait a few seconds. If all goes well, this program is going to use something called dna.txt to grab a bunch of small files which constitute our organic media and copy them all to your new web page. All this is getting copied from my code repository, but in a future tutorial I'll show you how to make local copies of the code and make your own code repository with modifications, so that the entire system can evolve in the wild without any reference at all to my initial code(just as living things are descended from their parents but as they evolve no longer need direct constant genetic reference to them).

Step 4: Change Title of Map

Assuming the map loaded ok, you should see a simple web page with minimal information. Click on the "edit" link, which is the icon that looks like a pencil to enter edit mode.

Put the cursor in the box that pops up with "name of map", replace that with a name that describes your location and hit "enter". This should change the name of the map to your new name.

Save your changes to the map by clicking on the "save" icon which looks like a rectangle with a "down" arrow as shown on the bottom left in the image above. When you've saved it, you can take your page out of edit mode, and you have now have a live published web page with the title you gave it which you can share with anyone and they'll be able to see your newly titled page!

Be careful about hitting the big red "X". It will delete the title!! You can create a new title using the information in our next step if you do this, however. Again, this is like a chalk board: stuff can easily be erased. We can just write on it again.

Step 5: Add Link

Click on the "add" icon as shown. This will duplicate the title. Drag it around with the mouse to position it, or with a finger if you have a touch screen. Resize it with the size bar if you have a touch screen(this won't work with a mouse) or resize with the plus and minus buttons by clicking on them.There is a big plus and a big minus and a small plus and minus--these are rough and fine rescale, try them both.

When you have this copy of the title where you want it, use the text table with the fields "text" and "href" and edit "text" to say something abut what you're linking to, and edit "href" to be a link to your favorite web page. As the network of Maps grows, the default for this will be the address of whatever the previous map was. So, later, as you teach other people how to spread this, you'll give them the link to this page, and they'll insert a link to it in their map. This will automatically connect all the maps to each other as we spread this. Remember to hit enter to make a change happen.

When you have the link as you want it, or as you go along to be on the safe side, you can hit the "save" button again to save this to the server. Again, the save button is a rectangle with a down arrow on the lower left of the rows of edit buttons.

Repeat this as you see fit, adding more links and positioning them around.

Step 6: Add Image

First we'll make an image from somewhere on the Internet.

Copy the last link you worked on by using the plus sign. Find an image somewhere on the Internet that you think is interesting, it could be from almost anywhere. Right click on the image and select "copy image location" to get the exact address of that particular image. Paste that link into "src" in the editor and hit return. This should instantly convert that link into an image. You can then reseize and rotate that using the buttons in the lower right of the screen. You can use this to stack up a bunch of images and make all sorts of memes and graphics, which you can then screen capture and post to the Internet, as a way to rapidly make graphics and share them.

Now we'll upload an image to the server. To do this, click on the "browse" button as shown. This should link you to your hard drive and you can click around and find an image you might want to upload. Choose the image you want, select it, and when you get back to the main edit screen of the page, click on the "upload image" button, and the image should be uploaded. You'll end up on a screen that tells you if it worked, and there will be a link to go back to the main page. Now if you select an existing image in the map and click on the image you just uploaded, which should appear in a scroll on the side of the screen, it will swap out the existing image for the one you uploaded. Note also that there are a couple symbols in there which you can also use if you want. Those symbols are in a directory called "symbols" and if you're feeling adventurous you can go back to your 000webhost account and upload any symbols you want into that directory and they'll automatically be available to you here. The ability to use vector graphics symbols like arrows or map icons like the restroom symbol is a very powerful but simple tool for building useful generalized maps.

Step 7: Use the Map Editor

This is the map editor. The map is the file you are editing which controls how your page looks. The file itself can be viewed directly at [address of your specific page]/data/currentMap.txt. If you're into technical things, this format hopefully will be somewhat self explanatory when you look at it. If not, just think of it as a stack of objects where each object can have a position, size, angle, image, text and link. That's all! This is a very general format, which can create powerPoint like slides, memes of the text-over-image variety, helpful geographic maps with icons to mark where things are and links to geography tied things like local businesses, arrows over photos of places to show where a thing is placed in the real world etc.

Since each map is a location in the Internet and is full of links, they can and should all link to each other. I believe this is closer to the truly decentralized and constantly evolving World Wide Web that the Web's creator Tim Berners Lee had in mind than the centralized thing the Web has descended into.

I call each object in this stack a "link" even though they are not always technically links. You can use the buttons to move from one link to another, to change the order of the links in the stack, delete links, create new links, and most importantly save the map as you go.

Step 8: Edit Scroll

Each page in The Map has a scroll. A scroll is just a text document, formatted using a simple system called Markdown which lets you just type and have things look reasonable without having to learn any real code. The default scroll edit page has a reference for the basic tools of markdown, including how to insert links and larger headings for sections and images.

You can think of this as a text-based bulletin board for each page. It could be used to document the page, or as a rapidly evolving board where people can post ads for things and exchange simple messages. Use your imagination.

To go to the scroll, click the scroll link. To edit the scroll, click the pencil icon once you're on the scroll page. Just edit and it will automatically save as you go.

Step 9: Publish Link in Physical World

Write your full web address in a format that people can read on a physical object, and distribute it to people. This can be a sign taped up in a location, an address written on a sidewalk with chalk, painted on a stick stuck in the ground, put on a sticky note up on a wall, etc. etc. Don't harm anything with spray paint or anything permanent, as we want The Map to be a welcome thing and not annoy people. Also, we expect that this will be constantly changing to anything permanent goes against the spirit of that. Leaving or handing out individual objects which people can take with them is also helpful, as the best way to get into this system is at a real computer and not a mobile device, at least now as we're just beginning, so people will need to bring the address with them so they can type it in later.

Step 10: The Future of the Map

This could be the start of something that totally remakes the Web, and puts it in the hands of the people who use it rather than a few people who control the Big Tech sites. But the only way to do this is to have a grass roots expansion of involvement by literally billions of users like you.

If this whole thing is overwhelming and hard to use, that's ok! This is designed to self-improve by making the code easy to improve by anyone with a basic understanding of web code, and there are probably 10's or even 100's of millions of those people now. So we need to find those people. If you know someone who codes web pages, share this with them. There will be future tutorials on how to duplicate all this code and improve it, with direct instructions for how to improve the hardest to use aspects of this. I am an amateur. No one has ever paid me to make a web page, I have no computer science education background. My goal here is not to build great software but to build media which self-replicates and evolves out in the wild. Coders! Join, build, and share. We can build a better, freer world. And my code is crude enough that re-writing all of it better is a low bar and you can be a big star!

As for The Map in its existing form, we can build something pretty huge even without new code. Maps can be used to make memes at an unprecedented speed and freedom with no software knowledge, which can riff on each other much more easily than those created on a private hard drive. Maps can be used to create true local knowledge, not like Google Maps, but created by the people physically in a location, and edited by them in real time, with the ability to leave little notes for each other in places in virtual space(keys lost by dumpster, please help).

I envision this as a sort of "Universe of Things", in contrast to the "Internet of Things". The Internet of Things is now a marketing term which means putting computers in everything, all of which are connected to the Internet. It's how you get a toaster which constantly needs updates and can crash for no reason. The Universe of Things is a more philosophical construct. It is a map of all the "things" in the most generalized sense which the human mind cares about. This might be machines, places, actions, groups, ideas, spaces in conceptual space(like the call numbers in a library), etc. If you can think of a thing, and describe it with language, you can build a map for it and put that somewhere on the Web. The math works out: the amount of space out there in the web servers of the world, and the amount of bandwidth we already have, the number of web viewing devices etc, all work out to where we can have 10's of thousands of these "things" for every human mind on the planet.

I think the best way to spread The Map is through local public libraries, because they all have free public computers and an existing map which in theory covers all of human knowledge in the form of the call numbers mapping out across the shelf space. Also public libraries are free and universal. If you want to spread this, go do it there. That's where I'm going next, but I needed to get this tutorial up as part of the process of just making something exist here.