CCI Diploma 2021/2022: Unit 1: Lecture 6: Timing.
Back to slide index.

Hi!

I'm going to start every lecture with a promise and an artist to reference.

I promise that by the end of this lecture you'll be able to understand how you can use timing to make different things happen at different times in your code.

The artist of the day is Tehching Hsieh.

His most famous work is "One Year Performance 1980-1981" - he spent 12 months punching a time clock every hour, on the hour, 24 hours a day. Read more here.

I think alot of Tehching's work is about time passing, which is why he's perfect for today's lecture - which is on exactly those things!

The main thing I want you keep in mind today is that you can use time based code to have logic run at certain times or to animate content smoothly or even to only run when certain conditions have been met.

By the end of this lecture, you'll know more about:

• How to preload images and other content into your p5.js sketches
• How to have code run when a user clicks their mouse or presses a certain key
• How to use lerp() and map() functions to scale variables between different values
• How to find out the year, month, day, hour, minute or even second within a p5.js sketch
• How to use frame count, the time between frames or the number of milliseconds since your sketch started to time animation and other things
• 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

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 use lerp() and map() functions to scale variables between different values.

Let's take a look at the p5.js reference page for the lerp() function and the map() function.

Let's take a look at the p5.js map example to see how to use the map() function to take a mouse position and turn it into the radius and colour of a circle. This is a very powerful technique - taking one input value and scaling it to lots of different types of information - radius, colour or anything we like. One way to think of it is to think of taking a range of values and scaling them to a value between 0 and 1 - then you can take that value and scale to any other value. If you can get your values to 0-1 you can take that signal and apply it anywhere, to anything.

This idea of 0-1 values for anything is beautifully illustrated in the video below:

Unendurable line｜ガマンぎりぎりライン from daihei shibata.

Let's take a look at p5.js easing example to see how to create animation that follows the user's mouse. We can also use the lerp() function to do this - this is known as linear interpolation, or how to blend between known values.

How to find out the year, month, day, hour, minute or even second within a p5.js sketch.

p5.js has lots of useful functions for working out the: year, month, day, hour, minute and finally 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) - don't worry if it's a bit confusing, we need to keep swimming for now, and next lecture I'll let you all about Object Orientated programming.

Thanks!
Back to slide index.