Tag Archives: art from code


Finished Product!

Finished Product!

I should start by saying when we were assigned this project I wanted to throw up a little bit. I was still trying to figure out how to open Atom correctly, and now I had to code a self portrait? It seemed impossible. Nevertheless, she persisted! I went into the assignment thinking, I just have to get something on the page, essentially. I wanted to be representational mostly because I think if I went the abstract route, I wouldn’t have gotten as much out of it. Of course, I could have gotten as elaborately abstract as some of the student work I’ve seen in class, but I wanted to have a very clear goal in mind when creating my portrait, and for me it was best for that goal to be a representation of my self.
Hair Optional

Hair Optional

I am admittedly vain. I take a lot of selfies, so the idea of a self-portrait was not new to me, but coding one of course, was. So my aim was to get as close to a semblance of my face as possible in the given time and while still trying to figure things out. I had a thought while I was doing the Response exercises that an ellipse that tracks the mouse kind of resembles the shape of my naturally curly hair. I had thought about my portrait before that point, and mostly avoided thinking about how I was going to represent my hair.  
Playing with Response from the Ch. 5 Exercises

Playing with Response from the Ch. 5 Exercises

My hair, like coding, has and is taking a long time to figure out. I have played with many variables over the years—different products, brushes, tactics—and figured out what is best to keep my hair healthy and looking decent. Hair tangent aside, I took the idea of response and applied it to my hair both to mimic the shape and the idea that it is going to be different every day, but follow the natural curl pattern. With my portrait, it will look different based on the viewer’s interaction, but will follow the pattern of working with my ellipse. In terms of artists, I looked in the direction of Mondrian. I think his self-portrait is fairly straight forward, and his lines are pretty defined. That’s the same approach I took, half from a learning point, and half because that’s how my brain thinks whenever I go to draw something. I think in defined lines and shapes rather before I consider things like depth and perception. And again, I avoided abstraction. The interaction with my portrait is very expressive. Viewers are able to play with my hair and imagine what it’s like playing with my actual hair. In my reality, my hair is often an indicator of how my day or week is going, and you can take that approach when interacting with my portrait. You can try to make controlled movements, or you can just scribble and throw it around. Another aspect I thought about was my eyebrows. They probably took the longest to code because I was doing a lot of trial and error with my vertexes. I would move one one way, and get an eyebrow that I thought made my face look too sad. Or I would bring it up too high, and it would be too inquisitive. I went for a mostly neutral face, so the eyebrows had to be kind of perfect.  
Too expressive—I'm not the Rock

Too expressive—I’m not the Rock

I think the most surprising thing honestly was that I did it. I struggled a lot with coding at the beginning, and I’m still struggling, but I was surprised with my growth in this project alone. I tried some new techniques, and I’m pleased with the outcome. I think it wasn’t as hard and scary as I thought it was going to be, so that was a happy surprise. Maybe next time I’ll try the abstract route!



  Before creating my self-portrait I never considered myself an artist in any dimension or medium. However, as the end of my first month in Art From Code quickly approaches, I’ve found a budding appreciation for abstract artists and art not concerned with perfection. Thus, my self portrait is very much a reflection of the personal and intellectual growth of this last month after seeing Ian Cheng’s Emissaries and Paul Klee. These two artists in particular resonated with me because I find the idea of creating art that is ‘perfect’ and without flaw daunting and discouraging. In contrast, Cheng and Klee’s artworks don’t possess a final or fixed ending to me, which is what inspired among other thing, this self-portrait.


  In my self-portrait I worked primarily with animation, inspired by Emissaries and our continual work with loops. Before even writing down ideas or sketching, I was possessed with the idea of a moving, interactive face.  I personally feel like my face is a canvas that changes ever day, and in that same vein of thinking about unpredictability produced from finite code, I did not want my self-portrait to keep a single colored face, but rather have a moving and constantly updated face. Animation, however, came with it’s own challenges of course.

face03 face04

In my process sketches many things were discarded, left behind, changed, and tinkered with until reaching this final self-portrait. That is also one of the reasons I loved this assignment, because one change in code propelled both myself and the project into a different direction. Originally, I wanted the background cells to change color with each other down the y axis to create a synchronized and smooth gradient of color from top to bottom. While I was unable to achieve that originally desired gradient in my code, by experimentation and error I found that changing the background color while retaining the proportion of rgb values produced incredible patterns that I would have never imagined possible. My own stumbling through the code led me to produce a self-portrait I liked even more than my original idea. Every time I refresh the page I come across a new pattern and color scheme I’ve never seen before, and I was pleasantly surprised how I avoided perfection but found it again through the chaos of loops and animation.


