I had the opportunity to take a JavaScript course at RISD (Rhode Island School of Design) this year to grow my JavaScript skills. We covered some common JS libraries like jQuery UI, and Processing.js. One of the goals of the class was to give Artists the tools they need to build highly interactive digital experiences.
Tools
Micro User Testing, User Interface Design, Rapid Prototyping with JavaScript, Hand coded HTML/CSS, portions of JS/jQuery, UI Kit
The Concept For The Cairn Project
I had become fascinated with Cairns while hiking in the White Mountains with some friends, the mystery and lore stuck with me when I came back to civilization. I wanted to bring a piece of that experience back with me and share it with others.
My goal is to honor the tradition of Cairn building, and to see if that tradition could be complimented by a digital interactive experience.
I wanted the interface components to be beautiful to look at. The pebbles stones and rocks used in the outdoor Cairns can be oblong, chunky, smooth, or cracked. To capture that in my rendering I went to my sketchbook with charcoal to build texture for my Cairn.
After I crafted the individual pebbles for the Cairns, I investigated JavaScript libraries to use to build interactive objects that could be clicked and dragged. My code was very crude. I was more familiar with HTML and CSS, so I did work there first. I built out the front end concept before the logic was in place for interactivity. I was able to find some examples of “Drag and Stack” UI that used HTML5 canvas, but quickly moved out of my depth. I didn’t want to built something that I didn’t understand, and many of the libraries I skimmed were pretty dense. All of the HTML and CSS was hand coded.
I added the pebbles in a row at the bottom of the screen after sharing the first prototype above. The canvas to stack the pebbles was above that, and the new pebbles appeared there after they were added.
