How to put a PICO-8 app into your webpage
Pico-8 is a very cool computer program that makes it easy to make little games, music, or animations. Check it out https://www.lexaloffle.com/pico-8.php . It can make apps for your web pages. Fifteen bucks. If you like free, check out: https://tic80.com/ . I am not sponsored by either.
So here is an AI generated demo of the one-dimensional finite (cellular) automata. It starts out with rule 30, then continues with random rules. Rule 0 and rule 255 are ommitted. It is an incorrect implementation. I'm sure of it. Many of the patterns are not correct. I have a correct implementation that I wrote in python. Maybe I will blog about that sometime. Click on the play button icon it to run it. Turn your phone sideways if it doesn't fit.
I am not going to cover how to get the AI to generate this. It is just trial and error, mostly error, but I will show how to embed the app into a webpage.
So, assume that you have a pico-8 app: "myapp.p8" or "myapp.png"
- Load your app into pico-8. Run it. You need to get a label image (which is a type of screenshot). So run the app a bit and then press F7 when you have a good on-screen image for the label image.
- Press escape to exit the app to the pico-8 command line.
- Type:
export myapp.htmlThis will make an html file and a javascript file. Put these files wherever you want your webserver to have them. - Use an iframe to embed the generated html file:
<iframe width="100%" height="580px" data-responsive="false" scrolling="no" frameborder="0" src="path/to/files/myapp.html"></iframe>
Good sizes to use are: 290px, 580px, 1160px. Experiment.
You can get different html file templates. These are called "plates" in pico-8 lingo. They go in the "pico8/plates" directory. Use them with the -p export command option: export myapp.html -p myplate . There are many available. Cathode ray tube emulation is available via this method. User "ultrabrite" on the Lexaloffle forums has a couple of good templates.
Yeah, so I did this and it changed my life.