Not everything was left up to chance, of course. I wanted to also include very stationary elements about my face and identity in my self-portrait as well: specifically, my eyes, beard, and nose, and ears. If given the opportunity I would also probably add eyebrows as well. I decided to only include one ear because of Paul Klee’s Senecio in 1922, with his woman with misshapen eyes. It was that characteristic of the artwork, along with its striking colors that drew me in.  I am very satisfied with my final project and how I was able to strike a balance between purpose, chaos, and infinity, much like Ian Cheng in Emissaries. For a someone who has never felt like an artist before I am very happy with my self-portrait from code.


2015 Inspiration Doodle      Myles Screen Face

When we first got this assignment, all I could think of is how difficult it is to sum up a person in one image. I knew that I wanted to go for both a literal and an abstract version of a portrait: both physically what I look like and also how I think of myself. My inspiration initially came from a doodle I did in the margins of my notebook back in 2015. It was a figure with a screen or a box for a face. So I started there. The doodle eventually became my head in a TV screen.

It then became the issue of what to put on the screen. I decided on a few things that reminded me of myself, or that I felt emotionally close to. The easiest screen to pick was a moth, an insect that I am fascinated by (which turned out to be harder to code than expected). It took a few tries but I eventually settled on something I really liked. (The curvy one on the left was the first draft, while the sharper, striped one on the right is the final draft.)

Moth First Attempt

Moth Final

The next screen I did was a manila folder with my name on it. For the past year-ish I’ve written a horror monologue series for Midnight Cabaret called The Myles Fyles. I’m more proud of those pieces of writing than any others I’ve ever done, and I figured a file would be a good way to preface the multiple screens to follow it. Next came the umbrella, because I always feel best when its raining. The last screen I designed was the mushrooms. I also study biology, and my main interest area is mycology. I also just think they’re interesting to look at. I don’t have in-progress photos of these because the design only went through one iteration.

The final little element to my self portrait was a way to highlight the more literal picture of me. So I went with another bug: a lightning bug.

 Lit Bug


In my sketchbook, I mostly worked on problems that surprised me with their complexity: the moth, my hair, and the lightning bug. It turned out to be far more difficult to turn bugs and the shape of my hair into forms that I could use for this portrait. Moth’s wings are usually curved in irregular forms that were practically unattainable. The solution to this problem became forgoing the curves altogether and doing a sharper and more stylized moth. The lightning bug was complex in ways I did not expect because I wanted it to be at an angle. This, in hindsight, was a bad idea. It ended up taking a lot of pure trial and error before any of the bug looked good. The final problem was my hair, which does not follow any regular shapes and trying to sharpen it looked wrong in comparison to the rest of my head. It eventually took four arcs to finally get something even close to my actual hair.


Screen Shot 2017-09-27 at 6.12.18 PM

  Before I put anything down on the page or in Atom, I knew that I wanted to have a basic face for my self portrait, and (since color is very intriguing and important to me) I wanted to have three color schemes — one from a photo of my choice and two photos from my two best friends (one photo for each of them). I wanted to do this both because of my love of art and because of my closeness with my friends. I didn’t feel that a self-portrait that only had colors I had chosen would be representative of myself, and I thought that if the color scheme changed with different forms of the face, it could show how I feel different and fill different roles with my friends. Before I decided these color schemes, I drew a basic sketch in my sketchbook.


This sketch looks pretty creepy in my book, but I loosely followed it for the beginning of my code. I got four colors from the photo I chose, and used those colors for the first iteration of the face.

  Screen Shot 2017-09-27 at 6.16.27 PM

    After a discussion with one of my housemates, I decided to give the nose more dimension by basing it off of the noses of Animal Crossing characters (which is fitting, because it is one of my favorite video games). She also encouraged me to add eyebrows and make them one of the focal points of the face. 

  Screen Shot 2017-09-27 at 6.06.43 PM

I was unsure about whether the hearts would be too much for the face, so I held off while I took the photos my friends sent me, drew four colors from each of them. I had some difficulty with the clicking mechanism to change the photos, but I made it work by setting it so that when a counter for each click went above 2 (the number with which the final color was indexed to), the cycle would start over so the colors would return to my original color scheme.

