p5.are.na

by Jake Welch

Load blocks from any Are.na channel directly into a p5.js sketch.

let channel;

async function setup() {
  createCanvas(600, 600);
  channel = await loadArena("pebble-dream");
}

function draw() {
  image(channel.random(), 0, 0);
}

Every block keeps its title, author, source, and a link back to the block on Are.na. Public channels don't need a key.

Examples

• basic: Displays one block at a time and advances to a new one on click. (editor)
• grid: Arranges a channel's blocks into a contact sheet. (editor)
• video: Scrolls a channel's video blocks across the canvas as a marquee. (editor)
• text: Tiles a channel's Text blocks into a wall of quotes. (editor)
• metadata: Reveals a block's Are.na record on hover. (editor)
• blocks: Lists the shape of a channel from its records alone. (editor)
• preload-v1: Loads a channel using the p5.js 1.x preload() style. (editor)
• text-web: Draws each Text block as a line stretched between two drifting joints. (editor)

Install

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/p5.are.na.min.js"></script>

The library attaches itself to p5 on load and adds loadArena().

In the p5 web editor, add the second <script> line to index.html, below the p5 one. Each example above is also a ready-to-fork editor sketch.

From npm:

npm install p5.are.na

import p5 from "p5";
import p5arena from "p5.are.na";

p5arena.register(p5);

Loading

Finding a channel

The slug is the last part of the channel's URL, and can be passed alone, with the owner's username, or as the full URL:

loadArena("pebble-dream");
loadArena("matt-dowdy/pebble-dream");
loadArena("https://www.are.na/matt-dowdy/pebble-dream");

p5.js 2.x

let channel;

async function setup() {
  createCanvas(600, 600);
  channel = await loadArena("pebble-dream");
}

p5.js 1.x

function preload() {
  channel = loadArena("pebble-dream");
}

Options

channel = await loadArena("pebble-dream", {
  limit: 24,
  size: "large",
  shuffle: true,
});

| Option | Default | What it does | | ------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | limit | 50 | How many blocks to load. 'all' loads the whole channel. | | types | 'all' | 'image' (stills + GIFs), 'gif', 'video', 'text', 'still', or an array like ['gif', 'text']. 'all' is every visual type; 'any' adds text. | | size | 'medium' | 'small', 'medium', 'large', 'square', 'original'. GIFs always use the original so animation survives. | | order | 'oldest' | 'oldest', 'newest', 'created', 'updated', or a raw sort such as position_asc or created_at_desc. | | shuffle | false | Picks at random from the whole channel instead of the first N. | | retina | false | Uses the 2× derivative where Are.na has one. | | concurrency | 8 | Simultaneous downloads. | | timeout | 20000 | Per-block timeout in ms. | | autoplay | true | Starts video blocks automatically (muted, looping). | | onProgress | null | (done, total, block) => {}, per block. | | token | null | Personal access token for private channels. |

The older size names still work: thumb maps to small, display to medium.

The full channel API, including text blocks and block metadata, is documented in REFERENCE.md.

Notes

Private channels

Private channels require a personal access token, created at dev.are.na and passed as token:

channel = await loadArena("my-private-channel", { token: "YOUR_TOKEN" });

A token in client-side JavaScript is visible to anyone who opens the page and should not be included in a public sketch.

Rate limits

Are.na allows 30 requests per minute unauthenticated, and a token raises it. Only channel metadata requests count, since the blocks themselves come from a CDN. A normal load costs 2 requests, plus one per extra page of 100 blocks. Throttled requests are retried automatically with backoff.