Chase McCoy

Monday, 9/17, 4:05 AM

Making Computers Make Art

It seems as though everything I gravitate towards in life tends to be at an intersection of art and technology. I spend my days building tools for designers, and thinking about how we design things for people but with technology.

Perhaps the most straightforward example though is generative art, which seems to be gaining more and more interest in my corner of the internet. I think it’s because writing code and/or designing things is so often a means to an end for many of us. Our jobs expect creativity, but demand results.

I’ve found that exploring generative art has helped me maintain a creative outlet that exists purely in service of making something that delights me. Something like that is all too rare lately.

There have been quite a few excellent resources that have helped me jump into generative art that I would like to share both as a reference for myself, and as a way of lowering the barrier of entry for anyone else who wants to try their hand at creative coding.

Some History

Generative art as we know it came about in the 1960s and was directly linked to the rise of the computer industry. I love that for as long as computers have existed, there have been people who see their potential for art as well as science.

George Nees was one of the first to show off graphics made using computers, and worked on that he called “computer-scultpures” using tools like milling machines and plotters.

Generative art is distinguished from computer-generated art in that it is autonomous to some degree. A generative artist differs from a painter or sculptor in that they are not responsible for every decision that leads to the finished piece.

Instead, generative artists create systems that can make some of the decisions alone. The artists gives the direction, but allows the computer to steer the vehicle.

This leads to a certain serendipity in the finished product. Pieces can be different every time that you look at them, and in many cases will never output the exact same piece twice. The fleeting nature of the work is what appeals to many.

Perhaps the biggest pioneer of generative art is Vera Molnár, whose work in the space of computational art still holds up today, even though she was doing work with tools that were comparatively ancient to what we have at our disposal now. I strongly encourage you to browse through some of her pieces online.

In one of her most famous series, Structure de Quadrilateres, she takes a collection of rectangles and introduces randomness while somehow maintaining a natural rhythm:

quadrilate.jpg

If you would like to learn more about Vera Molnár and her works, I recommend reading this recent piece about her on Hyperallergic.

There are so many more amazing generative artists to learn about. For instance, Sonia Landy Sheridan founded a new department called Generative Systems in 1970 at the Art Institute of Chicago. She has a fantastic website where you can see some of her art and read more about the Generative Systems department.

Another piece I’d recommend is Jason Bailey’s post on Artnome titled Why Love Generative Art? It provides a brief history of generative art and the way that the practice has progressed since its inception.

I encourage you to take some time to appreciate and learn about the people who paved the way for generative art. It makes for an excellent opportunity to find some inspiration for your own work.

Practical Magic

Now that you know a bit of the history behind generative art, I’d suggest jumping in yourself by learning how to create something simple.

There are lots of technologies out there designed specifically for creative coding. Arguably the most famous of those are p5.js and Processing. I recommend starting with p5.js because it’s built on JavaScript — which a lot of folks already know — and it’s easy to get started using it right in the browser.

In fact, my favorite way to create generative art is in CodePen. You can easily add p5.js as a script in your pen, or you can use this template I created for quickly getting started with a new p5.js sketch.

No matter which tool you use, it shouldn’t be too hard to find resources for learning how to draw some basic shapes. One of my favorites is Daniel Shiffman’s video series on creative coding. Watching along and coding examples from a tutorial is a great way to learn. Daniel even has a video series that covers the foundations of JavaScript in the context of p5.js.

Once you’ve got the basics down, it’s important to start learning how to introduce autonomy into your pieces using loops and noise.

Tim Holman created one of my favorite resources out there for taking your art to the next level. Generative Artistry is a series of lessons describing fundamental concepts or recreating pieces that teach invaluable skills. I learned the basics of circle packing from the site, and that allowed me to make stuff like this:

circle-packed

I especially love that Tim breaks down how to recreate famous pieces from some of the people I mentioned earlier, like Vera Molnár and Georg Nees.

It’s also important to cultivate an environment of inspiration around generative art. I find that because the possibilities of autonomous art are so limitless, it helps me to take a piece that I like and use it as a starting point to riff on.

Daniel Eden’s gallery is excellent not only for the pieces themselves, but because Dan accompanies each with a description of the basic logic used to achieve the result. Recreating some of his pieces helped me learn techniques that I have made use of many times since. Dan also wrote a great piece on how he got started with generative design.

Another favorite of mine is Heydon Pickering’s mutable.gallery, which features sketches that can be re-generated to produce unending, unique permutations. I love how Heydon makes it so easy to share the piece that you generate, making each one feel more special somehow.

Finally, I suggest you follow Matt DesLauriers on Twitter and Instagram. Matt’s work is amazing, and he represents the community well by sharing his processes and learnings as he grows.


I love making generative art because its edges are blurry, and I can step off of them without worrying about technique or execution. Happy accidents are easy to make and often result in some of my favorite pieces.

Ultimately, generative art is about rolling with the punches and letting the medium itself influence the work. I think flexing those types of muscles has made me a better designer overall. Maybe it can do the same for you.

welcome to the hood @4lwcoffee
food/tablecloth tour of portland continues at nong’s
finally at pok pok
moods

shades

almost autumn

perfect places

triplicate

myxomatosis

step through

can you even imagine

sundaze

309, it was real ✌️

NetNewsWire, one of my favorite apps ever, has been returned home and is now back in the hands of Brent Simmons once again. Brent is continuing development in the open on Github, and the app will be free to use. Such great news for folks who still use RSS.