Screen Shot 2017-09-27 at 6.10.24 PMScreen Shot 2017-09-27 at 6.10.35 PM

I toyed around with the idea of hair, but decided that I liked a cleaner look better. However, I did decide to add another vertex to the eyebrows so that they would look more like my own and seem somewhat more realistic and also add the heart cheeks at low opacity. Eventually, this resulted in my final self portrait (the three different forms of which are shown below).

Screen Shot 2017-09-27 at 6.12.18 PM Screen Shot 2017-09-27 at 6.12.28 PMScreen Shot 2017-09-27 at 6.12.42 PM

Self Portrait

A Girl and Her Dog, A Dog and His Girl                                                                              

    Image 4

I find I have the most success in code when I follow an outline in order to then deviate from the initial structure. For this project, I chose to follow a code from a past student’s self-portrait to secure an outline. I then simplified it, as I am new to coding and am still looking to hone my basic skills.   (Image 1) shows my initial portrait, based on an outline provided by the example piece. At this point in time, I had started to experiment with my color palette and indentifying details. I knew I wanted to approach the portrait from a straightforward point of view, I’m looking to hone in on detail and precision before I branch out towards the abstract.

Image 1(Image 1)

After getting a feel for the outline of the portrait, I quickly structured the code to fit my necessities. I decided on a static image, utilizing realism for color and basic geometry for shape. By (Image 2), I’d created a visual representing my literal portrait. I then wanted to add some more detail to further represent my “self”.

Image 2

(Image 2)

As a passionate dog lover and mother to three-and-a-half year old Chinese Crested Davi, I knew I must include his image in my portrait. Being that Davi is my greatest love, I wanted to represent our bond through a kind of melting image, a blurred line between where I end and where he begins.Image 3

(Image 3)

As I’ve begun to experiment with coding, I find my most consistent interest lies in the use of color. Through the digital color meter tool, I colored myself and Davi using photographs as references. As I am not yet able to form exact shapes to replicate reality, I enjoy utilizing exact color temperatures.

  My self-portrait represents both my idea of self and my experience as a new coder.   Through the consistent color palate and basic geometry, I feel I am able to express what I hope to convey, a literal portrait with blurred lines between reality and imagination.


 Image 4

(Image 4)


Self Portrait

Screen Shot 2017-09-28 at 5.17.09 PM

final portrait without pressing mouse

Screen Shot 2017-09-28 at 5.18.37 PM

final portrait when mouse is clicked

Gabriel Eng

To generate an idea of how I wanted to approach this assignment, I first glanced through the examples posted on the shared google drive.  At first, it was just to figure out a template for my code but by the end, I had a pretty clear picture of what I wanted to create.  I didn’t want to make a completely accurate portrait of my facial features, but rather make it a bit more abstract.  This meant experimenting with unconventional shapes to create a basis for my facial structure and using different color schemes.

The first idea I had was to create a code that switched the facial expression through clicking the mousepad. Another was to create a portrait that cycled through multiple faces, with multiple facial expressions. Both of these influences derived from the examples posted on the google drive.  They are the images shown below.

 Screen Shot 2017-09-24 at 6.55.03 PMScreen Shot 2017-09-24 at 6.55.33 PM

In the portrait on the left, the eye brows are raised and the eyes get bolder through the mousePressed function.  I also like the lack of borders in the facial structure. What I found interesting from the portrait on the right was the split face and color scheme.  I used that split face idea in my piece to create divided sections of the face, enhancing its abstraction. I don’t know the names of these artists or if they were past student work, but both portraits are very unique in their own right.  From these portraits, I realized borders don’t necessarily need to be drawn out, the portrait can look more like a caricature or animation, and that even the slightest improvement, like making an outline bolder, can have a huge impact on the final output. 

 By making it interactive in this way, you can present a wide range of emotions or any representation, and create a more accurate depiction of yourself.  With one picture you are limited in how you display yourself and one picture can not define a person.  With multiple images appearing, you can exhibit more facial expressions or emphasize certain moods you may have. In my final portrait, I tried to show a clear change in expression that resembled aggravation, through the broken glasses and lowered eyebrows.  You can also see how the lips separate and my idea was to go further and place text in between but I was having difficulty with adding that. 

