HTMLDrop.

p5.js starter

p5.js creative coding: a setup() and draw() sketch, the classic way.

Open in editor Free. No install, no sign-up.
  • p5

The code

Three files, exactly what you get in the editor.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>p5.js starter</title>
    <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
  </head>
  <body>
    <a href="https://p5js.org" target="_blank" class="badge"
      ><svg class="logo" role="img" viewBox="0 0 128 128">
        <path
          fill="#ed225d"
          d="m37.8 34.652-.741 23.961c.73-.36 1.484-.672 2.257-.93a34.74 34.74 0 0 1 2.602-.773c.895-.23 1.805-.406 2.723-.527.87-.117 1.75-.18 2.629-.184 1.199 0 2.375.133 3.53.403a8.459 8.459 0 0 1 3.13 1.421c.93.68 1.68 1.579 2.258 2.696.578 1.113.867 2.515.867 4.207 0 1.32-.215 2.511-.649 3.562-.433 1.051-1.023 1.93-1.765 2.63a7.605 7.605 0 0 1-2.598 1.612 8.996 8.996 0 0 1-3.16.56c-1.98 0-3.696-.528-5.137-1.583-1.445-1.05-2.48-2.445-3.098-4.18l-.082.032-5.379 5.039a14.4 14.4 0 0 0 4.223 4.437c2.516 1.711 5.613 2.567 9.285 2.567 2.192 0 4.254-.352 6.192-1.051 1.941-.703 3.633-1.715 5.078-3.035 1.445-1.32 2.59-2.942 3.437-4.86.848-1.922 1.27-4.097 1.27-6.535 0-2.226-.383-4.195-1.145-5.91-.765-1.711-1.828-3.156-3.191-4.336-1.36-1.176-2.961-2.074-4.797-2.691-1.836-.621-3.828-.93-5.973-.93-.785 0-1.664.043-2.632.125-.973.082-1.809.226-2.508.434l.433-9.477h17.895v-6.684Zm52.134 12.696v33.246c0 .867-.04 1.68-.121 2.445-.086.762-.27 1.434-.56 2.016a3.351 3.351 0 0 1-1.237 1.36c-.54.331-1.243.495-2.106.495a9.223 9.223 0 0 1-2.043-.25l-.62 6.317c.374.082.866.168 1.483.25.622.082 1.243.12 1.86.12 2.23 0 4.035-.347 5.418-1.05 1.383-.703 2.476-1.64 3.285-2.817.805-1.18 1.348-2.558 1.637-4.148a28.2 28.2 0 0 0 .437-5.047V47.348Zm-71.868.554c-1.363 0-2.59.153-3.683.461-1.02.285-2.008.68-2.942 1.18-.867.477-1.601 1.008-2.199 1.61a10.689 10.689 0 0 0-1.453 1.765h-.187V48.77H.48v44.578h7.434V74.523h.121c.95 1.489 2.3 2.665 4.059 3.532 1.754.867 3.68 1.3 5.785 1.3 2.27 0 4.305-.425 6.101-1.27 1.797-.843 3.325-1.98 4.582-3.405 1.258-1.422 2.231-3.094 2.91-5.016.68-1.918 1.024-3.973 1.024-6.16 0-2.188-.351-4.23-1.055-6.129-.703-1.898-1.691-3.55-2.972-4.953a13.892 13.892 0 0 0-4.582-3.313c-1.774-.804-3.715-1.207-5.82-1.207Zm98.309 0a16.88 16.88 0 0 0-4.336.555 12.095 12.095 0 0 0-3.777 1.703 8.795 8.795 0 0 0-2.696 2.942c-.68 1.199-1.02 2.62-1.02 4.273 0 1.402.247 2.578.743 3.527a7.13 7.13 0 0 0 1.98 2.387 10.668 10.668 0 0 0 2.82 1.547 24.63 24.63 0 0 0 3.25.96c2.27.536 3.974 1.075 5.11 1.61 1.133.535 1.7 1.422 1.7 2.664 0 .66-.145 1.215-.43 1.672-.29.45-.68.82-1.149 1.082a5.497 5.497 0 0 1-1.547.586 7.265 7.265 0 0 1-1.64.188c-1.61 0-3.074-.352-4.399-1.051-1.32-.703-2.39-1.59-3.218-2.664l-4.891 4.582c1.445 1.57 3.262 2.777 5.45 3.62 2.148.84 4.437 1.27 6.745 1.27 1.614 0 3.172-.175 4.676-.527 1.508-.348 2.828-.918 3.965-1.7a8.683 8.683 0 0 0 2.727-3.066c.68-1.257 1.019-2.796 1.019-4.613 0-1.445-.289-2.672-.867-3.683a8.096 8.096 0 0 0-2.262-2.54 12.182 12.182 0 0 0-3.094-1.64 27.386 27.386 0 0 0-3.375-.992c-2.105-.496-3.707-.98-4.8-1.453-1.094-.477-1.637-1.293-1.637-2.45 0-1.152.492-1.98 1.484-2.472.992-.496 2.082-.746 3.281-.746 1.364 0 2.622.32 3.778.96 1.156.641 2.062 1.391 2.726 2.258l4.829-4.27c-1.2-1.526-2.82-2.663-4.864-3.405a18.24 18.24 0 0 0-6.281-1.114Zm-99.98 6.067c1.445 0 2.703.277 3.777.836a8.016 8.016 0 0 1 2.664 2.199 9.755 9.755 0 0 1 1.578 3.062 11.69 11.69 0 0 1 .523 3.438 11.99 11.99 0 0 1-.523 3.469 9.57 9.57 0 0 1-1.578 3.097c-.703.907-1.594 1.649-2.664 2.227-1.074.578-2.332.867-3.777.867-1.364 0-2.582-.277-3.653-.836a8.902 8.902 0 0 1-2.754-2.2 9.571 9.571 0 0 1-1.738-3.062 10.523 10.523 0 0 1-.586-3.437 10.81 10.81 0 0 1 .586-3.469 9.399 9.399 0 0 1 4.492-5.324c1.07-.578 2.29-.867 3.653-.867Zm59.433 13.62v4.614l-4.46-1.441-.868 2.68 4.441 1.601-2.738 3.746 2.238 1.707 2.805-3.71 2.883 3.808 2.308-1.672-2.738-3.879 4.406-1.504-.867-2.672-4.425 1.336V67.59Zm0 0"
        /></svg
    ></a>
  </body>
</html>

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
canvas {
  display: block;
}
.badge {
  position: fixed;
  left: 16px;
  bottom: 16px;
}
.logo {
  width: 56px;
  height: 56px;
}

// p5.js calls setup() once, then draw() every frame. Move the mouse!
function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB);
  noStroke();
  background(20);
}

function draw() {
  background(20, 0.08);
  const size = 20 + 30 * sin(frameCount * 0.05);
  fill(frameCount % 360, 80, 100);
  circle(mouseX || width / 2, mouseY || height / 2, size);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Questions

Can I use p5.js without a build step?

Yes. This starter loads p5.js straight from a CDN, so it runs in the browser with no npm install, bundler, or config.

How do I start a p5.js project online?

Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.

Is it free?

Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.

Can I share or embed my p5.js demo?

Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.

More starter kits