var textImg;

var itemImgs;

var itemRadius;

var items;

​

function preload() {

  //you could use either the image or just

  //draw whatever text into a offscreen canvas

  //using createGraphics

  //textImg = loadImage('donutText-02.png');

  //i forget if there is a function to

  //control the distance between letters but

  //it might be worthwhile to use

  textImg = createGraphics(768, 128);

  textImg.textSize(128);

  textImg.text('DONUTS!', 16, 128);

  itemImgs = [

    loadImage('donut-01.png'),

    loadImage('donut-02.png'),

    loadImage('donut-03.png'),

    loadImage('donut-04.png'),

    loadImage('donut-05.png')

  ];

}

​

function setup() {

  createCanvas(800, 256);

  itemRadius = .5 * sqrt(itemImgs[0].width *itemImgs[0].height);

  pack();

}

​

function pack() {

  items = [];

  var maxAttempts = 10000;

  textImg.loadPixels();

  for(var i = 0; i < maxAttempts; i++) {

    var rx = floor(random(0, textImg.width));

    var ry = floor(random(0, textImg.height));

    var alpha = textImg.pixels[((rx + ry * textImg.width) * 4) + 3];

    if(alpha > 0) {

      var j = 0;

      for(; j < items.length; j++) {

        var item = items[j];

        var dx = item.x - rx;

        var dy = item.y - ry;

        var dist = dx * dx + dy * dy;

        if(dist < itemRadius * itemRadius) {

            break;

        }

      }

      if(j === items.length) {

          items.push({

            x: rx,

            y: ry,

            id: floor(random(0, itemImgs.length))

          });

      }

    }

  }

}

​

function draw() {

  background(220);

  for(var i = 0; i < items.length; i++) {

    var item = items[i];

    image(itemImgs[item.id], item.x, item.y);

  }

}