Code Art

A creative-coding sketchbook: write a JavaScript sketch in the editor, press Run, and it animates on the canvas beside it. setup() runs once and draw() runs every frame, with Processing's vocabulary in scope — background, fill, stroke, rect, ellipse, circle, line, triangle, beginShape/vertex/endShape, push/pop, translate/rotate/scale, text — plus seeded random() and noise(), map/lerp/constrain, and width, height, frameCount, mouseX and mouseY. Alpha is 0-1, not 0-255, because the raw 2D context is also in scope as ctx and two alpha conventions on one surface is a bug factory. Call size(w, h) to pin a fixed composition and it is letterboxed rather than stretched; leave it out and the sketch fills the panel. The seed is part of the saved state, so the same sketch is the same artwork on every screen. Your code runs in a sandbox with no DOM, no storage and no network at all, and the host hands out one frame at a time: a runaway loop is stopped by the frame budget instead of hanging the tab. 2D only for now — there is no WebGL mode yet, and a sketch cannot reach the scene, read files or fetch anything. It can read parameters you declare, and any plate state you name. Opens on a short hello-world sketch whose comments are the API reference, so the panel is not a wall of prose. Select all and type over it; nothing in it is load-bearing. The Load button opens a chooser that says what each shipped sketch draws - flow field, trails or Truchet - and loading one runs it, replacing whatever is in the editor. Markers you drop on the canvas can be dragged, selected (the active one wears a dashed ring) and deleted with Del. The Sketch tool draws freehand paths, lines, polylines, rectangles, circles and ellipses over the artwork. Both are readable from your code: `slices.markers` and `slices.markup` arrive as plain JSON every frame, so a sketch can follow points you placed by hand.

Supported file formats: PNG, JPG, JPEG, WEBP, GIF, BMP, OBJ, PLY, XYZ, CSV, TSV, TXT, JSON, GEOJSON, MD, SVG