Generative Art

Generative art is art which is created by programming. Code goes in, Art comes out!1 It starts off with points, lines, curves and geometric shapes. It involves repetition and patterning. And randomness is incorporated to add the unexpected.

This challenge gives you the opportunity to learn p5.js — a JavaScript library developed specifically for creative coding, with a focus on making coding accessible and inclusive for artists, designers and beginners.

Your task is to create one or more images, either static or animated, that are engaging and fun. To get an initial idea of what’s possible, look at the p5.js 2020 Showcase. Save the results of your work to a digital file that can be viewed independently of p5.js.

We would like you to create something playful and visually interesting. Make sure you include randomness into the image.


Getting to know p5.js

If you are new to p5.js (or JavaScript), we think the best place to start is this Coding Train course by Dan Schiffman: Code! Programming with p5.js. Although all his videos are available via YouTube, it’s much easier to follow the course sequence by going to the webpage linked above.

If you don’t want to do Schiffman’s course, try the p5.js Get Started page. As with Schiffman’s course, this uses the p5.js online editor, which makes it easy to get coding right away without any additional setup.

An alternative video course for p5.js is Introduction to Programming for the Visual Arts with p5.js. Although this course is free, you have to enrol for it.

And yet a further resource is this set of tutorials (click through to access her YouTube videos) by Zhang Weidi: Computer Programming for Arts. Her video on using a digital photo as the basis for generative art is particularly cool.

Introductions to Generative Art

  1. Kudos to Tyler Hobbs for the great title of his YouTube talk: Code goes in, Art comes out