Example: Tiles

Published

September 24, 2026



const tiles = [];
const TILE_SIZE = 30;

function setup() {
  createCanvas(600, 600);
  noLoop();
  loadTiles();

}

function draw() {
  background(0);
  stroke(255);

  for (x = 0; x < width; x += TILE_SIZE){
    for (let y = 0; y < height; y += TILE_SIZE){
      const tile = random(tiles);
      image(tile, x, y);
    }
  }

}


function loadTiles(){
  const halfSize = TILE_SIZE / 2;
  for (let i = 0; i < 4; i++){
    const ctx = createGraphics(TILE_SIZE, TILE_SIZE);
    ctx.background(255, 255, 150);
    ctx.noStroke();
    ctx.angleMode(DEGREES);
    ctx.translate(halfSize, halfSize);
    ctx.rotate(i * 90);
    ctx.fill("blue");
    ctx.triangle(-halfSize, -halfSize,  -halfSize, halfSize, halfSize, halfSize);
    tiles.push(ctx);
  }
}