• fullscreen
  • harmony_web_remake.pde
  • // a processing remake of the web mode in mr doob's "harmony" procedural drawing app
    // http://mrdoob.com/lab/javascript/harmony/#web
    ArrayList history = new ArrayList();
    float distthresh = 60;
    void setup(){
    void draw(){
    void mouseDragged(){
      PVector d = new PVector(mouseX,mouseY,0);
      for (int p=0; p<history.size(); p++){
        PVector v = (PVector) history.get(p);
        float joinchance = p/history.size() + d.dist(v)/distthresh;
        if (joinchance < random(0.4))  line(d.x,d.y,v.x,v.y);
    void keyPressed(){
      if (key == ' ') {


    tweaks (2)

    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

    mitchell whitelaw


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

    A quick Processing remake of Mr Doob's wonderful <a href="http://mrdoob.com/lab/javascript/harmony/">Harmony</a> procedural drawing tool.

    Felix Woitzel
    10 Mar 2010
    cool one!
    12 Mar 2010
    this is really cool!

    i have a question, i am very new to using processing, and i was wondering
    if it would be possible to set a background image instead of the white

    i full-well admit that is a newbie question, but i am curious...
    Ashley Brown
    12 Mar 2010
    to load in a background picture you will need to have an image saved in the sketch folder, also the call to size(900,600) will only work if the image is the exact size - if not alter these parameters to suit the image

    PImage bg;
    //global variable

    //within setup
    bg = loadImage("what is my file called.jpg");

    //within draw

    job done :-)
    14 Mar 2010
    very well done .. i ve spent a long time playing with it :)
    thanks Felix & marz - but all credit to &lt;a href="http://mrdoob.com"&gt;Mr Doob&lt;/a&gt; - this is just a remake to test a hunch about his Harmony project.
    15 Mar 2010
    nice one!
    reminds me of a similar sketch, featured in an upcoming processing book:
    Shim Kyuin
    1 Apr 2010
    hi I'm processing newbie.
    I wonder why are you use this? -&gt; p/history.size()
    it is always 0
    Greg L
    6 Apr 2010
    I love it!
    Shim Kyuin: you're right, that's a mistake, it's doing nothing. It might be a hangover from an earlier iteration, or it might just be a mistake!

    Greg L: thanks!
    Ted Brown
    7 Jan 2011
    @Ashley & @tripleznine: It's actually possible to load the image first, then set the size of the sketch. Like so:

    bg = loadImage("image.jpg");
    size(bg.width, bg.height);

    @Mitchell: This really does making sketching with a mouse seem like a good pencil sketch. Thanks!
    Simon J.
    13 Jan 2011
    A cool and awesome drawing machine !!
    2 Thumbs up !!
    Jerome Prevost
    25 Jul 2011
    Really love this one !
    Well done
    fg k
    24 Aug 2013
    Shortness of code is also beautiful..
    6 Jun 2014
    You need to login/register to comment.