Function index
Every name a pictures.js scene can use, by area, one line each. The link on each row goes to the page that explains it, with examples.
| Area | pictures.js | Pyctures |
|---|---|---|
| 2D drawing: the plain functions | Yes | Yes |
2D drawing: the canvas, ctx | Yes | Yes |
| 3D: three.js | Yes | Yes |
| Sprites and hit-testing | Yes | Yes |
| Keyboard, mouse and touch | Yes | Yes |
| Frames and timing | Yes | Yes |
| Saved values | Yes | Yes |
| Files | Yes | Yes |
| Databases (SQLite) | Yes | Yes |
| Image processing | Yes In Circuitry only | Yes In Circuitry only |
| Scenes | Yes | Yes |
| Sound and music | Yes | Yes |
| Dials, sliders and a keyboard | Yes | Yes |
| Sheet music | Yes | Yes |
| Effects | Yes | Yes |
This page is pictures.js's own index, in its own spellings. Pyctures has the same areas in Python: the Pyctures function index.
Everything here works everywhere Circuitry runs (iPhone, iPad, Android, the desktop app and a web browser) and in a page made with File, Export as Web Page, unless its row has a badge that says otherwise. In Circuitry only means inside Circuitry, and not in the pictures.js library used on its own or in an exported page.
The shape of a scene
Functions you write. They are called if the scene defines them.
Explained in How a program is shaped.
| Name | What it does |
|---|---|
setup() | Called once, before the first frame. It can be an async function |
update(dt) | Called every frame, with the seconds since the last one: move things here |
draw() | Called every frame, after update: draw the picture here |
onStop() | Called when the scene stops or is run again: let go of what it made outside the canvas |
Scenes
A program in several scenes, each with the functions above as its own. Only a file that uses one of these names is given them.
| Name | What it does | More |
|---|---|---|
class Title extends Scene { … } | A scene: setup, update, draw and the on functions as its own, its variables on this. Every Scene class plays, in the order written | Scenes |
scene(name, { draw, update, … }) | A scene from plain functions, with no class | Scenes |
go(scene) | Change to a scene, by its name or its class. It can say a transition, and keep goes back to a scene as it was left | Scenes |
nextScene() | Change to the next scene written; after the last comes the first | Scenes |
restart() | Begin this scene again, from empty | Scenes |
resume() | A scene's own: called in place of setup() when it is come back to with keep. Controls are made again here | Scenes |
length, beats, bars | On a scene: it ends by itself after so many seconds, beats or bars | Scenes |
sceneTime, sceneProgress, sceneName | Seconds since this scene began, how far through its length it is (0 to 1), and its name | Scenes |
transition, transitionTime, transitionColor | On a scene: how it arrives. "cut", "crossfade", "fade", the wipes and the slides | Scenes |
config({ … }) | Settings for every scene: loop, transition, transitionTime, transitionColor, beatsPerBar | Scenes |
section(name) | A tick on the scrubber at this moment | Scenes |
onSeek(seconds) | A function you write at the top level: called when the scrubber is moved | Scenes |
2D drawing: the plain functions
One call each, with no ctx. in front.
Explained in 2D functions.
| Name | What it does |
|---|---|
background(colour) | Paints the whole canvas |
circle(x, y, radius, colour) | A filled circle centred on x, y |
ellipse(x, y, width, height, colour) | An oval centred on x, y |
rect(x, y, width, height, colour) | A filled rectangle, top-left corner at x, y |
triangle(x1, y1, x2, y2, x3, y3, colour) | A triangle, by its three corners |
polygon(x, y, radius, sides, colour) | A shape with that many equal sides, centred on x, y, one corner straight up |
star(x, y, radius, points, colour) | A star with that many points, one straight up |
line(x1, y1, x2, y2, colour, thickness) | A straight line |
text(words, x, y, colour, size, align) | Words, size points high |
picture(what, x, y, size) | An emoji or a word, an image file beside the program, or a loaded image, centred on x, y and … |
Chance and angles
Explained in 2D functions.
| Name | What it does |
|---|---|
random(min, max) | A whole number from min to max, either end included |
random(max), random() | From 0 to max; with nothing, a fraction from 0 up to 1 |
pick(list) | One thing from a list, by chance |
degrees(n) | An angle said in degrees, wherever an angle is wanted: ctx.rotate(degrees(45)), ship.angle = … |
2D drawing: the canvas, ctx
The web's own 2D drawing surface: everything the plain functions do, and much more.
Size and pictures
Explained in 2D functions.
| Name | What it does |
|---|---|
width, height | The size of the canvas, in points |
pixelRatio | Real pixels per point (2 or 3 on most phones) |
canvas | The canvas, for canvas.addEventListener(...) |
loadImage(address) | Loads a picture to draw |
Rectangles
Explained in 2D functions.
| Name | What it does |
|---|---|
ctx.fillRect(x, y, w, h) | A filled rectangle, top-left corner at x, y |
ctx.strokeRect(x, y, w, h) | The outline of a rectangle |
ctx.clearRect(x, y, w, h) | Rubs that area out, back to see-through |
Paths
Explained in 2D functions.
| Name | What it does |
|---|---|
ctx.beginPath() | Starts a new, empty path |
ctx.moveTo(x, y) | Lifts the pen and puts it down at x, y |
ctx.lineTo(x, y) | A straight line to x, y |
ctx.closePath() | A straight line back to where this piece started |
ctx.rect(x, y, w, h) | A rectangle, as part of the path |
ctx.roundRect(x, y, w, h, r) | A rounded rectangle |
ctx.arc(x, y, r, start, end) | Part of a circle round x, y, from angle start to end in radians (0 to Math.PI * 2 is … |
ctx.arcTo(x1, y1, x2, y2, r) | A rounded corner of radius r, turning at x1, y1 towards x2, y2 |
ctx.ellipse(x, y, rx, ry, turn, start, end) | Part of an oval, rx wide and ry tall, turned by turn radians |
ctx.quadraticCurveTo(cx, cy, x, y) | A curve to x, y, pulled towards one control point |
ctx.bezierCurveTo(c1x, c1y, c2x, c2y, x, y) | A curve to x, y with two control points |
ctx.fill() | Fills the path |
ctx.stroke() | Draws the path's outline |
Colours and styles
Explained in 2D functions.
| Name | What it does |
|---|---|
ctx.fillStyle = … | The colour, gradient or pattern for fills and filled text |
ctx.strokeStyle = … | The same, for outlines |
ctx.globalAlpha = 0.5 | How solid everything drawn next is, from 0 (invisible) to 1 |
ctx.createLinearGradient(x0, y0, x1, y1) | A gradient along a line |
ctx.createRadialGradient(x0, y0, r0, x1, y1, r1) | A gradient between two circles |
ctx.createConicGradient(angle, x, y) | A gradient round a point, like a colour wheel |
gradient.addColorStop(position, colour) | A colour at a point (0 to 1) along a gradient |
ctx.createPattern(picture, "repeat") | A repeating fill from a picture or another canvas |
Lines
Explained in 2D functions.
| Name | What it does |
|---|---|
ctx.lineWidth = 4 | How thick outlines are, in points |
ctx.lineCap = "round" | How line ends look: "butt" (flat, stops at the end), "round", "square" (flat, sticks out … |
ctx.lineJoin = "round" | How corners look: "miter" (sharp), "round", "bevel" (cut off) |
ctx.miterLimit = 10 | How far a sharp corner may stick out before it is cut off like a bevel |
ctx.setLineDash([10, 5]) | Dashes: 10 drawn, 5 gap |
ctx.getLineDash() | The current dash list |
ctx.lineDashOffset = 4 | Slides the dashes along |
Text
Explained in 2D functions.
| Name | What it does |
|---|---|
ctx.fillText(text, x, y) | Draws text |
ctx.strokeText(text, x, y) | Draws the outline of the text |
ctx.measureText(text).width | How wide the text will be, in points, in the font set now |
ctx.font = "bold 24px serif" | Style, size and family |
ctx.textAlign = "center" | Where x is: "left", "center", "right", or "start"/"end" (which follow the writing … |
ctx.textBaseline = "middle" | Where y is: "alphabetic" (the line letters sit on, the default), "top", "hanging" … |
ctx.direction = "rtl" | Writing direction: "ltr", "rtl" or "inherit" |
ctx.letterSpacing = "4px" | Extra space between letters (older devices ignore it) |
ctx.wordSpacing = "10px" | Extra space between words (older devices ignore it) |
ctx.fontKerning = "none" | Whether letter pairs are fitted closer: "auto", "normal", "none" |
Images
Explained in 2D functions.
| Name | What it does |
|---|---|
const img = loadImage(address) | Starts loading a picture from a path beside the scene ("cat.png"), a web address (asked about … |
ctx.drawImage(img, x, y) | Draws it at its own size, top-left at x, y |
ctx.drawImage(img, x, y, w, h) | Draws it stretched to w by h |
ctx.drawImage(img, sx, sy, sw, sh, x, y, w, h) | Cuts the part sx, sy, sw, sh out of the picture and draws it at x, y, w, h |
ctx.imageSmoothingEnabled = false | Keeps pixel art crisp and blocky when scaled up |
ctx.imageSmoothingQuality = "high" | How carefully pictures are smoothed: "low", "medium", "high" |
Transforms
Explained in 2D functions.
| Name | What it does |
|---|---|
ctx.translate(x, y) | Moves the grid's corner (0, 0) to x, y |
ctx.rotate(angle) | Turns the grid round (0, 0) by angle radians, clockwise |
ctx.scale(sx, sy) | Stretches the grid |
ctx.transform(a, b, c, d, e, f) | Applies any stretch, slant and move at once |
ctx.save() | Remembers the transform and every setting on this page |
ctx.restore() | Goes back to what the last save() remembered |
ctx.setTransform(a, b, c, d, e, f) | Replaces the transform completely |
ctx.resetTransform() | Clears the transform |
ctx.getTransform() | The current transform, with its numbers as a to f |
Shadows
Explained in 2D functions.
| Name | What it does |
|---|---|
ctx.shadowColor = "rgba(0, 0, 0, 0.5)" | The shadow's colour |
ctx.shadowBlur = 10 | How soft the shadow is |
ctx.shadowOffsetX = 5 | How far right the shadow falls |
ctx.shadowOffsetY = 5 | How far down the shadow falls |
Blending and filters
Explained in 2D functions.
| Name | What it does |
|---|---|
ctx.globalCompositeOperation = "multiply" | How new drawing mixes with what is already there |
ctx.filter = "blur(4px)" | An effect on everything drawn next |
Clipping and hit testing
Explained in 2D functions.
| Name | What it does |
|---|---|
ctx.clip() | Makes the current path a window: everything drawn next shows only inside it |
ctx.isPointInPath(x, y) | Whether a point is inside the current path: true or false |
ctx.isPointInStroke(x, y) | Whether a point is on the path's outline |
Paths you can keep: Path2D
Explained in 2D functions.
| Name | What it does |
|---|---|
ctx.fill(path) | Fills that path |
ctx.stroke(path) | Outlines it |
ctx.clip(path) | Clips to it |
ctx.isPointInPath(path, x, y) | Whether a point is inside it |
path.addPath(other) | Adds another path's pieces to this one |
Pixels
Explained in 2D functions.
| Name | What it does |
|---|---|
ctx.getImageData(x, y, w, h).data | The colours of every pixel in that area, as one long list: red, green, blue, alpha (0 to 255) … |
ctx.createImageData(w, h) | A blank block of pixels |
ctx.putImageData(pixels, x, y) | Puts a block of pixels straight onto the canvas, ignoring transforms, alpha and blend modes |
new ImageData(new Uint8ClampedArray(numbers), w, h) | Makes a block of pixels from a list of numbers |
Saving and resetting
Explained in 2D functions.
| Name | What it does |
|---|---|
ctx.save() | Remembers every setting on this page, the transform and the clip |
ctx.restore() | Goes back to the last save() |
ctx.reset() | Clears the canvas and puts every setting back to the start, including the canvas's sharp-screen … |
3D: three.js
three.js is there as THREE, and its orbit controls as addons.OrbitControls.
Renderer
Explained in 3D functions.
| Name | What it does |
|---|---|
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true }) | Makes a renderer that draws on the canvas, with smooth edges |
renderer.setPixelRatio(pixelRatio) | Sharp on high-resolution screens |
renderer.setSize(width, height, false) | Fits the canvas |
renderer.render(scene, camera) | Draws one picture; call it in draw() |
renderer.setClearColor("navy", 1) | The colour behind the scene when it has no background; the second number is how solid |
renderer.shadowMap.enabled = true | Turns shadows on |
renderer.shadowMap.type = THREE.PCFSoftShadowMap | Soft-edged shadows |
renderer.toneMapping = THREE.ACESFilmicToneMapping | Softens very bright light the way a film camera does |
renderer.toneMappingExposure = 1.2 | Overall brightness when tone mapping is on |
renderer.outputColorSpace = THREE.SRGBColorSpace | How colours are sent to the screen |
Scene and fog
Explained in 3D functions.
| Name | What it does |
|---|---|
const scene = new THREE.Scene() | The world everything goes in |
scene.add(thing), scene.remove(thing) | Puts something in the world, or takes it out |
scene.background = new THREE.Color("skyblue") | The colour behind everything |
scene.fog = new THREE.Fog("white", near, far) | Fog that starts at distance near and hides everything by far |
scene.fog = new THREE.FogExp2("white", 0.05) | Fog that thickens steadily with distance; the number is how thick |
Cameras
Explained in 3D functions.
| Name | What it does |
|---|---|
new THREE.PerspectiveCamera(fov, width / height, near, far) | A camera that sees the way eyes do: far things look smaller |
new THREE.OrthographicCamera(left, right, top, bottom, near, far) | A camera with no perspective: far things look the same size |
camera.position.set(x, y, z) | Where the camera is |
camera.lookAt(x, y, z) | Points it at a spot |
camera.aspect = width / height | The shape of a perspective camera's picture; follow with camera.updateProjectionMatrix() |
camera.fov = 30, camera.near, camera.far, camera.zoom = 2 | Change its settings; follow with camera.updateProjectionMatrix() |
camera.updateProjectionMatrix() | Applies changed camera settings |
Geometries: shapes
Explained in 3D functions.
| Name | What it does |
|---|---|
new THREE.BoxGeometry(w, h, d) | A box |
new THREE.SphereGeometry(radius, 32, 16) | A ball |
new THREE.PlaneGeometry(w, h) | A flat rectangle, facing you |
new THREE.CircleGeometry(radius, 32) | A flat disc |
new THREE.RingGeometry(inner, outer, 32) | A flat ring, like a washer |
new THREE.CylinderGeometry(topRadius, bottomRadius, height, 32) | A cylinder; different radii make a tapered tube |
new THREE.ConeGeometry(radius, height, 32) | A cone |
new THREE.CapsuleGeometry(radius, length, 8, 16) | A pill |
new THREE.TorusGeometry(radius, tube, 16, 64) | A ring doughnut |
new THREE.TorusKnotGeometry(radius, tube, 128, 16) | A knotted tube |
new THREE.TetrahedronGeometry(radius) | 4 faces |
new THREE.OctahedronGeometry(radius) | 8 faces |
new THREE.DodecahedronGeometry(radius) | 12 faces |
new THREE.IcosahedronGeometry(radius, detail) | 20 faces; raise detail to make it rounder |
new THREE.LatheGeometry(points, 32) | Spins a side outline (a list of THREE.Vector2) round the up axis, like a vase on a potter's … |
new THREE.ExtrudeGeometry(shape, { depth: 0.5, bevelEnabled: false }) | Pushes a flat THREE.Shape out into a solid, like a cookie cutter |
new THREE.TubeGeometry(curve, 64, radius, 8, false) | A tube along a curve, such as new THREE.CatmullRomCurve3([...points]) |
new THREE.EdgesGeometry(geometry) | Just the edges of another shape, for LineSegments |
new THREE.WireframeGeometry(geometry) | Every triangle's edges, for LineSegments |
new THREE.BufferGeometry() | Your own shape from numbers: geometry.setAttribute("position", new … |
Materials: how surfaces look
Explained in 3D functions.
| Name | What it does |
|---|---|
new THREE.MeshBasicMaterial({ color: … }) | Flat colour, ignores light, always visible |
new THREE.MeshLambertMaterial({ color: … }) | Matte, like chalk or paper |
new THREE.MeshPhongMaterial({ color: …, shininess: 80, specular: "white" }) | Shiny highlights, like plastic |
new THREE.MeshStandardMaterial({ color: …, roughness: 0.5, metalness: 0 }) | Realistic |
new THREE.MeshPhysicalMaterial({ color: …, clearcoat: 1, transmission: 0.9, thickness: 0.5 }) | Standard, plus extras: clearcoat (a varnish layer), transmission (glass that lets light … |
new THREE.MeshToonMaterial({ color: … }) | Cartoon shading in a few flat bands |
new THREE.MeshNormalMaterial() | Rainbow colours by which way each face points; needs no light |
new THREE.MeshDepthMaterial() | White near the camera, fading to black far away |
new THREE.LineBasicMaterial({ color: … }) | For lines (Line, LineSegments, LineLoop) |
new THREE.LineDashedMaterial({ color: …, dashSize: 0.2, gapSize: 0.1 }) | Dashed lines; call line.computeLineDistances() once |
new THREE.PointsMaterial({ color: …, size: 0.05 }) | For Points |
new THREE.SpriteMaterial({ map: texture }) | For THREE.Sprite, a picture that always faces the camera |
color: "tomato" | The surface colour |
emissive: "orange", emissiveIntensity: 1 | A glow the surface gives off by itself |
map: texture | A picture wrapped round the surface |
roughness, metalness | Standard and Physical only: rough or polished, metal or not |
wireframe: true | Draws the edges of every triangle only |
flatShading: true | Shows the flat faces rather than smoothing over them |
side: THREE.DoubleSide | Shows both sides of flat shapes (FrontSide is the default, BackSide the inside) |
transparent: true, opacity: 0.5 | See-through; opacity does nothing without transparent |
Lights
Explained in 3D functions.
| Name | What it does |
|---|---|
new THREE.AmbientLight(colour, intensity) | A little light everywhere, from no direction |
new THREE.HemisphereLight(sky, ground, intensity) | Sky colour from above, ground colour from below |
new THREE.DirectionalLight(colour, intensity) | The sun: parallel light from position towards target (the middle unless you move it) |
new THREE.PointLight(colour, intensity, distance, decay) | A bulb: light in every direction from one spot |
new THREE.SpotLight(colour, intensity, distance, angle, penumbra, decay) | A torch: a cone of light from position towards target |
new THREE.RectAreaLight(colour, intensity, w, h) | A glowing panel, like a window or a softbox |
light.intensity = 2 | Brightness |
light.color.set("orange") | Colour |
light.position.set(x, y, z) | Where it is |
light.target.position.set(x, y, z) | Where directional and spot lights point; also scene.add(light.target) |
light.visible = false | Switches it off |
light.castShadow = true | Directional, point and spot lights can cast shadows (turn on renderer.shadowMap.enabled and … |
light.shadow.mapSize.width = 2048 (and .height) | Sharper shadows, at a cost in speed |
light.shadow.bias = -0.0005 | Removes stripy marks on surfaces that shadow themselves |
light.shadow.radius = 4 | Blurs shadow edges (with PCFSoftShadowMap off, PCFShadowMap on) |
light.shadow.camera.left / right / top / bottom | How big an area a directional light's shadows cover |
Objects
Explained in 3D functions.
| Name | What it does |
|---|---|
new THREE.Mesh(geometry, material) | A solid object |
new THREE.Group() | An empty holder: things added to it move, turn and scale with it |
new THREE.Points(geometry, new THREE.PointsMaterial({ size: 0.05 })) | A dot at every position in the geometry |
new THREE.Line(geometry, material) | A line through the positions, in order |
new THREE.LineLoop(geometry, material) | The same, joined back to the start |
new THREE.LineSegments(geometry, material) | Separate lines, one for each pair of positions |
new THREE.Sprite(new THREE.SpriteMaterial({ map: texture })) | A flat picture that always faces the camera, for labels and particles |
new THREE.InstancedMesh(geometry, material, count) | Many copies of one mesh drawn at once, much faster than many meshes |
Moving and arranging
Explained in 3D functions.
| Name | What it does |
|---|---|
thing.position.set(x, y, z), thing.position.x = 2 | Where it is |
thing.rotation.set(x, y, z), thing.rotation.y += 0.01 | How it is turned round each axis, in radians |
thing.scale.set(2, 1, 1), thing.scale.setScalar(2) | How big it is along each axis |
thing.lookAt(x, y, z) | Turns it to face a spot |
thing.add(other), thing.remove(other) | Puts other inside thing, so it moves with it |
thing.visible = false | Hides it |
thing.name = "door" | A name, handy when picking |
thing.castShadow, thing.receiveShadow | Whether it makes shadows and shows them |
thing.traverse((child) => { … }) | Calls your function for thing and for everything inside it |
Textures
Explained in 3D functions.
| Name | What it does |
|---|---|
new THREE.TextureLoader().load(address) | Loads a picture from a path ("textures/brick.png") or a web address, whose site must allow … |
new THREE.CanvasTexture(aCanvas) | Uses a 2D canvas you drew on as the picture: text, patterns, anything from 2D functions |
texture.needsUpdate = true | After you draw on that canvas again, shows the change |
texture.wrapS = texture.wrapT = THREE.RepeatWrapping | Lets the picture repeat across and down |
texture.repeat.set(4, 4) | How many times it repeats |
texture.colorSpace = THREE.SRGBColorSpace | Shows a photo's colours correctly |
texture.magFilter = THREE.NearestFilter | Keeps pixel-art textures blocky |
Helpers
Explained in 3D functions.
| Name | What it does |
|---|---|
new THREE.GridHelper(size, divisions) | A grid on the floor |
new THREE.AxesHelper(length) | The three axes: x red, y green, z blue |
new THREE.DirectionalLightHelper(light, size) | Where a directional light is and which way it points |
new THREE.PointLightHelper(light, size) | Where a point light is |
new THREE.SpotLightHelper(light) | A spot light's cone |
new THREE.HemisphereLightHelper(light, size) | A hemisphere light |
new THREE.CameraHelper(light.shadow.camera) | The box a light's shadows cover |
new THREE.BoxHelper(thing, "yellow") | A box round an object |
Maths
Explained in 3D functions.
| Name | What it does |
|---|---|
new THREE.Vector3(x, y, z) | A position or direction in 3D |
new THREE.Vector2(x, y) | The same in 2D |
new THREE.Color(…) | A colour |
new THREE.Euler(x, y, z) | A turn round each axis, in radians: what rotation is |
new THREE.Quaternion() | Another way to store a turn, which never gets stuck |
new THREE.Matrix4() | Position, turn and size in one; used by InstancedMesh |
THREE.MathUtils.degToRad(90) | Degrees to radians |
Picking and controls
Explained in 3D functions.
| Name | What it does |
|---|---|
const ray = new THREE.Raycaster() | Makes a picker |
ray.setFromCamera(new THREE.Vector2(x, y), camera) | Aims it through a point, where x and y run from -1 to 1 across and up the canvas: x = … |
const hits = ray.intersectObjects(listOfThings) | What it hits, nearest first |
const controls = new addons.OrbitControls(camera, canvas) | Drag to orbit, pinch or scroll to zoom, two fingers or right-drag to pan |
controls.update() | Call every frame in draw() |
controls.target.set(x, y, z) | The point it orbits round |
controls.enableDamping = true | Glides to a stop when you let go |
controls.autoRotate = true, controls.autoRotateSpeed = 2 | Turns slowly by itself |
controls.minDistance = 2, controls.maxDistance = 20 | How close and how far you can zoom |
controls.maxPolarAngle = Math.PI / 2 | Stops the camera going below the floor |
controls.enableZoom, controls.enablePan, controls.enableRotate | Switch each gesture on or off |
Sprites and hit-testing
Moving pictures that can tell when they touch.
| Name | What it does | More |
|---|---|---|
new Sprite(picture, x, y, size) | A moving picture with x, y, vx, vy, angle, spin, size, visible, update(dt) … | 2D functions |
remove(list, thing) | Take a thing out of a list | 2D functions |
sprite.picture | An emoji or text, an image from loadImage, or a function that draws it | Drawing in 2D |
sprite.x, sprite.y | Where its centre is | Drawing in 2D |
sprite.vx, sprite.vy | Its speed in points per second, used by update(dt) | Drawing in 2D |
sprite.angle | How far it is turned | Drawing in 2D |
sprite.spin | How fast it turns each second, used by update(dt): degrees(180) is half a turn a second | Drawing in 2D |
sprite.size | How big it is, in points (48 unless you say) | Drawing in 2D |
sprite.visible | false hides it | Drawing in 2D |
sprite.update(dt) | Moves it by its speed and turns it by its spin | Drawing in 2D |
sprite.draw() | Draws it (call this in your draw()) | Drawing in 2D |
sprite.touches(other) | true when the two overlap | Drawing in 2D |
sprite.hit(list) | The first sprite in the list that it touches, or null when it touches none | Drawing in 2D |
sprite.contains(x, y) | true when that point is on it | Drawing in 2D |
sprite.shape | "circle" (as it starts) or "box" | Drawing in 2D |
sprite.radius | The size of its circle | Drawing in 2D |
sprite.width, sprite.height | The size of its box | Drawing in 2D |
sprite.wrap() | When it has gone off one edge, it comes back on the opposite one | Drawing in 2D |
sprite.bounce() | Bounces it off the edges | Drawing in 2D |
sprite.offscreen() | true when all of it is outside the picture | Drawing in 2D |
sprite.push(amount) | Speeds it up the way it faces: this is an engine | Drawing in 2D |
sprite.forward(distance) | Steps it the way it faces, without changing its speed | Drawing in 2D |
sprite.limit(speed) | Slows it to that speed if it is going faster | Drawing in 2D |
sprite.angleTo(other) | The angle from it to another sprite, to mouse, or to a point: angleTo(x, y) | Drawing in 2D |
sprite.distanceTo(other) | How far it is to another sprite, to mouse, or to a point: distanceTo(x, y) | Drawing in 2D |
Sprite.box(x, y, width, height, colour) | A coloured box, tested as a box | Drawing in 2D |
Sprite.circle(x, y, size, colour) | A coloured circle size across, tested as that circle | Drawing in 2D |
Keyboard, mouse and touch
What is held now, what went down since the last frame, and functions called when something happens.
Explained in 2D functions.
| Name | What it does |
|---|---|
keys | The set of keys held down: keys.has("ArrowLeft") |
pressed, released | The keys that went down, and came up, since the last frame: pressed.has(" ") |
mouse.x, mouse.y, mouse.down | Where the pointer or finger is, and whether it is pressed |
mouse.button, mouse.inside | Which button is down ("left", "middle", "right" or null), and whether the pointer is … |
mouse.dx, mouse.dy, mouse.wheel | How far the pointer moved, and the wheel turned, since the last frame |
touches | Every finger (or pressed mouse button) that is down: each has id, x, y, startX … |
pinch.scale, pinch.change, pinch.x, pinch.y | Two fingers as a zoom: the scale since the pinch began, its change since the last frame, and … |
Functions you write
Explained in How a program is shaped.
| Name | What it does |
|---|---|
onKeyDown(key, code) | A key is pressed |
onKeyUp(key, code) | A key is let go |
onKeyRepeat(key, code) | A key that is held down repeats, as it does when you type |
onMouseDown(x, y, button) | The mouse button or a finger goes down |
onMouseMove(x, y) | The pointer moves |
onMouseUp(x, y, button) | The button or finger comes up |
onTouchStart(touch) | A finger or a mouse button goes down |
onTouchMove(touch) | A finger that is down moves |
onTouchEnd(touch, cancelled) | A finger comes up |
onWheel(amount) | The wheel turns |
onPinch(scale, change) | Two fingers move together or apart |
Frames and timing
Used with await, in a loop of your own.
| Name | What it does | More |
|---|---|---|
await frame() | Waits for the next frame, so this one is shown | 2D functions |
await flush() | The same as frame(): shows what is drawn so far and carries on at the next frame | 2D functions |
await sleep(seconds) | Waits that long | 2D functions |
await vsync() | Another name for frame(): waits for the screen's next refresh | How a program is shaped |
Saved values
One value under a name, still there the next time.
Explained in Saved values.
| Name | What it does | In Pyctures |
|---|---|---|
save(name, value) | Keeps the value under that name | save |
load(name, otherwise) | Gives back the value saved under that name | load |
Files
A text or JSON file the scene writes and reads back. Real files beside the scene in the app on an iPhone, iPad or Android device and for a saved scene in the desktop app; kept by the browser on the web and in an exported page: where they are kept.
Explained in Files and databases.
| Name | What it does | In Pyctures |
|---|---|---|
await saveText(path, text) | Writes the text as a file | save_text |
await saveJSON(path, value) | Writes a value as a JSON file: a number, text, true or false, a list or an object | save_json |
await loadText(path) | The text of the file | load_text |
await loadJSON(path) | The value in a JSON file, ready to use | load_json |
Databases
Rows in a SQLite database, asked for in SQL. Real files beside the scene in the app on an iPhone, iPad or Android device and for a saved scene in the desktop app; kept by the browser on the web and in an exported page: where they are kept.
Explained in Files and databases.
| Name | What it does | In Pyctures |
|---|---|---|
await openDatabase(name) | Opens the database of that name, making it the first time | open_database |
await db.query(sql, ...values) | Asks a question (select) | db.query |
await db.run(sql, ...values) | Changes the database: create table, insert, update, delete | db.run |
await db.close() | Finishes with the database | db.close |
Sound and music
The names of synths, the sound library. With nothing to import. Loaded only by a scene that uses one. The microphone and MIDI are not connected in Circuitry's own preview yet.
Game sounds
Explained in the synths function index.
| Name | What it does |
|---|---|
playSound(name, volume, { pitch, pan, length }) | Plays a ready-made game sound: "coin", "jump", "laser" … |
soundNames() | The list of game sounds |
Notes and tunes
Explained in the synths function index.
| Name | What it does |
|---|---|
playNote(note, length, volume) | Plays a note, a list of notes or a chord by name, now |
playNotes(notes, step, { repeat, volume, hold }) | Plays a tune written as text or as a list |
note(note, length) | The next note of a tune written a line at a time: it begins where the last one ended |
chord(name, length) | The next thing in the line is a chord |
rest(length) | A silence in the line |
loopNotes(() => { … }) | A section of lines that goes round until its stop() |
startLines() | Begins every line again from now |
noteNumber(note) | A note as a number: "A4" is 69, and 60 is middle C |
setTempo(beatsAMinute) | Sets the tempo |
beats(n) | How many seconds n beats last |
beat() | Which beat it is now, with its fraction |
soundTime() | The sound clock, in seconds |
Synths
Explained in the synths function index.
| Name | What it does |
|---|---|
makeSynth(name, { settings }) | Makes a synth: a ready-made one by name, a changed one, or one from settings alone |
synthNames() | The list of ready-made synths |
settingNames() | The list of every setting |
mainSynth() | The synth that playNote and note play |
soundOutput() | All the sound together, for a scope or a meter |
lead.play(note, length, volume) | A note, a chord, or the synth's own note |
lead.start(note) | A note that stays |
lead.play(note, length, { glide, bend, slide, vibrato }) | A note whose pitch moves: a slide in, a scoop, a fall, a vibrato |
lead.noteOn(note, velocity, { at }), lead.noteOff(note, { at }) | A key down and up, now or at an exact time on the sound clock |
lead.tranceGate = "x.x.xx.x", lead.setTranceGate(pattern, { rate, depth, smooth, swing, stereo, sends }) | A trance gate: the sound chopped in a pattern of steps, in time |
lead.arpPattern = "trance" | A pattern of its own for every arpeggio of the synth |
lead.stop() | Lets go of every note, or of the one named |
lead.playNotes(notes, step) | A tune on this synth |
lead.note(…), lead.chord(…), lead.rest(…) | This synth's own line |
lead.startLine() | Begins this synth's line again from now |
lead.arp(chord, length, { step, octaves, gate, pattern }) | A chord as an arpeggio: fast, or with step each note struck in time with the tempo |
lead.startArp(chord, { step, pattern }) | An arpeggio that stays |
lead.cutoff = 800 | Any setting, as a property |
lead.set({ … }, { glide }) | Changes several settings, or slides there |
lead.get(name), lead.describe(name) | A setting by name, and its range, unit and kind |
lead.macro = [ … ] | A step macro |
lead.samples(), lead.level(), lead.notes() | What it is doing now: its wave, how loud, the notes sounding |
lead.sample = loadSample(file) | A recording for its wave |
lead.voice = "robot" | A voice changer on everything it plays |
lead.record(seconds) | Records this synth alone |
lead.playFromMidi(), lead.learn(setting), lead.mapMidi(number, setting), lead.sendToMidi() | MIDI: a keyboard plays it, a knob turns a setting, what it plays is sent out |
lead.remove() | Finished with it |
Chip sounds and arpeggios
Explained in the synths function index.
| Name | What it does |
|---|---|
playArp(chord, length, { speed, order }) | A chord played one note at a time, very fast, on one voice |
startArp(chord) | One that stays until its stop(); change(chord) moves it to another chord |
Samples
Explained in the synths function index.
| Name | What it does |
|---|---|
loadSample(file, { loop, note }) | A recorded sound from a file, as a synth |
makeSynth({ sample: file, note }) | A synth whose wave is a recording |
loadSamples(files, { kit, crossfade, release }) | Several recordings as one instrument, each playing the keys near its note |
lead.samples = files, lead.setSamples(files, { … }) | The same on a synth you made |
Your voice
Explained in the synths function index.
| Name | What it does |
|---|---|
useMicrophone() | The microphone, as a synth whose sound comes in |
mic.voice = "robot" | A voice: robot, chipmunk, monster, cave, telephone, alien, whisper, or "none" |
mic.listen(), mic.mute() | Hear yourself, and stop |
mic.pitch, mic.ring, mic.comb, mic.gain, mic.gate | Its own settings, beside every setting a synth has |
mic.state, mic.whenReady() | "on", or why there is no microphone |
voiceNames() | The list of voices |
stopMicrophone() | Lets the microphone go |
Recording
Explained in the synths function index.
| Name | What it does |
|---|---|
recordSound(seconds, { effects }) | Records the microphone |
startRecording({ max }) | Records until stopRecording(), or for 30 seconds |
stopRecording() | Ends the recording that is being made |
recordOutput(seconds) | Records everything the program plays, in stereo |
saveSound(take, name) | Saves a recording or a sample as a WAV file |
Songs
Explained in the synths function index.
| Name | What it does |
|---|---|
playSong(file, { repeat, volume, raw, patches }) | Plays a .mod, an .xm or a song of synths' own |
song.mute(channel), song.unmute(), song.solo(channel) | Silences a channel, brings them back, hears one alone |
song.loopPattern() | Stays on the pattern that is playing; false carries on |
song.position | Where the song is: its state, pattern, row and tempo |
song.channel(n).level() | One channel's level, and its samples() and notes() |
song.channel(n).volume, .pan, .reverb, .echo | The mix: a channel's fader, its place from left to right, and how much of it goes to the reverb … |
song.loop(from, to) | A part of the song goes round; null (None) runs on |
song.replace(edited) | An edited song in the place of the one playing |
stopSong() | Stops the song that is playing |
MIDI
Explained in the synths function index.
| Name | What it does |
|---|---|
onMidiNote(fn) | Calls fn(note, velocity, channel) for each key |
onMidiNoteOff(fn) | Calls fn(note, channel) when a key comes up |
onMidiControl(fn) | Calls fn(number, value, channel) when a knob, a slider or a pedal moves |
onMidi(fn) | Calls fn(message) with everything that arrives |
onMidiDevices(fn) | Calls fn(devices) when the devices are known, and when one comes or goes |
midiDevices() | inputs, outputs and available, now |
useMidiInput(name) | Listens to that device alone |
useMidiOutput(name) | Sends to that device |
midiInput(), lead.midiInput() | What the program, or one synth, listens to, as something a control is tied to: its "device" … |
midiOutput(), lead.midiOutput() | The same for what is sent |
sendMidiNote(note, velocity, { length, channel }) | Sends a note, a chord or a list of notes |
sendMidiNoteOff(note) | Lets go of a note that was sent to be held |
sendMidiControl(number, value) | Turns a knob on the other device: value is 0 to 1 |
sendMidiBend(amount) | The pitch wheel, -1 to 1 |
sendMidiProgram(number) | Chooses a sound on the other device |
sendMidiClock() | Sends the beat, in time with setTempo; false stops it |
sendMidi(bytes) | Any message, as its bytes |
receiveMidi(message) | Hands the program a message as a keyboard would, for trying a scene with none |
stopMidi() | Stops everything MIDI is doing |
Effects and volume
Explained in the synths function index.
| Name | What it does |
|---|---|
setEffects({ echoTime, echoLevel, reverbType, reverbSize, reverbLevel, … }) | Shapes the echo, the reverb (and which kind it is) and the chorus that all synths share |
setVolume(volume) | How loud everything is |
muteSound() | Silence |
unmuteSound() | Brings the sound back |
stopSound() | Stops everything that is sounding or waiting to sound |
soundButton(corner) | A speaker on the scene that switches its sound off and on |
askAboutSound(title) | For a demo: a card that asks "Play with sound" or "Play without sound" before anything is heard |
soundIsOn() | Whether the scene's sound is switched on |
setSoundBuffer("large") | How much sound is made at a time, for a page that clicks: "small", "medium", "large" … |
soundBuffer() | What it is now: frames, delay, thread, underruns and setting |
When a sound starts
Explained in the synths function index.
| Name | What it does |
|---|---|
{ after: 0.5 } | That long from now: seconds, or a note length by name |
{ at: soundTime() + 2 } | At a time on the sound clock |
{ beat: 8 } | On that beat |
Dials, sliders and a keyboard
The names of dials: controls on the scene, one line each. With nothing to import.
| Name | What it does | More |
|---|---|---|
dial(label, min, max, start) | A dial for a number: speed.value | Every control |
slider(label, min, max, start) | The same, as a slider | Every control |
button(label) | A button: fire.pressed is true once for each press | Every control |
toggle(label) | A switch: trail.on | Every control |
select(label, choices) | One of a list: level.value | Every control |
rotary(label, choices) | A knob that clicks between a few choices: mode.value | Every control |
keyboard(synth) | Piano keys that play a synth | Every control |
scope(synth) | The wave a synth is making, or any number you push | Every control |
spectrum(synth) | The frequencies in a sound, as bars, low notes at the left | Every control |
meter(synth) | How loud a synth is, or any level from 0 to 1 | Every control |
label(text) | Words: made just before some controls, their heading | Every control |
group(title, () => { … }) | A plate with a title, and the controls on it | Every control |
row(), column(() => { … }), grid(3, () => { … }) | A new line; controls one under another; controls in columns that line up | Every control |
page(title) | A page of controls with a tab; page() ends the pages | Every control |
spacer(), wrap() | The room left over; where a line may be split | Every control |
layout(options), room() | Where the plates go, how they fit and wrap; the rectangle no control is on | Every control |
theme(options) | The colours of all the controls | Every control |
over(x, y) | Whether a control is at a point | Every control |
number(label, min, max, start), stepper(…) | A number box with − and +, which can be typed into | Every control |
textBox(label, text) | One line of text to type | Every control |
readout(label, () => value) | Shows a value or a message, and takes no hand | Every control |
checkbox(label, on) | A box that is ticked | Every control |
choose(label, choices), radio(label, choices) | One of a few, all in sight | Every control |
dropdown(label, choices) | One of a long list, which opens over the controls | Every control |
xyPad(label, target, "across", "up") | A square where one finger sets two numbers | Every control |
colourPicker(label, colour), colorPicker(…) | A patch of colour that opens a picker | Every control |
progress(label, value) | A bar that fills, from 0 to 1 | Every control |
light(label, on), busy(label) | A light, and a ring that goes round while something is happening | Every control |
rangeSlider(label, min, max, [low, high]) | A slider with two handles | Every control |
fader(…) | A slider that stands upright | Every control |
joystick() | A stick for a thumb: stick.x, stick.y | Every control |
dpad() | A pad of arrows: pad.left, pad.right, pad.up, pad.down | Every control |
actionButton("A") | A round button for a thumb | Every control |
envelope(label, target) | The shape of a note as a graph whose corners you drag | Every control |
stepGrid(label, steps, rows) | A grid of steps, each on or off | Every control |
pads(label, names, target) | Pads to hit, several at once | Every control |
pitchWheel(…), modWheel(…), wheel(…) | A wheel that rolls back, and ones that stay | Every control |
tranceGate(label, target), arpPattern(label, target) | The editors for a synth's trance gate and its arpeggio pattern | Every control |
steps(label, 16) | A lane of steps, for anything | Every control |
drumSeq(label, drums, target) | A drum sequencer that plays by itself | Every control |
Sheet music
The names of notation: music written out as notes on a staff, and lit as it plays. With nothing to import. Loaded only by a scene that uses one.
| Name | What it does | More |
|---|---|---|
showNotes(music, step, { title, key, … }) | Writes music out as notes on a staff over the scene: a tune as text, a sheet, a song or plain data. Gives back the page, with play(), follow(…) and playAlong() | What you can show |
makeSheet({ key, time, tempo, title }) | A sheet to write a note at a time: sheet.add("D4", "quarter"), sheet.rest("quarter") | What you can show |
Effects
The names of visualfx: glow, trails, a kaleidoscope and ninety more, done by the graphics card to whatever the scene draws. With nothing to import: call one and the scene has them all. Loaded only by a scene that uses one. Each effect has a picture on its page.
Shapes of the picture
| Name | What it does | More |
|---|---|---|
kaleidoscope | One slice of the picture, folded round and round | Effects |
mirror | One half of the picture shown on both sides, or one quarter in all four | Effects |
pixelate | Big square pixels | Effects |
waves | The picture ripples like a flag in the wind | Effects |
ripple | Rings spreading from a point, as from a stone dropped in water | Effects |
wobble | The picture wobbles like jelly, or something seen under water | Effects |
swirl | The middle of the picture twisted round, like stirred paint | Effects |
fisheye | A bulge, as through a round lens | Effects |
tunnel | The picture becomes the walls of a tunnel you are flying down | Effects |
tile | The picture repeated in rows and columns | Effects |
droste | The picture inside itself, smaller each time, for ever | Effects |
rotozoom | The picture tiled, turning and zooming: an old demo-scene favourite | Effects |
hexagons | Six-sided pixels, like a honeycomb | Effects |
glassTiles | Seen through a wall of glass blocks | Effects |
frosted | Seen through frosted glass | Effects |
heatHaze | The shimmer of hot air rising | Effects |
caustics | The net of bright lines that sunlight makes on the floor of a pool | Effects |
shake | The whole picture shakes | Effects |
punch | A zoom in towards a point | Effects |
Blur and light
| Name | What it does | More |
|---|---|---|
zoomBlur | Rushing towards a point | Effects |
spinBlur | Spinning round a point | Effects |
motionBlur | Moving fast in one direction | Effects |
tiltShift | A band in focus and the rest blurred, which makes a scene look like a tiny model | Effects |
lightRays | Rays of light streaming out from a point, through whatever is bright | Effects |
streaks | Long sideways flares from bright lights, as a film camera makes | Effects |
softFocus | A soft, dreamy haze over the bright parts | Effects |
blur | Out of focus | Effects |
glow | Bright things shine and spread light around them | Effects |
What was drawn stays
| Name | What it does | More |
|---|---|---|
smear | What was drawn is carried away on a slow current, like wet paint | Effects |
stutter | Only so many new pictures a second: the last one is held between them | Effects |
trails | What was drawn stays and fades | Effects |
Colours
| Name | What it does | More |
|---|---|---|
rgbSplit | Red and blue pulled apart, like a cheap lens or a bad signal | Effects |
hue | Every colour moved round the colour wheel | Effects |
saturate | More colour, or less: at 0 the picture is grey | Effects |
brighten | Brighter, or darker below 1 | Effects |
contrast | Lights lighter and darks darker | Effects |
invert | A negative: every colour swapped for its opposite | Effects |
posterize | Only a few shades of each colour, like a poster | Effects |
tint | Seen through coloured glass | Effects |
duotone | Two colours only: one for the dark parts and one for the light | Effects |
colourCycle | Brightness becomes a colour from a palette, and the colours move round | Effects |
gradientMap | Brightness becomes a colour from a palette, dark to light | Effects |
thermal | A heat camera: cold is dark blue, hot is yellow and white | Effects |
nightVision | Green, grainy and bright in the dark, like a night-vision scope | Effects |
sepia | The warm brown of an old photograph | Effects |
threshold | Two colours and nothing between: dark or light | Effects |
solarize | The bright parts turned to their opposite, as in an over-exposed photograph | Effects |
colourBleed | Colours smeared sideways, as on old videotape | Effects |
rainbowEdges | Every edge in the picture drawn in rainbow colours | Effects |
Screens and old computers
| Name | What it does | More |
|---|---|---|
scanlines | Dark lines across the picture, as on an old screen | Effects |
crt | An old television: curved glass, lines, and thin stripes of red, green and blue | Effects |
glitch | A broken signal: blocks that jump sideways, a line that tears, a band of snow | Effects |
letters | The picture made of marks, as an old terminal would show it | Effects |
dither | A few colours made to pass for many with a pattern of dots, as old computers did | Effects |
interlace | Every other line dark, swapping each frame, like old video | Effects |
led | A wall of round lamps | Effects |
Drawn, printed and painted
| Name | What it does | More |
|---|---|---|
edges | Only the outlines, each in its own colour | Effects |
dots | Printed in dots, big where the picture is bright, as a comic or a newspaper is | Effects |
emboss | Pressed into grey metal: only the bumps and hollows show | Effects |
sharpen | Crisper edges | Effects |
sketch | A pencil drawing on paper | Effects |
cartoon | Flat colours and black outlines | Effects |
stainedGlass | Pieces of coloured glass with dark lead between them | Effects |
crosshatch | Shaded with crossing pen lines: more lines where it is darker | Effects |
oil | Smoothed into patches of colour, like oil paint | Effects |
In front of the picture
| Name | What it does | More |
|---|---|---|
grain | The fine speckle of film | Effects |
vignette | Dark corners, which draw the eye to the middle | Effects |
dust | Specks and scratches, as on old film | Effects |
lightLeaks | Warm light creeping in from the sides, as in an old camera | Effects |
rain | Rain falling in front of the picture | Effects |
snow | Snow falling in front of the picture | Effects |
bokeh | Soft discs of coloured light drifting by: lamps out of focus | Effects |
fog | Drifting mist, thicker towards the bottom | Effects |
lightning | A flash, now and then | Effects |
Backdrops that need no drawing
| Name | What it does | More |
|---|---|---|
plasma | Slow rolling colour | Effects |
starfield | Flying through stars | Effects |
metaballs | Blobs that melt into each other when they meet: a lava lamp | Effects |
flow | Colour that folds and curls like ink in water | Effects |
warp | A chequered tunnel rushing past | Effects |
voronoi | Soft coloured cells that slowly shift | Effects |
moire | Two sets of rings crossing, making patterns neither has alone | Effects |
interference | Waves from four moving points, crossing | Effects |
aurora | The northern lights over a night sky | Effects |
fire | Flames rising from the bottom of the picture | Effects |
clouds | A sky with drifting clouds | Effects |
matrixRain | Green marks falling in columns | Effects |
copperBars | Shining bars sliding up and down: a demo-scene classic | Effects |
checkerFloor | A chequered floor rushing towards you under a glowing horizon | Effects |
twister | A twisting four-sided bar, another demo-scene classic | Effects |
The music, drawn
| Name | What it does | More |
|---|---|---|
spectrumBars | The music as bars: low notes at the left, high at the right | Effects |
spectrumRing | The music as bars round a ring | Effects |
waveformRing | The sound's own wave, bent into a ring | Effects |
beatFlash | A flash of colour on each beat | Effects |
bassShake | The picture shakes with the bass | Effects |
Looks, music and the rest
| Name | What it does | More |
|---|---|---|
look(name), lookNames() | A ready-made look: several effects at once, by one name | Effects |
clearEffects() | Takes every effect off | Effects |
effectNames(), paletteNames() | The lists of effects and of palettes, for a program | Effects |
bass(), mids(), highs(), loudness(), pulse() | What the music is doing now, each from 0 to 1, for a scene to draw with | Effects |
react(effect, setting, band, …) | Ties a setting of an effect to the music | Effects |
listenTo(sound) | Which sound the effects hear: all of the scene's unless you say | Effects |
shader(code, { settings }) | An effect of your own, in the graphics card's language | Effects |
effectsQuality(amount) | How many pixels the effects work on: fewer is quicker | Effects |
recordVideo(…), saveVideo(…), renderFrames(…) | A video made by a page of your own that has no recorder. In Circuitry, use Record Video | Effects |
Other names
| Name | What it does | More |
|---|---|---|
await loadFont(name, path) | Loads a font file beside the scene, ready to use by its name in ctx.font | Tips and limits |
await use(path) | Loads another .js file beside the scene and hands back what it exports | Tips and limits |
measure(name, work) | Times a part of a frame, shown with the frame rate | Finding mistakes |
Image processing
Methods of a picture from loadImage, each used with await: const small = await img.resize({ width: 200 }). They are part of Circuitry, not of the pictures.js library, so they do not work in an exported page or with the library on a page of its own. Some run on any device and some need an Apple device: the badges say which, and Images from Code has every option.
Explained in Images from Code. All of them are In Circuitry only; the badge on each row says which devices.
| Name | What it does | Where it works |
|---|---|---|
removeBackground() | Cut out the main subject; everything else becomes transparent | Apple devicesiOS 17 / macOS 14 or later |
resize({ width, height, percent, fit: "contain" }) | Scale it | Any device |
enhance() | Improve exposure, colour and contrast automatically | Apple devices |
sepia({ intensity: 0.8 }) | Warm brown old-photo tone | Apple devices |
mono() | Black and white | Apple devices |
noir() | High-contrast black and white | Apple devices |
vintage() | Faded, warm film look | Apple devices |
blur({ radius: 10 }) | Soften the whole picture | Apple devices |
sharpen({ radius: 2.5, intensity: 0.5 }) | Crisper edges | Apple devices |
vibrance({ amount: 1 }) | Richer colours, gently | Apple devices |
rotate({ angle: 90, background: "#00000000" }) | Rotate by 90/180/270 or any arbitrary angle | Any device |
flip({ axis: "horizontal" }) | Mirror horizontally, vertically, or both | Any device |
crop({ x: 0, y: 0, width: 256, height: 256 }) | Cut a rectangular region from an image | Any device |
convert({ format: "webp", quality: 0.9 }) | Re-encode as PNG / JPG / WebP / AVIF / HEIC | Any device |
stripMetadata({ keepOrientation: true }) | Remove EXIF / GPS / camera info by re-encoding | Any device |
edgeDetect({ kernel: "sobel", threshold: 80 }) | Sobel / Prewitt / Laplacian edge map | Any device |
watermark({ text: "Sample", anchor: "bottom-right", opacity: 0.75, fontSize: 28, color: "#ffffff" }) | Write text over the picture | Any device |
cannyEdges({ low: 50, high: 150 }) | Hysteresis edge detector — cleaner, connected edges vs the kernel filter | Any device |
threshold({ mode: "otsu", value: 127, invert: false }) | Binarize via fixed value, Otsu (auto), or local adaptive thresholding | Any device |
findContours({ low: 50, high: 150, minArea: 64, overlay: true }) | Detect blobs/shapes; returns exact count + per-region area, bbox, centroid | Any device |
detectShapes({ minArea: 64, epsilon: 0.04, overlay: true }) | Classify each contour as triangle / rectangle / square / circle / polygon | Any device |
findFaces({ overlay: true }) | Count the faces in a photo and return where each one is | Apple devices |
readCodes({ overlay: true }) | Read every QR code and barcode in the picture | Apple devices |
classify({ maxLabels: 10, minConfidence: 0.1 }) | Name what is in the picture (dog, beach, food…) with a confidence for each label | Apple devices |
photoDetails() | Date taken, location, camera and exposure, as data | Apple devices |
hideFaces({ style: "blur" }) | Blur, pixelate or black out every face in the photo | Apple devices |
scanDocument({ enhance: true }) | Find the page in a photo and flatten it to a straight-on scan | Apple devices |
smartCrop({ aspect: "1:1" }) | Crop to the part of the photo that draws the eye | Apple devices |
straighten() | Level a tilted horizon | Apple devices |
faviconSet({ includeIco: true, includeManifest: true }) | Generate web favicons: 16/32/48/192/512 PNGs + apple-touch + favicon.ico + manifest icons | Any device |
appIconSet({ platform: "ios" }) | Generate iOS .appiconset and/or Android mipmap density buckets with Contents.json | Any device |
trace({ colors: 16, detail: "medium" }) | Turn it into flat-colour vector shapes (as 2Vec does): a picture you can draw, with its SVG … | Any device |
save(name) | Write the picture where the scene keeps its files (.png, .jpg or .webp; a traced picture as … | Any device |
run(name, options) | Run any method above by its name | Any device |
available() | The names of the methods this device can run | Any device |
Related
- 2D functions: every 2D function, with pictures and examples
- 3D functions: every 3D function
- How a program is shaped: how a scene is put together