Designing with code and computation

This week, O’Reilly’s Mary Treseler chats with designer, creative coder, and artist Scott Murray about coding and computation in design, his book Interactive Data Visualization for the Web and his new book coming out soon Creative Coding and Data Visualization with p5.js.

Here are some highlights from their chat:

Design, code, and computation

I use to call myself a code artist but I really struggled with that title, and I think other people in my position feel similarly—those who are doing data visualization, or generative art, computationally based art or design work. I was kind of uncomfortable with the word art. I don’t show work in galleries, I don’t participate in the traditional art economy, so maybe I’m not an artist but more of a designer. I get excited about design as a problem-solving process. I’m totally a process geek; I get excited about design systems and consistency, so thinking about rules, and values, and data flowing through those rules and how they get expressed. I think, for me, working with code and computation is really kind of a natural fit.

Creative coding approach to programming

I differentiate between what I call coding or creative coding and programming. We’re calling this course “Programming for Designers,” but it is not going to be a computer science-y approach to programming. This is going to be a creative coding approach to programming, which is to say that the philosophy I’m bringing to this is, ‘You figure out how to communicate to the computer to get it to do what you want’—that’s pretty different from, ‘You figure out the most efficient way of solving a particular problem.’

P5.js

We’re going to use this new tool called P5 or P5.js. P5 is this open source, free programming language. You can download it from processing.org; it’s based on Java. … The reason why is it’s a tool intended for beginners, and intended for artists and designers. A lot of the language it uses is language that designers are already familiar with. If you’re trying to draw a shape you set the ‘fill,’ and you set the ‘stroke,’ and you set the ‘stroke weight’; you can have red, green, blue values; hue saturation and brightness values, you can have alpha transparency values. It’s language that you’re already familiar with in terms of thinking of visual properties.

Design and visualization

Visualization is a natural fit for designers because it’s leveraging all the visual communication skills, all the problem solving skills that we’ve already practiced. It’s just in a more specific domain.

The STEAM evolution

My sense [of the state of design education] within my own little niche is that things are improving, and they’re improving in an exciting way. That’s in the sense that we have this whole STEM discussion: sciences, technology, engineering, math. That’s really valuable, but that’s evolved into a STEAM discussion, where we inset A for art in the middle. The art also represents design in this case, so creative coding fits into that. Getting students not necessarily even into computer science, but getting exposure to these coding skills earlier—that’s really exciting.