Layers (a sketch for painting) updated 3 july 2017

cameyo

A sketch for painting (updated 3 july 2017).
News:
1) Tool: ARGB random
2) Tool: BACKground creator
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 :)
cameyo
p.s. menu and more layers are cpu intensive... then draw with menu off.

Castaneche

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

cameyo

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

cameyo

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

kfrajer

It is really good work. Thxs for sharing!

Kf

cameyo

update 28 february 2017 :)

cameyo

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

kfrajer

Kudos @cameyo! It looks pretty neat.

Kf

jas0501

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.

jas0501

Minor bug: Typo, no uppercase w:

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

cameyo

@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 ;)
cameyo

cameyo

New version with DynaDraw brush (http://www.graficaobscura.com/dyna/)
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.
cameyo

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

prince_polka

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

online example

cameyo

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

cameyo

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

cameyo

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

jeremydouglass

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.

cameyo

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

cameyo

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)
cameyo

cameyo

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)

cameyo

cameyo

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

jeremydouglass

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.

cameyo

@jeremydouglass: yes, i must do it :)

cameyo

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

kfrajer

@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!

Kf

cameyo

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

cameyo

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.
cameyo

cameyo

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

jeremydouglass

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

cameyo

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

cameyo

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

cameyo

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) :)

cameyo

News:
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.

kfrajer

@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...

Kf

cameyo

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

kfrajer

@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.

Kf

cameyo

@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.

kfrajer

Nice, thxs @cameyo.

Kf

jeremydouglass

@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
 */

translate(30,30);
// default RGB color mode
colorMode(RGB);
// create a standard color
color crgb = color(255, 127, 63);
// draw it
fill(crgb);
rect(0,0,10,10);
// 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
fill(chsb);
rect(10,0,10,10);
// 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
fill(chsb2);
rect(0,20,10,10);
// 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
// ...it always takes HSB(1.0) and always returns RGB(255)
int crgb2 = Color.HSBtoRGB(hue(chsb2), saturation(chsb2), brightness(chsb2));
//draw it
fill(crgb2);
rect(10,20,10,10);

// 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); // docs.oracle.com/javase/7/docs/api/java/awt/Color.html#RGBtoHSB(int,%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
fill(chsb3);
rect(30,20,10,10);

cameyo

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