turlte API
Steer your turtle on the shared canvas. The session code is your API key. Bestuur je schildpad op het gedeelde canvas. De sessiecode is je API-sleutel.
Your teacher starts a session and shows its code on the canvas. Put the code in every
URL, right after /api/ or /ws/; the dash is optional. Every device gets
its own turtle in the session. When the session ends (at most 4 hours) everything is forgotten
and the code returns 404.
Je docent start een sessie en laat de code op het canvas zien. Zet de code in elke URL,
direct na /api/ of /ws/; het streepje mag weg. Elk apparaat krijgt een
eigen schildpad in de sessie. Als de sessie afloopt (hooguit 4 uur) wordt alles vergeten en
geeft de code 404.
Open these docs as /docs#<code> and every example uses your code.
Open deze pagina als /docs#<code>, dan staat jouw code in elk voorbeeld.
The canvasHet canvas
New turtles start at a random spot. A GET or POST move turns the turtle towards where it goes.
Colours are a hue from 0 to 255:
Een nieuwe schildpad begint op een willekeurige plek. Bij een GET of POST draait de schildpad
in de richting waarin hij beweegt. Kleuren zijn een hue van 0 tot 255:
| hue | 0 | 43 | 64 | 85 | 128 | 170 | 213 |
|---|---|---|---|---|---|---|---|
| redrood | orangeoranje | yellowgeel | greengroen | cyancyaan | blueblauw | magenta |
1000 × 600, with (0, 0) top left and y pointing down.
1000 × 600, met (0, 0) linksboven en y naar beneden.
1 · GET easiestmakkelijkst
Call it again with another position and a line is drawn between the two points.
x (0–1000) and y (0–600) are both required.
Roep hem opnieuw aan met een andere positie en er komt een lijn tussen de twee punten.
x (0–1000) en y (0–600) zijn allebei verplicht.
curl
curl "http://localhost:3000/api/1234-5678/?x=200&y=300"
JavaScript
const res = await fetch('http://localhost:3000/api/1234-5678/?x=200&y=300');
console.log(await res.json());
ResponseAntwoord
{ "ok": true, "state": { "id": "a3f8c2d1e4b9", "x": 200, "y": 300, … } }
Paste this in your browser's address bar:
Plak dit in de adresbalk van je browser:
http://localhost:3000/api/1234-5678/?x=200&y=300
2 · POST colour & namekleur & naam
| FieldVeld | TypeType | RangeBereik |
|---|---|---|
x, y | numbergetal | 0–1000, 0–600 |
hue | integergeheel getal | 0–255 |
width | integergeheel getal | 1–16 px |
name | string | max. 16 charactersmax. 16 tekens |
Send any combination, but at least one field. Only name renames without moving.
Stuur elke combinatie, maar minstens één veld. Alleen name geeft een nieuwe naam zonder te bewegen.
JavaScript
const res = await fetch('http://localhost:3000/api/1234-5678/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ x: 500, y: 300, hue: 170, width: 4, name: 'Alice' }),
});
console.log(await res.json());
curl -X POST http://localhost:3000/api/1234-5678/ \
-H "Content-Type: application/json" \
-d '{"x": 500, "y": 300, "hue": 170, "width": 4, "name": "Alice"}'
3 · WebSocket 👑 full controlvolledige controle
The server answers hello on connect and ack after every message, both with your
turtle's state. A message may also carry name, hue, width,
x and y; those are applied before the command. Heading: 0° is up, 90° right,
clockwise. Your turtle wears a 👑 once it has used a WebSocket.
De server antwoordt hello bij het verbinden en ack na elk bericht, allebei met de
state van je schildpad. Een bericht mag ook name, hue, width,
x en y bevatten; die worden eerst toegepast. Richting: 0° is omhoog, 90° rechts,
met de klok mee. Je schildpad krijgt een 👑 zodra hij een WebSocket heeft gebruikt.
Errors come back as {"type": "error", "message": …} and the connection stays open.
Messages are JSON objects of at most 4 KB.
Fouten komen terug als {"type": "error", "message": …} en de verbinding blijft open.
Berichten zijn JSON-objecten van hooguit 4 KB.
| cmd | FieldVeld | EffectEffect |
|---|---|---|
move | steps | forward (negative: backward)vooruit (negatief: achteruit) |
turn | degrees | rotate, positive is clockwisedraaien, positief is met de klok mee |
penup / pendown | stop / start drawingstop / begin met tekenen | |
coinspray | 🪙🪙🪙 |
const ws = new WebSocket('ws://localhost:3000/ws/1234-5678');
ws.onmessage = (e) => console.log(JSON.parse(e.data));
ws.onopen = () => {
for (let i = 0; i < 4; i++) {
ws.send(JSON.stringify({ cmd: 'move', steps: 100 }));
ws.send(JSON.stringify({ cmd: 'turn', degrees: 90 }));
}
ws.send(JSON.stringify({ cmd: 'coinspray' }));
};
Reading the canvasHet canvas uitlezen
GET/api/1234-5678/turtles
All active turtles. Filter with ?id=a3f8c2d1e4b9,bb12ef34ab56 or
?tier=post,ws. A turtle without activity for 5 minutes disappears (an open WebSocket keeps it).
Alle actieve schildpadden. Filter met ?id=a3f8c2d1e4b9,bb12ef34ab56 of
?tier=post,ws. Een schildpad die 5 minuten niets doet verdwijnt (een open WebSocket houdt hem vast).
{ "ok": true, "turtles": [ { "id": "a3f8c2d1e4b9", "name": "Alice", "x": 500, "y": 300, … } ] }
GET/api/1234-5678/history
This session's timeline: the latest trail segments and turtle snapshots
(up to 10,000 each) with their time range. Large; refreshed at most every 5 seconds.
De tijdlijn van deze sessie: de laatste segments (lijnstukken) en snapshots
van schildpadden (elk hooguit 10.000) met hun tijdrange. Groot; hooguit elke 5 seconden ververst.
{ "segments": [ { "turtle": "a3f8c2d1e4b9", "x0": 200, "y0": 300, "x1": 350, "y1": 420, "hue": 85, "width": 3, "created_at": 1712345678000 } ],
"snapshots": [ { "turtle": "a3f8c2d1e4b9", "name": "Alice", "x": 350, "y": 420, … } ],
"range": { "min": 1712345000000, "max": 1712345999000 } }
Turtle stateToestand van je schildpad
id | anonymous id within this session (a hash of the code and your IP address)anoniem id binnen deze sessie (een hash van de code en je IP-adres) |
name | name on the canvas (default: the id)naam op het canvas (standaard: het id) |
x, y | positionpositie |
heading | degrees, 0 = up, clockwisegraden, 0 = omhoog, met de klok mee |
hue, width | line colour and thicknesskleur en dikte van de lijn |
penDown | does moving draw?tekent bewegen een lijn? |
tier | highest tier used so far:hoogste niveau tot nu toe: get, post, ws |
Every response carries a state object with your turtle's position, heading, colour and name.
Elk antwoord bevat een state-object met de positie, richting, kleur en naam van je schildpad.
Errors & limitsFouten & limieten
400 | missing or out-of-range field, empty POST body, or a parameter given twice (?x=1&x=2)ontbrekend veld of buiten bereik, lege POST-body, of een parameter die twee keer voorkomt (?x=1&x=2) |
404 | unknown or ended session: check the code on the canvasonbekende of afgelopen sessie: controleer de code op het canvas |
413 | POST body larger than 4 KBPOST-body groter dan 4 KB |
429 | more than 20 requests per second (bursts up to 40); GET, POST and WebSocket share this budget. Also after many wrong session codes from your network.meer dan 20 verzoeken per seconde (pieken tot 40); GET, POST en WebSocket delen dit budget. Ook na veel foute sessiecodes vanaf je netwerk. |
503 | the session is full: wait until idle turtles disappear (5 minutes)de sessie is vol: wacht tot inactieve schildpadden verdwijnen (5 minuten) |
A WebSocket closes on messages over 4 KB, on more than 4 connections at once, and with code
1000 when the session ends.
Een WebSocket sluit bij berichten groter dan 4 KB, bij meer dan 4 verbindingen tegelijk, en met
code 1000 als de sessie afloopt.
Errors are JSON: {"ok": false, "errors": [{"msg": "…"}]}. Got a 429? Slow down.
Fouten zijn JSON: {"ok": false, "errors": [{"msg": "…"}]}. Krijg je een 429? Doe rustiger aan.