an intro
rive (pronounced like 'five') is an .
Starting with a repeatable system of colors and/or triangles typically seen in geometric abstraction, rive employs generative art to break/split/rive those patterns–and the comfort we find in them–in slight, seemingly unintentional ways. With each subsequent split, our comfort fades as the artwork is shredded into barely recognizable fragments of a once carefully orchestrated pattern.
Not all rivings are created equal; some are subtle and barely visible while others are acute and violent.
Rive is made entirely from triangles. What holds it together is what breaks it apart.
​
pang reflects emotions that take control of our impulses – anguish, euphoria, obsession. By using crayon-like marks, the artworks convey the catharsis felt while drawing with a childlike abandon. To capture what gives such marks true feeling, the works deliberate the intrinsic movements, pressures, and angles shaped by hands in various moods. These qualities and their frenetic meanderings represent the infinite possibilities of where the crayon could go next – if only we could free ourselves from the layers of control we've built.
​
The contradictions we struggle with are reflected throughout the works: in the long, methodical, and mathematical path to creation that yields work that looks fast, free and unrehearsed; through the randomly-informed computer generation of art that feels human; and by the depiction of long-standing traditional techniques to help display the conceptual range of a young, innovative art movement still establishing its pivotal place in the canon of art. These tensions parallel the work's underlying concept, accentuating the suspicion that a learned fear of emotional expression might just be the source of our own pang.
​
Created in p5.js, pang is inspired by .
a note on crayon marks
​Each output uses 1.25 - 3.5 million (very tiny) points to create the stroke marks. When I originally created the pang crayon effect, it was a bit more complicated than necessary, and it resulted in me having to redo the code multiple times. This was especially challenging as we amped up the energy and intensity of pang.
​
​To get the details right, every few days I pulled out my kids crayons to study the stroke marks. One key piece to emulating natural movement was creating smooth variation within the strokes, particularly in their width (how the crayon is held) and density (how hard it is pressed). The strokes portray varying pressure by placing more points in a concentrated area, and varying width by varying the crayon stroke technique (see below). Both of these features are amplified through the angles of curves and the ending of lines, similar to what happens when drawing naturally. I was able to get this right thanks to the easings.net resources. I'd like to give a huge shout out to @amygoodchild for her What is Generative Art? article which introduced me to this resource.
​
When you look at the thumbnails of pang, you might consider the lines very thin for crayon marks. This is intentional as pang is designed for larger print. ​One unanticipated challenge with the points ​(which ​​create the crayon marks) ​​was that they were so small that they disappeared​ in the high-quality renders needed for large prints​. A huge thanks to @rich_poole for helping me figure out how to adapt the artwork to account for this.
​
There are 27 color palettes in pang, with just a few samples shared below. Each color palette has a probability of 1-6%. For explanatory purposes, I've locked all traits below—except for the one being featured—in order to highlight the differences.
color
The colors employed in rive are almost entirely generated through code with color combinations determined based on color theory. The only exceptions are the "Black && White" and "Black, White, && ..." colors.
​
In order to understand the descriptions below, please note that the hues within the color wheel range from 0 to 360. The hue 0 (pure red) is opposite of 180 (pure green).
​
hue
Each pang output can have up to two instruments applied, representing 7-14% of the crayon marks. @ajberni did a great job of emphasizing the importance of negative space, and ​we ended up using these instruments to activate this space by creating a transition in compositional density and a sparse contrasting mark that balances the main composition.
While the following samples do not combine the different instruments, this happens regularly in the outputs.
​
Below is a sub-sample of the options under the hue trait.
​
saturation/brightness
Similar to hue, saturation/brightness are applied in varying ways throughout the series. Initially, I had saturation and brightness independent of each other, but soon realized that this resulted in too many pieces losing their color when the saturation and brightness were applied in specific ways.
​
variance
​In developing the different paper options, we wanted the details to look realistic at larger print sizes. Some of these details are best viewed while zoomed in (i.e., in the second image below if viewing on a desktop device).
As we considered paper options, we decided collectors should be able to print on their own textured paper, as if the crayon marks were applied directly. Therefore, by clicking 'B' in live view you'll be able to render the output with a transparent paper setting.
​
color glitch
As I developed rive, I felt like an extra punch of color was missing, especially in the monotone pieces. When the glitch is turned on, it'll take whatever color is being used currently and switch it to the color on the opposite side of the color wheel. ​
​
The color glitch is always set to off for the Black && White; Black, White, && ...; Full Spectrum; and Complementary colors.
​
color glitch
​This determines the order in which the crayons draw. Each palette, which has ten colors, is divided into two sets (darker and lighter). This trait determines the order for how those sets are displayed in the artwork. We found that all of these approaches resulted in unique outputs which highlighted different characteristics of the respective palette.
​
Note that there are some color palettes which have dark colors (or all the same colors) on both sides of the palette.
​
palette shown: benevolent
orientation
We explored several options (e.g., banner, square) and ultimately landed on the classics of portrait and landscape. We hope this will allow for some unique and interesting ways to curate pang in a gallery.
palette shown: congruous
frame & frame definition
Sometimes you need a border.
When the border is on, it applies either a rough or clean definition to the frame. We wanted this border to be evident, but not too strict in how it is respected to enhance the hand-drawn technique. If there is no frame, frame definition is assigned as "N/A."
palette shown: placid
Printing
Whether printing at a scale that mimics real crayon strokes, or enlarging to accentuate their generative origins, pang will maintain its exactly intended composition and feel. By refining the algorithm and creating render efficiencies for the nearly 3 million carefully scattered dots, the algorithm is capable of outputting up to 15,000 pixels on the long side. Before exporting your piece, you may also turn off the background texture to prioritize the natural texture of your selected paper.
To make fine quality printing more accessible, Tender has partnered with one of the best fine art printers in the world to make exceptional pigment prints of fxhash pieces like pang. Each artwork is printed on quality Hahnemühle uncoated or coated paper (up to 42” on the short side) and safely delivered throughout the US and Worldwide. More details available through Tender.
Connect your wallet to http://fxtender.art and find the piece you own to order a print – every TENDER x Collaboration artwork will automatically receive a price 20% below their standard pricing.
.jpg)