Studio

Editing the code

Read and change the code behind a piece by hand, with the studio checking it as you go.

Every piece is code, and all of it is yours to read and change. 3D pieces are JavaScript using three.js, 2D pieces are JavaScript using p5.js, and shader pieces are GLSL. The Code panel shows the code of the version on stage, lets you edit it and runs your changes, checking them as it goes.

Editing by hand is free and needs no account. It suits small, exact changes: a number you want to be precise, a colour, a line you'd like to try without it.

Opening the code

Click Code on the rail, or press C. On a phone it's the Code tab. The panel's header names the file: sketch.js for 3D and 2D pieces, shader.frag for shaders.

While Perlin is writing a piece, the header says "Writing…" and you can watch the code arrive. It's read-only until Perlin has finished.

Editing and running

Open the Code panel
Press C, or click Code on the rail.
Make your change
Click into the code and type. The Run button becomes Run changes.
Run it
Click Run changes, or press ⌘ ↵ (Ctrl ↵ on Windows). ⌘ S runs it too. The piece restarts with your code.

Running edited code adds a new version, labelled "Edited" in the Versions panel, and the piece keeps its title. Run on code you haven't changed restarts the piece. Copy at the bottom of the panel copies the code.

The editor

The editor numbers its lines, colours the code, matches and closes brackets, offers words to complete as you type, and folds blocks away with the arrows in the margin. Press ⌘ F (Ctrl F on Windows) to search. Long lines wrap to fit the panel.

How the studio checks your code

Your code runs in the same safe frame as everything Perlin writes, and the studio watches it:

Before it runs, 3D and 2D code is checked for mistakes in how it's written. One that can't run stops there, with the line it's on.
Every loop is guarded. A loop that never ends is stopped instead of freezing the page.
A piece that stops responding for five seconds is stopped too.
Shader errors come with the compiler's message.

When something goes wrong, a panel on the stage names it and the line:

Label	What happened
Syntax error	The code isn't written in a way that can run
Shader error	The shader didn't compile
Setup error, Runtime error	The code ran and threw an error
Infinite loop	A loop ran too long and was stopped
Not responding	The piece froze
GPU error	The browser lost the piece's graphics
Load error	Something the piece needs didn't load

The panel has three buttons. Show code opens the Code panel at the line. Restart runs the piece again. Fix with AI asks Perlin to repair it, which needs an account, as the chat does. The Code panel has the same as Fix at the bottom. While the code in the panel is the code that failed, the line is marked in red.

The Console tab shows what the piece writes to its console, with errors and warnings in colour. Its label counts them, as in "Console · 2".

Perlin repairs its own fresh work by itself when Auto-fix is on, but it leaves versions you edited by hand alone: fixing those is your call. See Auto-fix and Look it over.

The motion block

A piece's motion (its timeline, layers, sound clips and states) is kept in its code too, in a block at the end. The Code panel leaves that block out so the code stays readable, and running your edits keeps it as it was. Change motion in the Motion panel: see The Motion panel.

Hand edits and Perlin

Perlin works from the version on stage, so your edits are part of what it changes next. You can fix a detail by hand and then ask for something larger, or the other way round. If you'd rather Perlin did a precise change, ask for it in words: "set the particle count to 4,000".

What the code looks like

Each engine has its own shape: a 3D piece exports a function that sets up a scene and returns an update for each frame, a 2D piece has setup() and draw(), and a shader has a mainImage function. Controls come from gui. The details are in the Reference section.

Still stuck, or something here out of date? Tell us