https://woodring.itch.io/patternshop tutorial and deck

patternshop

a compositing tool for cards and ps canvases as layers

https://woodring.itch.io/patternshop

reload if the video is not playing

tutorial and playable deck: https://woodring.itch.io/patternshop

direct download of deck: https://codeberg.org/woodring/decker.patternshop/raw/branch/main/patternshop.deck

project and readme, which is pasted below: https://codeberg.org/woodring/decker.patternshop/src/branch/main

see https://codeberg.org/woodring for more decker things

synopsis

It’s a module and several contraptions that emulate layered drawing in other drawing tools. Or, it can be thought of as “Decker mega-underpaint mode.”

https://woodring.itch.io/patternshop

1. make at least three cards

2. put the patternshop contraption on each of those cards.

3. switch to interactive mode.

4. press 0 (zero) on each of the cards to activate the contraption.

5. draw on the first card in interactive mode.

6. switch to the second card. what was drawn on the first card appears there.

7. draw on the second card.

8. switch to the third card. what was drawn on the second will be under the first.

9. et voila, layered drawing!

Why is this important? Imagine:

• card1 has a rough sketch.

• card2 shows card1, to trace over card1’s sketch.

• card1 is deactivated, automatically removing the sketch, without having to manually erase it from card2.

• card3 shows the outline of card2, to add shading without worrying about staying exactly in the lines.

layered drawing - how it works

patternshop is a contraption that combines multiple images into one. In another PS or other drawing programs, it’s what’s called layering. In graphics, it’s what we call compositing or image composition.

Another analogy is that it’s like old school cel drawing, for animation, where the scene is composed of several stacked layers of transparent celluloid.

The mode of operation is to draw on the patternshop canvas, which is a transparent drawing surface, in front of the card background. All of the active patternshop drawing surfaces are combined together - in a stack. Then, the combined stack is copied onto each card background of each card that patternshop is on. This provides the combined result on each layer - i.e., card.

Images are combined in card order. To change it so a drawing appears under another, reorder the cards in the Decker menu, i.e. File->Cards. Later cards in the stack appear under the ones in front of it. For n layers, make n+1 cards with patternshop on it. The final card will show everything together, by itself.

IMPORTANT: Drawing on patternshop requires interactive mode - not drawing mode. Decker drawing mode only works on cards. To use the Decker drawing tools, draw on a card then use the patternshop swap function to move the image to the patternshop contraption. Alternatively, use ps_layercake contraption to copy it.

When drawing on a card, with an image on the patternshop canvas, it will be under the canvas - which is what might be wanted for more accurate underpainting. Drawing on patternshop only supports the freehand pencil with custom brushes and patterns.

But, what makes patternshop different is that allows for drawing on the canvas and simultaneously seeing the card background underneath - to trace over it. It’s like Decker’s built-in underpainting, but with patternshop there’s an arbitrary number of underpainting layers.

Note: the only composite mode that patternshop supports is under. To achieve over, move the card to the front of the card stack. The other compositing modes that Decker likely aren’t used in practice by most people and are not included.

usage notes

• To save your work, save the deck. Everything is retained between sessions.

• Reordering cards to change layer combining order is immediate, after closing the card order dialog.

• The starting visibility of patternshop and ps_layercake is transparent for the canvas to provide tracing over the card background, by default. They can both toggle between “solid”, “transparent”, “invert”, and “none”.

• Everything is hotkey driven - for two reasons: (1) save screen real estate, but more importantly (2) when drawing, especially with a tablet, it is common to have a hand hovering over hotkeys or program the tablet for the hotkeys. It starts with a toolbar that can be hidden with q after learning the hotkeys.

  • Buttons for 4, Z, and X only work with hotkeys. They are visually present to show what they hotkey is.

• As noted earlier, there’s a second contraption, ps_layercake, which is an advanced rubberband/select box that knows how to work with patternshop contraptions and cards.

• The patternshop and ps_layercake contraptions can be used in any Decker project, as long as the ps module is copied over, too. They will not work without it.

• Switching to a card will composite (combine) all layers if there is an activate patternshop on a card. It only updates “on view”; i.e., changing cards or having an animated widget on that card. But, having an animated widget on a patternshop card will slow Web Decker down quite significantly. While drawing, I do not suggest having animated widgets on the cards.

controls for patternshop

patternshop home row

1: toggle canvas visibility between “solid”, “transparent”, “invert” and “none”. starts in “transparent”. “solid” will hide the card background and “none” will hide the canvas.

2: toggle to the last brush used. starts with brush “1”.

3: toggle to pattern 0 and back to the last pattern used.

4: eyedropper tool that picks a pattern under the cursor. picks from the canvas first and the card second. does not change the pattern if it is pattern 0.

5: goto a card named palette. to be used in concert with 4, w, e, and ps_layercake’s custom brush function - to store patterns and brushes on a card, like a real-world palette. the palette card can contain whatever you wish - as long as it has a patternshop contraption on it. pressing 5 when on the palette card returns you to the previous card.

after learning the hotkeys or needing to temporarily move it

q: hide the toolbar

palette support

w: copy the brush from the palette card.

e: copy the pattern from the palette card

off patternshop home row

6: swap the image between the canvas and the card. to use Decker drawing tools - draw on the card and then swap it to the canvas.

7: erase the canvas.

8: set the brush. it will ask to provide a brush number or custom brush name. 2 swaps between two brushes.

9: set the pattern. it will ask to provide a pattern number in. for quicker pattern changing, use 4 and 5 with 3.

0: activate/deactivate the patternshop on this card. once activated, it will show all other active patternshops combined in card order. to remove a layer, deactivate it with 0. IMPORTANT activating a pattershop will ERASE any existing card background image.

undo and redo

z: infinite undo for canvases - up to available memory. no effect for cards. TODO need to put an undo limiter in to not accidentally run out of memory.

x: redo after undo. drawing after redoing will clear the redo stack.

ps_layercake support

r: make a ps_layercake at 100,100

ps_layercake hotkey to support patternshop

y: remove all layercake instances from the card. IMPORTANT: if there is more than one on a card, it will remove ALL of them.

controls for ps_layercake

ps_layercake is a select/rubberband box companion for patternshop. It can copy and move selections around the canvas and card background, more selectively than the patternshop swap (6) function.

It works in interactive mode, like patternshop. The upper-left box moves it and the lower-right box resizes it. All of the other controls are hotkey driven, like the rest of patternshop.

Also, it can be copy and pasted to any other card, just like any other contraption, moving the copied image between cards.

layercake to-and-from the card background

c: copy card background into layercake.

v: paste layercake onto card background.

n: merge card background into layercake. this is different than c, because it treats pattern 0 as transparent.

m: merge layercake onto card background. like n, this is different than v, because it also treats pattern 0 as transparent.

layercake to-and-from the canvas

d, f, h, j: copy, paste, merge into, merge onto for the canvas layer, instead of the card background.

other functions

t: toggle layercake visibility between “solid”, “transparent”, “invert” and “none”.

g: erase the layercake image contents.

b: save the layercake image contents as a custom brush. it will ask for a name.

y: remove all layercake instances from the card. IMPORTANT if there is more than one on a card, it will remove ALL of them.

on patternshop to support layercake

r: make a ps_layercake at 100,100

https://woodring.itch.io/patternshop