pictures.js
JavaScript 2D and 3D graphics and games, no HTML needed

Change the code and press Run (or Cmd/Ctrl+Enter). The scene runs in your browser, straight away. Click or tap a scene to give it the keyboard.

Just start coding

The smallest scene is four lines. draw() is called every frame, background paints the picture and circle draws a circle in the middle of it. There is no page to write, no canvas to find and no loop to set up.

function draw() {
  background("midnightblue")
  circle(width / 2, height / 2, 80, "gold")
}

To make it move, keep a number and change it in update(dt), which is called before every draw(). Change the 200 and the circle crosses faster. This scene is the first tab in the box above.

let x = 0

function update(dt) {
  x += 200 * dt              // 200 points every second
  if (x > width) x = 0       // off the right edge: start again on the left
}

function draw() {
  background("midnightblue")
  circle(x, height / 2, 40, "gold")
}

Keys, the mouse, touch, sprites and games come the same way, a few lines at a time: the docs start with these steps. For everything the plain functions do not cover there is ctx, the web's own 2D drawing surface.

pictures run hello.js

pictures build hello.js -o site/

run shows the scene and runs it again each time you save the file. build makes a folder of plain files, with the pictures the scene loads beside it. The scene's code calls the canvas directly, so it runs at the browser's own speed.

The same shape as Pyctures

setup(), update(dt) and draw(), keys and mouse, Sprite, await frame() and three.js as THREE are the same in both libraries. Learn one and you can read the other; a scene comes across with little more than its syntax changed.

x = 0

def update(dt):
    global x
    if "ArrowRight" in keys:
        x += 200 * dt

def draw():
    ctx.fill_style = "#102030"
    ctx.fill_rect(0, 0, width, height)
    ctx.fill_style = "tomato"
    ctx.fill_rect(x, height / 2, 50, 50)

let x = 0

function update(dt) {
  if (keys.has("ArrowRight")) x += 200 * dt
}

function draw() {
  ctx.fillStyle = "#102030"
  ctx.fillRect(0, 0, width, height)
  ctx.fillStyle = "tomato"
  ctx.fillRect(x, height / 2, 50, 50)
}

The full guide: bringing a Pyctures scene across. The Python library: Pyctures.

Put scenes on your website

Each scene is a <div> naming a JavaScript file. Its canvas fills the box and follows its size. A page can hold as many as you like, and each keeps its own names.

<div data-pictures-src="balls.js"></div>
<div data-pictures-src="knot.js" style="height: 420px"></div>
<script type="module" src="pictures/pictures.js"></script>

Built into Circuitry

In Circuitry's code editor a JavaScript scene shows its picture in a preview beside the code, on phones, iPad, the web and desktop. The preview follows the code as you type, and the footer's video button records it to an .mp4 at a steady 30 or 60 frames a second.

Demos

Pick one to run it in the box above, with its code.

Moving

2D · JavaScript

Follow

2D · JavaScript

Spiral Garden

2D · JavaScript

Torus Knot

3D · JavaScript

Space Rocks

2D · JavaScript

Brick Breaker

2D · JavaScript

Star Catcher

2D · JavaScript

Wave Grid

3D · JavaScript

Cube Spiral

3D · JavaScript

Starfield

2D · JavaScript

Documentation