A p5.js starter template for the 128kb Challenge

Published by Tim on Friday June 14, 2024

Last modified on March 4th, 2025 at 20:12

Your 128kb journey starts here!

This is a template you can use to start developing your idea within the 128kb framework. It is based on inline HTML, so everything (the HTML, the CSS and the JS) is included in a single file. That’s a lean an smart way working with simple sketches.

How it works

Simply put this code in your favorite code editor (for example Visual Studio Code) and start sketching. To easiest way to display your running sketch in Visual Studio Code is by using the the “live-server” extension. It adds a button to the UI at the bottom right. When you click that button, it opens up the sketch in your browser.

To start the rendering process of the gif, simply set the variable exportGif to true. Then the gif file will be downloaded autmatically.

Have fun!

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.js"></script>
    <script src="https://unpkg.com/p5.createloop@0.3.1/dist/p5.createloop.js"></script>
    <meta charset="utf-8" />
    <link rel="icon" href="data:," />
  </head>
  <body>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }

      main {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
      }
      canvas {
        display: block;
        image-rendering: pixelated;
        width: 512px !important;
        height: 512px !important;
        display: block;
      }
    </style>
    <main></main>
  </body>

  <script>
    const exportGif = false;

    function setup() {
      createCanvas(128, 128);
      if (exportGif) {
        saveGif("mySketch", 128, { units: "frames", delay: 20 });
      }
    }

    function draw() {
      background("#aaaaaa");
      fill(0);
      circle(width / 2, height / 2, frameCount);
    }
  </script>
</html>

Submit your work to the gallery!

If you want to show what you have done, please feel free to submit it via the form on this page:

Submit your work!

Share it on Social Media

To share your work on Instagram or other channels, that do not accept the gif format, you can use this tool to convert your gif to a high resolution mp4 file.