Skip to content

Latest commit

 

History

History
191 lines (131 loc) · 5.72 KB

1-3.md

File metadata and controls

191 lines (131 loc) · 5.72 KB
Raw

DECODED Banner

Punctual Visual Workshop 1-3 - Different Output Targets (~1h)

Goals:

  • use outputs other than rgb to display
  • use arithmetic functions to combine values

Reference:

Setup Cells!

!presetview twocolumns
  • Left Cell: Punctual
  • Right Cell: Punctual

Different Output Targets

So far, we've explored the rgb output with it's RGB channels. Punctual has several more outputs that can be used for a variety of different visual effects

Individual colours

You can actually specify each of these individual colour channels as: red, green, and blue

circle [0,0] 0.25 >> blue;

alpha

alpha is an erase/overwrite channel that will remove any underlying layers when it's passed a value of 1

alpha works best when used in a higher numbered cell - cells increase in priority counted left to right, top to bottom

for this example, make sure both cell languages are set to Punctual

In cell [1,1] (left), evaluate:

1 >> blue;

In cell [1,2] (the right hand one)

circle [0,0] (osc 0.25) >> alpha;

Note: applying alpha in the higher numbered cell is important, alpha won't apply a visible change if these cells were swapped

rgba

rgba works very much like 3-channel rgb with the addition of a 4th channel alpha. The alpha channel functions similarly to the alpha output above, except it's operating on individual lines of output, rather than across the scene.

In this example, we have two different sized, and coloured circles with an oscillator changing the alpha channel only - how are they interracting?

circle [0,0] 0.6 * [0,1,0,osc 0.33] >> rgba;
circle [0,0] 0.3 * [0,0,1,osc 0.53] >> rgba;

Note: this output may very well replace the rgb output currently used by rgb at some point in the future!

fdbk

fdbk is a (currently) undocumented global output that affects how long a pixel should take to "fade out".

A value of 0 is the default state (pixel turns off immediately), and a value of 1 doesn't let the pixels fade out at all!

circle [osc 0.25, 0] 0.25 >> blue;
0.8 >> fdbk;

Note: This works best with moving elements

Arithmetic Operators

Basic arithmetic can be applied inside patterns (addition, multiplication, division, subtraction, exponentiation)

-- basic signal
circle [0, (osc 0.2)] 0.25 >> rgb;

-- addition
circle [0, (osc 0.2)] (0.25 + osc 0.2) >> rgb;

-- multiplication
circle [0, (osc 0.2)] (0.25*2) >> rgb;

-- division
circle [0, (osc 0.2)/2] (0.25/2) >> rgb;

-- exponentiation
circle [0, (osc 0.2)] (0.25**(osc 0.2)) >> rgb;

Special Arithmetic Operators

Punctual 4.0 has introduced some new operators, as well as changing the way operators behave when using with lists or multiple channel graphs

You can use + for non-pairwise list addition. For example

[a,b,c] + [x,y,z] === [a + x, a + y, a + z, b + x, b + y, b + z, c + x, c + y, c + z]

You can use the newly introduced +: for pairwise list addition, which is a lot simpler. For example

[a,b,c] +: [x,y,z] === [a + x, b + y, c + z]

You can use ++ to append two graphs in a way that preserves multiple channels of both graphs. For example

[a,b,c] ++ [x,y] === [a,b,c,x,y]

Comparison Operators

You can compare the output between two graphs, and take the values only from the graph that matches the comparison function (eg max, min)

-- max [graph] [graph]
circle [0, max (osc cps) (saw 1)] 0.25 >> rgb;

Punctual also has mathematical comparison operators (>, <, ==, >=, <=, /= and more) that return a "boolean" value ie 1 (true) or 0 (false)

Let's continue with the circle examples from above, and try the "equality" function ==:

circle [0,0] (osc 0.125) == circle [0.2,0.2] (tri 0.5) >> rgb;

What are you seeing here? Try identifying different sections of the image and determine what value you think the pixels in that section should have, based on the statement above

Apply the opposite "inequality" operator /= instead - think about how you expect the sections of the image to change, do they?

circle [0,0] (osc 0.125) /= circle [0.2,0.2] (tri 0.5) >> rgb;

Exercises:

  1. An rgb signal can be converted to an hsv signal (hue, saturation, value) using hsvrgb.

In this example the three elements of the list on the end of the code block now apply to hue, saturation and value instead of red, green, and blue. Try changing one element at a time to an oscillator, and describe what each does/changes

hsvrgb (circle [0,0] 0.25 * [1, 1, 1]) >> rgb;
  1. The arithmetic operations can also be applied to patterns themselves. Starting with the example code below, describe what happens when you replace <operator> in the code
(circle [0,0] 0.25) <operator> (circle [0.15,0.15] 0.35) >> rgb;
  • addition +
  • addition preserving channels of both graphs ++
  • subtraction -
  • multiplication *
  • division /
  • exponent **
  • > greater than and >= or equal to
  • < less than and <= or equal to
  • /= not equal to
  • max
  • min

Note: these last two will require putting the operator in a different position... can you guess where?

For Bonus Points

  1. In our alpha example, we subtracted a circle from a blue screen - can you find a way to invert this effect (ie subtract from alpha so you just get a blue circle) by modifying the alpha statement only?

  2. Can you create a raindrops on a windscreen/snow effect using oscillator(s), circle and fdbk?