UAL CCI: Introduction to Creative Computing 2025: ⚖️ & 🌊: Lecture 7: Scaling and Waves.
Back to slide index.

By the end of this lecture, we'll have learnt about:

• How to use lerp() and map() functions to scale variables between different values
• How to use Calculus and Trigonometry or Find Patterns between Equations and how to understand curves in your creative computing
• What the Fast Fourier Transform is

Before we get started, did anyone see the floating robots at the Tate Modern? The installation was by Anicka Yi. The movement of the robots uses exactly the things we'll be learning about this morning. Technical collaborators on the project include: Airstage, Pozyx and KitMapper.

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:

By 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.

Let's take a look at the p5.js lerp colour example to see how the random() function can be used for infinite graphical output.

• What is a circle? It is "the set of all points in a (flat)plane that are at a given distance from a given point".
• A Gentle Introduction To Learning Calculus from Better Explained. Calculus is the formal name for thinking about graphs - the area under a curve (or the integral) or how steep a curve is (the differential).
• Sine waves are curves that go up and down in a regular way forever. Intuitive Understanding of Sine Waves.
• How to work out the size of angles in a triangle using the lengths of a triangle or other angles aka Sine and cosine and tangent functions aka Trigonometry again, from Better Explained.
• Stop press! A web version of a classic book on "Calculus Made Easy" - I knew it was good when I read the prologue.

Let's make some animations using colour and sine and cosine:

In each of those last two examples, what if we used interactive variables (like mouse position) instead of just adding on to (or incrementing or the ++ symbol) the angle variable every frame? 🤯

Bringing together drawing, transformations and push and pop to make a lovely follow interaction.

Let's take a look at this beautiful animated example that uses animation, interaction and a loop within a loop. What happens if you play with the background command? What is it doing in this case?

Adding several waves together to make more complicated wave. This leads me to the final part of today's lecture something called the Fast Fourier Transform or FFT.

The Fast Fourier Transform (FFT).

• The Fast Fourier transform is a way of splitting up any waveform into a series of simpler waves.
• This can be very useful to find out how much bass, mid and treble any sound has and is used in music visualisers and in other places.
• See this great interactive website for an explanation and further links.
• See this interactive Better Explained article for a further, further explanation.

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