graphics

use draw gives a canvas to paint on; show() puts it on the screen, natively in a window and in the playground on its canvas:

use draw
canvas(320, 200)
clear(white)
circle(160, 100, 40, red)
show()

Shapes: dot, rect, circle, line, label(x, y, words, color, size); colors red, rgb(…), hsv(…), with_alpha. Without canvas(…), show() takes a default size. Under WARP_NO_WINDOW=1 the picture is written as a PNG instead of a window.

Sizes

Sizes are properties; writing one resizes it:

canvas.width = 320      // the picture's pixels (a new, blank canvas)
window.width = 800      // the window showing it, in points; in the playground the frame of its paintings
print display.width     // the screen's, read only

A bare width or height is canvas.width (with a hint naming the three); a variable of that name stays yours.

Pixels and shaders

paint(pixels, width, height) shows a list of 0xAARRGGBB numbers. paint(shader) renders a WGSL shader to them, with the program's width and height (else the view's size); $time, $mouse, $mouse_down, $mouse_wheel (the wheel steps turned, up adding; $wheel works too) and $frame are there, any other $name reads warp's value of that name, and $mouse.x is the pointer's x ($mouse_x works too, with a hint), and $previous(at) is the color the shader left at that pixel the frame before (samples/graphics/shader_trails.warp):

let kept = max($previous(at.xy).rgb - vec3f(0.01), vec3f(0.0));

A mistake in the WGSL is a warp error at its line and column in the program, underlined like any other (probes/gpu/shader_error.warp):

Error("paint: expected `{`, found \":\" at 7:22")
  7 | 	fn level(band: f32) : f32 {
    | 	                    ^

Input and frames

on frame { … } runs each frame while the window shows. mouse_x, mouse_y, mouse_down are the pointer, mouse_wheel the wheel steps turned over the window since the start (samples/gpu/ringed_planet.warp zooms with it); key_down says whether a key is held, held_key names it (held_key == LEFT); with several held, each compares true, so held_key == LEFT and held_key == UP together steer diagonally (samples/events/arrow_keys.warp), and held_key alone names the last pressed. on key { … } and on click { … } hear presses, in the native window as on the page (key names: html). samples/graphics/finger_paint.warp draws with all of them.

Saving

save writes the canvas as drawn so far as a PNG: natively that file, in the playground a download.

save "painting.png"                // also: save canvas as: "painting.png", save(canvas, "painting.png")

On the GPU

Natively use draw draws on the GPU when a window is open (WARP_DRAW=cpu keeps the CPU path). Heavy maps of float lists move to the GPU on their own, in f32 with a one-time notice; @cpu on a map, block, function or program, or WARP_GPU=off for a run, keeps them exact in f64. samples/gpu/gpu_map.warp.