UAL CCI: Introduction to Creative Computing 2025: ⏰ & 🗺: Lecture 8: Time and Algorithms.
Back to slide index.
The two main things I want you keep in mind this afternoon is that you can use algorithms to make decisions in your programs and you can use time in your code to trigger things and to animate smoothly.
By the end of this lecture, we'll have learnt about:
How to preload images and other content into your p5.js sketches and how to have code run when a user clicks their mouse or presses a certain key.
Let's continue the Program Flow tutorial on the p5.js website, starting with the noLoop(), loop() and redraw() section and going through to the end.
Let's take a look at all the events that p5.js can use.
Let's take a look at how we can plot mouse interactions over time. Why is one graph all straight lines and the other curvier?
Let's look at how we can use mouse events to make click and drag interactions.
Let's take a look at how we can use arrays to store mouse interaction information over time. Instead of using two arrays for mouseX and mouseY positions, how could we have stored this information differently? Have you ever heard of a vector? It's a really useful way of bringing two (or three) position values together into one object.
How to find out the year, month, day, hour, minute or even second within a p5.js sketch.
p5.js has lots of functions for working with the time and the date: year, month, day, hour, minute and second.
Let's see how p5.js clock example all those time functions together.
Let's take a look at the reference for the pmouseX system variable and how it can be used with it's y equivalent in this drawing patterns example.
But what if you want to do more advanced animation?
How to use frame count, the time between frames or the number of milliseconds since your sketch started to time animation and other things.
Let's take a look at the p5.js reference page for the system variable frameCount, which can be used to make frame based animation. Why might frame based animation be a bad idea?
Let's take a look at the p5.js reference page for the system variable deltaTime which can be used to make frame rate independent animation. It's also possible to get the number of milliseconds since the sketch started running.
Finally, let's look at how to build asyncronous code - code that can be used to load images and other data into your p5.js in after the sketch has started to run.
We've already seen the use of setInterval() in the p5.js program flow tutorial. Let's take a look at how The Modern JavaScript tutorial describes it and a similar function - setTimeOut().
I used this functionality to change the physics simulation that I used to make an identity for a CSM research group.
Let's see what The Modern JavaScript tutorial says about asynchronicity. This is the most advanced code we've yet encountered - and it's gone a bit chicken and egg again. Take a look at The Coding Train playlist about asynchronicity to learn more (this is part of a larger playlist about ES6, which an upgraded version of JavaScript that launched a few years ago)
What is an Algorithm? I like to think of them as a list of instructions, with some logic inside to decide which instruction to do next. Much like a program in fact! Let's take a look at an algorithm to find the biggest number in a list of numbers, what's another name for a list?
An algorithm to work out if something is off the screen. Let's code this together from scratch. I find working on paper (or whiteboards) really helpful for this.
An algorithm to work out if a mouse is over a rectangle or a circle. Let's code this together from scratch. What are the conditions that must be true if a mouse is over a rectangle? And a circle?
An algorithm to sort things. There are many sorting algorithms, one of my favourites is Quicksort. Let's take a look at some of the animations on that page.
Bonus! A video of different sorting algorithms:
Thanks! Time for a short break!
Back to slide index.