Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.


The intersection between art and technology

Many developers are also artists as they too are creators and doers. SilverStripe developer and artist, Juliet Brown, expands on her talk about the intersection of art and technology from the 2018 Decompress conference in Melbourne.

Read post

The combination of art and technology is becoming more and more of a common concept. There are more developers as artists and artists as developers. I am a web developer and come from a fine arts background. I have always been interested in traditional and unconventional methodologies as an artist, such as drawing, collage, painting and coding.

During my years as a developer, a question I am often asked is, how are you a developer when you come from a fine arts background?

For me, I see many parallels between technology/programming and art. I see my IDE as a canvas and code as a raw material. It’s just another medium for building/creating and solving problems. 

I enjoy challenging how we perceive art and the 'artist’ and pushing the boundaries of what art is and what art can do. We can often think of programming as unintuitive, precise, and methodical, and that art is the contrary, a frantic expression of some primal creative urge. Yes this is true for both programming and art, but not entirely. One thing that programmers and artists do have in common is that they're both makers/doers, which is ultimately a creative pursuit.

screen from Juliets presentation of code

What does it mean to be creative?

This is quite a big topic to cover so here are a couple of my many observations in the workplace and through my personal experiences. I believe creativity is fundamental to the development of technology and the progression of society. To me, creativity means challenging ‘the’ perspective in a new way.

Creativity means facing your fears and mapping out a thousand different routes to reach one destination. It means searching for inspiration in even the most mundane places, and most interestingly, finding similarities and differences between two completely random ideas.

Why is creativity important?

  • Creative flow

  • Using your brain in different ways strengthens it

Creative flow:

Creative flow, otherwise known as “flow state”, is when you have full immersion in your tasks that you are fully in the present moment, losing track of time, and being fully engaged. When we are in this flow state, neuro chemicals augment the creative process which mean we can take in more information, creating stronger pattern recognition and so amplifying our learning ability. These are known as the most addictive states of being, which creates purpose and happiness and as we know, happiness is contagious. As humans this is what I believe we are all striving for.

diagram of creative flow and all the states you can be in

Using your brain in different ways strengthens it:

The brain is a beautiful and powerful pattern organizing machine. Learning new skills and breaking the patterned routine in your life not only adds to the brain's collection of abilities, but it forces the brain to continually restructure its "filing system" and prevents "thought ruts" from forming. This can also help fight burnout and reduce stress.

In my experience, creative people such as artists are often very logical thinkers. Challenging all areas of their brain... however, there logic is not always based on the status quo, as always being right. It’s about establishing logic that makes sense to the creative thinker and their audience. For example Leonardo was a painter and sculptor. He was also an engineer, architect, mathematician and inventor. He used well balanced logic and imagination to come up with, at least on paper, such inventions as the bicycle, helicopter and airplane.

Push yourself a little each time:

Challenge + Skill = Creative Flow

When it comes to programming, I’m particularly passionate about javascript and currently interested into animating svgs. Svgs are a vector image format for two-dimensional graphics with support for interactivity and animation with javascript or css.

I often make illustrations (svgs) in adobe illustrator where I transfer over from my free hand sketches/ideas. My curiosity helped me learn, and by pushing myself a little each time I was able to grow my abilities and knowledge. It’s about taking a step forward but making sure that step isn’t too big that you don’t reach your goal prematurely and so staying within the arena of creative flow.

Example of one of my first learning with svg animations

The Hows??

  • Question the base premises

  • Process

Question the base premises:

Repurposing/ Combining/Improving

How I approach writing code is how I would approach making artworks or anything else creative. Repurposing and combining what’s out there but also improving it and forming it into what you want or need.

For a painter, a gallery/museum can be a reference library for techniques/concepts. For a developer, Google can often be a reference library for techniques. Seeing if a problem has been solved before and reusing it, as we often fork projects on GitHub to alter or improve an existing piece of work. As developers, we use and contribute to open source projects. We get ideas from fellow developers on Twitter. We learn from other companies who have gone through challenges but still with the mindset of iterating and improving. Everything around us feeds into each other and that’s how everything moves forward in the world. It’s about looking beneath the surface and not looking at things at a surface level.

These code examples I made below all have the same outcome — it’s a simple click/toggle event on the front end. They are all using the same programming language Javascript. All having advantages and disadvantages depending on the need for it. These frameworks have been repurposed, combined and improved (and are constantly being looked at to improve further for developers in the future).

screenshot of using vue program

To construct a good program, you want to be able to see the consequences in your head, not just do line by line of the code, you have to be able to totally visualize it.

— Gordon L. Shaw.


Starting with a blank canvas:

Whether it’s actually a blank piece of paper or your IDE, they both require abstract thinking. Translating abstract designs, patterns, and visualising the whole picture.

Learn by doing/gradual Refinement:

Like programmers, artists also enjoy the ‘why’ and ‘how’ of the world. Artists can learn to ask a computer the same types of questions we’ve been asking ourselves.

Great pieces of artwork often take weeks, months or even years to develop. The same goes for a piece of software,where its ideation is visualised with a sketch on a whiteboard, iterating the idea and code, and then backtracking when we go down the wrong route, refactoring something and sometimes even starting again. It’s about not being afraid of failing,learning from those failures and continuing to grow. Creating great works of art and software take time and perseverance.

screenshot of juliets presentation and an example of her art

Many developers are artists

Sarah Drasner: @sarah_edo — is an international speaker, and wrote the book on Svg animations. She does fantastic animations with svgs/vue/react and also came from a fine arts background.

Zach Lieberman: @zachlieberman — studied drawing while studying fine arts. He is involved in opening the School of Poetic Computation in New York.
He now, instead of free hand drawing, has moved to coding where he investigates and pushes the concept of drawing/new modes of expression and play with programming.

Me: @julietbrown84 — I use my traditional art background and now combine it with programming. As I have mentioned, I’m interested in the combination of the old and new and think this convergence can open up new possibilities to view the world.
At the moment I am playing around with react based svgs and then will eventually see what I can do in 3D/virtual space (Three.js/ Aframe).

I’m interested in transferring the worlds I make on paper/canvas into an animated digital world. Breathing life (animation) into the things I’ve drawn is what really interests me and helps to add additional layers to my ideas.

I designed and then created the svg animation with Adobe Illustrator, then animated it with greensock javascript library and react.

Decompress conference

The material in this blog was originally written for a presentation at Decompress 2018 conference in Melbourne. Special thanks to SilverStripe for generously providing the travel sponsorship that helped me to attend and speak.

Are you interested in becoming a SilverStriper? We are always on the hunt for talented people! So please visit our careers page and look at the job openings available.

CTA Were hiring 2

About the author
Juliet Brown

Juliet is a developer at SilverStripe. Recently graduating from Enspiral Dev Academy and in 2014 Elam School of Fine Arts with Honours (University of Auckland), she has a passion for front end developing where she enjoys being curious and pushing the boundaries of technology and design.

Juliet loves the challenge and problem solving of web developing but appreciates the visual aesthetics of design. She finds the continuous advances in technology inspiring and seeing it create better ways to solving problems for the community.

While she is not coding Juliet also likes skiing, boxing, gallery viewing, philosophy, and is also an artist (painting, drawing, and interactive).

Post your comment


  • An inspiring post, thank you!

    Posted by Juan, 24/05/2018 12:32am (6 years ago)

RSS feed for comments on this page | RSS feed for all comments