🎨 Pixel Art

Create tiny pixel art images using text! Each character in a string becomes a colored pixel. Perfect for making game characters, items, and icons without loading any files.

createImage(rows, colorMap)

Creates a pixel art image from an array of strings and a color map. Each character in the strings maps to a color. Use '.' or space for transparent pixels. Colors can be any CSS color — names like "tomato", hex codes like "#ff0000", or rgb values like "rgb(255, 0, 0)".

Parameter	Type	Description
`rows`	`string[]`	An array of strings — each string is one row of pixels
`colorMap`	`object`	An object mapping characters to colors — names ("red"), hex ("#ff0000"), or rgb ("rgb(255,0,0)")

Returns: A PixelImage you can draw with drawImage()

Tip: Keep your pixel art small (5-10 characters wide) and use scale to make it bigger. This way it stays crisp and retro-looking!

let heart = createImage([
  ".R.R.",
  "RRRRR",
  "RRRRR",
  ".RRR.",
  "..R..",
], {
  "R": "tomato",
});

function setup() {
  size(400, 300);
}

function draw() {
  background("midnightblue");
  drawImage(heart, 150, 80, 10);

  fill("white");
  textSize(16);
  text("Pixel art heart!", 140, 250);
}

drawImage(image, x, y, scale?)

Draws a pixel art image at a position on the canvas. Use scale to make it bigger — each pixel becomes a square of that size.

Parameter	Type	Description
`image`	`PixelImage`	The image created with createImage()
`x`	`number`	X position to draw at
`y`	`number`	Y position to draw at
`scale`optional	`number`	Size of each pixel (default: 1)

Tip: Scale 1 means each pixel is 1x1 (tiny!). Scale 5 means each pixel is 5x5. For most games, try scale 4-8.

let alien = createImage([
  "..GG..",
  ".GGGG.",
  "GGGGGG",
  "G.GG.G",
  "GGGGGG",
  ".G..G.",
], {
  "G": "lime",
});

function setup() {
  size(400, 300);
}

function draw() {
  background("midnightblue");
  drawImage(alien, 50, 100, 4);
  drawImage(alien, 150, 100, 8);
  drawImage(alien, 300, 80, 12);

  fill("white");
  textSize(14);
  text("Same image, different scales!", 100, 260);
}

getImage(name, colors?)

Get a built-in pixel art sprite by name. Returns a PixelImage you can draw with drawImage() — no need to design it yourself! You can optionally override colors using friendly names like "body", "outline", "eye", etc. Available sprites: dog, cat, fish, bird, heart, star, tree, flower, key, gem, coin, brick, player, enemy, rocket.

Parameter	Type	Description
`name`	`string`	The sprite name — "dog", "cat", "fish", "bird", "heart", "star", "tree", "flower", "key", "gem", "coin", "brick", "player", "enemy", or "rocket"
`colors`optional	`object`	Optional color overrides using friendly names — e.g. { body: "pink", outline: "purple" }. If you use a wrong name, the error tells you the available ones!

Returns: A PixelImage you can draw with drawImage()

Tip: Each sprite has its own color names. For example, the dog has: body, outline, nose, eye. The tree has: leaves, trunk. If you use a wrong color name, the error message will list the correct ones!

function setup() {
  size(400, 300);
}

function draw() {
  background("midnightblue");

  // Default colors
  drawImage(getImage("dog"), 30, 100, 6);

  // Custom colors!
  let pinkDog = getImage("dog", { body: "pink", outline: "purple" })
  drawImage(pinkDog, 120, 100, 6);

  let blueHeart = getImage("heart", { body: "dodgerblue" })
  drawImage(blueHeart, 220, 100, 6);

  let goldStar = getImage("star", { body: "orange" })
  drawImage(goldStar, 310, 100, 6);

  fill("white");
  textSize(16);
  text("Recolor any sprite!", 110, 250);
}