From this assignment, aside from the structure of the portrait, I gained a stronger appreciation for color schemes and their significance.  Thats what catches my eye immediately when I look at other portraits.  It makes it more interactive for the viewer because it gains attention. In past assignments I didn’t place much of an emphasis on the color scheme. I thought it was strictly about the image but from my self portrait, I realized how color schemes can drastically improve a piece.  The lightness of the shades in the face go well with the light greenish background of the canvas. 

What I also found useful for this assignment was the sketchbook. This is the first piece I’ve been using the sketchbook to create an outline or experiment with what I want to code.  Before hand, I was making things up along the way.  Obviously I still had ideas, but I never formulated them on to paper.  Also, by sketching first, I had a smoother time finding the right coordinates to set my code at, and the comparable proportions of the various shapes.

Conference Post Mortem:: Wave Clocks

The final collection of wave clocks I finished with for my conference work were a much more polished portfolio than I had started out with. In the beginning, I had five sketches, each representing five different themes. In the end I had cut down my collection to four sketches, each still with a separate theme. The finished sketches were also better versions of themselves given that they were more visually coherent. The idea behind this conference project was to create several themed wave clocks that successfully articulated the emotion behind their respective names through color and presentation. As finished pieces, I feel confident that each sketch does exhibit the nature of its real world counterpart. Pineapple
A still from Pineapple.

A still from Pineapple.

The first sketch I worked on was Pineapple. Given an interesting swatch of browns, greens, and yellows found on Adobe Kuler, I felt inspired to create a wave clock around the tropical fruit. From the start I knew I wanted to use an array to create a background pattern. To me this would reflect the pineapples patterned outer skin. With no other animated components other than the three wave clocks in center, the sketch was very simple, and there wasn’t much to tweak.

A photo of pineapple skin courtesy of Angelina Hills.


A still from Pineapple.

Saltwater was also somewhat straightforward. Already the wave clock motion was fluid so I wanted something else to compliment that motion in the background. I chose to have four different semicircles ebb inwards from the four corners towards the waveclock, simulating waves. With a great combination of rich blues, the sketch in the end was very smooth and peaceful, reflecting a current-like motion. Sarah

A still from Sarah.

The color palette for Sarah came from the fact that I had originally searched for Sarah Lawrence in Adobe Kuler, hoping that some art student had uploaded a color combination in light of their school spirit. However, nothing for Sarah Lawrence came up. Instead a vibrant palette for Sarah showed, with some beautiful reds and so I opted for that instead. Like Pineapple, nothing changed much since the first iterations over the course of me tweaking these sketches. The randomly generated lines from the four corners of the sketch mirror the components of Saltwater, but give a different feel. Rather than a pushing motion towards the center, the layered lines illuminates the borders drawing out the center of the piece which is a medley of red variants. Spider
A still from Spider.

A still from Spider.

Spider was initially a sketch called Greyscale, and I feel as if I’ve cut a corner by renaming the whole sketch to reflect its visual components. Upon finding that static polygons did not fit with the whole composition of a wave clock, I used a circle class to create a number of different animated circles that bounced within the borders of the sketch frame. The title ‘Spider’ seemed much more appropriate given the arachnid like motion at the center of the frail white lines that cover the sketch. The most extreme of all my sketches, Spider’s background components actually challenge the fluidity of the center piece by criss crossing the screen with layers of white. There is an actual interaction with both the background and the centerpiece when the rest of my sketches treat both as entirely separate entities. The grey wave clocks in the center actually look entangled in the white web created by the roving spheres. In the end, I chose to remove the sketch Moth from my compilation. What I wanted to achieve with moth did not fit the central theme of my project and so I left it out. Other than that, there were no other big upsets with the whole project. Every sketch successfully presented a combination of three wave clocks as the centerpiece with background components that complimented the wave clock motion and aesthetic. There was not really any particular final image I had in mind for any of these sketches. Despite the process of going through Adobe Kuler and finding themes for the sketches based on intriguing color palettes, the rest of my method was made up on the spot. I went with my intuition about what I wanted each sketch to have and worked with trial and error. An array for Pineapple, classes for Spider, the random function for Sarah, etc… Each sketch incorporated a different coding lesson we learned this semester. I don’t think it’s fair to say anything went wrong, because in the spirit of generative art, any outcome was accepted. In comparison to analogue installations, working with Processing allows a lot of room for error, and so with no specific end goal in mind, there was no positive or negative way to critically think about mistakes.