Most artists have a studio, where everything is messy and covered in paint. My studio is whatever computer I’m sitting in front of—sometimes just my iPhone!
But I do have a sandbox, where I try out new things while I’m working on my art. So, welcome to my sandbox, where everything is messy and covered in paint!!
Flipping Plates
Part of my design for Agita was that the “plates” would “flip up” and change color as the finger (or mouse) approached them. Changing the colors and moving the plates was fairly straightforward, but the “flipping” part was a bit trickier—I needed to figure out what axis the plate was being “rotated” about, as well as how much to move the corners, and in which directions.
I was having a lot of trouble visualizing how the code would be reflected on the screen. Building a little test helped me develop the code bit by bit, until I had what I wanted—how to transform the corners of the plates relative to the mouse/finger focal point. (The numbers displayed are the screen distance from the focus to the center of the plate, and the angle of the flip in radians—Javascript uses radians to measure angles, SVG uses degrees, go figure.)
Fish-Eye Distortion
Victor Vasarely’s geometric paintings and screenprints in his “Vega” series just seem to bulge right off the wall, and his color choices have long been an inspiration to me. Interchange is a direct homage—an exploration of what Vasarely might be created had the technology of today been available to him.
Originally I had multiple intermediate “stops” for the color blends creating the “bulge,” which more closely mimicked Vasarely’s effect, but I later simplified that down to three, to make editing the colors more intuitive. (A major horror of mine is creating artwork that requires a manual to operate!)
But the distortion of the grid was a real challenge. Thankfully, the D3 folks have published the code for their fisheye effect, and once I could see the math behind it, I was able to come up with my own approach, again slowly building up the code until I had what I needed.
Vasarely’s grids are not a full fish-eye distortion—only the corners of each plates are distorted, and the sides remain straight lines—so I only needed to transform the four corners. He also used a lot of circles, which transform to ellipses, but I haven’t found a source for the math that I can understand/convert into code, so the circle sits there, stubbornly unmoved.
Multi-Touch
I put together this snippet to explore screens that can track multiple touch-points at once.
Mice can have only one focal point on the screen at a time. Traditional computer trackpads are the same—touch them with a second finger and they either ignore it, or stop responding altogether (results vary). iPhones can respond to up to five touch points, but when you add one more finger, they freeze.
iPads and the large touch screens used in malls have ten-point touch, as does the Chromebook I was able to rustle up to use as a maquette, so you can use all ten fingers at once. (I haven’t yet tried testing what happens when you touch with your nose as well; I’m guessing they freeze, but they might also just ignore it.)
One feature of the “touches” is that while the device tags the touches in its list, it cannot keep track of which finger went where once it is lifted. So you often get unexpected results when you lift one or more fingers and retouch the screen—the disk that one finger was moving may jump to another finger. (Therefore any artwork relying on multi-touch needs to keep track itself of where the fingers were before they were lifted: I’m working on that.)
The end goal of this effort is to be able to incorporate two or three focal points in my work, though I’m still not quite sure how to use all ten fingers at once!
Spinning
I am currently working on a piece that requires the image to spin when swiped, but I also needed to figure out how to scale and keep the image centered within a smaller window. Transforming images in the SVG/Javascript world—moving, scaling, rotating—is particularly challenging since the transformations are applied in sequence and also apply to the previous adjustments, so it’s vital to get the order correct or it all goes haywire.
I still get some interesting behavior whereby spinning the arrow very fast can somehow result in it going the opposite direction. But after spending several fruitless evenings trying to identify what was going on, I’ve decided that is an entertaining little quirk—a feature not a bug!
Blends
I was always inspired by the magic of using blends with stencils in screen printing, and my print work makes heavy use of them in Photoshop—where stencils are called “masks,” since we have to rename everything for computers. And what any normal person would call a blend—one color gradually changing into another—is called a “gradient” in the computer world.
Photoshop provides five gradient tools:
For some reason, SVG, the most natural language for drawing things, only offers linear and radial. CSS, the Web styling language, offers linear, radial and conic gradients (yeah, they renamed “angular” too). So to draw many of my pieces for the interactive world, I need to use combinations of CSS with SVG that make some browsers choke on the apostasy.