Lego Mosaics

HTML5 Live Code NYC

Joe Stanco


Concept Inspiration

Lego Albums Tumblr

by Harry Heaton

Design Inspiration

LEGOlize yourself PSD

by Ronald Hagenstein


Mosaic Effect

 Pixastic.process(img, "mosaic", {blockSize:10});

  • Pixastic Effect
  • Brick size = 1/40 of image width


 canvas.getContext("2d").createPattern(img, "repeat");

  • Prototyped with PNG image
  • Used a scaled version of original image for tiling

Rendering Steps


  1. Apply mosaic effect, then add to stage as bitmap
  2. Draw stud image on scratch canvas and scale it
  3. Get data URL of scratch canvas and set as image source
  4. Use loaded stud image for pattern fill on stage canvas

Stud Illustration

  • Scaled image causes excessive aliasing
  • Create vector version in Illustrator
  • Export as canvas commands using Drawscript


canvas.getContext("2d").globalCompositeOperation = "multiply";

  • First attempt: Multiply Only
  • Second attempt: Multiply + Lighter

Rendering Steps


  1. Apply noise reduction and mosaic effects
  2. Draw base stud shape and use as pattern fill
  3. Draw highlight stud shape and use as pattern fill
  4. Draw grid lines on stage canvas
  5. Get data URL for stage canvas and set as image source

Scaling is Lossy

Draw at target size rather than scale

Scaled Vector       Drawn Vector

Brick Size

  • 1/40 ratio is not a panacea
  • Too small for big images
  • Too big for small images

Define breakpoints for min and max brick size
thresholds: [   { maxImageWidth: 300, minBrickSize: 10, maxBrickSize: 15 },  { maxImageWidth: 1200, minBrickSize: 15, maxBrickSize: 26 },  { maxImageWidth: 1600, maxBrickSize: 36 }]

Harder, Better, Faster, Stronger

Thank you!

Lego Yourself

By Joe Stanco