• fullscreen
  • ScatteredLetters.pde
  • /** 
     * Scattered Letters
     * by Algirdas Rascius.
     * <br/>
     * Click to restart.
    PFont font;
    float currentSize;
    void setup() {
      size(500, 500);
      colorMode(HSB, TWO_PI, 1, 1, 1);
    void initFont() {
      char[] chars = new char['Z'-'A'+1];
      for (char c='A'; c<='Z'; c++) {
        chars[c-'A'] = c;
      font = createFont("MyFont", 200, true, chars);
    void draw() {
      if (currentSize > 10) {
        if (!randomLetter(currentSize)) {
          currentSize = currentSize*0.95;
    void initialize() {
      background(color(0, 0, 1));
      currentSize = 300;
    void mouseClicked() {
    void keyPressed() {
    boolean randomLetter(float letterSize) {
      int intSize = (int)letterSize;
      PGraphics g = createGraphics(intSize, intSize, JAVA2D);
      g.background(color(0, 0, 1, 0));
      g.fill(color(0, 0, 0));
      g.textAlign(CENTER, CENTER);
      g.translate(letterSize/2, letterSize/2);
      g.text((char)random('A', 'Z'+1), 0, 0);
      PGraphics gMask = createGraphics(intSize, intSize, P2D);
      gMask.background(color(0, 0, 1, 1));
      gMask.image(g, 0, 0);
      for (int tries=50; tries>0; tries--) {
        int x = (int)random(width-intSize);
        int y = (int)random(height-intSize);
        boolean fits = true;
        for (int dx = 0; dx<intSize && fits; dx++) {
          for (int dy = 0; dy<intSize && fits; dy++) {
            if (brightness(gMask.get(dx, dy))<0.5) {
              if (brightness(get(x+dx, y+dy))<0.5) {
                fits = false;
        if (fits) {
          image(g, x, y);
          return true;
      return false;


    tweaks (0)

    about this sketch

    This sketch is running as Java applet, exported from Processing.



    Report Sketch

    Report for inappropriate content

    Please provide details if possible:

    Your have successfully reported the sketch. Thank you very much for helping to keep OpenProcessing clean and tidy :)

    Make a Copyright Infringement claim

    Algirdas Rascius

    Scattered Letters

    Add to Faves Me Likey@! 179
    You must login/register to add this sketch to your favorites.

    Click to restart.

    For more info see http://mydigiverse.com/2009/05/scattered-letters/

    Guigui plus+
    27 Apr 2009
    Very cleaver, beautiful artwork! One of my favorite open sketch!!! 8^°
    How do you prevent overlapping of the letters?? I couldn't quite get it from the code..
    awesome work
    Sinan, i think he checks the brightness value of the applied mask and also the size of each letter created; maybe. anyway, the final result is really an artwork.
    Algirdas Rascius
    28 Apr 2009
    Sinan, algorithm is actually not too complex.

    Look at function randomLetter. First of all temporary PGraphics is allocated (variable g), background is set to transparent, and random letter with random rotation is drawn in the center.

    Then another temporary PGraphics (variable gMask) is allocated. Image from "g" is copied to it, and then "expanded" by a few pixels using two calls to "filter(ERODE)". This second graphics objects acts as mask - random position is chosen and image in main view is compared pixel by pixel with the mask. If for each masked pixel, pixel in main view is white, it means that there is enough space to draw a letter to a main view.
    BRAVO!!! I like this too - very interesting - and the resulting picture is great. I have tried it also with a limited set of letters - it would be great to use it for a set of selected letters (a Name) - It would also be interesting to use the same algorithm for a small symbol (for me I would use musical instruments) or a set of small images instead of letters. I will aso try to add the code to save it as a pdf.
    colin mitchell
    29 Apr 2009
    Wow, this is simple and awesome, well done.
    Herbert Spencer
    20 May 2009
    simply great.
    Excelente! La programación es muy prolija y sencilla. Felicitaciones
    Shad Lillie
    8 Jun 2009
    Kyoko Masuda
    11 Jun 2009
    Love this!
    lifo fernandez
    9 Sep 2009
    Hi, awesome work.
    ive used it here: http://www.aulamultimedia.com.ar/
    i've changes the random characters for the ones for a-u-l-a m-u-l-t-i-m-e-d-i-a
    ive atributted to you on the bottom of the page
    i hope its ok.
    sorry for my english

    arquine wong
    7 Jan 2010
    Love it very much! good job!
    Is this possible with images ?
    Forrest Landry
    21 Dec 2010
    A great concept well rendered.
    rupert russell
    30 Oct 2012
    Nice work, When I download the code and run i I get the following error:
    createGraphids() with P2D requires size() to use P2D or P3D

    Using Processing 2.0b5
    rupert russell
    9 Nov 2012
    When I copy and paste the code I had to change this line

    PGraphics gMask = createGraphics(intSize, intSize, P2D);

    to this
    PGraphics gMask = createGraphics(intSize, intSize, JAVA2D);
    for it to run without an error.
    Emily Arec
    3 Dec 2014
    Interesting, clever...
    Hallo Algirdas,
    What if I wanted to throw random words onto the sketch window i.e. (in, ”, beholder, the, of, is, eye, “, Beauty, the) animate them, have them dance, move, fly around on wings or without like butterflies… on say buttercup background and then ask the user to make up a sentence/saying/ or some verse using those words (word puzzle of sorts). I would want them to come up with “Beauty is in the eye of the beholder” of course. Would the user be able to drag the words somewhere below to make up a sentence or how could this be done? How then could I reward the user for getting it right? Could I light up the saying and have it blink 3 times in acknowledgement? Any ideas how I could do this?
    You need to login/register to comment.