Heart Space: 2D Meets 3D

Inside Heart Space

Covid-19 had drastically altered the presence of visual and studios arts. For one, it’s in the name: visual and studio arts. It’s meant to be seen by eyes, heard by ears, experienced by bodies, and even sometimes felt by fingers. Following the guidelines of social distancing and no large gatherings in closed spaces, this makes it rather difficult to have a real showing.

This is where my artistic journey (conference project) begins — how can I give my audience the most real 3D experience over a 2D screen among a pandemic? Thus I give you, Heart Space: a computer. The Processing sketch runs in a 1400 by 800 pixel window, yet I prefer to thing of my sketch as virtually limitless in its 3D nature. The viewer is presented with a front facing view of my digital room: a three walled, homemade museum. The viewer is also able to manipulate the camera view by either scrolling up and down to zoom in or out, and by dragging the mouse to spin the view on their axis. The video at the bottom of the page will help demonstrate this.

An ariel view of the sketch

Although the piece was made for my Art From Code class, it is honestly a culmination of all the knowledge I have garnered from my first semester in college. I explored humanity’s nuanced and layered relationship with the body (from my Sociology of the Body class), and was furthered by own intellectual journey selling my childhood home and moving across the country to Sarah Lawrence. Essentially, this piece is a culmination of all the change I have encountered in my first semester in college — whether or not that was good change or bad change, for binary’s sake.

Using three main panels (the walls), I channeled my inner (original) photographic background to produce a triptych. The photos used to create the collages are all my own. I began with a baseline sketch on a large, idea-stimulating white board (thanks Heimbold!),

My brain dump of a half baked idea at the time

Pictured above is the second iteration of my “brain dump.” The first version is by far much, much less clean than this. That’s the artist’s way I guess.

After some more marinating of my ideas among my proposed, broader themes surrounding the home, displacement, exploration of the body, and change versus time, I began to code. Well not really, that was more like the third thing I did. I posed for pictures in front of my camera + tripod, interested those into Adobe Bridge and Photoshop to edit / scale them properly as png’s, then I began to develop my code. This was by far the most drawn out (and frustrating) process of my artistic journey. Computer programming is a very picky activity — every detail matters. And not just the details themselves, but the order of each and every one too. No semicolon or parentheses or forward slash can be misplaced, otherwise the whole thing comes toppling down on itself. Okay well, that is a little dramatic. “The whole thing comes toppling down on itself,” essentially means that although one slight error in your code will prohibit it from running, usually the integrated development environment (Processing in my case) is smart enough to recognize at least where and what the error is. The key then is figuring out how to fix the error and still get your code to run properly.

This was specifically tricky for myself and my code because a lot of what I was coding was new material to me. I only began learning JavaScript with Processing at the beginning of the semester. And if you’ve read any of my previous articles, you’ll know all of my prior (and limited) computer programming experience has been a flop. So after only being familiar with this interface for a few months, I now also had to launch myself into the render world of 3D (P3D). After a lot, A LOT, of trial and error, Daniel Shiffman articles, and Processing forum threads, I finally did manage to get the hang of the 3D world.

To the left is a sample of the code from the middle panel. You can see everything runs on the x and y axis. Thus, it is impossible to triangulate the exact position in a sketch without guessing and checking first. If I want my ellipse at a particular spot in the bottom right hand corner of my sketch (600 by 600 pixels), I may start with the ellipse at (400,400). But that may be not far right enough, so then I move it to (500,400). Programming is a game of seeing and doing, and guessing (calculated guessing) and checking. You’ll get it where you want it to be eventually, you just have to have the patience to play with your code to get it just right. This becomes more and more complex as more layers and rotations are added too.

Although I didn’t begin in 3D — my three “walls” of collages were each made in a separate 2D processing sketch that would eventually be saved as individual png’s to be rendered as “textures” in my final 3D sketch. It’s like I painted each individual piece in the triptych, and then packaged them up neatly to be brought to the gallery, to be hung and shown. That “hung and shown” part is a little more complex though. This was then the creation of my 3D space. You can see what I began with below: a box. That’s it — a two pixel stroke of a noFill() cube. As simple as it looks, the code behind this probably took me several hours in total to comprehend and render.

My original vertex drawing in 3D

So this is my “gallery,” at least I thought so. When it came time to transfer my collages onto their respective walls, I ran into more problems than I expected. Rather than taking the time to understand my errors to their full extent and try to problem solve them, and just scrapped them started from scratch. Sometimes this is what I have found needs to be done — when the problem has become so intertwined with a plethora of potential solutions, it is best to just start over to take things step by step. This allows me to make sure each individual line of code works as they build on each other, rather than being stuck with a web of code and trying to find the one, nuanced error buried in it.

With the help of the internet and my don, I finally got my code up and running. All the individual pieces were complete and packaged, now it was time to put the show together. This was the best feeling in the world; to press command R and see the completed sketch of my code running as I envisioned it! I scrolled down to zoom in with my track pad, and held + dragged my mouse to shift the camera’s perspective. It worked! I had created my own 3D space in which I could bring viewers “into” my art. Although it’s not what I had originally envisioned, I was and still am extremely proud of the work that I have produced. Thus I give you, my conference project: Heart Space.

The grand tour — a screen capture — of my final Processing sketch

Some alternate views:

Comments, questions, concerns? Email me at lkalotihos@gm.slc.edu or visit my website at lenakalotihos.com.

Author: Lena Kalotihos