UAL CCI: Introduction to Creative Computing 2025: 📥 & 📚: Lecture 10: State Machines and Libraries.
Back to slide index.

To start with today, I'd like to talk about a way of thinking about your programs that really helped me to scale from single page sketches up to large projects. I've found it helpful to think of my projects as state machines. We'll take a look at the definition in a moment, but the main thing I want you to take from the idea is that your program now can only exist in a several states, and transform between them.

How to add other libraries of JavaScript code to your p5.js projects, and some of the most interesting ones I've used in my work.

What is a software library?

One thing to realise is that p5.js is a library itself!

p5.js has many libraries, some core and some contributed. Let's take a look at them. First, let's look at p5.sound, a core library of p5.js. All of those examples are included on the online p5js editor too, just type sound to only show those examples when you use File > Examples. For reference, check out these music visualisation examples, which all use the p5.sound library.

Another library (a contributed one this time) I wanted to highlight one that is kind of state machine-like: p5.js Scene Manager. Another I love is p5.play, which is designed for the creation of games and other playthings.

Do you remember that falling logo I showed you in a previous lecture? Let's take a look at how it includes other libraries apart from p5.js - p5.gui and matter.js. Making GUI's for your sketches is a great idea because you can use that GUI to quickly tweak settings and the like - to explore the "possibility space" of your code. I love using physics simulations to animate with because I'm too lazy to do keyframe animation.

Any programmer will tell you that dealing with date and time and timezones is a nightmare - I've used moment.js several times in my projects, particuarly to generate nice filenames.

Let's finish with a quick tour through some other JavaScript libraries that might be useful.

• Paper.js - vector graphics library.
• Two.js - another vector graphics library.
• LiquidFun - fluid simulation library.
• Zdog - round, flat, designer-friendly pseudo-3D engine.
• Pts - linear algebra libary.
• three.js - 3D graphics library.
• leaflet.js - map and location library.
• hammer.js - touch gesture library.

Finally, two interesting quotes from two of my favourite artists and a final thought on practice.

Anni Albers said: "Being creative is not so much the desire to do something as the listening to that which wants to be done: the dictation of the materials." Don't forget to listen to your materials.

Bruce Nauman said "what makes the work interesting is if you choose the right questions." - what questions do you want to ask? BTW: newmedia-art.org is a great resource.

Some thoughts about practice.

What is Practice? When I thought about it, it helped me alot. I like it because the word has many meanings, like many words. Repeating something all the time and what I like to do with my time. What meanings does it have for you? Have you heard it at UAL alot? What is a practice? What is your practice? What is the question that moves you at the moment? My presentation about the future (or my practice) that I gave to Samsung Design Europe in 2021.

Thanks! Time for a short break!
Back to slide index.