Panic just announced that the next game they’re publishing is House House’s Untitled Goose Game. The game looks great — quirky, fun, a perfect fit for Panic — but the way these two companies came together is even better.

Very excited to be attending XOXO in Portland this September. If you’re going to be there, hit me up and let’s hang out. Find me @chase in the XOXO attendees Slack.

Mikhail Gündogdu attended a ton of design system conferences and collected all of the knowledge into a great piece.

I especially like what Diana Mounter has to say about feeling imposter syndrome with your design system compared to other companies’ systems:

That’s why Diana says you shouldn’t worry about comparing your design system to any other organization’s system, because thats not what proves its success. Instead, Diana says, push your design system out and analyze utilization to measure its success. Chaos will be a natural part of something so new to the practice as design systems, so focus on what matters and take advantage of the chaos. Are people using the design system in their workflow, and contributing back to it to make it better?

I can attest that comparing your design system to others out there is a fool’s errand. Companies are different, and so should be their systems.

Some prompted thoughts on design

Invision is writing a piece on the design team at Sprout Social, and they asked us to answer some questions about design and how we work at Sprout. I wanted to post my answers here as well since most of them probably won’t make it into the finished piece.


What’s your best advice for designers who are the only designer at the org, or even designers who can’t seem to get buy-in from executives?

The best way to get buy in is to give others no reason not to buy in. Do the due diligence of research, testing, and building before you go to bat for your ideas. Talk to people one-on-one and try to understand their hesitations to being on board with your idea. Once you know the problem, you can chase solutions.

Do other teams (like marketing, engineering, etc.) there use design thinking or any design methodologies/skills?

Every person at Sprout that touches any aspect of the product is a designer. Engineers think about how to design scalable systems so that they can realize new features. The education team designs resources and methods to teach users how to best take advantage of the product.

Our responsibility as designers is to realize that everyone here at the org designs in some way, and sometimes they need help in understanding the best way to design effectively to solve whatever problem they are tasked with. We can’t hold design as a practice hostage, as if it’s only for the select few. We need to give away our tools and knowledge so that everyone can get better.

How can we all give better design feedback?

When giving feedback, try as hard as you can not to be prescriptive about the solution. If you’re thinking in terms of the how, you might be missing important details in the why of the problem.

I like to try to create a common foundation for feedback by framing it in a standard way:

The objectives for a product are to…

1. Reach its goals…
2. For the given audiences (personas)…
3. By creating a design with the right behaviors and characteristics (principles)…
4. To produce the desired experience when used in the applicable contexts (scenarios)

Imagine you’re having a heart-to-heart with a young designer. Give her 5-10 pieces of your very best advice.

  1. Start your process with words. Design is about communication, and writing is the purest form of that.
  2. A picture says a thousand words. If you can create a great solution with writing, you’re on track to producing an even better visual design.
  3. Just as writers edit their words, go back and edit your designs. Remove unnecessary flourishes and distill the design into the purest form of itself.
  4. Understand that when you’re designing software, you can’t design an experience for a user because you can’t control the experience. A user’s experience is personal and specific to them and their environment. All you can do as a designer is architect solutions that will not disrupt a user’s experience.
  5. Show your designs to people who don’t know anything about the problem you are trying to solve. Make it clear for them.
  6. Don’t listen to me, I don’t know what I’m doing.

Notion has launched a new video series called Tools & Craft, and the first episode is with Andy Hertzfeld. I dig the short format, and I really enjoyed hearing about Andy’s work after Apple. Looking forward to the next episode.

No Reservations

I don’t have the words to describe what we’ve lost in Anthony Bourdain. Instead, I thought I would share some things that I love about him. The first that comes to mind is his first visit to a Waffle House:

He had some beautiful words on Chicago, the city I love.

Eater also has a great write-up on Bourdain’s thoughts on Chicago.

And, of course, there’s the infamous New Yorker piece that led to Kitchen Confidential.

Anthony had a way of writing that was simultaneously eloquent and effective while avoiding snobbery and pretense.

He used his influence and stature for good, and ultimately that’s what I will remember the most about him. R.I.P.

Emoji and Markdown make for a pretty good storyboarding tool.

This weekend I shipped:

📷 Full width photoset layouts https://chasem.co/exploring-seattle

📚 Redesigned page for my favorite books https://chasem.co/books

🎧 Added an endpoint to my API for getting a list of recently played tracks https://chs-stats.now.sh/recentTracks

Exploring Seattle

I am lucky enough to work at a company that has a Seattle office, and that I have a good reason to visit regularly. A few coworkers and I went out there the week of May 6, and this happened to be my first visit to the Pacific Northwest.

We were greeted with beautiful weather during our trip, with temperatures in the high 60s/low 70s. Check out these mountains I captured during our descent into SeaTac:

The weather was so nice that we decided to join a coworker in a nearby park for a few beers and some frisbee fun. Spring had recently sprung, and everything was so green. It was a nice departure from Chicago, which was just on the edge of spring.

The Sprout office in Seattle is right on the water, a block or two north of Pike’s Place. Our hotel was in such a location that we had to walk through the market every morning on the way into the office. The market early in the morning was full of great smells and vibrant colors.

Our hotel had an amazing rooftop bar that offered some of the best views of the whole trip.

A major highlight of the trip was getting to spend some time with the devices design team at Amazon HQ. We got to talk shop with some talented folks, and also tour the beautiful Amazon spheres and offices. Look at those views!

Seattle is a wonderful city, and I can’t wait to return. Hopefully next time I can get out of the city a bit to do some hiking.