Layers (a sketch for painting) updated 3 july 2017

edited July 2017 in Share Your Work

A sketch for painting (updated 3 july 2017).
1) Tool: ARGB random
2) Tool: BACKground creator
layers Layers github
'TAB' toggle menu on/off
'P' pencil
'L' Liner
'Q' quad
'C' circle
'E' eraser
'F' fill
Zoom with 'z' (then +/- to change magnify)
'U' Undo (10)
'R' Redo
'X' draw with X mirror
'Y' draw with Y mirror
'[' and ']' -/+ brush size
CTRL-drag on canvas --> change brush size
'Backspace' Clear active layer
'Space' toggle active layer visibility
CTRL-click on layer name to rename it
UP and DOWN arrows change order of layers
LEFT and RIGHT arrows change palette
'1..6' set active layer 1..6
Press SHIFT to pick a color from active layer
CTRL-click on +/- --> +/- 10
ALT-click on +/- --> +/- 100
'G' snap to grid (liner, quad and circle)
'K' constrain quad and circle to square and circumference
'ESC' change cursor color (white/black)
'H' to highlight cursor (for small brush size)
'.' to hide layer control
'I' Ink brush
'T' Stamp brush
'D' DynaDraw (Paul Haeberli 1989)
'M' Mixer brush 'N' Clone brush
'B' web brush
Alpha Paint (paint with alpha)
RGB Paint (paint with R,G,B channel)
HSB Paint (paint with H,S,B channel)
You can lock painted pixels and transparent pixels when paint.
Press '=' to reset values.
See keyboard.pde for all defined shortcuts.
Hints and bugs report are welcome :)
p.s. menu and more layers are cpu intensive... then draw with menu off.



  • edited February 2017

    Nice work ! The GUI is cool.
    I have noticed some fps drops while drawing (drop to 20).

  • @Castaneche: not optimized :(
    Try to draw with menu off.

  • You do not like this program? :)
    I'm looking for suggestions for improvement ... ;)

  • It is really good work. Thxs for sharing!


  • update 28 february 2017 :)

  • edited April 2017

    Update version 5 march 2017.
    With layers, undo, redo, snap to grid, X and Y mirror...

  • Kudos @cameyo! It looks pretty neat.


  • edited March 2017

    Very nice program. A couple minor suggestions:

    1. Permit keyboard value entry for colors, so I can type a value like 243.

    2. Support the use of Shift when drawing shapes and lines.
          This will draw vertical or horizontal or 45 degree diagonal lines and perfect squares or circles.

    3. Put a wire handle on your paint bucket icon to make is clearer as to the function.

    4. I may be missing something, the menu obscures a portion of the canvas. Either restrict the canvas to the visible portion or add a menu feature to hide/show or make it it's own window, permitting full visibility of the canvas. Or maybe make the menu a dummy layer. --- Never mind I found the Tab hide/show menu feature.

    A very nice program, I will be using some of the approaches myself. Thanks for sharing.

  • Minor bug: Typo, no uppercase w:

    if ((key=='w') || (key=='w'))

  • edited March 2017

    @jas0501: thanks for your hints.
    1) i find click (+/- 1), control+click (+/- 10), and alt-click(+/- 100) are good to change RGB and HSB.
    2) you can press 'k' when drawing to draw perfect square and circle. For lines you can snap to grid to allow 45 degree or similar.
    3) i will change the paint bucket icon :-)
    Feel free to use all the code you need ;;)
    I have posted a new version (see first post to download).
    - Added an HSB color selector (shift-click to select color, shift+right click to move HSB control, space to hide/show).
    - Added a function to 'j' key to draw a palette at mouse position with 11 colors ( from current color to old color).
    - now open and save functions are folder based (select a folder to save or open all the layers). More, you can load an image on a layer.
    p.s. see the keyboard.pde file to see all the shortcuts ;)

  • edited April 2017

    New version with DynaDraw brush (
    Paul Haeberli (1989):
    "The program Dynadraw implements a dynamic drawing technique that applies
    a simple filter to mouse positions. Here the brush is modeled as a physical
    object with mass, velocity and friction. The mouse pulls on the brush with
    a synthetic rubber band. By changing the amount of friction and mass, various
    kinds of strokes can be made. This kind of dynamic filtering makes it easy
    to create smooth, consistent calligraphic strokes."
    It's very fun.

    k -> hooke constant
    m -> mass value
    f -> friction (damping) value
    d -> ductus (pression/velocity brush size)
    b -> min brush size
    B -> max brush size

  • edited April 2017

    Nice work, I downloaded the project and I'd like to rewrite your HSBcontrol, making it bigger and faster.

    online example

  • Far better than mine :)>-
    Fell free to do what you want with it. :)

  • New version with Stamp brush, HSB bigger and faster, Manual (PDF).
    Have a nice day.

  • New version with Mixer/Smudge brush, better Stamp brush and Manual (PDF).

  • This project has really come a long way in a short time, @cameyo -- hard to believe that your "Pencil Kid" sketch was only two months ago.

  • @jeremydouglass: it would not have been possible without the help of people like you :)

  • edited April 2017

    New version with:
    1) Clone brush (with Aligned option) (right click to set clone start point)
    2) better Mixer/Smudge brush (linear smudge)
    3) select color from HSB control with right button click
    4) Manual (PDF) (press F1)

  • New version with:
    1) Web brush
    2) Stamp brush user defined (capture an area and use it as brush)
    3) More preset for DynaDraw (random too)
    4) Manual (PDF) (press F1 to view)


  • New version with:
    1) Web brush with a lot of options
    2) Manual (PDF) (press F1 to view)
    3) optimization of some brush

  • edited May 2017

    Woohoo! The "web brush" is a lot of fun.

    Have you considered posting this to a public github repository? Doing so would also archive the various releases of your program, and allow people to contribute back suggested improvements.

  • @jeremydouglass: yes, i must do it :)

  • edited May 2017

    New version with:
    1) Select Tool: select a rect area, move selected area with arrows.
    Now you can paint (or erase) only within selected area.
    Selection can be snapped on grid.
    It works with ALL the the painting tool.
    '0' --> Select tool
    'F3' --> enable/disable selection.
    2) some optimization

  • @cameyo

    May I suggest creating small clips showing each of your new features? It will be good for documentation and showing all these new changes. You can do this easily with the Video Export library. Thanks for sharing btw!


  • @kfrajer
    Here is a fast video with some infos: Download Layers video
    There is a PDF manual too with the code :)

  • edited May 2017

    New version with:
    1) github repository
    2) Stencil Tool: select tool, move selected area with arrows.
    Now you can paint only within stencil transparent area.
    The next version will allow to load user stencil.

  • News:
    1) github repository
    2) New icons with shortcuts
    3) Stencil Tool: move stencil (arrows), load stencil, create stencil from selection, show/hide -> F4
    The Stencil fills transparent pixels (not black or white).
    4) Selection with all painting tools: paint (or erase) only within selected area, show/hide --> F3
    5) Filler Tool can erase too

  • Excellent news. What is the link to the new github repo?

  • Layers github
    It is also within first post (after the screenshot image).

  • edited May 2017

    1) New tool: Confetti
    2) Copy& Paste works on selection or entire layer (useful to duplicate layer)
    3) Manual updated
    Good painting :)

  • News:
    1) New Tool: Shape (load and using SVG to paint too)
    2) Better Tool: Selection (copy, paste, draw, save, erase inside and outside)
    3) antipanic key (F12)
    4) english manual (automatic translation) :)

  • edited June 2017

    1) Tool: Alpha Paint (paint with alpha)
    2) Tool: RGB Paint (paint with R,G,B channel)
    3) Tool: HSB Paint (paint with H,S,B channel)
    You can lock painted pixels and transparent pixels when paint.
    Press '=' to reset values.

  • @cameyo do you know if it possible to project a color from RGB to HSB space or vice-versa? No need to implement in your application, but I am asking more about a concept, in case you have done it before...


  • edited June 2017

    @kfrajer What do you mean with "project" ? Convert from/to RGB/HSB ?

  • @cameyo Yes, convert from one color space to another one. If I have rgb(255,0,0) then what would be the equivalent hsb values.


  • @kfrajer This site has formulas and code to convert color data in different color spaces: easyrgb
    Anyway, i use the processing functions to convert between rgb <-> hsb.

  • Nice, thxs @cameyo.


  • edited June 2017

    @Kkrajer -- here are some approaches using:

    1. the Processing built-ins
    2. the java.awt.Color conversion methods

    Note that there are some subtleties to whether colorMode() affects the results and depending on what units you are using.

     * Color Conversions 
     * using Processing built-ins and java.awt.Color
     * 2017-06-10 Jeremy Douglass -- Processing 3.3.3
    // default RGB color mode
    // create a standard color
    color crgb = color(255, 127, 63);
    // draw it
    // extract either RGB or HSB values while in RGB colorMode
    // note that hue precision involves rounding
    println(red(crgb), green(crgb), blue(crgb));
    println(hue(crgb), saturation(crgb), brightness(crgb));
    // switch to HSB -- keep the units (255) the same, this matters
    colorMode(HSB); // colorMode(HSB, 255, 255, 255);
    // define the same color (almost) using HSB values
    // note that this is stored as RGB
    color chsb = color(14.166, 192, 255);
    // draw it
    // extract either RGB or HSB values while in HSB colorMode
    println(red(chsb), green(chsb), blue(chsb));
    println(hue(chsb), saturation(chsb), brightness(chsb));
    // import java color conversion methods
    import java.awt.Color;
    // switch to HSB using Java normal units
    colorMode(HSB, 1.0, 1.0, 1.0);
    // define almost the same color in normal units
    // note that this is stored as RGB
    color chsb2 = color(0.055, 0.753, 1.0);
    // draw it
    // use processing built-ins to extract the HSB values
    println(hue(chsb2), saturation(chsb2), brightness(chsb2));
    // convert those values back into an RGB color int
    // note that the java.awt.Color method ignores Processing colorMode
    // always takes HSB(1.0) and always returns RGB(255)
    int crgb2 = Color.HSBtoRGB(hue(chsb2), saturation(chsb2), brightness(chsb2));
    //draw it
    // switch to RGB(255) (explicitly reset to default)
    colorMode(RGB, 255, 255, 255);
    // extract an array of normalized HSB(1.0) values
    float hsbvals[] = Color.RGBtoHSB(255, 127, 63, null); //,%20int,%20int,%20float[])
    println(hsbvals[0], hsbvals[1], hsbvals[2]);
    // switch to HSB(1.0)
    colorMode(HSB, 1.0, 1.0, 1.0);
    // create a new HSB color with normal values
    // note that this is stored as RGB
    color chsb3 = color(hsbvals[0], hsbvals[1], hsbvals[2]);
    // draw it


  • News:
    1) Tool: ARGB random
    2) Tool: BACKground creator

Sign In or Register to comment.